公司周六停电，终于可以双休了。用周五空余时间再夯实一下css基础，《CSS权威指南》概念性的内容看起来容易犯困，不如实践来得快，动手操作吧。

一、浮动布局

　 浮动存在问题：浮动使元素脱离文档流，导致下面的元素向上提。

　 布局存在问题：由于浮动元素宽度已设定，根据盒模型，对于有宽度的盒子添加padding border和magin导致盒子变大，从而挤出后面浮动元素，导致下移，称作“浮动移滑”。

围住浮动元素的三种方法：

　　　　1为父元素添加 overflow:hidden   强制包围浮动元素

　　　　2同时浮动父元素   后面的元素清除 clear:both

　　　　3  1、添加非浮动的清除元素 div     2、添加伪类 ： .class:after{conten:'.';display:'block';height:0;visibility:hidden;clear:both;}

　 解决“浮动移滑”方案：

　　　　1.从设定的元素宽度中减去添加的外边距，内边距和边框宽度和（一变化就容易出错）；

　　　　2.给元素添加一个div，把内容放到div中。

　　　　3 使用box-sizing:border-box  添加边距使内容收缩，而不是盒子变大。 ie6/ie7不支持。

  三栏固定宽带布局（用到浮动和清除）

　　　　HTML代码

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Title</title>
  6.      <link rel="stylesheet" href="../CSS/threeLayout.css" type="text/css"/>
  7.  </head>
  8.  <body>
  9.      <header>浮动与三栏固定宽度布局</header>
  10.      <div id="wrapper">
  11.          <nav>这是导航栏</nav>
  12.          <article>这是中间栏</article>
  13.          <aside>这是右边栏</aside>
  14.      </div>
  15.      <footer>这是角标</footer>
  16.  </body>
  17.  </html>

html代码

　　CSS代码：　　

  1.  body{
  2.      text-align: center;
  3.  }
  4.  header {
  5.      background: #f00;
  6.  }
  7.  footer{
  8.      backgroud:#000;
  9.  }
  10.  nav{
  11.      width:150px;
  12.      float: left;
  13.  }
  14.  article{
  15.      width:600px;
  16.      float: left;
  17.      background: #ffed53;
  18.  }
  19.  aside{
  20.      width: 210px;
  21.      float: left;
  22.      background: #3f7ccf;
  23.  }
  24.  footer{
  25.      clear: left;
  26.      background: #000;
  27.  }

css代码

　　三栏-中栏流动布局/圣杯布局/双飞翼布局

三栏-中栏流动1负外边距实现

　　1.设计思路：一个div包围左中右三栏，一个div包围左中两栏，利用负边距实现。

  1. “ 三栏中的右栏是 210像素宽。为了给右栏腾出空间，中栏 article 元素有一个 210 像素的右外边距。当然，光有这个外边距只能把右栏再向右推 210 像素。别急，包围左栏和中栏的两栏外包
     装上 210 像素的负右外边距，会把右栏拉回 article 元素右外边距（在两栏外包装内部右侧）创造的空间内。中栏 aticle 元素的宽度是 auto，因此它仍然会力求占据浮动左栏剩余的所有空间。
     可是，一方面它自己的右外边距在两栏外包装内为右栏腾出了空间，另一方面两栏外包装的负右外边距又把右栏拉到了该空间内。”————引自《CSS权威指南》

html代码：　

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <link rel="stylesheet" href="../CSS/threeLayout.css" type="text/css"/>
  7. </head>
  8. <body>
  9. <div id="main_wrapper">
  10.     <header>浮动与三栏流动布局</header>
  11.     <div id="three_wrapper">
  12.         <div id="thow_wrapper">
  13.             <nav id="left">这是导航栏</nav>
  14.             <article id="center">这是中间栏</article>
  15.         </div>
  16.         <aside id="right">这是右边栏</aside>
  17.     </div>
  18.     <footer>这是底标</footer>
  19. </div>
  20. </body>
  21. </html>

三栏流动布局

