帐号已停机
<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>
XHTMT|
HTML5|
CSS|
HTML DOM|
jQuery|
JSON|
AJAX|
LESS|
HTML|
Bootstrap|
Foundation|
AngularJS|
Ember.js|
TypeScript|
AngularJS2|
React|
jQuery UI|
jQuery EasyUI|
Node.js|
Highcharts|
Echarts|
Vue.js|
CoffeeScript|
Ext.js|
Meteor|
SASS|
Omi|
Markdown|
前端开发规范|
浏览器|
webpack|
JavaScript|
CSS3|
用户登录
还没有账号?立即注册
用户注册
投稿取消
| 文章分类: |
|
还能输入300字
上传中....
