单个网页页面头与尾的布局
2019-05-30 本文已影响0人
昆仑草莽
使用工具：pycharm。
html版本：html 5
登陆页面展示：
下面是代码与页面分析：
首先：我们先看网页头和尾，做出的效果如下：
网页头制作分析：
在制作网页头的时候，我们使用div标签来固定网页头的大小，颜色等各种属性。
这样，一个简单的网页头的布局就算完成了。当然，如果需要做的高尚大，那加入一些特俗效果就可以了。下面上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>主页</title>
<link rel="stylesheet" href="resetCSS.css"/>
<link rel="stylesheet" href="commer.css"/>
<link rel="stylesheet" href="//at.alicdn.com/t/font_1204974_mjate61wd8.css"/>
</head>
<body>
<!--Home page header-->
<div class="header">
<div class="header_box">
<h1 class="logo">
<a href="javascript: void (0)" class="logo_title"></a>
</h1>
<ul class="menu">
<li><a href="#">首 页</a></li>
<li><a href="javascript: void (0)">查 看</a></li>
<li><a href="javascript: void (0)">运 行</a></li>
<li><a href="javascript: void (0)">搜 索</a></li>
</ul>
<div class="login_box">
<span class="iconfont icon-icon-user"></span>
<span><a href="homepageland.xhtml">登陆</a></span> 
<span><a href="homepagelogon.xhtml">注册</a></span>
</div>
</div>
</div>
这就是全部的网页头的HTML代码。当然，如果仅仅这些代码时不够的，这只是一个网页头的骨架，没有加入样式的渲染。是得不到上述演示的效果的。要想得到上述演示的效果，就需要进行CSS渲染，如果需要一些特效，还需要加入一些JS代码，这里就不做特效处理了，后面的网页body部分，我会使用JS进行渲染。下面是网页头的CSS代码.
/*Home page header*/
.header{
width: 100%;
height: 70px;
background-color: black;
color: white;
}
.header .header_box{
width: 1200px;
height: 70px;
background-color: black;
margin: auto;
/*垂直居中*/
line-height: 70px;
}
.header .header_box .logo{
width: 193px;
height: 65px;
float: left;
}
.header .header_box .logo .logo_title{
width: 100%;
height: 100%;
/*内联标签必须有下面这句才可以设置宽高*/
display: block;
background-image: url("logo.png");
}
.header .header_box .menu{
float: left;
margin-left: 100px;
}
.header .header_box .menu li{
float: left;
height: 70px;
padding: 0 30px;
}
.header .header_box .menu li:hover{
border-bottom: 5px solid red;
box-sizing: border-box ;
}
.header .header_box .login_box{
float: right;
color: aqua;
}
/*阿里图标*/
.icon-icon-user::before{
font-size: 20px;
color: lightblue;
}
这样，简单的网页头就做好了。效果如上图所示。需要注意的是，logo图片请自行准备。大小请按照你设置盒子大小来裁定。
网页尾制作分析：
网页尾的盒子布局和网页头的布局是相同的，在这里就不赘述了。直接上代码
<!--footed-->
<div class="footer">
<div class="footer_box">
<div class="footer_logo">
<p>
<span><a href="javascript: void (0)">关于python |</a></span>
<span><a href="javascript: void (0)">python开发 |</a></span>
<span><a href="javascript: void (0)">数据分析 |</a></span>
<span><a href="javascript: void (0)">关于我们</a></span>
</p>
<p>
<span><a href="javascript: void (0)">地址：北京市建国门秀水街1号</a></span>
</p>
</div>
</div>
<div class="footer_bottom">
<p>Copyright© 2019-05-22</p>
</div>
</div>
CSS代码：
/*Home page footer*/
.footer{
width: 100%;
background-color: gray;
}
.footer .footer_box{
width: 1200px;
line-height: 25px;
background-color: gray;
margin: auto;
color: darkgray;
text-align: center;
}
.footer .footer_box .footer_logo{
padding: 10px 0;
background: url("logo.png") no-repeat;
}
.footer .footer_bottom{
width: 100%;
background-color: black;
line-height: 35px;
color: white;
}
.footer .footer_bottom p{
width: 1200px;
margin: auto;
text-align: center;
}
这样，网页的头和尾就制作完成了，很简单的一个网页头和尾。
下一章节我们来制作网页的轮播图，需要使用JS进行渲染。
