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遍.今天则是把 ...
随机推荐
- 2016-10-17: source insight插件
使用快捷键注释,单行注释,多行注释,#if 0注释 将文件 mycomment.em点此下载放到sourceinsight的Base工程的路径下(一般是在C:\Documents and Settin ...
- CentOS6上无法启动NFS服务
CentOS6上无法启动NFS服务 1.系统环境 物理机:Windows 7(32位)旗舰版 虚拟机:CentOS 6.5 2.问题描述 安装好nfs应用程序之后,打算启动nfs服务,却出现以下的报错 ...
- 表中排序ID断开重排
客户需要排序ID和页面的问题序号一致,以前删除过一些问题导致order_id 中间有些断开的. 业务表 T_QUESTION order_id question_id custom_id --1.创 ...
- S2SH CRUD 整合
采用的框架 Struts2+Spring4+Hbiernate4. 目录结构 : EmployeeAction: package com.xx.ssh.actions; import java. ...
- ARM仿真器
ARM仿真器需要将调试换成simulator,其他JLink设置不变.否则会提示无法装载.flash文件 在keil下开发的设置
- Processing简明教程与Java平台移植方法
1 Processing 1.1 Processing简介 Processing是一种具有革命前瞻性的新兴计算机语言,它的概念是在电子艺术的环境下介绍程序语言,并将电子艺术的概 ...
- 关于C语言里指针的基本概念
C是很强大的一门语言,然而C语言的强大并不是强大在他的语法和“.h”文件,而是指针. 对指针通用的认知都是:指针是指向内存地址的一个变量.对于这句话,我是这么理解的:核心有两点,第一个是“指向内 ...
- python 面向对象和类成员和异常处理
python 面向对象 你把自己想象成一个上帝,你要创造一个星球,首先你要把它揉成一个个球,两个直径就能创造一个球 class star: '''名字(name),赤道直径(equatorial di ...
- tracert与pathping
trace route(windows命令为tracert,Linux命令为traceroute)命令可以列出本地计算机与目标计算机之间所有经过的计算机信息.可以输入目标计算机的名字(如www.bai ...
- 移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法
这两天自己在写一个手机网页,用到了触屏滑动的特效,就是往右滑动的时候左侧隐藏的菜单从左边划出来. 做完之后在手机原生浏览器中运行正常,但在QQ和微信中打开,发现touchmove只会触发一次,而且to ...