开发工具与关键技术:DW/浏览器 ;简单的页面头部。
作者:刘佳明
撰写时间:2019年1月 19日
本文章为大家描述页面编程的头部及其代码的编辑过程;
下面为头部的效果图;
HTML 代码:
<div class="contain" id="contain">
<div class="com">
<div class="coma">
<div class="cona">
</div>
<div class="conb">
</div>
</div>
</div>
</div>
CSS代码:
*{
margin: 0px;
padding: 0px;
}
.contain{
width:100%;
height:100%;
background:red;
}
.com{
width:100%;
height:50px;
background: #eee;
}
.coma{
width:90%;
height:100%;
background: red;
margin: 0 auto;
display: flex;
justify-content:space-between;
}
.cona{
width:30%;
height:100%;
background: #7AC1E3;/*背景颜色为淡蓝色*/
}
.conb{
width:30%;
height:100%;
background:#90DD9B;/*背景颜色为淡绿色*/
}
首先遵照多兰布局完成盒子的分布:
在进行导航内部的代码
<div class="cona">
<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>
<li><a href="#">手机版 |</a></li>
</ul>
</div>
<div class="conb">
<ul>
<li><a href="#"><img src="js/email.png" alt="">登陆</a></li>
<li><a href="#"><img src="js/email.png" alt="">注册</a></li>
<li><a href="#"><img src="js/email.png" alt="">查看记录</a></li>
<li><a href="#">客服服务 </a></li>
<li><a href="#">网络导航 </a></li>
</ul>
</div>
对HTML的标签添加css样式;
.cona ul li,.conb ul li{
list-style: none;
font-size: 14px;
display: inline-block;
line-height: 50px;
margin-left: 10px;
}
.cona ul li a,.conb ul li a{
font-size: 16px;
font-family:Constantia, Lucida Bright, DejaVu Serif, Georgia, serif;
color:#000000;
text-decoration: none;
}
.cona ul li a:hover{
color:#F1760A;
}
.conb ul li a:hover{
color:#F1760A;
}
.conb ul li img{
width:10px;
height:10px;
}
并且把前面对多兰布局中盒子的背景颜色去除掉;
这样一个简单的页头部就完成了