一、基础班学习路线
三、CSS3基础
1.综合案例-快报模块
- 以上为使用了盒子的底边框后又使用margin的悲剧效果(右边那个才是整个盒子),所以要用padding,又因为h3没有写宽度属性,所以给它一个左右的padding不会撑大
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 248px;
height: 163px;
border: 1px solid #ccc;
margin: 100px auto;
}
li {
list-style: none;
}
.box h3 {
height: 32px;
border-bottom: 1px dotted #ccc;
font-size: 14px;
font-weight: 400;
line-height: 32px;
padding-left: 15px;
}
.box ul li a {
font-size: 12px;
color: #666;
text-decoration: none;
}
.box ul li a:hover {
text-decoration: underline;
}
.box ul li {
height: 23px;
line-height: 23px;
padding-left: 20px;
}
.box ul {
margin-top: 7px;
}
</style>
</head>
<body>
<div class="box">
<h3>品优购快报</h3>
<ul>
<li><a href="#">【特惠】爆款耳机5折秒!</a></li>
<li><a href="#">【特惠】爆款耳机5折秒!</a></li>
<li><a href="#">【特惠】爆款耳机5折秒!</a></li>
<li><a href="#">【特惠】爆款耳机5折秒!</a></li>
<li><a href="#">【特惠】爆款耳机5折秒!</a></li>
</ul>
</div>
</body>
</html>
2.圆角边框
3.盒子阴影
4.文字阴影
5.CSS浮动
传统网页布局的三种方式
- 标准流 :
- 以上两张图的让盒子里面内容一左一右和滚动网页时搜索框固定都不能用标准流做出
为什么需要浮动
什么是浮动
浮动特性-脱标
浮动特性-浮动元素一行显示
浮动特性-浮动元素具有行内块特性
浮动元素经常搭配标准流的父元素
浮动布局练习
常见的网页布局
浮动的两个注意点
为什么清除浮动
清除浮动本质以及额外标签法