参考自青岛思途java讲师臧老师


index.html

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><link rel="stylesheet" type="text/css" href="css/index.css" /></head><body><!-- 页头 --><div class="header"><div class="info"><div class="container"><div class="left"></div><div class="right"><ul><li><a href="#">请注册</a></li><li><a href="#">请登录</a></li><li><a href="#">请加购</a></li><li><a href="#">请付款</a></li><li><a href="#">请好评</a></li><div class="clear"></div></ul></div><div class="clear"></div></div></div><div class="logo"><div class="container"><div class="logo-lft"></div><div class="logo-ctr"></div><div class="logo-rgt"></div></div></div></div><!-- banner --><div class="banner"><div class="nav"><div class="container"><ul><li><a href="#">请注册</a></li><li><a href="#">请注册</a></li><li><a href="#">请注册</a></li><li><a href="#">请注册</a></li><li><a href="#">请注册</a></li><li><a href="#">请注册</a></li><li><a href="#">请注册</a></li><div class="clear"></div></ul></div></div><div class="pic"><div class="container"><div class="lft"></div><div class="ctr"></div><div class="rgt"><div class="top"></div><div class="bottom"></div></div></div></div></div><!-- 一楼 --><div class="floor1"><div class="container"><div></div></div></div><!-- 二楼 --><div class="floor2"><div class="container"><div class="wrapper"><div class="item"><div></div></div><div class="item"><div><div class="top"></div><div class="top"></div></div></div><div class="item"><div></div></div><div class="item"><div><div class="top"></div><div class="top"></div></div></div><div class="item"><div></div></div></div></div></div><!-- 三楼 ,红人穿搭--><div class="floor3"><div class="container"><div class="title"><div class="main-title">红人穿搭</div><div class="list-title"></div><div class="more"></div><div class="clear"></div></div><div class="content"><div class="wrapper"><div class="item"><div></div></div><div class="item"><div></div></div><div class="item"><div></div></div><div class="item"><div></div></div><div class="item"><div></div></div></div></div></div></div><!-- 广告条 --><div class="ad"><div class="container"><div></div></div></div><!-- 四楼 多次重复--><div class="floor4"><div class="container"><div class="title"><div class="main-title">靓淘服装</div><div class="list-title"><div>热门搜索：</div><ul><li>风衣</li><li>风衣</li><li>风衣</li><li>风衣</li><li class="last">风衣</li><div class="clear"></div></ul></div><div class="more"><div>查看全部</div></div><div class="clear"></div></div><div class="content"><div class="lft"></div><div class="rgt"><div class="top"><div class="wrapper"><div class="item big"><div></div></div><div class="item"><div></div></div><div class="item"><div></div></div><div class="clear"></div></div></div><div class="bottom"><div class="wrapper"><div class="item"><div></div></div><div class="item"><div></div></div><div class="item"><div></div></div><div class="item"><div></div></div><div class="clear"></div></div></div></div></div></div></div><div class="floor4"><div class="container"><div class="title"><div class="main-title">靓淘服装</div><div class="list-title"><div>热门搜索：</div><ul><li>风衣</li><li>风衣</li><li>风衣</li><li>风衣</li><li class="last">风衣</li><div class="clear"></div></ul></div><div class="more"><div>查看全部</div></div><div class="clear"></div></div><div class="content"><div class="lft"></div><div class="rgt"><div class="top"><div class="wrapper"><div class="item big"><div></div></div><div class="item"><div></div></div><div class="item"><div></div></div><div class="clear"></div></div></div><div class="bottom"><div class="wrapper"><div class="item"><div></div></div><div class="item"><div></div></div><div class="item"><div></div></div><div class="item"><div></div></div><div class="clear"></div></div></div></div></div></div></div><!-- 广告条 --><div class="ad"><div class="container"><div></div></div></div><div class="floor4"><div class="container"><div class="title"><div class="main-title">靓淘服装</div><div class="list-title"><div>热门搜索：</div><ul><li>风衣</li><li>风衣</li><li>风衣</li><li>风衣</li><li class="last">风衣</li><div class="clear"></div></ul></div><div class="more"><div>查看全部</div></div><div class="clear"></div></div><div class="content"><div class="lft"></div><div class="rgt"><div class="top"><div class="wrapper"><div class="item big"><div></div></div><div class="item"><div></div></div><div class="item"><div></div></div><div class="clear"></div></div></div><div class="bottom"><div class="wrapper"><div class="item"><div></div></div><div class="item"><div></div></div><div class="item"><div></div></div><div class="item"><div></div></div><div class="clear"></div></div></div></div></div></div></div><div class="floor4"><div class="container"><div class="title"><div class="main-title">靓淘服装</div><div class="list-title"><div>热门搜索：</div><ul><li>风衣</li><li>风衣</li><li>风衣</li><li>风衣</li><li class="last">风衣</li><div class="clear"></div></ul></div><div class="more"><div>查看全部</div></div><div class="clear"></div></div><div class="content"><div class="lft"></div><div class="rgt"><div class="top"><div class="wrapper"><div class="item big"><div></div></div><div class="item"><div></div></div><div class="item"><div></div></div><div class="clear"></div></div></div><div class="bottom"><div class="wrapper"><div class="item"><div></div></div><div class="item"><div></div></div><div class="item"><div></div></div><div class="item"><div></div></div><div class="clear"></div></div></div></div></div></div></div><div class="ad"><div class="container"><div></div></div></div><div class="floor4"><div class="container"><div class="title"><div class="main-title">靓淘服装</div><div class="list-title"><div>热门搜索：</div><ul><li>风衣</li><li>风衣</li><li>风衣</li><li>风衣</li><li class="last">风衣</li><div class="clear"></div></ul></div><div class="more"><div>查看全部</div></div><div class="clear"></div></div><div class="content"><div class="lft"></div><div class="rgt"><div class="top"><div class="wrapper"><div class="item big"><div></div></div><div class="item"><div></div></div><div class="item"><div></div></div><div class="clear"></div></div></div><div class="bottom"><div class="wrapper"><div class="item"><div></div></div><div class="item"><div></div></div><div class="item"><div></div></div><div class="item"><div></div></div><div class="clear"></div></div></div></div></div></div></div><div class="floor4"><div class="container"><div class="title"><div class="main-title">靓淘服装</div><div class="list-title"><div>热门搜索：</div><ul><li>风衣</li><li>风衣</li><li>风衣</li><li>风衣</li><li class="last">风衣</li><div class="clear"></div></ul></div><div class="more"><div>查看全部</div></div><div class="clear"></div></div><div class="content"><div class="lft"></div><div class="rgt"><div class="top"><div class="wrapper"><div class="item big"><div></div></div><div class="item"><div></div></div><div class="item"><div></div></div><div class="clear"></div></div></div><div class="bottom"><div class="wrapper"><div class="item"><div></div></div><div class="item"><div></div></div><div class="item"><div></div></div><div class="item"><div></div></div><div class="clear"></div></div></div></div></div></div></div><!-- 五楼 --><div class="floor5"><div class="container"><div class="top"><div class="wrapper"><div class="item"><div></div></div><div class="item"><div></div></div><div class="item"><div></div></div><div class="item"><div></div></div><div class="clear"></div></div></div><div class="bottom"><div class="wrapper"><div class="item"><div></div></div><div class="item"><div></div></div><div class="item"><div></div></div><div class="item"><div></div></div><div class="item"><div></div></div><div class="clear"></div></div></div></div></div><!-- 页脚 --><div class="footer"><div class="top"></div><div class="mid"></div><div class="bottom"></div></div></body>
</html>

