爱吾下载 ● 文章资讯

分类分类

网页布局

更新时间：2026-05-11 00:50:15作者：yezheng

用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: auto9; /* 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}

展开全部

相关

手游推荐
说两句网友评论
    我要跟贴
    取消