新浪导航栏
巧妙的运用padding内边距可以撑开盒子
因为每一个导航栏里面的数字不一样多,用padding设置左右内边距都为一个值
相关取值:
- 上边框3像素,颜色为#FF8500
- 下边框1像素,颜色为#edeef0
- 盒子高度为41像素,背景颜色为#fcfcfc
- 文字颜色为#4c4c4c
下面是参照
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.nav {
height: 41px;
/* 外边距顶部 */
border-top: 3px solid #ff8500;
/* 外边距底部 */
border-bottom: 1px solid #edeef0;
/* div盒子阴影 */
background-color: #fcfcfc;
/* 想要文字在盒子中居中,文字行高等于行高 */
line-height: 41px;
}
.nav a {
/* a属于行内元素 此时必须要转换 行内块元素 */
display: inline-block;
height: 41px;
/* 内边距上下边距为0,左右边距为20 */
padding: 0 20px;
font-size: 12px;
color: #4c4c4c;
text-decoration: none;
}
.nav a:hover{
/* 鼠标经过地方,背景颜色#eee 字体颜色#ff8500 */
background-color: #eee;
color: #ff8500;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">新浪导航</a>
<a href="#">手机新浪网</a>
<a href="#">移动客户端</a>
<a href="#">微博</a>
<a href="#">博客园</a>
</div>
</body>
</html>
成品
案例一:产品模块
参照
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>综合案例产品模块</title>
<style >
* {
/*没有内外边距*/
margin: 0;
padding: 0;
}
body {
/*定义整体背景颜色*/
background-color: #f5f5f5;
}
a {
/*定义所有a链接,字体颜色,不加下划线*/
color: #333;
text-decoration: none;
}
.box {
/*定义大盒子*/
width: 413px;
height: 576px;
background-color: #fff;
/* 让块级的盒子水平居中对齐 */
margin: 100px auto;
}
.box img {
/*图片宽度铺满box大盒子*/
width: 100%;
}
.review {
height: 110px;
font-size: 14px;
/* 因为这个段落没有width属性,所有padding不会撑开盒子的宽度 */
padding: 0 37px;/*内边距上下为0,左右为37px*/
margin-top: 46px;/*上外边距为46px*/
}
.appraise {
color: #c7c9c6;
padding: 0 37px;
font-size: 14px;
}
.info h4 {
/*块级元素改为行内块元素*/
display: inline-block;
padding: 0 37px;
/*将标题设置为不加粗*/
font-weight: 400;
}
.info span {
color: #fdcea4;
}
.info em {
/*将斜体em设置为正常*/
font-style: normal;
color: #c7c9c6;
/*外边距 上0,右6px 下0 左15px*/
margin: 0 6px 0 15px;
}
</style>
</head>
<body>
<div class="box">
<a href="#"><img src="img/1%20(2).jpg" alt=""><a>
<p class="review"><a href="#">快递牛,整体感觉不错蓝牙可以说秒连。红米给力。整体感觉不错蓝牙可以说秒连。<a></p>
<div class="appraise">来自117384232的评价</div>
<div class="info">
<h4><a href="#">Redmi AirDots真无蓝线...</a></h4>
<em>|</em>
<span>99元</span>
</div>
</div>
</body>
</html>
成品
案例二:快报模块
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
li {
/* 去掉li前面的小圆点,所有的li里面都去掉 */
list-style: none;
}
.box {
/* 定义外边框的宽度、实线、颜色 */
border: 1px solid #d6d8d5 ;
width: 610px;
height: 400px;
/* 盒子自动居中 */
margin:100px auto;
}
.box h3 {
height: 79px;
/* 只定义盒子底部 宽度、虚线,颜色 */
border-bottom: 1px dotted #d6d8d5;
font-size: 33px;
font-weight: 400;
/* 行高 */
line-height: 79px;
/* 左内边距41px */
padding-left: 41px;
}
.box ul li a {
/* 链接的颜色,没有下划线 */
color: #6f6e74;
text-decoration: none;
font-size: 29px;
}
.box ul li a:hover {
/* 鼠标经过链接的时候有下划线 */
text-decoration: underline;
}
.box ul li {
/* 定义每个li的行高,左内边距 */
line-height: 55px;
padding-left: 54px;
}
.box ul {
/* 定义整体ul列表 上内边距 */
padding-top: 15px;
}
</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="#">[特惠] 9.9元洗100张照片!</a></li>
<li><a href="#">[特惠]长虹智能空调立省1000</a></li>
</ul>
</div>
</body>
</html>