CSS盒子模型-盒子模型应用
2016-08-12 16:20
295 查看
.html
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>盒子模型应用</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div class="top"> <div class="top_content"></div> </div> <div class="body"> <div class="body_img"></div> <!--内容区域--> <div class="body_content"> <div class="body_no"></div> </div> </div> <div class="footing"> <div class="footing_content"></div> <div class="footing_subnav"></div> </div> </body> </html>
.css
/*通配符,把所有的内边距,外边距调为0*/ *{ margin: 0px; padding: 0px; } .top{ width: 100%; height: 50px; background-color: black; } .top_content{ width: 75%; height: 50px; background-color: purple; /*外边距为0,自适应会有居中的效果*/ margin: 0px auto; } .body{ width: 75%; /*外边距为0,自适应,会有居中的效果*/ margin: 20px auto; height: 1500px; background-color: antiquewhite; } .body_img{ width: 100%;/*是充满body的宽度*/ height: 400px; background-color: darkgoldenrod; } .body_content{ width: 100%; height: 1100px; background-color: blueviolet; } .body_no{ width: 100%; height: 50px; background-color: aquamarine; } .footing{ width: 75%; height: 400px; background-color: brown; margin: 0px auto; } .footing_content{ width: 100%; height: 330px; background-color: cornflowerblue; } .footing_subnav{ width: 100%; height: 70px; background-color: black; }
在浏览器展示效果:
相关文章推荐
- 高德地图AMap_2DMap_V2.9.0_20160525版下,隐藏“高德地图”logo样式
- Html / CSS常见问题 解决方案
- CSS中link和@import的区别说明
- CSS Hack写法与IE6下的常见Bug
- div css每行文字显示一半 同时文字字体重叠显示不全解决方法
- 前端 css续
- css中display:inline,display:block;display:inline-block; 区别
- CSS对话框样式
- CSS--选择器的特殊性
- CSS3初体验之奇技淫巧
- CSS学习总结(三)
- CSS知识总结(五)
- css中的clip:rect() 只能在绝对定位的元素上使用
- day14 HTML CSS
- CSS3动画(个人理解)
- CSS3动画(个人理解)
- CSS常用样式(二)
- CSS原理
- a便签hover设置颜色失效问题解决
- css3之currentColor