码迷,mamicode.com
首页 > Web开发 > 详细

css盒子模型 padding

时间:2016-12-25 13:32:37      阅读:200      评论:0      收藏:0      [点我收藏+]

标签:ref   企业   ima   head   ora   代码   splay   href   log   

注意:

行内元素的内外边距的top和bottom是不起作用的,想让他起作用要让他变成块元素加:display:bloock

注意:

如果元素设置了背景,那么背景会填充到内容区+边距区

利用padding设置导航条练习:

技术分享

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<style type="text/css">
ul li{list-style: none; height: 35px; }
ul li{float: left;display: block; padding: 0px 30px;
background: url("img/百度.png") no-repeat; background-size: 28px;
background-position: 1px 7px;
}
a{text-decoration: none;color: black; font-family: "microsoft sans serif";z-index: 100;
}
a:hover{background-color: blue;}
</style>
</head>
<body>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">量贩装</a></li>
<li><a href="#">生鲜区</a></li>
<li><a href="#">企业采购</a></li>
<li><a href="#">家电区</a></li>
</ul>
</body>
</html>

显示如下:

技术分享

          

 

css盒子模型 padding

标签:ref   企业   ima   head   ora   代码   splay   href   log   

原文地址:http://www.cnblogs.com/1111duguxiaoyu/p/6219165.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!