您的位置：网站首页 > 网络营销 > 网站制作 > 网页布局
网页布局
来源： 日期：2015-11-04 20:49:16 人气：标签： 
用HTML写的一个网络布局
一、
<html>
<head>
<title>布局实例</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css">
body{text-align: center;}
.h_top{ width: 98%; background: yellow; height: 30px;margin: 10px;}
.h_nav{width: 98%; background: yellow; height: 30px;margin: 10px;}
header{ background:#ce1aba; width: 100%; height: 100px; padding-top: 5px;}
.container{ background: pink; width: 100%; height: 500px; padding-top: 15px; }
footer{ background:#ce1aba; width: 100%; height: 80px;}
.cont_banner{ background:greenyellow; height: 150px; margin: 15px; margin-top: 0px; }
.cont_info{ background:greenyellow; height: 300; margin: 15px; margin-top: 0px; }
.info_left{ background:blue; width: 70%; height: 280px; float: left; margin: 10px;}
.info_right{background:blue; width: 25%; height: 280px; float: right; margin: 10px;}
.info_news{background:orange; width: 96%; height: 120px; margin: 10px;}
.info_pro{background:orange; width: 96%; height: 120px; margin: 10px;}
</style>
</head>
<body>
<!--头部-->
<header>
<div class="h_top"></div>
<div class="h_nav"></div>
</header>
<!--内容主体-->
<div class="container">
<div class="cont_banner"></div><!--广告-->
<div class="cont_info"><!--广告下的信息，第二个红框-->
<div class="info_left"><!--左边的蓝框-->
<div class="info_news"></div><!--上边的深蓝框-->
<div class="info_pro"></div><!--下边的深蓝框，产品展示-->
</div>
<div class="info_right"></div><!--右边的蓝框，公司信息-->
</div>
</div>
<!--底部-->
<footer></footer>
</body>
</html>
二、
html,body,h1,h2,h3,h4,h5,h6,p,blockquote,pre,address,img,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,
tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0}
body{font-size:14px;-webkit-touch-callout:none;-webkit-user-select:none;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(255,255,255,0)}a{text-decoration:none;outline:0}
ol,ul{list-style:none}
blockquote,q{quotes:none}
blockquote::before,blockquote::after,q::before,q::after{content:none}
ins{text-decoration:none}del{text-decoration:line-through}
fieldset,img{border:0}
button,input,select,textarea{font-family:inherit;font-size:100%;vertical-align:middle;-webkit-user-select:auto}
textarea{resize:none;overflow:auto;vertical-align:top}
[hidden]{display:none}
table{border-collapse:collapse;border-spacing:0}
body{font:14px MICROSOFT YaHei,Helvetica,Tahoma,sans-serif;background:#efefef;}
.clearfix::before,.clearfix::after{display:table;line-height:0;content:""}
.clearfix::after{clear:both}
img {border:0;max-width: 100%;height: auto;width: auto\9; /* ie8 */ vertical-align:bottom;}
.btn{display:inline-block;width:100%;height:44px;border-radius:4px;border:1px solid #e0e0e0;font-size:18px;line-height:44px;color:#fff;background-color:#ff5a84;-webkit-box-sizing:border-box;
box-sizing:border-box;text-align:center;white-space:nowrap;overflow:hidden;cursor:pointer}
相关文章
- 上一篇： chrome桌面通知
- 下一篇： 利用HTML5实现使用按钮控制背景音乐开关
0731-85579057 ，