CSS:中间栏：  margin-right: 210px;  包围左栏和中栏的div： margin-right: -210px;　　

  1. body{
  2.     margin: ;
  3.     text-align: center;
  4. }
  5. header {
  6.     padding: 5px 10px;
  7.     background: #b7c19f;
  8.     height: 50px;
  9. }
  10. #three_wrapper{
  11.     float: left;
  12.     width: %;
  13. }
  14. #thow_wrapper{
  15.     float: left;
  16.     width:%;
  17.     margin-right: -210px;
  18. }
  19. nav{
  20.     width:150px;
  21.     float: left;
  22.     height: 50px;
  23.     background: #60ff1c;
  24. }
  25. article{
  26.     width:auto;
  27.     height:50px;
  28.     background: #ffed53;
  29.     margin-left: 150px;
  30.     margin-right: 210px;;
  31. }
  32. aside{
  33.     width: 210px;
  34.     height:50px;
  35.     float: left;
  36.     background: #3f7ccf;
  37. }
  38. footer{
  39.     clear: left;
  40.     background: #ff2dc9;
  41. }

负边距实现

2利用CSS3单元格 table-cell　

  1. <body>
  2.     <header>浮动与三栏流动布局</header>
  3.     <nav id="left">这是导航栏</nav>
  4.     <article id="center">这是中间栏</article>
  5.     <aside id="right">这是右边栏</aside>
  6.     <footer>这是底标</footer>
  7. </body>

　　CSS　　

  1.  nav{
  2.      display: table-cell;
  3.      width:150px;
  4.      height: 50px;
  5.      background: #60ff1c;
  6.  }
  7.  article{
  8.      display: table-cell;
  9.      width:%;
  10.      height:50px;
  11.      background: #ffed53;
  12.  }
  13.  aside{
  14.      display: table-cell;
  15.      width: 210px;
  16.      height:50px;
  17.      background: #3f7ccf;
  18.  }

利用display：table-cell

二、菜单栏

　　1纵向列表：ul li a   将链接<a>嵌入在li内部并设置display：block ，从第二个开始为<a>添加上边框

　　html代码

  1.     <nav class="first_nav">
  2.         <ul>
  3.             <li><a href="#">first Nav</a></li>
  4.             <li><a href="#">second Nav</a></li>
  5.             <li><a href="#">third Nav</a></li>
  6.             <li><a href="#">last Nav</a></li>
  7.         </ul>
  8.     </nav>

css代码

  1. *{
  2.     margin:;
  3.     padding:;
  4. }
  5. nav{
  6.     margin: 50px;
  7.     width:150px;
  8. }
  9. .first_nav ul{
  10.     border:1px solid #f00;
  11.     border-radius: 3px;
  12.     padding: 5px 10px 3px;
  13.   }
  14.  
  15. .first_nav li{
  16.     list-style-type: none;
  17. }
  18.  
  19. .first_nav  li+li a{
  20.     border-top: 1px solid #f00
  21. }
  22.  
  23. .first_nav a{
  24.     display: block;
  25.     text-decoration: none;
  26.     padding: 3px 10px;
  27.     font:20px Exo,helvetica,arial,sans-serif;
  28.     font-weight:;
  29.     color:#000;
  30.     background: #ffed53;
  31. }
  32. .first_nav a:hover{
  33.     color:#069;
  34. }

　　

　　2横向列表：html代码不变，使li浮动，并且强制ul包围浮动元素

　　

　　CSS代码　　

  1.  .first_Nav a{
  2.      display: block;
  3.      padding:3px 10px;
  4.      text-decoration: none;
  5.      font: 20px Exo,helvetica,arial,sans-serif;
  6.      font-weight:;
  7.      color: #000;
  8.      background-color: #ffed53;
  9.  }
  10.  .first_Nav li+li a{
  11.      border-left: 1px solid #f00;
  12.  }
  13.  .first_Nav a:hover{
  14.      color: #069;
  15.  }
  16.  .first_Nav li{
  17.      float: left;
  18.      list-style-type: none;
  19.  }
  20.  .first_Nav ul{
  21.      overflow: hidden;
  22.  }

　　2下拉菜单

