前端学习-案例：制作一个超简单的静态页面

HTML部分

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" href="css/index.css" />
    </head>


    <body>


        <!-- 网页的上部分 -->
        <div id="header">
            <div id="header-img">
                <img src="img/top_logo.jpg"/>
            </div>
            <div id="header-font">
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">视频</a></li>
                    <li><a href="#">新闻</a></li>
                    <li><a href="#">图集</a></li>
                    <li><a href="#">球队</a></li>
                    <li><a href="#">球员</a></li>
                    <li><a href="#">赛程</a></li>
                    <li><a href="#">排名</a></li>
                    <li><a href="#">数据</a></li>
                    <li><a href="#">专题</a></li>
                    <li><a href="#">更多</a></li>
                </ul>
            </div>
        </div>




        <!-- 网页的中间部分 -->
        <div id="content"></div>




        <!-- 网页的下部分 -->
        <div id="footer"></div>




    </body>


</html>

View Code

CSS部分

body{
    width: 100%;
    height: 2000px;
    background-color: red;
    padding: 0px;
    margin: 0px;
}


#header{
    height: 150px;
    width: 100%;
    background-color: #006BB7;
}

#header-img{
    height: 60%;
    width: 70%;
    margin: auto;
}
#header-img img{
    height: 100%;
    width: 100%;
}



#header-font{
    height: 40%;
    width: 70%;
    margin: auto;
}
#header-font ul{
    margin-left: -30px;
    margin-top: 20px;
}


#header-font ul li{
    font-size: 20px;
    list-style-type: none;
    display: inline;
    margin-right: 50px;
}

#header-font a{
    color: white;
}

#header-font a:link{
    text-decoration: none;
}


#content{
    height: 1350px;
    width: 100%;
    background-color: #DCDCDC;
}



#footer{
    height: 500px;
    width: 100%;
    background-color: black;
}

View Code

更新中....