css.day05
1. 外边距合并 不是bug 而是一个特性 (以最大的那个边距为准)
两个盒子是并列关系
两个盒子 父子级关系
1. border
2.overflow:hidden;
3. padding 盒子实体 (特殊情况下也可以使用)
2. float (浮动) left right
标准流:块级自己占一行 行内可以放多个没有高和宽
脱离标准流 盒子叠放次序
清除浮动
浮动本来是一个非常好的属性,我们经常用它来进行网页排版布局,但是,浮动虽然脱离了标准流,还是会影响正常的标准流,这时候,我们需要,用到一个叫 清除浮动的属性 clear .
clear: left right both 三个属性值
其实,我们一般情况下直接 clear:both;
清除浮动 之 额外标签法
w3c组织 提倡 在最后一个标签的后面,添加一个 新的标签 里面写上 clear:both 这个语法 。 我们称之为 额外标签法。
注意: 因为left 和right 这个盒子浮动,影响了 footer ,所以在right 这个盒子后面添加新标签。
优点: 简单
缺点: 额外增加了代码
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body,div,ul,li,ol,h1,h2,h3,h4,h5,input,textarea,p{margin:0; padding:0;}
body{font-size:14px; color:#3c3c3c; font-family:Arial, Helvetica, sans-serif;}
a{text-decoration:none; color:#3c3c3c;}
a:hover{color:#f00; text-decoration:underline;}
.main{width:800px;margin:0 auto;}
.left{width:300px; height:200px; background-color:#0FF; float:left;}
.right{width:499px; height:200px; background-color:#CCC; float:right;}
.footer{height:100px; width:800px; background-color:#000; margin:0 auto}
.clear{clear:both;}
</style>
</head>
<body>
<div class="main">
<div class="left"></div>
<div class="right"></div>
<div class="clear"></div>
</div>
<div class="footer"></div>
</body>
</html>
清除浮动 之 overflow:hidden
这种方法是最简单的,一定是给大盒子加上overflow:hidden 这句话,就可以清除浮动。
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body,div,ul,li,ol,h1,h2,h3,h4,h5,input,textarea,p{margin:0; padding:0;}
body{font-size:14px; color:#3c3c3c; font-family:Arial, Helvetica, sans-serif;}
a{text-decoration:none; color:#3c3c3c;}
a:hover{color:#f00; text-decoration:underline;}
.main{width:800px;margin:0 auto; overflow:hidden;}
.left{width:300px; height:200px; background-color:#0FF; float:left;}
.right{width:499px; height:200px; background-color:#CCC; float:right;}
.footer{height:100px; width:800px; background-color:#000; margin:0 auto}
</style>
</head>
<body>
<div class="main">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="footer"></div>
</body>
</html>
优点: 最简单的一种
缺点: 里面的内容有定位 ,就引起麻烦 所以,里面子盒子如果需要定位,不太推荐使用。
清除浮动 之 伪类after
专门写一个类:(网络比较火的写法)
格式如下:
.clearfix:after{content:""; display:block; visibility:hidden; height:0; clear:both;}
.clearfix{zoom:1;} /*照顾ie6.7*/
解释: visibility:hidden 隐藏
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body,div,ul,li,ol,h1,h2,h3,h4,h5,input,textarea,p{margin:0; padding:0;}
body{font-size:14px; color:#3c3c3c; font-family:Arial, Helvetica, sans-serif;}
a{text-decoration:none; color:#3c3c3c;}
a:hover{color:#f00; text-decoration:underline;}
.main{width:800px;margin:0 auto;}
.left{width:300px; height:200px; background-color:#0FF; float:left;}
.right{width:499px; height:200px; background-color:#CCC; float:right;}
.footer{height:100px; width:800px; background-color:#000; margin:0 auto}
.clearfix:after{content:""; display:block; visibility:hidden; height:0; clear:both;}
.clearfix{zoom:1;} /*照顾ie6.7*/
</style>
</head>
<body>
<div class="main clearfix">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="footer"></div>
</body>
</html>
缺点: 写法稍微麻烦
优点: 调用方便 不会增加标签
将来可能用的比较多的 伪类 after before
代码如下:
.clearfix:after,.clearfix:before{content:"";display:table;}
.clearfix:after{clear:both;}
.clearfix{zoom:1;}
这种方法要求: 现在大家了解,如果以后看到这种写法,要知道是清除浮动。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body,div,ul,li,ol,h1,h2,h3,h4,h5,input,textarea,p{margin:0; padding:0;}
body{font-size:14px; color:#3c3c3c; font-family:Arial, Helvetica, sans-serif;}
a{text-decoration:none; color:#3c3c3c;}
a:hover{color:#f00; text-decoration:underline;}
.main{width:800px;margin:0 auto;}
.left{width:300px; height:200px; background-color:#0FF; float:left;}
.right{width:499px; height:200px; background-color:#CCC; float:right;}
.footer{height:100px; width:800px; background-color:#000; margin:0 auto}
.clearfix:after,.clearfix:before{content:"";display:table;}
.clearfix:after{clear:both;}
.clearfix{zoom:1;}
</style>
</head>
<body>
<div class="main clearfix">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="footer"></div>
</body>
</html>
overflow:hidden 作用 (溢出隐藏)
可以调整兼容性 (清除浮动)
一个大盒子,里面放着两个小盒子,这是典型的标准流的写法,这个父盒子可以不用指定高度,因为,小盒子可以给大盒子撑开,但是,如果这两个小盒子浮动了,脱离了标准流,浮起来,这时候,两个小盒子就不再是标准流,那么,父盒子就检测不到里面的内容。这个父盒子就会变成一条线。我们可以用overflow:hidden 检测复合内部内容。
overflow:hidden 常用的第一种用法: 检测内部高度。
溢出隐藏(overflow:hidden) 可以切割多余的内容
overflow:visible; 超出的部分显示
overflow:hidden 超出的部分隐藏
overflow:scroll 有事没事显示滚动条(不管超出还是不超出)
overflow:auto 超出就有滚动条,不超出就没有滚动条
隐藏元素
我们在页面中,经常会把一些元素 显示出来,或者隐藏起来。
display 显示元素
display :block inline inline-block none;
display:none 隐藏元素
visibility:hidden 隐藏元素
也可以隐藏元素。
两者的区别
占位
它们两个最本质的区别就是:
visibility:hidden 虽然是隐藏的,但是还是占有自己位置
而 display:none 隐藏的同时,不占位置。
定位(position)
我们网页布局方法:
1. 标准流 (最稳定)
2. 浮动流 (float 其次)
3. 定位流 ( 稳定性最后)
定位是完全脱离标准流的一种布局方式。
定位的分类:
1.绝对定位 absolute
position:absolute;
定位和方位名词一起使用:
left top right bottom
position:absolute; top:20px;
绝对定位是以浏览器左上角为原点(0.0)
绝对定位不占位置
2.相对定位 (relative)
position:relative
1.相对定位是占位置的。
2.相对定位是以自己左上角为原点
3.叠放次序:
z-index: 数值;
数值越大 盒子越靠上 需要注意:数值后面一定不能加单位.
.one{z-index:10;}
注意:
如果父盒子是 绝对定位 ,子盒子也是绝对定位,那么,子盒子会以父盒子的左上角为原点。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.father{width:200px; height:200px; position:absolute; top:20px; left:20px; background-color:#966;}
.son{width:100px; height:100px; background-color:#096; position:absolute; top:0; left:0;}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
如果父盒子是 相对定位 ,子盒子也是绝对定位,那么,子盒子会以父盒子的左上角为原点。
平时我们定位网页布局: 父级相对 子级绝对 (父相子绝)
更改鼠标样式:
cursor:pointer;
鼠标样式:
.ani .cur
html{cursor:url(horse.ani);}
注意:更换鼠标样式ie支持的好,火狐之类的不支持。
cursor:pointer; 所有的浏览器都支持 鼠标变成 小手
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body,div,ul,li,ol,h1,h2,h3,h4,h5,input,textarea,p,dl,dd,dt{margin:0; padding:0;}
body{font-size:14px; color:#3c3c3c; font-family:Arial, Helvetica, sans-serif;}
a{text-decoration:none; color:#3c3c3c;}
a:hover{text-decoration:underline;}
ul{list-style:none;}
.view{width:998px; height:190px; margin:50px auto; border:1px solid #D2E1F1;border-top:1px solid #458FCE; position:relative;}
.view dt{height:30px; background-color:#F6F9FE;}
.view dt a{color:#458fce; font-size:14px;padding:7px 0 0 12px;display:block; width:70px;}
.view dd {padding:20px 43px 0;}
.view dd li{float:left; margin-right:28px; text-align:center;}
.view dd li p{padding-top:8px;}
.view dd li a{font-size:12px;}
.view dd li a:hover{color:#f00;}
.view .nomargin{margin-right:0;}
.left{width:11px; height:20px; background:url(icon_r1_c1.png) no-repeat; display:block; position:absolute; top:90px; left:18px;}
.left:hover{background:url(icon_r1_c5.png) no-repeat;}
.right{background:url(icon_r1_c3.png) no-repeat; width:11px; height:20px; display:block; position:absolute; top:90px; right:18px;}
</style>
</head>
<body>
<dl class="view">
<dt><h2><a href="#">视觉焦点</a></h2></dt>
<dd>
<a href="#" class="left"></a>
<ul>
<li>
<img src="01.jpg" />
<p><a href="#">泰国北部发生地震</a></p>
</li>
<li>
<img src="01.jpg" />
<p><a href="#">泰国北部发生地震</a></p>
</li>
<li>
<img src="01.jpg" />
<p><a href="#">泰国北部发生地震</a></p>
</li>
<li>
<img src="01.jpg" />
<p><a href="#">泰国北部发生地震</a></p>
</li>
<li class="nomargin">
<img src="01.jpg" />
<p><a href="#">泰国北部发生地震</a></p>
</li>
</ul>
<a href="#" class="right"></a> </dd>
</dl>
</body>
</html>
转载请备注。
css.day05的更多相关文章
- 2020年12月-第02阶段-前端基础-CSS Day05
CSS Day05 1. 学成在线页面制作 理解 能够说写单页面我们基本的流程 能说出常见的css初始化语句 能说出我们CSS属性书写顺序 应用 能利用ps切图 能引入外部样式表 能把psd文件转换为 ...
- HTML+CSS Day05 基本CSS选择器、复合CSS选择器与CSS继承性
1.基本CSS选择器 (1)标记选择器 <style> h1{ color:red; font-size:25px;} &l ...
- Matplotlib数据可视化(3):文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- 【day05】css
一.盒模型(BoxModel) 1.width 宽度 2.height 高度 说明: 块元素和有宽高属性的标记(img,input) 能设置宽度和高度,而行元素不能设置宽高 3 ...
- day05 Servlet 开发和 ServletConfig 与 ServletContext 对象
day05 Servlet 开发和 ServletConfig 与 ServletContext 对象 1. Servlet 开发入门 - hello world 2. Servlet 的调用过程和生 ...
- JavaWeb(HTML +css+js+Servlet....)
注意 1.不要把函数命名为add(),不然容易和自带的冲突报错 2.是createElement 不要把create中的e写掉了 3.记得是getElementsByTaxName和getElemen ...
- 超全面的JavaWeb笔记day05<xml&dtd&jaxp>
0.表单提交方式(*****) button提交 超链接提交 事件 1.xml简介和应用(了解) 2.xml文档声明和乱码解决(*****) 文档声明 必须放在第一行第一列 设置xml编码和保存编码一 ...
- Day05 xml详解
day05总结 今日内容 XML语法 XML约束之DTD XML解析器介绍 XML解析之JAXP( DOM.SAX ) DOM4J Schema 一.XML语法 XML概述 1 什么是XML ...
- Day05 - Flex 实现可伸缩的图片墙 中文指南
Day05 - Flex 实现可伸缩的图片墙 中文指南 作者:liyuechun 简介:JavaScript30 是 Wes Bos 推出的一个 30 天挑战.项目免费提供了 30 个视频教程.30 ...
随机推荐
- 最新iOS 6 in Xcode4.5新特性——Storyboard和属性自动绑定
最新iOS 6 in Xcode4.5新特性编程之二(上)——Storyboard和属性自动绑定 从Xcode 4.3开始,Storyboard 就是iOS 5和iOS 6中令人兴奋的一个新特性,他将 ...
- springtest+juint开发测试如下:
项目结构目录如下: UserMapper.java 为接口文件.User 为实体类.UserMapper.xml 为对应mybatis的xml文件.test为对应的测试包 applicationtes ...
- BZOJ 3575 道路堵塞
Description A国有N座城市,依次标为1到N.同时,在这N座城市间有M条单向道路,每条道路的长度是一个正整数.现在,A国交通部指定了一条从城市1到城市N的路径,并且保证这条路径的长度是所有从 ...
- Sublime text 2 快捷键配置文件
分屏快捷键 command+alt+2(就是view菜单中layout后跟数字,有1234,快捷键都带有提示符) 格式化快捷键 ctrl+alt+f 这里提到一个和sublime无关的..comman ...
- exceptions.IOError: decoder jpeg not available
1.确保安装PIL所需的系统库 yum -y install zlib yum -y install zlib-devel yum -y install libjpeg yum -y install ...
- Dollars
uva147: 题意:给你几种钱币,在给你一个钱的数目,问有多少种用这些钱来组成这个数目. 题解:完全背包,不过此时要把钱的数目*100,因为是小数,背包的容量都是整数,然后dp,求出每个容量的数目即 ...
- hdu 5144 NPY and shot
http://acm.hdu.edu.cn/showproblem.php?pid=5144 题意:给你初始的高度和速度,然后让你求出水平的最远距离. 思路:三分枚举角度,然后根据公式求出水平距离. ...
- A Simple problem
http://acm.sdut.edu.cn/sdutoj/problem.php?action=showproblem&problemid=2497 题意:给出顶点数,边数及节点s,判断s是 ...
- Javascript面向对象编程(二):构造函数的继承 by 阮一峰
今天要介绍的是,对象之间的"继承"的五种方法. 比如,现在有一个"动物"对象的构造函数. function Animal(){ this.species = & ...
- 【转】Java中字符串中子串的查找共有四种方法(indexof())
原文网址:http://wfly2004.blog.163.com/blog/static/1176427201032692927349/ Java中字符串中子串的查找共有四种方法,如下:1.int ...