一.块级标签:
- 如果该标签需要独占一行,则称其为块级标签
- h1 p ul li ol dl
二.内联标签:
- 如果该标签不会独占一行,则称其为内联标签
- img a span
块极标签中可以放入内联标签,反之不成立
我们可以通过css样式进行调整,使得内联标签具有块级标签的效果,也可以使得块级标签具有内联标签的效果。
h1{
/**
* 设置将其转化为内联标签
*/
display: inline;
}
span{
/**
* 将内联转为块级
*/
display: block;
}
三.盒子模型:
- 针对的是块级元素。所有的块级元素都具备盒子模型的特点。
- div标签 常用的布局标签,用来存放别的标签或者数据
1.边框:
div{
/**
* 方式一
*/
border:1px solid red;
/**
* 方式二
*/
/**
* 边框的颜色
*/
border-color: #FF0000;
/**
* 边框的风格
solid 实线
dotted 点线
dashed 虚线
*/
border-style:dashed;
/**
* 边框的粗细
*/
border-width: 5px;
}
2.边距:
内边距 padding 上下 左右
外边距 margin 上下 左右
3.margin妙用:
当盒子模型设置了宽度之后,可以使用
margin: 0px auto;来将其居中。
4.背景颜色和图片:
/**
* 背景图片
*/
background-image: url(img/搜狗截图20200715143753.png);
/**
* repeat-x 水平方向上重复
repeat-y 垂直方向上重复
no-repeat 不重复
*/
background-repeat: no-repeat;
/**
* 100px 代表离最左边的距离
20px 代表离最上边的距离
*/
background-position: 100px 20px;
5.无序列表去掉前标识:
ul{
/**
* 去掉无序列表前面的黑色圆圈
*/
list-style-type: none;
}
6.超链接样式:
/**
* 超链接被访问过之后的样式
*/
a:visited{
color:yellow;
}
a{
/**
* 去掉下划线
*/
text-decoration: none;
color: #A9A9A9;
font-size: 12px;
}
/**
* 鼠标悬停在超链接上出现的样式
*/
a:hover{
color:red;
text-decoration: underline;
}
四.案例:
<style type="text/css">
#demo{
/**
* 设置宽度和高度
*/
width: 300px;
height: 400px;
}
#demo1{
/**
* 设置背景颜色
*/
background-color: darkgreen;
height: 40px;
/**
* 设置字体颜色
*/
color:white;
/**
* 首行缩进
*/
text-indent: 2em;
padding-top: 8px;
/**
* 给盒子模型加背景图片
*/
background-image: url(img/bang.gif);
/**
* 设置背景图片不重复
*/
background-repeat: no-repeat;
/**
* 设置背景图片的位置
*/
background-position: 120px 8px;
}
/**
* 后代选择器
*/
#demo ul{
/**
* 添加背景颜色
*/
background-color: lightgray;
/**
* 去掉无序列表前面的黑圈圈
*/
list-style-type: none;
border: 1px solid #006400;
/**
* 去掉上外边距
*/
margin-top:0px;
}
a{
/**
* 去掉下划线
*/
text-decoration: none;
font-size: 14px;
color: blue;
}
/**
* 设置li的行高
*/
li{
line-height: 30px;
border: 1px solid red;
text-indent: 1.5em;
}
#li1{
background-image: url(img/book_no01.gif);
background-repeat: no-repeat;
background-position: 2px 5px;
}
#li2{
background-image: url(img/book_no02.gif);
background-repeat: no-repeat;
background-position: 2px 5px;
}
#li3{
background-image: url(img/book_no03.gif);
background-repeat: no-repeat;
background-position: 2px 5px;
}
#li4{
background-image: url(img/book_no04.gif);
background-repeat: no-repeat;
background-position: 2px 9px;
}
#li5{
background-image: url(img/book_no05.gif);
background-repeat: no-repeat;
background-position: 2px 9px;
}
#li6{
background-image: url(img/book_no06.gif);
background-repeat: no-repeat;
background-position: 2px 9px;
}
#li7{
background-image: url(img/book_no07.gif);
background-repeat: no-repeat;
background-position: 2px 9px;
}
#li8{
background-image: url(img/book_no08.gif);
background-repeat: no-repeat;
background-position: 2px 9px;
}
#li9{
background-image: url(img/book_no09.gif);
background-repeat: no-repeat;
background-position: 2px 9px;
}
#li10{
background-image: url(img/book_no10.gif);
background-repeat: no-repeat;
background-position: 2px 9px;
}
</style>
</head>
<body>
<div id="demo">
<div id="demo1">
畅销书排行
</div>
<ul>
<li id="li1"><a href="#">不抱怨的世界(畅...</a></li>
<li id="li2"><a href="#">遇见未知的自己...</a></li>
<li id="li3"><a href="#">不抱怨的世界(畅...</a></li>
<li id="li4"><a href="#">遇见未知的自己...</a></li>
<li id="li5"><a href="#">不抱怨的世界(畅...</a></li>
<li id="li6"><a href="#">遇见未知的自己...</a></li>
<li id="li7"><a href="#">不抱怨的世界(畅...</a></li>
<li id="li8"><a href="#">遇见未知的自己...</a></li>
<li id="li9"><a href="#">不抱怨的世界(畅...</a></li>
<li id="li10"><a href="#">遇见未知的自己...</a></li>
</ul>
</div>
</body>