美文网首页
单个网页页面头与尾的布局

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

作者: 昆仑草莽 | 来源:发表于2019-05-30 13:53 被阅读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="#">首&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进行渲染。

    相关文章

      网友评论

          本文标题:单个网页页面头与尾的布局

          本文链接:https://www.haomeiwen.com/subject/vaimtctx.html