<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>咸鱼联盟</title>
<style> /* css层叠样式表 */
*{
margin: 0;
padding: 0;
}
.box-one{
width: 200px;
height: 100px;
background-color: green;
}
.box-two{
width: 200px;
height: 100px;
background-color: pink;
cursor: url("img/2.gif"),pointer;
}
a{/* 可以通过display:block将行内元素转换为块级元素 */
/*display: block;*/
/*width: 200px;*/
/*height: 100px;*/
background-color: red;
font-size: 16px;
}
body{
font-size: 0;
}
.box-three{ /* 设置鼠标样式cursor */
width: 200px;
height: 200px;
background-color: blue;
cursor: url("./img/2.gif"),pointer;
}
</style>
</head>
<body>
<div class="box-one">咸鱼联盟</div>
<div class="box-two">咸鱼联盟</div>
<a href="https://www.baidu.com">百度一下</a>
<a href="https://www.baidu.com">百度一下</a>
<div class="box-three"></div>
<!--
标签和元素的关系
<div class="box-one">咸鱼联盟</div>
元素 = 标签+文字内容
标签的分类
怎么判断元素是块级/行内/行内块 ===>选中标签开发者工具中computed模块的display属性决定
块级元素(display=block) div p ul li h1 h2 h3 h4 h5 h6 ... hr
行内元素(display=inline) a image span em i strong b
行内块元素(display=inline-block) input
块级元素 独自占据一行(默认宽度100%和父级宽度一样);width/height/margin/padding都有效;margin:auto支持
行内元素 不独自占据一行;width/height无效;上下margin无效;上下padding只对自身有效;margin:auto不支持
只对自身有效的意思是不管上下的元素,padding会撑大盒子但是不会占新的空白地,而是会直接覆盖上下两边的盒子
行内块元素 不独自占据一行;width/height/margin/padding都有效;margin:auto不支持
在css中可以通过添加display来改变元素
block inline inline-block none(隐藏)
a标签如果没有输入内容:存在但是不显示
none是不存在
只有行内与行内之间或者行内与文字之间或者文字与文字之间的空格/换行才能显示出来
两个行内元素之间有空格的原因:第一个a标签通过回车后才有第二个a标签
解决方案1:写在一行,但是后期可读性不高
解决方案2:注释掉两个标签中间所有的空格
解决方案3:css中添加
body{
font-size: 0;
}
cursor属性:设置鼠标样式
cursor:point(小手掌)move(十字架移动)wait(正在加载)help(问号)
cursor: url("img/2.gif"),pointer;(自定义鼠标形状)
-->
</body>
</html>
Python3Turtle