web前端布局练手项目

来源：互联网发布：ubuntu中文输入编辑：程序博客网时间：2024/06/03 13:01
仿北大首页布局(只关心布局)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>练手项目1---Mr.Robot</title><style type="text/css">*{margin: 0;padding: 0;}#top{margin: 0 auto;/*top栏居中对齐*/height: 103px;width: 970px;}#top #logo{height: 103px;width: 277px;float: left;background-color: red;}#top #language{height: 49px;width: 137px;margin-bottom: 8px;float: right;background-color: green;}#top #nav{width: 679px;height: 46px;float:right;background-color: green;}#content{margin: 0 auto;margin-top: 10px;margin-bottom: 10px;height: 435px;width: 970px;/*background-color: gray;*/}#content #leftpart{float: left;height: 435px;width: 310px;background-color: yellow;margin-right: 10px;}#content #rightpart{float: left;width: 650px;height: 435px;margin-bottom: 10px;/*background-color: black;*/}#content #main{width: 450px;height: 400px;margin-right: 10px;margin-bottom: 10px;float: left;}#content #rightpart #news1{width: 450px;height: 240px;margin-bottom: 10px;background-color: skyblue;}#content #rightpart #news2{width: 450px;height: 110px;margin-bottom: 10px;background-color: green;}#content #rightpart #news3{width: 450px;height: 30px;margin-bottom: 10px;background-color: skyblue;}#content #rightpart #hotpic{width: 190px;height: 400px;float: left;background-color: purple;}#content #rightpart #links{float: left;width: 650px;height: 25px;background-color: yellow;}#footer{height: 35px;width: 970px;background-color: skyblue;margin: 0 auto;}</style></head><body><!-- 头部 --><div id="top"><div id="logo"></div><div id="language"></div><div id="nav"></div></div><!-- 主要内容 --><div id="content"><div id="leftpart"></div><div id="rightpart"><div id="main"><div id="news1"></div><div id="news2"></div><div id="news3"></div></div><div id="hotpic"></div><div id="links"></div></div></div><!-- 页尾 --><div id="footer"></div></body></html>
0 0