HTML学习三天之后结合CSS实现网页头部以及尾部的小练习

程序员文章站 2022-07-12 20:15:56

...

实现效果：

HTML文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页头部和尾部的实现</title>
    <link rel="stylesheet" href="RESETCSS.css">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1693077_ftfkhv4ziuw.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1693077_ll2yp793dx.css">
</head>
<body>

<!--网页头部部分-->
<div id="border">
    <div class="head">
        <!--logo设置-->
        <a href="javascript:void(0)" style="display: block">
            <div class="logo"></div>
        </a>
        <!--导航栏设置-->
        <div class="nav">
            <ul>
                <li><a href="javascript:void(0)">首页</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>
        <!--注册登录设置-->
        <div class="register">
            <span class="iconfont icon-UserSettings"></span>
            <span><a href="javascript:void (0)">注册/</a></span>
            <span><a href="javascript:void (0)">登录</a></span>
        </div>
    </div>
</div>


<!--网页尾部部分-->
<div id="border2">
    <!--设置尾部上半部分-->
    <div class="content1">
        <div class="in">
            <p class="p1">
                <span><a href="javascript:void(0);">关于Python</a></span> |
                <span><a href="javascript:void(0);">Python开发</a></span> |
                <span><a href="javascript:void(0);">Python全栈</a></span> |
                关于我：<span class="iconfont icon-we-chat"></span>此处省略
            </p>
            <p>
                <span><a href="javascript:void(0);">地址:中国 联系方式：隐私</a></span>
            </p>
        </div>
    </div>

</div>

<!--设置尾部下半部分-->
<div id="border3">
    <div class="content2">
         <p>Copyright © 2019 - 2020 学习python. 人生苦短，我用Python</p>
    </div>
</div>


</body>
</html>

（1）引入了阿里巴巴矢量图标库中的一些图标！！！

我是网址！！！

（2）引入了通用重置样式！！！

我是网址！！！

（3）.CSS样式表：

/*头部样式的设置*/
#border{
    width: 100%;
    height: 69px;
    background-color: black;
}
.head{
    width: 1200px;
    height: 69px;
    background-color: black;
    margin: auto;
}
#border .head .logo{
    width: 235px;
    height: 64px;
    background-image: url("https://www.python.org/static/img/python-logo.png");
    background-position: 0 -2px;
    float: left;
}
#border .head .nav{
    height: 69px;
    margin-left:200px ;
    float: left;
}
.nav ul li{
    height: 69px;
    float: left;
    line-height: 69px;
    padding: 0 20px;
}
#border .head a{
    text-decoration: none;
    color: white;
}
.nav ul li:hover{
    border-bottom: 5px solid purple;
    box-sizing: border-box;
}
#border .head .register{
    height: 69px;
    line-height: 69px;
    float: right;
}
.icon-UserSettings:before{
    color: white;
    font-size: 15px;
}


/*尾部样式的设置*/
/*尾部上半部分样式设置*/
#border2{
    width: 100%;
    height: 110px;
    background-color: grey;
}
#border2 .content1{
    width: 1200px;
    height: 110px;
    background-color: grey;
    margin: auto;
    padding: 19px 0;
}
#border2 .content1 .in{
    width: 1200px;
    height: 72px;
    background-color: grey;
    background-image: url("https://www.python.org/static/img/python-logo.png");
    background-repeat: no-repeat;
    background-position: 50px -2px;
}
#border2 .content1 .in p{
    width: 1200px;
    text-align: center;
    color: white;
    line-height: 25px;
    font-size: 13px;
    position: relative;
    top: 8px;
}
#border2 .content1 .in a{
    text-decoration: none;
    color: white;
}




/*尾部下半部分样式设置*/
#border3{
    width: 100%;
    height: 50px;
    background-color: black;
}
#border3 .content2{
    width: 1200px;
    height: 50px;
    background-color: black;
    margin: auto;
}
#border3 .content2 p{
    color: white;
    height: 50px;
    line-height: 50px;
    text-align: center;
}

相关标签：学习路上要做题啊！

上一篇： eclipse的使用和运行第一个java程序（步骤详细）

下一篇： JVM - 从源码到机器码