案例:
1.产品模块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #f5f5f5;
}
.box {
width: 298px;
height: 415px;
background-color: #fff;
margin: 100px auto;
}
.box img {
width: 100%;
}
a {
color: #333;
text-decoration: none;
}
.review {
height: 70px;
font-size: 14px;
padding: 0 28px;
margin-top: 30px;
}
.appraise {
font-size: 12px;
color: #b0b0b0;
margin-top: 20px;
padding: 0 28px;
}
.m {
font-size: 14px;
margin-top: 15px;
padding: 0 28px;
}
.m h4 {
display: inline-block;
font-weight: 400;
}
.m span {
color:#ff6700;
}
.m em {
font-style: normal;
color: #ebe4e0;
margin: 0 16px 0 15px;
}
</style>
</head>
<body>
<div class="box">
<img src="img.jpg" alt="">
<p class="review">快递牛,整体不错蓝牙可以说秒连。红米给力</p>
<div class="appraise">来自于 117384232 的评价</div>
<div class="m">
<h4><a href="#"> AirDots真无线蓝... </a></h4>
<em>|</em>
<span>99.9元</span></div>
</div>
</body>
</html>
2.快报模块
注:
新知识点: 去掉 li 前面的 项目符号(小圆点)
语法:
list-style: none;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a{
color: #666;
font-size: 12px;
text-decoration: none;
}
.box {
width: 248px;
height: 163px;
border: 1px solid #ccc;
margin: 100px auto;
}
.box h3 {
height: 32px;
border-bottom: 1px dotted #ccc;
font-size: 14px;
font-weight: 400;
line-height: 32px;
padding-left: 15px;
}
.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="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">34</a></li>
<li><a href="#">44</a></li>
</ul>
</div>
</body>
</html>
圆角边框(border-radius)
参数值可以为
数值
或
百分比
的形式
如果是
正方形
,想要设置为一个圆,把数值修改为
高度或者宽度的一半
即可,或者直接写为
50%
该属性是一个
简写属性
,可以跟四个值,分别代表
左上角、右上角、右下角、左下角
,跟两个值,代表对角线为相同的值。
分开写:
border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和
border-bottom-left-radius
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.yuanxing {
width:200px;
height: 200px;
background-color: pink;
border-radius: 50%;
}
.juxing {
width: 300px;
height: 100px;
background-color: pink;
border-radius: 50px;
}
.radius {
width:200px;
height: 200px;
background-color: pink;
/* border-radius: 10px 20px 30px 40px;*/
border-radius: 10px 20px;/*左上角和右下角,右上角和左下角。*/
}
</style>
</head>
<body>
1.圆形的做法:
<div class="yuanxing"></div>
2.圆角矩形的做法:
<div class="juxing"></div>
3.可以设置不同的圆角:
<div class="radius"></div>
</body>
</html>