一.组成
1.作用
布局网页，摆放盒子内容
2.组成部分
3.边框线
4.内边距
padding 具有复合属性。
5.尺寸计算
6.外边距
！！！外边距不会撑大盒子尺寸
同4的内边距相同用法
版心居中效果：margin: 0 auto（盒子必须要有宽度！！！）
7.清除默认样式
方法：
*{
margin: 0;
padding: 0;
}
其中关于li标签的样式需要添加
li{
list-style:none;
}
来清除小圆点
8.元素溢出
9.圆角
属性值是圆的半径！！！
此标签也有复合属性，可以设置为：
border-radius：10px,20px,40px,40px;
四值：左上，右上，右下，左下
（如有缺值，则缺值与对角值相同，若一值，则四角一样。）
例如：border-radius: 10px,60px;(分别为左上，右上，右下同左上，左下同右上)
10.阴影
模糊半径即调节模糊柔和度。
扩散半径调节阴影大小。
二.案例
1.产品卡片
1.1效果
1.2代码
！！!CSS书写顺序：盒子模型-->文字样式-->圆角，阴影等修饰
<title>产品卡片</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: #f1f1f1;
}
.box{
margin: 60px auto;
padding: 40px;
width: 270px;
height: 253px;
background-color: white;
text-align: center;
border-radius: 20px;
}
.box h4{
font-size: 18px;
color: #333;
font-weight: 400;
margin-top: 20px;
margin-bottom: 12px;
}
.box p{
font-size: 12px;
flood-color: #555;
}
</style>
</head>
<body>
<div class="box">
<img src="./DY.png" alt="">
<h4>抖音直播SDK</h4>
<p>包含抖音直播看播功能</p>
</div>
</body>
2.新闻列表
2.1效果
2.2代码
<title>新闻列表</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
li{
list-style: none; /*去除小黑点样式*/
}
a{
text-decoration: none;
}
.new{
margin: 100px auto;
width: 360px;
height: 183px;
background-color: white;
}
.new .hd{
/* 宽度默认父级 */
height: 34px;
background-color:#eee;
border: 1px solid #dbdee1;
border-left:0;
}
.new .hd a{
margin-top: -1px;
display: block;
width: 48px;
height: 34px;
background-color: white;
border-top: 3px solid #ff8400;
border-right: 1px solid #dbdee1;
text-align: center;
line-height: 34px;
color: #333;
font-size: 14px;
}
.new .point{
padding: 5px;
}
.new .point li{
padding-left: 15px;
background-image: url(./点.png);
background-repeat: no-repeat;
background-position: 0 center;
}
.new .point li a{
padding-left: 20px;
background: url(./1.png) no-repeat 0 center;
font-size: 12px;
color: #666;
line-height: 24px;
}
.new .point li a:hover{
color: #ff8400;
}
</style>
</head>
<body>
<div class="new">
<div class="hd"><a href="#">新闻</a></div>
<div class="point">
<ul>
<li><a href="#">新闻1</a></li>
<li><a href="#">新闻2</a></li>
<li><a href="#">新闻3</a></li>
<li><a href="#">新闻4</a></li>
<li><a href="#">新闻5</a></li>
<li><a href="#">新闻6</a></li>
</ul>
</div>
</div>
</body>
</html>
扫一扫
4205
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