index.css

@charset "utf-8";body {margin: 0;padding: 0;
}ul {list-style-type: none;padding: 0;margin: 0;
}a {text-decoration: none;
}.clear {clear: both;
}/* 有效宽度 */
.container {width: 1100px;margin: 0 auto;
}.header .info {height: 30px;border-bottom: 1px solid #ccc;
}.header .info .left {width: 150px;height: 100%;float: left;background-color: #87CEEB;
}.header .info .container {height: 100%;
}.header .info .right {height: 100%;float: right;background-color: #87CEEB;
}.header .info .right ul {height: 100%;
}.header .info .right ul li {float: left;height: 100%;margin-right: 5px;
}.header .info .right ul li a {display: inline-block;/* 行内块状元素 */height: 100%;line-height: 30px;/*左右边内距  */padding-left: 10px;padding-right: 10px;
}.header .logo {height: 80px;margin-top: 10px;
}.header .logo .container {height: 100%;
}.header .logo .container .logo-lft {float: left;height: 100%;width: 200px;background-color: pink;margin-right: 10px;
}.header .logo .container .logo-ctr {float: left;height: 100%;width: 500px;background-color: pink;
}.header .logo .container .logo-rgt {float: right;height: 100%;width: 200px;background-color: pink;
}.banner {margin-top: 10px;
}.banner .nav {background-color: black;height: 30px;
}.banner .pic {height: 280px;background-color: antiquewhite;
}.banner .nav .container {height: 100%;
}.banner .nav .container ul {height: 100%;
}.banner .nav .container ul li {height: 100%;margin-right: 40px;float: left;
}.banner .nav .container ul li a {display: inline-block;height: 100%;line-height: 30px;padding-left: 30px;padding-right: 30px;color: #ddd;
}.banner .pic .container {height: 100%;position: relative;
}.banner .pic .container .lft {height: 100%;width: 160px;float: left;background-color: pink;
}.banner .pic .container .ctr {position: absolute;left: 160px;right: 150px;top: 0;height: 100%;background-color: darkorange;
}.banner .pic .container .rgt {float: right;height: 100%;width: 150px;background-color: #fff;
}.banner .pic .container .rgt .top {height: 135px;margin-bottom: 10px;width: 100%;background-color: pink;
}.banner .pic .container .rgt .bottom {height: 135px;width: 100%;background-color: pink;}.floor1 .container {height: 100%;
}.floor1 .container>div {height: 200px;background-color: pink;margin-top: 10px;
}.floor2 {height: 150px;padding-top: 10px;
}.floor2 .container {height: 100%;
}.floor2 .container .wrapper {height: 100%;margin-right: -10px;
}.floor2 .container .wrapper .item {width: 20%;height: 100%;float: left;
}.floor2 .container .wrapper .item>div {margin-right: 10px;background-color: pink;height: 100%;
}.floor2 .container .wrapper .item:nth-child(2)>div {background-color: #fff;
}.floor2 .container .wrapper .item:nth-child(4)>div {background-color: #fff;
}.floor2 .container .wrapper .item .top {height: 70px;background-color: pink;margin-bottom: 10px;
}.floor2 .container .wrapper .item .bottom {height: 70px;background-color: pink;
}.floor3 {height: 280px;padding-top: 10px;
}.floor3 .container {height: 100%;
}/*  */
.title {border-left: 5px solid red;height: 19px;margin-bottom: 10px;
}.title .main-title {float: left;height: 100%;padding-left: 3px;font-weight: bold;
}.title .list-title {float: left;height: 100%;padding-left: 5px;
}.title .more {float: right;height: 100%;
}.floor3 .container .content {height: 100%;
}.floor3 .container .content .wrapper {height: 100%;margin-right: -10px;
}.floor3 .container .content .wrapper .item {height: 100%;width: 20%;float: left;
}.floor3 .container .content .wrapper .item>div {margin-right: 10px;height: 250px;background-color: pink;}/*  广告条*/
.ad {margin-top: 10px;
}.ad .container {height: 100%;
}.ad .container>div {height: 60px;background-color: pink;
}.title .list-title>div {float: left;
}.title .list-title ul li {float: left;margin-right: 10px;border-right: 1px solid #666;padding-right: 10px;
}.title .list-title ul {width: 500px;
}.title .list-title ul .last {border-right: 0;
}.floor4 {margin-top: 10px;
}.floor4 .container .content {height: 280px;position: relative;margin-top: 10px;
}.floor4 .container .content .lft {float: left;width: 200px;background-color: skyblue;height: 100%;
}.floor4 .container .content .rgt {position: absolute;left: 210px;top: 0;right: 0;height: 100%;
}.floor4 .container .content .rgt .top {height: 135px;margin-bottom: 10px;}.floor4 .container .content .rgt .bottom {height: 135px;margin-bottom: 10px;
}.floor4 .container .content .rgt .wrapper {margin-right: -10px;height: 100%;
}.floor4 .container .content .rgt .wrapper .item {height: 100%;float: left;width: 25%;
}.floor4 .container .content .rgt .wrapper .big {width: 50%;
}.floor4 .container .content .rgt .wrapper .item>div {margin-right: 10px;height: 100%;background-color: darkgoldenrod;
}.floor5 {margin-top: 20px;height: 200px;
}.floor5 .container {height: 100%;
}.floor5 .container .top {height: 90px;
}.floor5 .container .top .wrapper {margin-right: -10px;height: 100%;
}.floor5 .container .top .wrapper .item {height: 100%;width: 25%;float: left;
}.floor5 .container .top .wrapper .item>div {background-color: pink;height: 100%;margin-right: 10px;
}.floor5 .bottom {height: 90px;margin-top: 10px;margin-bottom: 10px;
}.floor5 .bottom .wrapper {margin-right: -10px;height: 100%;
}.floor5 .bottom .wrapper .item {height: 100%;width: 20%;float: left;
}.floor5 .bottom .wrapper .item>div {background-color: firebrick;height: 100%;margin-right: 10px;
}.footer {height: 90px;margin-top: 20px;
}.footer .top {height: 30px;background-color: beige;
}.footer .mid {height: 10px;background-color: darkblue;
}.footer .bottom {height: 50px;background-color: cadetblue;
}