html代码：

　　

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>www.jd.com</title>
  6.     <link rel="stylesheet" type="text/css" href="CSS/menu.css"/>
  7. </head>
  8. <body>
  9.     <nav id="jd_nav">
  10.         <li><a href="#">手机/运营商/数目</a></li>
  11.         <li><a href="#">家居/家具/厨具</a></li>
  12.         <li><a href="#">鞋靴/箱包/奢饰品</a></li>
  13.         <li><a href="#">图书、音像/电子商</a>
  14.             <ul>
  15.                 <li><a href="#">少儿</a></li>
  16.                 <li><a href="#">教育</a></li>
  17.                 <li><a href="#">科技</a>
  18.                     <ul>
  19.                         <li><a href="#">计算机与互联网</a></li>
  20.                         <li><a href="#">科普</a></li>
  21.                         <li><a href="#">工业技术</a></li>
  22.                         <li><a href="#">电子通信</a></li>
  23.                     </ul>
  24.                 </li>
  25.                 <li><a href="#">电子书</a></li>
  26.             </ul>
  27.         </li>
  28.     </nav>
  29. </body>
  30. </html>

下拉菜单HTML

  1.  

CSS:

  1. /*添加视觉样式*/
  2. #jd_nav{
  3.     font:1em helvetica,arial,sans-serif;
  4. }
  5. #jd_nav a{
  6.     display: block;
  7.     color:#555;
  8.     background-color: #eee;
  9.     padding:.2em 1em;
  10.     border-width: 3px;
  11.     border-color: transparent;
  12. }
  13. #jd_nav a:hover{
  14.     color: #fff;
  15.     background-color: #aaa;
  16. }
  17. #jd_nav a:active{
  18.     color:#ccc;
  19.     background: #fff;
  20. }
  21. /*添加功能样式*/
  22. #jd_nav *{
  23.     margin:;
  24.     padding:;
  25. }
  26. #jd_nav ul{
  27.     float: left;
  28. }
  29. #jd_nav li{
  30.     float: left;
  31.     list-style-type: none;
  32.     /*为子菜单提供上下文*/
  33.     position: relative;
  34. }
  35. #jd_nav li  a{
  36.     border-right-style: solid;
  37.     background-clip: padding-box;
  38.     text-decoration: none;
  39. }
  40. #jd_nav li :last-child a{
  41.     border-right-style: none;
  42. }
  43. #jd_nav li li a{
  44.     border-right-style: none;;
  45.     border-top-style: solid;
  46. }
  47. /*二级菜单功能样式*/
  48. #jd_nav li ul {
  49.     width: 9em;
  50.     display: none;
  51.     position: absolute;
  52.     left:;
  53.     top:100%;
  54. }
  55. #jd_nav li li {
  56.     clear:left;
  57. }
  58. #jd_nav li li ul{
  59.     display: none;
  60. }
  61. #jd_nav li:hover>ul {
  62.     display: block;
  63. }
  64. /*三级菜单*/
  65. #jd_nav li li ul{
  66.     position:absolute;
  67.     left:100%;
  68.     top:;
  69. }

下拉菜单CSS


  1. 以下是一些CSS选择器操作：
    CSS选择器：
    上下文选择器：
    　　标签1 标签2 {声明} -->标签1后代的标签2元素应用次样式
    子选择器
    　　标签1>标签2 {}--> 标签1的儿子元素标签2 应用样式。
    同胞选择器(兄弟选择器)
    　　紧邻同选择：
    　　　　　　标签1+标签2 {}-->标签1的紧跟的所有叫标签2的兄弟元素
    　　一般同胞选择：
    　　　　　　标签1~标签2 {}-->选择标签1的同胞标签2
    通用选择符： *          p * {color:red}    把标签p包含的所有元素的文本变成红色。
    类选择  .类名{}  id选择 #id{}  属性选择器：标签名[属性名]
    链接伪类： a:link ;    a:visited;    a:hover:   a:active
    结构化伪类：  ：first-child    :last-child     :nth-child(n)
    伪元素 
    　　 p::first-letter p段落的第一个字母
        p::first-line   p段落的第一行
     　　::before/::after  在特定元素前面/后面添加特殊内容
    　　　　　　　　　　　　 p::before{content:'age';}
  2.  

