前端学习-案例：制作一个超简单的静态页面
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>
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; }
更新中....