【前端底子】Day 5 CSS浮动

慢吞云雾缓吐愁  金牌会员 | 8 小时前 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 900|帖子 900|积分 2700

目次
1. 浮动
1.1 标准流（普通流/文档流）
1.2 浮动
1.2.1 浮动的特性
1.2.2 浮动元素常和标准流父级搭配使用
1.2.3 案例
2. 常见网页结构
2.1 常见网页结构
2.2 浮动结构留意点
3. 清除浮动
3.1 原因
3.2 清除浮动的本质
3.3 清除浮动的方法
3.3.1 额外标签法
3.3.2 父级添加overflow
3.3.3 after 伪元素法
3.3.4 双伪元素清除浮动
3.3.5 总结
4. PS 切图
5. 学成在线案例
CSS 属性誊写顺序
页面结构整体思路
头部制作



1. 浮动


1.1 标准流（普通流/文档流）


1.2 浮动





1.2.1 浮动的特性

1. 脱标

2. 行内显示并且顶端对齐
行内块元素间有缝隙 

3. 浮动的元素具有行内块元素的特性

1.2.2 浮动元素常和标准流父级搭配使用


摆放盒子：先巨细后位置
1.2.3 案例

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         * {
  10.             margin: 0;
  11.             padding: 0;
  12.         }
  14.         .box {
  15.             width: 1226px;
  16.             height: 615px;
  17.             background-color: pink;
  18.             margin: 0 auto;
  20.         }
  22.         .left {
  23.             float: left;
  24.             width: 234px;
  25.             height: 615px;
  26.             background-color: purple;
  27.         }
  29.         .right {
  30.             float: right;
  31.             width: 992px;
  32.             height: 615px;
  33.             background-color: skyblue;
  34.         }
  36.         li {
  37.             float: left;
  38.             width: 234px;
  39.             height: 300px;
  40.             background-color: #fff;
  41.             list-style: none;
  42.             margin-left: 14px;
  43.             margin-bottom: 14px;
  44.         }
  46.         li img {
  47.             width: 100%;
  48.         }
  49.     </style>
  50. </head>
  52. <body>
  53.     <div class="box">
  54.         <div class="left"></div>
  55.         <div class="right">
  56.             <ul>
  57.                 <li><img src="../img1.jpg"></li>
  58.                 <li></li>
  59.                 <li></li>
  60.                 <li></li>
  61.                 <li></li>
  62.                 <li></li>
  63.                 <li></li>
  64.                 <li></li>
  65.             </ul>
  66.         </div>
  67.     </div>
  68. </body>
  70. </html>
复制代码
2. 常见网页结构

2.1 常见网页结构



  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         * {
  10.             margin: 0;
  11.             padding: 0;
  12.         }
  14.         .top {
  15.             height: 50px;
  16.             background-color: gray;
  17.         }
  19.         .banner {
  20.             width: 980px;
  21.             height: 150px;
  22.             background-color: gray;
  23.             margin: 10px auto;
  24.         }
  26.         .box {
  27.             height: 300px;
  28.             width: 980px;
  29.             background-color: pink;
  30.             margin: 0 auto;
  31.         }
  33.         li {
  34.             list-style: none;
  35.         }
  37.         .box li {
  38.             float: left;
  39.             width: 237px;
  40.             height: 300px;
  41.             background-color: gray;
  42.             margin-right: 10px;
  43.         }
  45.         .box .last {
  46.             margin-right: 0;
  47.         }
  49.         /* 只要是通栏的盒子（和浏览器一样宽）不需要指定宽 */
  50.         .footer {
  51.             height: 200px;
  52.             background-color: gray;
  53.             margin-top: 10px;
  54.         }
  55.     </style>
  56. </head>
  58. <body>
  59.     <div class="top">top</div>
  60.     <div class="banner">banner</div>
  61.     <div class="box">
  62.         <ul>
  63.             <li>1</li>
  64.             <li>2</li>
  65.             <li>3</li>
  66.             <li class="last">4</li>
  67.         </ul>
  68.     </div>
  69.     <div class="footer">footer</div>
  70. </body>
  72. </html>