CSS布局示例 1 - 页面色块布局相关推荐

  1. CSS布局示例 3 - 页面布局

    参考自青岛思途java讲师臧老师 demo415.html <!DOCTYPE html> <html><head><meta charset="u ...

  2. html页面色块布局代码,Html 实现动态显示颜色块的报表效果(实例代码)

    利用html的颜色块动态展示数据 *{ padding: 0; margin: 0; } .tubiao,.jihua,.shiji,.riqi{ width: 100%; overflow: hid ...

  3. div布局、table布局、flex布局、多列布局、网格布局 示例

    目录 基础代码 demo.html css/common.css div实用布局示例 代码 效果图 table布局 代码 效果图 flex布局 代码 效果图 多列布局 代码 效果图 网格布局 代码 效 ...

  4. 黑马头条移动项目(十)：登录页面的布局

    目标 能实现登录页面的布局 1. 登录页面的布局 1.1 创建组件并配置路由,访问登录页面 src/views/Login/index.vue - 作为登录页面 - 先随意弄写标签显示 <tem ...

  5. HTML网页设计制作大作业(div+css) ~中华美德6页面带音乐 ~ 学生网页设计作业源码(中华文化)

    HTML网页设计制作大作业(div+css) ~ 中华美德6页面带音乐 ~ 学生网页设计作业源码(中华文化) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从 ...

  6. css前端知识分享—页面布局分析

    今天分享下"css前端知识分享-页面布局分析"这篇文章,文中根据实例编码详细介绍,或许对大家的编程之路有着一定的参考空间与使用价值,需要的朋友接下来跟着云南仟龙Mark一起学习一下 ...

  7. 只用html5与CSS做一个简单的页面,HTML+CSS基础训练之做一个简单页面的布局

    下面进入正题:布局是网页设计的基础中的基础,一个好的布局可以让人一目了然,一个失败的布局会让协同人员抓狂.所以前端开发,从布局开始. 首先分析一下图片的布局 ,分析各个色块之间的嵌套关系 如图所示:红 ...

  8. 应用css div进行页面布局设计,利用CSS与DIV进行页面布局.ppt

    <利用CSS与DIV进行页面布局.ppt>由会员分享,可在线阅读,更多相关<利用CSS与DIV进行页面布局.ppt(6页珍藏版)>请在人人文库网上搜索. 1.利用CSS与DIV ...

  9. 初识HTML（五）进阶：CSS盒子模型、页面布局

    目录 CSS 盒子模型(Box Model) 页面布局 浮动流 制作导航栏 如何页面布局 定位流 relative相对定位 absolute绝对定位 fixed固定定位 CSS 盒子模型(Box Mo ...

最新文章

  1. php 判定pc端與移動端
  2. LeetCode 17 电话号码的字母组合
  3. Qt Creator将QML模块与插件一起使用
  4. Ubuntu中python切换及pip 安装相应python库
  5. Android百度地图开发01之初体验
  6. C语言宏使用常见问题
  7. qt linux opensource ,QT opensource embedded linux 编…
  8. 条件转移指令和无条件转移指令练习
  9. 滴滴经验分享：SQLFlow如何让运营专家用上AI？
  10. adas硬件_ADAS系统功能安全设计/SOTIF需求和测试实例/软件安全架构/硬件安全设计......
  11. 考研总分多少能去辽师_考研英语作文平均分出炉，你拖后腿了吗？
  12. TortoiseSVN中的“文件和文件夹过滤”在VS项目中的使用
  13. 相关矩阵可视化 – corrplot() 绘图
  14. 整体二分初识--POJ2104：K-th Number
  15. 《神经网络与深度学习》——邱锡鹏（读书笔记_C2_1）
  16. VMware中进行文件移动/复制权限不够的问题
  17. 如何开启计算机cpu虚拟化,电脑开启虚拟化设置的方法 如何开启虚拟化设置
  18. BFS宽度优先搜索(新冠病毒的传播)
  19. 使用redis碰到maxmemory
  20. 自己设置假期的日历控件_在假期旅行时使用PC娱乐自己

热门文章

  1. phpstorm 用git pull或者 git push报错 protocol error: bad line length character: Acti
  2. 学习PPT与Excel的各种高级应用并掌握相关技巧
  3. 你还记得当年上课天天玩 JAVA游戏吗
  4. 用Unity做个五子棋（一）创建棋盘并获得鼠标点击位置
  5. 人脸识别学生考勤系统【2】--登录
  6. 13、Activiti7工作流从入门到放弃
  7. 小学计算机集体听课评课,小学听课评课活动总结
  8. 海尔消费金融“增收不增利”：利润不及两年前，曾多次被点名批评
  9. 计算机基础长文档的排版,长文档的排版(说课)重要.ppt
  10. Photoshop CS4在Windows11上会导致鼠标右键卡死的问题处理