单个网页页面头与尾的布局

作者: 昆仑草莽 | 来源:发表于2019-05-30 13:53 被阅读0次

单个网页页面头与尾的布局
CSS定位与布局
响应式网页设计
常见的布局场景类型
css稍微了解的知识点-1
前端开发入门到实战：使用CSS样式显示多个图标图片
前端开发入门到实战：使用CSS样式显示多个图标图片
CSS三大核心-盒子模型
原生JS实现照片瀑布流与懒加载
瀑布流和懒加载实例【转载】

使用工具：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="#">首&emsp;页</a></li>
            <li><a href="javascript: void (0)">查&emsp;看</a></li>
            <li><a href="javascript: void (0)">运&emsp;行</a></li>
            <li><a href="javascript: void (0)">搜&emsp;索</a></li>
        </ul> 
        <div class="login_box">
            <span class="iconfont icon-icon-user"></span>
            <span><a href="homepageland.xhtml">登陆</a></span>&emsp;
            <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&copy; 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进行渲染。