复制代码
2.2 浮动结构留意点


3. 清除浮动

3.1 原因



3.2 清除浮动的本质



3.3 清除浮动的方法


3.3.1 额外标签法


3.3.2 父级添加overflow


3.3.3 after 伪元素法


3.3.4 双伪元素清除浮动


3.3.5 总结


4. PS 切图

4.1 常见图片格式
4.2 图层切图

4.3 切片切图

4.4 PS 插件切图


5. 学成在线案例

准备工作

CSS 属性誊写顺序



页面结构整体思路


头部制作


HTML代码 
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>学成在线首页</title>
  8.     <link rel="stylesheet" href="style.css">
  9. </head>
  11. <body>
  12.     <!-- 1.头部区域 -->
  13.     <div class="header w">
  14.         <!-- logo部分 -->
  15.         <div class="logo">
  16.             <img src="logo.png">
  17.         </div>
  18.         <!-- 导航栏部分 nav -->
  19.         <div class="nav">
  20.             <ul>
  21.                 <li><a href="#">首页</a></li>
  22.                 <li><a href="#">课程</a></li>
  23.                 <li><a href="#">职业规划</a></li>
  24.             </ul>
  25.         </div>
  26.         <!-- 搜索框 -->
  27.         <div class="search">
  28.             <input type="text" value="输入关键词">
  29.             <button></button>
  30.         </div>
  31.         <!-- 用户模块 -->
  32.         <div class="user">
  33.             <img src="user.png" alt="">
  34.             qq-lilei
  35.         </div>
  36.     </div>
  37.     <!-- 2.banner部分 -->
  38.     <div class="banner">
  39.         <!-- 版心 -->
  40.         <div class="w">
  41.             <div class="subnav">
  42.                 <ul>
  43.                     <li><a href="#">前端开发<span>></span></a></li>
  44.                     <li><a href="#">后端开发<span>></span></a></li>
  45.                     <li><a href="#">移动开发<span>></span></a></li>
  46.                     <li><a href="#">人工智能<span>></span></a></li>
  47.                     <li><a href="#">商业预测<span>></span></a></li>
  48.                     <li><a href="#">云计算&大数据<span>></span></a></li>
  49.                     <li><a href="#">运维&测试<span>></span></a></li>
  50.                     <li><a href="#">UI设计<span>></span></a></li>
  51.                     <li><a href="#">产品<span>></span></a></li>
  52.                 </ul>
  53.             </div>
  54.             <!-- 课程表模块 -->
  55.             <div class="course">
  56.                 <h2>我的课程表</h2>
  57.                 <div class="bd">
  58.                     <ul>
  59.                         <li>
  60.                             <h4>继续学习 程序语义设计</h4>
  61.                             <p>正在学习-使用对象</p>
  62.                         </li>
  63.                         <li>
  64.                             <h4>继续学习 程序语义设计</h4>
  65.                             <p>正在学习-使用对象</p>
  66.                         </li>
  67.                         <li>
  68.                             <h4>继续学习 程序语义设计</h4>
  69.                             <p>正在学习-使用对象</p>
  70.                         </li>
  71.                     </ul>
  72.                     <a href="#" class="more">全部课程</a>
  73.                 </div>
  74.             </div>
  75.         </div>
  76.     </div>
  77.     <!-- 3.精品推荐模块 -->
  78.     <div class="goods w">
  79.         <h3>精品推荐</h3>
  80.         <ul>
  81.             <li><a href="#">JQuery</a></li>
  82.             <li><a href="#">Spark</a></li>
  83.             <li><a href="#">MySQL</a></li>
  84.             <li><a href="#">JavaWeb</a></li>
  85.             <li><a href="#">MySQL</a></li>
  86.             <li><a href="#">JavaWeb</a></li>
  87.         </ul>
  88.         <a href="#" class="mod">修改兴趣</a>
  89.     </div>
  90.     <!-- 4.box核心内容其余 -->
  91.     <div class="box w">
  92.         <div class="box-hd">
  93.             <h3>精品推荐</h3>
  94.             <a href="#">查看全部</a>
  95.         </div>
  96.         <div class="box-bd">
  97.             <ul class="clearfix">
  98.                 <li>
  99.                     <img src="pic.png" alt="">
  100.                     <h4>Think PHP 5.0 博客系统实战项目演练</h4>
  101.                     <div class="info"><span>高级</span> • 1125人在学习</div>
  102.                 </li>
  103.                 <li>
  104.                     <img src="pic.png" alt="">
  105.                     <h4>Think PHP 5.0 博客系统实战项目演练</h4>
  106.                     <div class="info"><span>高级</span> • 1125人在学习</div>
  107.                 </li>
  108.                 <li>
  109.                     <img src="pic.png" alt="">
  110.                     <h4>Think PHP 5.0 博客系统实战项目演练</h4>
  111.                     <div class="info"><span>高级</span> • 1125人在学习</div>
  112.                 </li>
  113.                 <li>
  114.                     <img src="pic.png" alt="">
  115.                     <h4>Think PHP 5.0 博客系统实战项目演练</h4>
  116.                     <div class="info"><span>高级</span> • 1125人在学习</div>
  117.                 </li>
  118.                 <li>
  119.                     <img src="pic.png" alt="">
  120.                     <h4>Think PHP 5.0 博客系统实战项目演练</h4>
  121.                     <div class="info"><span>高级</span> • 1125人在学习</div>
  122.                 </li>
  123.                 <li>
  124.                     <img src="pic.png" alt="">
  125.                     <h4>Think PHP 5.0 博客系统实战项目演练</h4>
  126.                     <div class="info"><span>高级</span> • 1125人在学习</div>
  127.                 </li>
  128.                 <li>
  129.                     <img src="pic.png" alt="">
  130.                     <h4>Think PHP 5.0 博客系统实战项目演练</h4>
  131.                     <div class="info"><span>高级</span> • 1125人在学习</div>
  132.                 </li>
  133.                 <li>
  134.                     <img src="pic.png" alt="">
  135.                     <h4>Think PHP 5.0 博客系统实战项目演练</h4>
  136.                     <div class="info"><span>高级</span> • 1125人在学习</div>
  137.                 </li>
  138.                 <li>
  139.                     <img src="pic.png" alt="">
  140.                     <h4>Think PHP 5.0 博客系统实战项目演练</h4>
  141.                     <div class="info"><span>高级</span> • 1125人在学习</div>
  142.                 </li>
  143.                 <li>
  144.                     <img src="pic.png" alt="">
  145.                     <h4>Think PHP 5.0 博客系统实战项目演练</h4>
  146.                     <div class="info"><span>高级</span> • 1125人在学习</div>
  147.                 </li>
  148.             </ul>
  149.         </div>
  150.     </div>
  151.     <!-- 5.footer 模块 -->
  152.     <div class="footer">
  153.         <div class="w">
  154.             <div class="copyright">
  155.                 <img src="logo.png" alt="">
  156.                 <p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br>
  157.                     © 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
  158.                 <a href="#" class="app">下载APP</a>
  159.             </div>
  160.             <div class="links">
  161.                 <dl>
  162.                     <dt>关于学成网</dt>
  163.                     <dd><a href="#">关于</a></dd>
  164.                     <dd><a href="#">管理团队</a></dd>
  165.                     <dd><a href="#">工作机会</a></dd>
  166.                     <dd><a href="#">客户服务</a></dd>
  167.                     <dd><a href="#">帮助</a></dd>
  168.                 </dl>
  169.                 <dl>
  170.                     <dt>关于学成网</dt>
  171.                     <dd><a href="#">关于</a></dd>
  172.                     <dd><a href="#">管理团队</a></dd>
  173.                     <dd><a href="#">工作机会</a></dd>
  174.                     <dd><a href="#">客户服务</a></dd>
  175.                     <dd><a href="#">帮助</a></dd>
  176.                 </dl>
  177.                 <dl>
  178.                     <dt>关于学成网</dt>
  179.                     <dd><a href="#">关于</a></dd>
  180.                     <dd><a href="#">管理团队</a></dd>
  181.                     <dd><a href="#">工作机会</a></dd>
  182.                     <dd><a href="#">客户服务</a></dd>
  183.                     <dd><a href="#">帮助</a></dd>
  184.                 </dl>
  185.             </div>
  186.         </div>
  187.     </div>
  188. </body>
  190. </html>
