霍者博客

网页设计师修炼练习题012

需做出如上效果

具体尺寸要求标注

要求:

1,相关尺寸等要求都在上图,三个”霍者网页设计“位于外围的DIV水平居中位置。

2,在用CSS做出上述效果后,再在最后一行“<li>霍者网页设计</li>”这行代码后,再加上一行”<li>霍者网页设计</li>“;加上后要求四个块状内容还是水平居中,且不需要修改CSS。

知识点:inline-block

基础HTML代码:

<div class="wrap">
<ul>
     <li>霍者网页设计</li>
     <li>霍者网页设计</li>
     <li>霍者网页设计</li>
</ul>
</div>

实现效果代码如下:


(建议练习的童鞋先不要看下面的代码,自己先思考思考,操作操作再看讲解是最好的了。)



<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>网页设计师修炼练习题012</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
list-style-type: none;
color: #333;
font-family: "微软雅黑";
font-size: 12px;
}
.wrap {
height: 60px;
width: 600px;
border-bottom-width: 5px;
border-bottom-style: solid;
border-bottom-color: #CCC;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #CCC;
text-align: center;
overflow: hidden;
}
.wrap ul li {
width: 100px;
display: inline-block;
line-height: 40px;
background-color: #999;
height: 40px;
margin-top: 10px;
margin-right: 2px;
margin-left: 2px;
}
</style>
</head>
<body>
<div class="wrap">
<ul>
     <li>霍者网页设计</li>
     <li>霍者网页设计</li>
     <li>霍者网页设计</li>
</ul>
</div>
</body>
</html>

原创文章请注明转载自霍者博客本文地址:http://www.huozheweb.com/post/398.html,标题:网页设计师修炼练习题012

【我来说两句】
分享到:

相关文章:



评论 0

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。