前端小作品--基本网页布局
来源：互联网 发布：js怎么判断对象类型 编辑：程序博客网 时间：2024/06/02 23:09
<!DOCTYPE html><html><head><title>网页基本布局</title><style type="text/css">*{margin: 0;padding: 0;}.header{width: 970px;height: 103px;margin: 0 auto;margin-bottom: 10px;}.header .logo{float: left;width: 277px;height: 103px;background-color: skyblue;}.header .language{float: right;width: 137px;height: 49px;background-color: green;margin-bottom: 8px;}.header .nav{float: right;width: 679px;height: 46px;background-color: green;}.content{width: 970px;height: 435px;margin: 0 auto;}.content .banner{float: left;width: 310px;height: 435px;background-color: pink;}.content .main{float: right;width: 650px;height: 435px;}.content .main .news{width: 650px;height: 401px;margin-bottom: 10px;}.content .main .links{width: 650px;height: 25px;background-color: purple;}.content .main .news .newshome{float: left;width: 450px;height: 401px;}.content .main .news .shots{float: right;width: 190px;height: 401px;background-color:red;}.content .main .news .newshome .news1{width: 450px;height: 240px;background-color: blue;margin-bottom: 10px;}.content .main .news .newshome .news2{width: 450px;height: 110px;background-color: blue;margin-bottom: 10px;}.content .main .news .newshome .news3{width: 450px;height: 30px;background-color: blue;}.footer{width: 970px;height: 30px;background-color: orange;margin: 0 auto;margin-top: 10px;}</style></head><body><div class="header"><div class="logo"></div><div class="language"></div><div class="nav"></div></div><div class="content"><div class="banner"></div><div class="main"><div class="news"><div class="newshome"><div class="news1"></div><div class="news2"></div><div class="news3"></div></div><div class="shots"></div></div><div class="links"></div></div></div><div class="footer"></div></body></html>