复制代码
CSS代码 
  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4. }
  6. .w {
  7.     width: 1200px;
  8.     margin: auto;
  9. }
  11. body {
  12.     background-color: #f3f5f7;
  13. }
  15. li {
  16.     list-style: none;
  17. }
  19. a {
  20.     text-decoration: none;
  21. }
  23. /* 清除浮动带来的影响 */
  24. .clearfix:before,
  25. .clearfix:after {
  26.     content: "";
  27.     display: table;
  28. }
  30. .clearfix:after {
  31.     clear: both;
  32. }
  34. .clearfix {
  35.     *zoom: 1;
  36. }
  38. .header {
  39.     height: 42px;
  40.     margin: 30px auto;
  41. }
  43. .logo {
  44.     float: left;
  45.     width: 198px;
  46.     height: 42px;
  47. }
  49. .nav {
  50.     float: left;
  51.     margin-left: 60px;
  52. }
  54. .nav ul li {
  55.     float: left;
  56.     margin: 0 15px;
  57. }
  59. .nav ul li a {
  60.     display: block;
  61.     height: 42px;
  62.     padding: 0 10px;
  63.     line-height: 42px;
  64.     font-size: 18px;
  65.     color: #050505;
  66. }
  68. .nav ul li a:hover {
  69.     border-bottom: 2px solid #00a4ff;
  70.     color: #00a4ff;
  71. }
  73. .search {
  74.     float: left;
  75.     width: 412px;
  76.     height: 42px;
  77.     margin-left: 70px;
  78. }
  80. .search input {
  81.     /* input 和button都是行内块元素，行内块元素间默认有缝隙 */
  82.     float: left;
  83.     width: 345px;
  84.     height: 40px;
  85.     border: 1px solid #00a4ff;
  86.     border-right: none;
  87.     color: #bfbfbf;
  88.     font-size: 14px;
  89.     padding-left: 15px;
  90. }
  92. .search button {
  93.     float: left;
  94.     width: 50px;
  95.     height: 42px;
  96.     /* 按钮button默认有个边框需要手动去除 */
  97.     border: 0;
  98.     background-image: url(btn.png);
  99. }
  101. .user {
  102.     float: right;
  103.     line-height: 42px;
  104.     margin-right: 30px;
  105.     font-size: 14px;
  106.     color: #666;
  107. }
  109. .banner {
  110.     height: 421px;
  111.     background-color: #1c036c;
  112. }
  114. .banner .w {
  115.     height: 421px;
  116.     background: url(banner2.png) no-repeat top center;
  117. }
  119. .subnav {
  120.     float: left;
  121.     width: 190px;
  122.     height: 421px;
  123.     background: rgba(0, 0, 0, 0.3);
  124. }
  126. .subnav ul li {
  127.     height: 45px;
  128.     line-height: 45px;
  129.     padding: 0 20px;
  130. }
  132. .subnav ul li a {
  133.     font-size: 14px;
  134.     color: #fff;
  136. }
  138. .subnav ul li a span {
  139.     float: right
  140. }
  142. .subnav ul li a:hover {
  143.     color: #00a4ff;
  144. }
  146. .course {
  147.     float: right;
  148.     width: 230px;
  149.     height: 300px;
  150.     background-color: #fff;
  151.     /* 浮动的盒子不会有外边距合并的问题 */
  152.     margin-top: 50px;
  153. }
  155. .course h2 {
  156.     height: 42px;
  157.     background-color: #9bceea;
  158.     text-align: center;
  159.     line-height: 42px;
  160.     color: #fff;
  161. }
  163. .bd {
  164.     padding: 0 20px;
  165. }
  167. .bd ul li {
  168.     padding: 14px 0;
  169.     border-bottom: 1px solid #ccc;
  170. }
  172. .bd ul li h4 {
  173.     font-size: 16px;
  174.     color: #4e4e4e;
  175. }
  177. .bd ul li p {
  178.     font-size: 12px;
  179.     color: #a5a5a5;
  180. }
  182. .bd .more {
  183.     display: block;
  184.     height: 38px;
  185.     border: 1px solid #00a4ff;
  186.     margin-top: 5px;
  187.     text-align: center;
  188.     line-height: 38px;
  189.     color: #00a4ff;
  190.     font-size: 16px;
  191.     font-weight: 700;
  192. }
  194. /* 精品推荐模块 */
  195. .goods {
  196.     height: 60px;
  197.     background-color: #fff;
  198.     margin-top: 10px;
  199.     box-shadow: 0 2px 3px 3px rgba(0, 0, 0, 0.1);
  200.     /* 行高会被继承 */
  201.     line-height: 60px;
  202. }
  204. .goods h3 {
  205.     float: left;
  206.     margin-left: 30px;
  207.     font-size: 16px;
  208.     color: #00a4ff;
  209. }
  211. .goods ul {
  212.     float: left;
  213.     margin-left: 30px;
  214. }
  216. .goods ul li {
  217.     float: left;
  218. }
  220. .goods ul li a {
  221.     padding: 0 30px;
  222.     font-size: 16px;
  223.     color: #050505;
  224.     border-left: 1px solid #ccc;
  225. }
  227. .mod {
  228.     float: right;
  229.     margin-right: 30px;
  230.     font-size: 14px;
  231.     color: #00a4ff;
  232. }
  234. .box {
  235.     margin-top: 30px;
  237. }
  239. .box-hd {
  240.     height: 45px;
  241. }
  243. .box-hd h3 {
  244.     float: left;
  245.     font-size: 20px;
  246.     color: #494949;
  247. }
  249. .box-hd a {
  250.     float: right;
  251.     font-size: 12px;
  252.     color: #a5a5a5;
  253.     margin-top: 10px;
  254.     margin-right: 30px;
  255. }
  257. .box-bd ul {
  258.     width: 1225px;
  259. }
  261. /* 让li的父亲.box-bd ul足够宽能够一行装下5个盒子则无需换行 */
  262. .box ul li {
  263.     float: left;
  264.     width: 228px;
  265.     height: 270px;
  266.     margin-right: 15px;
  267.     margin-bottom: 15px;
  268. }
  270. .box-bd ul li img {
  271.     width: 100%;
  272. }
  274. .box-bd ul li h4 {
  275.     margin: 20px 20px 20px 25px;
  276.     font-size: 14px;
  277.     color: #050505;
  278.     font-weight: 400;
  279. }
  281. .box-bd .info {
  282.     margin: 0 20px 0 25px;
  283.     font-size: 12px;
  284.     color: #999;
  285. }
  287. .box-bd .info span {
  288.     color: #ff7c2d;
  289. }
  291. .footer {
  292.     height: 415px;
  293.     background-color: #fff;
  294. }
  296. .footer .w {
  297.     padding-top: 35px;
  298. }
  300. .copyright {
  301.     float: left;
  302. }
  304. .copyright p {
  305.     font-size: 12px;
  306.     color: #666;
  307.     margin: 20px 0 15px 0;
  308. }
  310. .copyright .app {
  311.     width: 118px;
  312.     height: 33px;
  313.     border: 1px solid #00a4ff;
  314.     text-align: center;
  315.     line-height: 33px;
  316.     color: #00a4ff;
  317.     font-size: 16px;
  318. }
  320. .links {
  321.     float: right;
  322. }
  324. .links dl {
  325.     float: left;
  326.     margin-left: 100px;
  327. }
  329. .links dl dt {
  330.     font-size: 16px;
  331.     color: #333;
  332.     margin-bottom: 5px;
  333. }
  335. .links dl dd a {
  336.     color: #333;
  337.     font-size: 12px;
  338. }
复制代码




免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

慢吞云雾缓吐愁

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表