Learning the front - Case: make a super simple static page

HTML part

<!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</Rank>li>
                    <li><a href="#">数据</a></li>
                    <li><a href="#">专题</a></li>
                    <li><a href="#">更多</a></li>            
                </ul>
            </div>
        </div>
        
        
        
        
        <!- IDdiv<->an intermediate portion of the page
        = "Content" > </ div > 
        
        
        
        
        <-! lower section of the page -> 
        < div ID = "footer" > </ div > 
        
        
        
        
    </ body > 
    
    
</ HTML >

View Code

CSS section

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

updating....

Learning the front - Case: make a super simple static page

Learning the front - Case: make a super simple static page

HTML part

CSS section

Guess you like