前端基础--简单的页面头部

雨点打透心脏的1/2处 2022-03-25 06:38 199阅读 0赞

开发工具与关键技术：DW/浏览器 ；简单的页面头部。  
作者：刘佳明  
撰写时间：2019年1月 19日

本文章为大家描述页面编程的头部及其代码的编辑过程；

下面为头部的效果图；  
![在这里插入图片描述][20190119091943706.png]

HTML 代码：

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;/*背景颜色为淡绿色*/
    }

首先遵照多兰布局完成盒子的分布：  
![在这里插入图片描述][20190119092208893.png]  
在进行导航内部的代码

对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;
    }

并且把前面对多兰布局中盒子的背景颜色去除掉；  
这样一个简单的页头部就完成了  
![在这里插入图片描述][20190119092545839.png]

[20190119091943706.png]: /images/20220325/d53fd3174be245c1bb96a6c4dc4c4da5.png
[20190119092208893.png]: /images/20220325/719e43b5ed92428fb1eaa5ecb1497504.png
[20190119092545839.png]: /images/20220325/4f76b3c85a524917915782f5dd66ccb7.png