CSS浮动布局与菜单栏设计
公司周六停电，终于可以双休了。用周五空余时间再夯实一下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代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../CSS/threeLayout.css" type="text/css"/>
</head>
<body>
<header>浮动与三栏固定宽度布局</header>
<div id="wrapper">
<nav>这是导航栏</nav>
<article>这是中间栏</article>
<aside>这是右边栏</aside>
</div>
<footer>这是角标</footer>
</body>
</html>
html代码
CSS代码：
body{
text-align: center;
}
header {
background: #f00;
}
footer{
backgroud:#000;
}
nav{
width:150px;
float: left;
}
article{
width:600px;
float: left;
background: #ffed53;
}
aside{
width: 210px;
float: left;
background: #3f7ccf;
}
footer{
clear: left;
background: #000;
}
css代码
三栏-中栏流动布局/圣杯布局/双飞翼布局
三栏-中栏流动1负外边距实现
1.设计思路：一个div包围左中右三栏，一个div包围左中两栏，利用负边距实现。
“ 三栏中的右栏是 210像素宽。为了给右栏腾出空间，中栏 article 元素有一个 210 像素的右外边距。当然，光有这个外边距只能把右栏再向右推 210 像素。别急，包围左栏和中栏的两栏外包
装上 210 像素的负右外边距，会把右栏拉回 article 元素右外边距（在两栏外包装内部右侧）创造的空间内。中栏 aticle 元素的宽度是 auto，因此它仍然会力求占据浮动左栏剩余的所有空间。
可是，一方面它自己的右外边距在两栏外包装内为右栏腾出了空间，另一方面两栏外包装的负右外边距又把右栏拉到了该空间内。”————引自《CSS权威指南》
html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../CSS/threeLayout.css" type="text/css"/>
</head>
<body>
<div id="main_wrapper">
<header>浮动与三栏流动布局</header>
<div id="three_wrapper">
<div id="thow_wrapper">
<nav id="left">这是导航栏</nav>
<article id="center">这是中间栏</article>
</div>
<aside id="right">这是右边栏</aside>
</div>
<footer>这是底标</footer>
</div>
</body>
</html>
三栏流动布局
CSS:中间栏： margin-right: 210px; 包围左栏和中栏的div： margin-right: -210px;
body{
margin: ;
text-align: center;
}
header {
padding: 5px 10px;
background: #b7c19f;
height: 50px;
}
#three_wrapper{
float: left;
width: %;
}
#thow_wrapper{
float: left;
width:%;
margin-right: -210px;
}
nav{
width:150px;
float: left;
height: 50px;
background: #60ff1c;
}
article{
width:auto;
height:50px;
background: #ffed53;
margin-left: 150px;
margin-right: 210px;;
}
aside{
width: 210px;
height:50px;
float: left;
background: #3f7ccf;
}
footer{
clear: left;
background: #ff2dc9;
}
负边距实现
2利用CSS3单元格 table-cell
<body>
<header>浮动与三栏流动布局</header>
<nav id="left">这是导航栏</nav>
<article id="center">这是中间栏</article>
<aside id="right">这是右边栏</aside>
<footer>这是底标</footer>
</body>
CSS
nav{
display: table-cell;
width:150px;
height: 50px;
background: #60ff1c;
}
article{
display: table-cell;
width:%;
height:50px;
background: #ffed53;
}
aside{
display: table-cell;
width: 210px;
height:50px;
background: #3f7ccf;
}
利用display：table-cell
二、菜单栏
1纵向列表：ul li a 将链接<a>嵌入在li内部并设置display：block ，从第二个开始为<a>添加上边框
html代码
<nav class="first_nav">
<ul>
<li><a href="#">first Nav</a></li>
<li><a href="#">second Nav</a></li>
<li><a href="#">third Nav</a></li>
<li><a href="#">last Nav</a></li>
</ul>
</nav>
css代码
*{
margin:;
padding:;
}
nav{
margin: 50px;
width:150px;
}
.first_nav ul{
border:1px solid #f00;
border-radius: 3px;
padding: 5px 10px 3px;
}
.first_nav li{
list-style-type: none;
}
.first_nav li+li a{
border-top: 1px solid #f00
}
.first_nav a{
display: block;
text-decoration: none;
padding: 3px 10px;
font:20px Exo,helvetica,arial,sans-serif;
font-weight:;
color:#000;
background: #ffed53;
}
.first_nav a:hover{
color:#069;
}
2横向列表：html代码不变，使li浮动，并且强制ul包围浮动元素
CSS代码
.first_Nav a{
display: block;
padding:3px 10px;
text-decoration: none;
font: 20px Exo,helvetica,arial,sans-serif;
font-weight:;
color: #000;
background-color: #ffed53;
}
.first_Nav li+li a{
border-left: 1px solid #f00;
}
.first_Nav a:hover{
color: #069;
}
.first_Nav li{
float: left;
list-style-type: none;
}
.first_Nav ul{
overflow: hidden;
}
2下拉菜单
html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>www.jd.com</title>
<link rel="stylesheet" type="text/css" href="CSS/menu.css"/>
</head>
<body>
<nav id="jd_nav">
<li><a href="#">手机/运营商/数目</a></li>
<li><a href="#">家居/家具/厨具</a></li>
<li><a href="#">鞋靴/箱包/奢饰品</a></li>
<li><a href="#">图书、音像/电子商</a>
<ul>
<li><a href="#">少儿</a></li>
<li><a href="#">教育</a></li>
<li><a href="#">科技</a>
<ul>
<li><a href="#">计算机与互联网</a></li>
<li><a href="#">科普</a></li>
<li><a href="#">工业技术</a></li>
<li><a href="#">电子通信</a></li>
</ul>
</li>
<li><a href="#">电子书</a></li>
</ul>
</li>
</nav>
</body>
</html>
下拉菜单HTML
CSS:
/*添加视觉样式*/
#jd_nav{
font:1em helvetica,arial,sans-serif;
}
#jd_nav a{
display: block;
color:#555;
background-color: #eee;
padding:.2em 1em;
border-width: 3px;
border-color: transparent;
}
#jd_nav a:hover{
color: #fff;
background-color: #aaa;
}
#jd_nav a:active{
color:#ccc;
background: #fff;
}
/*添加功能样式*/
#jd_nav *{
margin:;
padding:;
}
#jd_nav ul{
float: left;
}
#jd_nav li{
float: left;
list-style-type: none;
/*为子菜单提供上下文*/
position: relative;
}
#jd_nav li a{
border-right-style: solid;
background-clip: padding-box;
text-decoration: none;
}
#jd_nav li :last-child a{
border-right-style: none;
}
#jd_nav li li a{
border-right-style: none;;
border-top-style: solid;
}
/*二级菜单功能样式*/
#jd_nav li ul {
width: 9em;
display: none;
position: absolute;
left:;
top:100%;
}
#jd_nav li li {
clear:left;
}
#jd_nav li li ul{
display: none;
}
#jd_nav li:hover>ul {
display: block;
}
/*三级菜单*/
#jd_nav li li ul{
position:absolute;
left:100%;
top:;
}
下拉菜单CSS
以下是一些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';}
CSS浮动布局与菜单栏设计的更多相关文章
- css浮动布局
上次我们一起对盒子模型进行了一定的了解,今天我们就对css浮动布局做一下研究.首先我们来了解一下网页基本布局的三种形式. 首先我们来了解一下什么是网页布局: 网页的布局方式其实就是指浏览器是如何对网页 ...
- css浮动布局，浮动原理，清除(闭合)浮动方法
css浮动 1.什么是浮动:在我们布局的时用到的一种技术,能够方便我们进行布局,通过让元素浮动,我们可以使元素在水平上左右移动,再通过margin属性调整位置 2.浮动的原理:使当前元素脱离普通流,相 ...
- Css - 浮动布局
Css - 浮动布局 浮动布局 float 取值:left | right | none 利用float属性可设置元素的浮动,虽然浮动主要是应用于块元素,但行内元素其实也可以浮动,但行内元素本来就是一 ...
- CSS浮动布局带来的高度塌陷以及其解决办法
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...
- css浮动布局小技巧
父元素如何围住浮动的子元素的三种办法: 一.为父元素应用overflow:hidden. overflow真正用途是防止包含元素被大的内容撑开,设定了宽度之后,包含元素将超过容器的内容减掉:而它还有另 ...
- css 浮动布局，清除浮动
浮动的特性: (1)浮动元素有左浮动(float:left)和右浮动(float:right)两种 (2)浮动的元素会向左或向右浮动,碰到父元素边界.其他元素才停下来 (3)相邻浮动的块元素可以并在一 ...
- div css float布局用法
float的应用与用法 想要知道float的用法,首先你要知道float在网页中的用处. 浮动的目的就是为了使得设置的对象脱离标准文档流. 什么是标准文档流? 网页在解析的时候,遵循于从上向下,从左向 ...
- 认识CSS中布局之文档流、浮动、定位以及叠放次序
前端之HTML,CSS(七) CSS CSS布局的核心就是盒子的摆放,即CSS定位.而CSS中定位机制分为:普通流(nomal flow).浮动(float).定位(position). 普通流 普通 ...
- 前端开发：css基础知识之盒模型以及浮动布局。
前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西? 为什么这个浮动没有效果? 这个问题楼主已经回答了n遍.今天则是把 ...
随机推荐
- （windows）mongoDB3X+Robomongo的安装与基础配置
一开始安装的时候还觉得很简单真正装了时候发现网上的资料参差不齐再次整理一份安装方法 ---------------------------------------------------------- ...
- spring 定时器Quartz
一.Quartz是什么 二. 核心接口 scheduler --- 核心调度器 Job --- 任务 JobDetail --- 任务描述 Tigger --- 触发器 三 . 核心接口之间 ...
- NHibernate系列文章二十：NHibernate关系之一对一（附程序下载）
摘要 NHibernate一对一关系虽然不经常碰到,但是在对于数据库结构优化的时候,经常会碰到一对一关系.比如,产品详细信息比较多的时候,可以把产品详细信息放到另一张表里面,Product主表只记录产 ...
- 用EXCEL内嵌的Visual Basic for Application 编程，通过 UGSimple USB-GPIB 控制器来驱动仪器34401A，并从34401A读取数据
现在市场上有很多中USB-GPIB 控制器,或叫 USB 转GPIB链接线. 每种GPIB控制器都有它的 函数库(dll库).各种GPIB 控制器的价钱插别很大.这里以一种价钱较便宜的USB-GPIB ...
- 让ztree树默认是关闭的
只需要在ztree的回调函数中加 var treeObj = $.fn.zTree.getZTreeObj("zTreeContent");treeObj.expandAll(tr ...
- Foundation ----->NSSet
1.集合类 NSString *s1 = @"zhangsan"; NSString *s2 = @"lisi"; NSString * ...
- VS有效序列号
VS2005 : KYTYH-TQKW6-VWPBQ-DKC8F-HWC4J VS2008 : PYHYP-WXB3B-B2CCM-V9DX9-VDY8T VS2010 : YCFHQ-9DWCY-D ...
- CSS3 04
animate.css库的使用 官网:https://daneden.github.io/animate.css/ 作用:将一切常见的动画直接封装,开发者不需要考虑实现过程,只需要添加对应的类就能实现 ...
- JavaScript 数组 length 属性获取数组长度或设置数组元素的数目
JavaScript 数组 length 属性 JavaScript 数组 length 属性可返回或设置或组中元素的数目,语法如下: array_object.length 利用 length 属性 ...
- iOS实现屏幕旋转
iOS实现屏幕旋转有两种方式 1. 应用本身支持 2. 手动旋转UIView (这种方式我没找到旋转 系统控件的方法 如:键盘.导航.UIAlertView) 如果你只是要把竖屏的播放器,做成支持横屏 ...