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 ...

随机推荐

JSP 登录页面
1. index.jsp来提交请求 2. login.jsp来检查数据库数据 3. 需要注意的是,下载下来的mysql.conection jar包需要放到WEB-INF下面的lib文件夹下 jsp ...
45 Useful JavaScript Tips, Tricks and Best Practices(有用的JavaScript技巧，技巧和最佳实践)
As you know, JavaScript is the number one programming language in the world, the language of the web ...
Unity3d IOS中的IGUI控件
Unity3d IOS中的IGUI控件 @灰太龙群63438968 我讲一下IOS中用的UI,我们采用IGUI,需要使用IGUI的高版本,在Unity3d 4.2中也可以使用的! 之前IGUI有个 ...
c++ explicit
C++ explicit关键字用来修饰类的构造函数,表明该构造函数是显式的,既然有"显式"那么必然就有"隐式",那么什么是显示而什么又是隐式的呢? 如果c++类 ...
http请求方式和状态管理
1. HTTP协议 Internet的基本协议是TCP/IP协议(传输控制协议和网际协议),目前广泛使用的 FTP.HTTP(超文本传输协议).Archie Gopher都是建立在TCP/IP上面的 ...
java学习之运算符
学习完了变量+常量,现在只能简单的声明变量+赋值+打印变量. 但是程序要做的就是去处理数据,把原本散乱的数据,处理成有意义的数据,供我们来使用,这就涉及到了运算符的应用. 算数运算符常用的种类: 加法 ...
Redis Sentinel实现Failover
redis版本:2.8.17 服务器规划: 10.50.13.34(6379 master) 10.50.13.35(6379 slave) 10.50.13.36(6379 slave) 10. ...
字符串（后缀数组||SAM）：NOI2015 品酒大会
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAByIAAALuCAIAAABtq0bwAAAgAElEQVR4nOy9f2wb150vev4boESeln ...
sql server 2008有关SQL的模糊查询
执行数据库查询时,有完整查询和模糊查询之分. 一般模糊语句如下: SELECT 字段 FROM 表 WHERE 某字段 Like 条件其中关于条件,SQL提供了四种匹配模式: 1,%:表示任意0个 ...
HDU4099 Revenge of Fibonacci（高精度+Trie）
Revenge of Fibonacci Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 204800/204800 K (Java/ ...

css.day05

css.day05的更多相关文章

随机推荐

热门专题