本次实践主要练习的知识点:
-
reset
-
样式覆盖
-
浮动
-
背景
-
边框
-
类选择器
-
伪类
-
行高
-
文字样式
我们试着做出下面这个图片中的导航:
第1步:实现排版
它的背景色主要是灰色的,并且当前所在的菜单位置是红色的,比如你当前位置在Clients的话它也应该会变成红色
这种情况下一般是最外面用一个ul包住,再每一个菜单都是li,每个li左浮动,请复制以下示例代码查看效果:
<body>
<style type="text/css">
/*第1步的CSS*/
/*reset开始*/
*{
margin:0; padding:0;}
a{
text-decoration:none;}
ul{
list-style:none;}
/*reset结束*/
ul{
width:1000px; height:50px; margin:20px auto;} /*一定要定义宽高度哦!*/
ul li{
width:110px; float:left;}
</style>
<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>
好了,排版基本出来了,效果图
第2步:上背景色
接下来我们给它上色,背景是黑色的,文字是白的,暂时这样试下:
<body>
<style type="text/css">
/*第1步的CSS*/
/*reset开始*/
*{
margin:0; padding:0;}
a{
text-decoration:none;}
ul{
list-style:none;}
/*reset结束*/
ul{
width:1000px; height:50px; margin:20px auto;}
ul li{
width:110px; float:left;}
</style>
<style type="text/css">
/*第2步的CSS*/
ul{
background:#202020;}
ul a{
color:#FFF;}
</style>
<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>
效果图
第3步:排版
这时候发现了问题,文字是在顶上的,怎么办?回顾CSS常用的知识 - 行高
章节的内容,我们把每个li的line-height(行高)设置成容器一样的高度就可以了!
<body>
<style type="text/css">
/*第1步的CSS*/
/*reset开始*/
*{
margin:0; padding:0;}
a{
text-decoration:none;}
ul{
list-style:none;}
/*reset结束*/
ul{
width:1000px; height:50px; margin:20px auto;}
ul li{
width:110px; float:left;}
</style>
<style type="text/css">
/*第2步的CSS*/
ul{
background:#202020;}
ul a{
color:#FFF;}
</style>
<style type="text/css">
/*第3步-1的CSS*/
ul li{
line-height:50px;}
</style>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">客户</a></li>
<li><a