CSS浮动布局与菜单栏设计的更多相关文章

  1. css浮动布局

    上次我们一起对盒子模型进行了一定的了解,今天我们就对css浮动布局做一下研究.首先我们来了解一下网页基本布局的三种形式. 首先我们来了解一下什么是网页布局: 网页的布局方式其实就是指浏览器是如何对网页 ...

  2. css浮动布局，浮动原理，清除(闭合)浮动方法

    css浮动 1.什么是浮动:在我们布局的时用到的一种技术,能够方便我们进行布局,通过让元素浮动,我们可以使元素在水平上左右移动,再通过margin属性调整位置 2.浮动的原理:使当前元素脱离普通流,相 ...

  3. Css - 浮动布局

    Css - 浮动布局 浮动布局 float 取值:left | right | none 利用float属性可设置元素的浮动,虽然浮动主要是应用于块元素,但行内元素其实也可以浮动,但行内元素本来就是一 ...

  4. CSS浮动布局带来的高度塌陷以及其解决办法

    1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...

  5. css浮动布局小技巧

    父元素如何围住浮动的子元素的三种办法: 一.为父元素应用overflow:hidden. overflow真正用途是防止包含元素被大的内容撑开,设定了宽度之后,包含元素将超过容器的内容减掉:而它还有另 ...

  6. css 浮动布局，清除浮动

    浮动的特性: (1)浮动元素有左浮动(float:left)和右浮动(float:right)两种 (2)浮动的元素会向左或向右浮动,碰到父元素边界.其他元素才停下来 (3)相邻浮动的块元素可以并在一 ...

  7. div css float布局用法

    float的应用与用法 想要知道float的用法,首先你要知道float在网页中的用处. 浮动的目的就是为了使得设置的对象脱离标准文档流. 什么是标准文档流? 网页在解析的时候,遵循于从上向下,从左向 ...

  8. 认识CSS中布局之文档流、浮动、定位以及叠放次序

    前端之HTML,CSS(七) CSS CSS布局的核心就是盒子的摆放,即CSS定位.而CSS中定位机制分为:普通流(nomal flow).浮动(float).定位(position). 普通流 普通 ...

  9. 前端开发：css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

随机推荐

  1. Cocos2d-x-3.0 Touch事件处理机制

    在学习Cocos2d-html5游戏例子的时候,注册事件代码一直提示:TypeError: cc.Director._getInstance(...).getTouchDispatcher is no ...

  2. 巧用freemarker

    使用Freemarker宏进行可扩展式模块化编程 该文是转载而来,并非我本人所写,但是觉得真心不错,所以收藏一下 一.前言 今天的文章聊一下freemarker的一些特性:宏,我们将使用它写出一些模块 ...

  3. oracle重装系统后恢复

    前提:各种文件都存在 1.将原oracle文件夹app更名为app_old 2.重新安装oracle(路径,实例等最好都一样),配置监听,服务能正常启动,连接进入数据库 3.关掉oracle服务,将新 ...

  4. 构建最小的docker容器

    创建一个最小的基本镜像: tar cv --files-from /dev/null | sudo docker import - skycn/base 建一个hello.go: package ma ...

  5. 关于Oracle数据库字符集

    我们现在使用的字符集有以下两种: 推荐使用 AL32UTF8,避免以后数据导入导出字符集不同的麻烦. 推荐数据库设置参考图:

  6. Ninject之旅之十一：Ninject动态工厂(附程序下载)

    摘要 如果我们已经知道了一个类所有的依赖项,在我们只需要依赖项的一个实例的场景中,在类的构造函数中引入一系列的依赖项是容易的.但是有些情况,我们需要在一个类里创建依赖项的多个实例,这时候Ninject ...

  7. Oracle死锁处理

    SELECT s.username,l.OBJECT_ID,l.SESSION_ID,s.SERIAL#, l.ORACLE_USERNAME,l.OS_USER_NAME,l.PROCESS,b.O ...

  8. python常用库

    本文由 伯乐在线 - 艾凌风 翻译,Namco 校稿.未经许可,禁止转载!英文出处:vinta.欢迎加入翻译组. Awesome Python ,这又是一个 Awesome XXX 系列的资源整理,由 ...

  9. 利用循环播放dataurl的视频来防止锁屏：NoSleep.js

    mark下. 地址:http://www.open-open.com/lib/view/open1430796889882.html

  10. LinQ的增删改查

    全名:LinQ to sql类:集成化的数据访问类.会自动生成,进行数据库数据访问. LinQ的创建: 1.链接数据库:添加--添加新项--找到LINQ to SQL类--名字就叫数据库的名称就好. ...