一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第5天，点击查看活动详情。
快报模块布局案例
效果
总体分析
- 首先要设置一个盒子来存放内容
- “品有购快报”应采用标题标签，并在下方添加一个虚线边框
- 下方优惠信息采用无序列表，且里面放置超链接
细节补充
- 盒子属性：高度163px，宽度248px，边框宽度1px，实线，颜色#ccc
- “品有购快报”标题标签属性：标题采用h3，高度32px，下边框宽度1px，虚线，颜色#ccc，字体大小14px，字体粗细400，左内边距15px，令行高等于高度使得文字垂直居中
- 去掉无序列表前面的黑点
- 设置超链接属性：字体大小12px，字体颜色#666，去掉超链接下划线
- 设置链接伪类选择器，使得鼠标经过时会出现链接的下划线
- 设置列表属性：高度23px，行高23px，左内边距20px
代码实现
<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>品优购头部快报</title>
<style>
* {
margin: 0;
padding: 0;
}
.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;
}
li{
list-style: none;
}
.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="#">【特惠】母亲节，健康好礼低至一折!</a></li>
<li><a href="#">【特惠】爆款耳机5折秒!</a></li>
<li><a href="#">【特惠】9.9元洗100张照片!</a></li>
<li><a href="#">【特惠】长虹智能空调立省1000!</a></li>
</ul>
</div>
</body>
</html>
圆角边框
- border-radius：length属性用于设置元素的外边框元素
-
length参数值可以为数值或百分比的形式 -
如果是正方形，想要设置为一个圆，把数据修改为高度的一半或者宽度的一半即可，或者直接写50% -
如果是个矩形，设置为高度的一般，就可以设置成圆角矩形 -
该属性其实是一个简写属性，可以跟四个值，分别表示左上角，右上角，右下角，左下角；若跟两个数值，则是对角线的关系 -
分开写：borer-top-left-radius，borer-top-right-radius，borer-bottom-right-radius，borer-bottom-left-radius
代码示例
圆形
width: 200px;
height: 200px;
background-color: pink;
/* border-radius: 100px; */
border-radius: 50%;
}
效果
圆角矩形
width: 300px;
height: 100px;
background-color: pink;
/* 圆角矩形设置为高度的一半 */
border-radius: 50px;
}
