【CSS 基础】11 京东首页DIV分块布局
2017-08-04 16:51
337 查看
京东分块图解
html代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="jd.css"/> </head> <body> <!--广告--> <div id="ad"> <div class="bg"></div> </div> <!--头部--> <div id="header"> <div class="content"></div> </div> <!--搜索--> <div id="search"> <!--图标--> <div class="logo"></div> </div> <!--导航-菜单--> <div id="nav"> <div class="left"></div> <div class="center"> <div id="one"></div> <div id="two"></div> <div id="three"></div> </div> <div class="right"></div> </div> </body> </html>
css代码
*{ margin: 0; padding: 0; } #ad{ width: 100%; height: 80px; background: #161616; } #ad .bg{ width: 1190px; height: 80px; margin: 0 auto; background: red; } #header{ width: 100%; height: 30px; background: #E3E4E5; } #header .content{ width: 1190px; height: 30px; background: #e19d59; margin: 0 auto; } #search{ width: 1190px; height: 140px; background: #bbddb2; margin: 0 auto; } #search .logo{ width: 190px; height: 170px; background: #008000; position: absolute; top: 80px; } #nav{ width: 1190px; height: 480px; background: #efe49d; margin: 0 auto; } #nav .left{ width: 190px; height: 480px; background: #161616; float: left; } #nav .center{ width: 790px; height: 480px; background: #161616; float: left; margin-left: 10px; } #nav .center #one{ width: 790px; height: 340px; background: #FF0000; float: left; margin-bottom: 10px; } #nav .center #two{ width: 390px; height: 130px; background: #FF0000; float: left; margin-right: 10px; } #nav .center #three{ width: 390px; height: 130px; background: #FF0000; float: left; } #nav .righ a046 t{ width: 190px; height: 480px; background: #161616; float: left; margin-left: 10px; }
相关文章推荐
- <div+css页面布局课堂笔记>11---页面布局网站首页设计实例__终极版(仿csdn首页)
- CSS网页布局常用的基础知识
- Qt基础 11_布局管理
- css基础布局
- div+css完成首页布局
- Ionic基础——CSS布局
- 网页设计基础:Div+CSS布局
- CSS页面布局基础
- React Native入门——布局实践:开发京东客户端首页
- CSS基础布局
- HTML&CSS基础学习笔记11-导航栏
- CSS基础之几种常见的页面布局
- CSS网页布局常用的基础知识
- 前端基础——CSS+DIV布局
- css布局金融首页
- css基础浏览器的布局
- 网页布局基础-XHTML与CSS基础
- div+css 网页布局基础
- CSS基础之盒子模型及浮动布局