一、html元素的理解
html元素,也叫html标签,是用来改变网页结构的作用。也就是说“标记”的作用 :就是通过给内容添加标签来创建元素的过程。
html标签写法注意点:
01.HTML 标签以 < 开头,以 > 结束,比如表示段落文本的 <p>。
02.标签一般都成对出现,一个开始标签和一个结束标签就在文档中创建了一个元素。
03.结束标签用一个斜杠表示元素的关闭或结束,比如 </p>。
如果要标记一个段落元素,那么可以像下面这样写:
<p>这还是一个段落,段落的标记是p.</p>
有些元素是可以嵌套的。比如,可以使用 em 元素为文本增加强调的语义。
<p>java知识, <em>乐之者java</em> 都是用心在写教程.</p>
嵌套元素在文档中会形成层次。对上面的例子而言,em 就是 p 的子元素,因为它被p 包含着。 (相应地,p 是 em 的父元素。 )
在元素相互嵌套的时候,子元素不能超出父元素之外,因为这样就会破坏层次,比如:
<p>This could cause <em>unexpected</p>
<p>results</em>, and is best avoided.</p>
像上面这样胡乱交叉嵌套就不对了。
有些标签永远不会成对出现,比如指向一张图片的 img。虽然 HTML5 不再强制要求,但你经常也会看到这种标签的自关闭写法,也就是在末尾的 > 之前加一个斜杠:
<img src="photo.jpg" />
HTML5 之后,这种自关闭的标签就变成了可选的,因此下面的代码跟前面的代码功能一样:
<img src="photo.jpg">
二、html的属性是什么?
任何 HTML 元素都具有与众不同的属性,就像千人千面,各不相同。如何为html指定属性呢,形式如下(在开始标签中):
< 标签名 属性=" 值"></标签名>
属性名后面是等于号,然后是放在双引号中的属性值(也可以放在单引号中),注意是英文状态的引号。
不同的元素拥有不同的属性。比如,a 是一个链接元素,有 href 属性,这个属性的值就是链接的 URL。 (href 是 HTTP reference 的简写。 )
<a href="http://www.roadjava.com/">乐之者java</a>
有些属性可以指定给任何元素,比如 class 和 id,即html元素可以拥有相同的属性,因为这些属性是公共的。
class 和 id 是最有用的两个属性,因为通过它们可以找到特定的内容。而且,CSS和 JavaScript 代码也依赖它们定位元素。
id,见名知意,就是标识符的意思,每个元素只能有一个 ID,而且同一个 ID值 在整个页面中也只能出现一次。
三、html注释的写法
随着代码越来越多,越来越复杂,最好的做法是添加注释。注释就是你描述代码用途和实现方式的一些备注。如果你跟我一样,几个星期之后才会重新看一看代码,那很可能早就忘了以前是怎么想的了。注释就能起到提醒的作用,在未来给你提供一个向导。
HTML 中的注释是这样来写的:
<!-- 这里是注释的内容 -->
位于 <!-- 和 --> 之间的内容都会被浏览器忽略掉。
注释的作用:
再回首,不至于恍然如梦,注释给你的作用就是提醒。
注释掉一些不执行的代码,让放在注释里面的代码不再执行。
四、dom的层次结构
DOM(Document Object Model,文档对象模型)指的是 HTML 标签的层次结构。每一对 HTML 标签(有时候则是一个标签,即单标签,例如img,br等)都是一个元素,对这些元素,我们一般用拟人化的方法来称呼它们,比如:父元素、子元素、同胞元素、祖先元素和后代元素。
举个例子,对下面的 HTML 来说:
<html>
<body>
<h1>Breaking News</h1>
<p></p>
</body>
</html>
body 是其子元素 h1 和 p 的父元素,而 h1 和 p 则互为同胞元素。页面中的所有元素都是 html 的后代元素。
浏览器通过解析 DOM 来操作页面内容,因为dom的结构看起来像一个树,因此我们也称这个解析的过程为“渲染dom树”。编码的人员在实现可视化时,最关心的是DOM。因为我们的代码必须在 DOM 层次中寻找元素,然后为它们应用样式和行为。
dom并不是单单只有html中才有的概念,xml中也有dom的概念,dom是w3c制定的一个标准,供遵守它的语言来实现。
五、css3中的单位vh
vh:即viewport height,指的是视口高度,所谓视口,就是你浏览器可视区域的大小(浏览器的高度-地址栏高度-书签栏高度),这里vh的作用是相对于视口的高度,视口高度总被平分为100个单位来计算。比如
font-size:8vh
如果视口高度是800px,800/100=8px(8px即此时视口1个单位的高度),font-size就应该是8*8px=64px。
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>布局</title>
<style>
div{
width:100px;
height:100px;
background: red;
}
section{
width:50px;
height: 100vh;
background: green;
}
</style>
</head>
<body>
<div>
<section></section>
</div>
</body>
</html>
因为section的高度为100vh,即section的高度应该是充满视口,如下:
六、css里的长度单位rem和em
rem是什么?
rem是css3中新增加的一个单位属性,根据页面的根节点的字体大小((font size of the root element))进行转变的单位。root或者叫做根节点指的什么?就是html标签。也就是说一个页面里面的rem是多少px,是由html标签上的font-size属性来定的。rem的初始值是16px,也就是说在没有设置根节点的font-size的时候,1rem=16px
例:(下面例子中的根节点是html ,它的字体大小是100px,所以根节点下面的元素(儿子元素或者所有的后台元素)所设置的rem都是根据100px来计算的,比如1rem即时100px,0.45rem就是45px咯。)
<html>
<head>
<style>
html,body{ font-size: 100px; }
div{
background:red;
width:1rem;
height:0.45rem;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
页面显示效果如下:
em是什么?
em也是一个相对单位,em单位是根据父元素的字体大小来进行转变的单位。
-
em的值并不是固定的;
-
em会继承父级元素的字体大小。
例,下面的例子中因为父元素的字体大小是100px,所以子元素的1em就是父元素的字体大小,即100px了:
<section style="font-size:100px;">
<div style="height:1em;width:1em;"></div>//所以子元素的em是1em=100px;
</section >
rem与em的区别与联系:
rem和em都是根据font-size字体大小来计算本身在本页面所代表的长度大小的。
rem的参照物是html标签的font-size,如果参照物没有设置font-size,那么默认就是16px.
em的参照物是父标签的font-size,如果参照物没有设置font-size,那么默认就是16px.
七、CSS盒子模型
css处理网页时,认为每个元素都包含在一个不可见的盒子里。
区分几个概念:
1.内容的宽度和高度:width/height
2.元素的宽度和高度:
宽度=左border+左padding+width+右padding+右border
3.元素空间的宽度和高度:
宽度=左margin+左border+左padding+width +右padding+右border +右margin
子元素都是放在内容区的,我们通过width和height属性设置的就是内容区的宽与高。那么这个width和height是不是所有的html标签都可以直接设置宽高值呢?
不是的。
css中元素被分为3种:
块级元素=所有容器级别标签+文本级别里的p
行内块级元素=文本级别里的img
行内元素=其余的(去掉p和img)文本级别标签
注意:在dom标准流中,块级元素或者行内块级元素才能直接设置宽高,行内元素需要转化为块级或者行内块级之后才能设置width和height。
八、块级元素、行内块级元素、行内元素之间的相互转化
块级元素、行内块级元素、行内元素之间的相互转化是通过css的display属性来完成的。
行内元素虽然直接设置宽高后是没有效果的,但是可以通过display来修改元素的显示模式。
display
可选值:
--block
--inline
--inline-block
--none:被设置为none的元素将不显示,而且不再占有页面的空间,这点与visibility是不同的。
visibility
可选值:
--visible
--hidden:与display不同,还会占据空间
九、css的overflow
overflow:规定了当内容溢出元素框时发生的事情
当标签的内容超出定义的宽度和高度时,浏览器会让内容溢出盒子。为了不让内容溢出盒子等奇怪现象发生,可以使用overflow。overflow也可以使用overflow-x和overflow-y来进行分别的控制。
可选值:
--visible:默认值,内容不会被修剪,会呈现在元素框之外。
--hidden:内容会被修剪,并且其余内容是不可见的。
--scroll:不论是否需要,浏览器都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也会出现滚动条。
--auto:如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容,就是让浏览器自己选择如何来处理。
如下面的例子:
<html>
<head>
<style type="text/css">
div
{
background-color:blue;
width:150px;
height:150px;
overflow: scroll;
}
</style>
</head>
<body>
<div>
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制。因此,有
可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。
</div>
</body>
</html>
十、内边距(边内补白)padding
内边距(边内补白)
语法:
padding:上 [右] [下] [左]
另外css中也提供了padding-top、padding-right、padding-bottom、padding-left以便进行分别控制,会让元素看起来更宽、更高。
举几个例子:
padding:5px,表示上、→、下、左内边距都是5px。
padding:1px 2px,表示上下padding为1px,左右为2px.
padding:1px 2px 3px,表示padding-top为1px,padding-right和padding-left为2px,padding-bottom为3px.
另外,说一个跟padding有关的css属性,box-sizing
box-sizing:border-box,表示的是这样的一个意思:
div
{
background-color:blue;
width:150px;
height:150px;
padding :1px 2px 3px 4px;
}
当你设置了div的width和height,又设置了其padding之后,这个div的元素的宽度和高度就增大了,比如其元素宽度就变为了150+2+4=156px,这个元素因为设置了padding的缘故占据的空间也会增大,可能导致布局的错乱,这个时候设置div的box-sizing为border-box之后,就可以让div占据的空间不变的同时又有你设置的padding,其实说白了“box-sizing:border-box”作用就是自动缩减你设置的width和height的作用。
十一、css的boder属性
边框border
语法:
border:[border-width] border-style [border-color],例:border:1px solid black;
注意:
同样,css中也提供了border-top[-width/-style/-color]、border-right[-width/-style/-color]、border-bottom[-width/-style/-color]、border-left[-width/-style/-color]以便进行分别控制每个方位的边框宽度、样式、颜色。
boder-style的可用取值如下图所示,常用的我用红框标记了出来:
input表单元素的边框消除:消除input边框:outline:none;
十二、margin属性
外边距
语法:
margin:上 [右] [下] [左]
另外css中也提供了margin-top、margin-right、margin-bottom、margin-left以便进行分别控制。
注意:margin:0 auto使元素居中。使用margin需要提防外边距垂直方向的塌陷(合并)现象
十二、css reset
css中有些设置可能是项目中通用的设置,比如img去掉边框,body,html设置padding和margin为0,字体font的统一风格的设定,一般我们在新开一个项目的时候会有个reset.css或者common.css就是用来做这种事情的,这些东西也不需要你自己写,因为你自己可能也想不了这么全面,以前比较早的时候用的都是yui的css reset,就是来做这个事情。
不过,现在很多框架都自己带了这些初始化reset的内容,我们也不需要太关心了,但是这个道理还是要知道的。
举几个reset的例子,来看看这些reset里面都reset了些什么。
内外边距:
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;
padding:0}
设置字体:
body{font-family:'微软雅黑';font-size:13px;color:#000;backgroud:#fff;}
a{text-decoration: none;}
使不具备继承特性的标签具有继承:
a,input,select,textarea{color:inherit;font-family:inherit;font-size:inherit;}
img{
border:0 none;/*ie里面是none*/
}
十三、网页排版方式以及float应该注意的问题
网页的排版方式无非就三种:
1.标准流:网页中默认的布局方式
块级元素
行内元素
行内块级元素
2.浮动流:把网页自上而下分成一行行的话,元素默认会自上而下自左向右地排列,这种现象就称为文档流。但是一个块级元素总是占据了一行的位置,为了能在网页上面的一行布局多个块级元素,就出现了浮动。浮动是常见的一种网页排版方式。css通过float来实现元素的浮动。
float的可用值:
--left
--right
注意点:
被float的元素不区分css的3种元素类别(width和height设置了都可以生效)
浮动的规则
浮动的逻辑过程
浮动停靠现象
浮动字围现象
浮动引发的高度问题
3.定位流(局部):css中通过position来实现定位。
十四、float浮动应该注意的几个问题解析
上篇教程列出了浮动应该注意的几个问题,这篇教程来看看这几个问题具体该怎么理解。
float浮动的规则:
同方向浮动的先后顺序:后浮动的找先浮动的
不同方向浮动的寻找规则:各自往各自的方向去找先浮动的
半脱离标准流:浮动后的位置跟浮动前的位置有关
浮动的逻辑过程:
浮动元素脱标(脱离文档标准流),其他元素整体来填坑,浮动元素根据其脱标前的位置(这就是前边说半脱离标准流的原因)浮动。红色的字怎么理解呢?
拿上面这个图来说,如果设置div2浮动float:right,div2会float到当前行的最右边,而不会float到div1或者div3所在的行,为什么?这就是红色字说的浮动会“根据其脱标前的位置”进行浮动。
浮动的停靠现象:
父元素中,一行不足以容纳浮动元素的时候,浮动元素会往下一行停靠,如下示意图:
举个例子,有如下html代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.first{
width:400px;
height:400px;
background:red;
}
.second{
width:100px;
height:100px;
background:green;
float:left;
}
.third{
width:200px;
height:200px;
background:yellow;
float:right;
}
.four{
/*width:101px;
height:101px;*/
width:201px;
height:201px;
background:pink;
float:right;
}
</style>
</head>
<body>
<div class="first">
<div class="second"></div>
<div class="third"></div>
<div class="four"></div>
</div>
</body>
</html>
根据浮动停靠的原则,显示的结果如下我们就能很好的理解了:
浮动的字围现象:
浮动的元素并不会覆盖文字,文字反而会围在浮动元素的周围。
举个例子,有如下的html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
img{
float:left;
}
.inner{
width:300px;
height:300px;
background:red;
}
</style>
</head>
<body>
<div>
<img src="wine.jpg">
750ml*6瓶,一喝就醉!!葡萄美酒夜光杯,欲饮琵琶马上催。醉卧沙场君莫笑,古来征战几人回。
<div class="inner">
123文字文字 文字文字 文字文字 文字文字 文字文字 文字文字
文字文字 文字文字
文字文字 文字文字 文字文字 文字文字 文字文字 文字文字
文字文字 文字文字 文字文字 文字文字
</div>
</div>
</body>
</html>
根据浮动的字围现象,很好的可以理解页面显示如下:
十五、浮动练习之ul实现导航条
float浮动练习之ul实现导航条,案例最终效果如下:
怎么实现的呢,下面是实现的html代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>02-ul练习导航条</title>
<style>
</style>
</head>
<body>
<ul>
<li>网页</li>
<li>知道</li>
<li>文库</li>
<li>新闻</li>
<li>贴吧</li>
<li>音乐</li>
<li>金融</li>
</ul>
</body>
</html>
下面是控制float的css代码:
*{
margin:0;
padding:0;
}
ul{
list-style:none;
width:710px;
height:50px;
background:#ccc;
margin:0 auto;
margin-top:100px;
font-weight:bold;
}
ul li{
float:left;
width:100px;
line-height:50px;
text-align:center;
border-right:1px solid rgba(0,0,0,0.6);
}
ul li:nth-child(3){
background:skyblue;
}
ul li:last-child{
border-right:0;
}
十六、浮动练习之图文混排
这次分享的“浮动练习之图文混排”这个案例做完后的效果是这样的:
这里用到的知识点是float浮动的字围现象。
代码如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>练习图文混排</title>
<style>
*{
margin:0;
padding:0;
}
body{
background-color:#eee;
}
dl{
width:400px;
height:150px;
background-color:#fff;
margin:10px auto
}
dl dt{
float:left;
}
dl dt img{
width:150px;
height:150px;
}
dl dd{
width:250px;
height:150px;
float:right;
}
dl dd h3{
line-height:50px;
color:green;
margin:0 10px;
font-size:16px;
}
dl dd p{
line-height:24px;
color:#000;
margin:0 10px;
font-size:12px;
}
</style>
</head>
<body>
<dl>
<dt><img src="wine.jpg"/></dt>
<dd>
<h3>葡萄酒</h3>
<p>750ml*6瓶,一喝就醉!!葡萄美酒夜光杯,欲饮琵琶马上催。醉卧沙场君莫笑,古来征战几人回。</p>
</dd>
</dl>
</body>
</html>
十七、浮动的清除
html元素不浮动且不设置宽高的情况下,块级元素宽度都是一行,高度自动包裹内容;行内元素宽高都是自动包裹。
浮动会引发的高度问题,如下分析:
1.子元素float(或者绝对定位)之后且没有设置父元素(不浮动)宽高的情况下,那么父元素宽高都为0,所以才有浮动的清除。
2.父元素浮动后,里面的子元素不浮动,那么父元素的宽高都是自动包裹子元素,因为父元素浮动了,下面的元素会顶上来,所以这个时候也要清除浮动。
针对上面float引发的高度问题,css里面通过clear来清除浮动。
clear
可选值
--left
--right
--both
清除浮动的方法:
1、设置高度
2、给后边的盒子添加clear以及解决父元素一起下来的问题
3、外墙法
4、内墙法
5、伪元素选择器
6、给前面浮动的元素设置overflow:hidden
我把这六种清除浮动的方法都写在一个html中,大家看注释就行了,就不单独一个个的分开写了,太累了。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>清除浮动的方法</title>
<style>
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,
blockquote,th,td{margin:0;padding:0}
body{
background:#efefef;
/* border:1px solid;*/
}
.box1{
background:red;
/*清除浮动方法1:要想让box2的p不跟box1里面的p浮动后在一行,就要给box1设置高度*/
/*height:20px;*/
/*清除浮动方法6:给box1设置overflow属性*/
overflow:hidden;
}
.box2{
/*
清除浮动方法2:给后边的盒子添加clear
none:默认,左边找左边,右边找右边
left:左边的不再找左边
right:右边不找右边
both:两边都不找
加入clear的盒子margin-top失效,因为margin-top的对象box1已经没有高度了,这时对象就变成body,
body是box2的父容器,
父容器没有边框会一起下来(这种现象除了设置边框还可以通过给父元素设置overflow:hidden来解决),
可以给body加边框演示
*/
/* clear:both;*/
background:blue;
/*margin-top:50px;*/
}
p{
width:100px;
background:yellow;
float:left;
}
.outWall{
clear:both;
}
.h20{
height:20px;
}
.innerWall{
clear:both;
}
/*清除浮动方法5:采用伪元素选择器,本质上跟内墙法一样。
height:0;设置宽高不起作用因为没有设置display
visibility:hidden;让添加的内容不可见*/
/*.box1::after{
content:"";
height:0;
display:block;
visibility:hidden;
clear:both;
}*/
/*让伪元素选择支持ie6*/
.box1{
*zoom:1;
}
</style>
</head>
<body>
<div class="box1">
<p>我是段落1</p>
<p>我是段落1</p>
<p>我是段落1</p>
<!--清除浮动方法4:内墙法:写在第一个浮动元素容器所有浮动元素的最后边。box2的margin-top有效了,
box1的margin-bottom有效,
这时候设置margin一般使用innerWall这个div的高度-->
<!--<div class="innerWall h20"></div>-->
</div>
<!--清除浮动方法3:外墙法:写在两个浮动元素容器的中间。box2的margin-top有效了,box1的margin-bottom无效,
这时候设置margin一般使用outWall这个div的高度-->
<!--<div class="outWall h20"></div>-->
<div class="box2">
<p>我是段落2</p>
<p>我是段落2</p>
<p>我是段落2</p>
</div>
</body>
</html>
页面效果如下:
十八、css属性定位属性position介绍与z-index属性
position
可选值
--relative
--absolute
--fixed
相对定位relative:
相对于元素在标准流里的位置进行移动,不脱离标准流,周围的元素完全不受影响,区分css的3种元素类型,position:relative开始相对定位,使用top、right、bottom、left进行控制位置,如果不设置,即便开启了相对定位元素位置也不受影响。相对定位的元素层级提升,可以覆盖文本流中的其他元素了。方位词top、right、bottom、left取值百分比的时候针对的是父元素的百分比
绝对定位absolute:
绝对定位默认相对于body为参考点,如果祖先元素也是定位流(相对/绝对/固定),那么绝对定位的元素参考点就是它的祖先元素,脱标,不区分css的3种元素类型(直接设置宽高就生效,没必要再通过display转化之后再设置宽高),如果同时有多个祖先元素是定位流(相对/绝对/固定),那么绝对定位的元素参考点就是离他最近的祖先元素。
position:absolute开始相对定位,使用top、right、bottom、left进行控制位置,如果不设置,即便开启了绝对定位元素位置也不受影响。方位词top、right、bottom、left取值百分比的时候针对的是父元素的百分比。
固定定位fixed:
固定定位的元素被锁定在屏幕的某个位置上,不随页面的滚动而滚动。脱标,不区分css的3种元素类型(直接设置宽高就生效,没必要再display),position:fixed开始相对定位,使用top、right、bottom、left进行控制位置,如果不设置,即便开启了固定定位元素位置也不受影响。
z-index
当元素开启定位以后就才可以使用该属性,用于指定元素的层级,值越大层级越高,越显示在上层,如z-index:999。
css position属性的语法格式:
position:static | absolute|relative | fixed | sticky
默认值:static
适用于:除display属性定义为table-column-group | table-column之外的一切元素
继承性:无
功能说明:
position属性用于指定一个元素在文档中的定位方式
当position的值为非static时,其层叠级别通过z-index属性定义。当position取值为absolute的时候,如果四个偏移属性top,right,bottom,left都没有设置,那么该元素会紧随在其前面的兄弟元素之后,但在位置上不影响常规流中的任何元素。
static | absolute|relative | fixed | sticky取值含义解释:
static:被static修饰的html对象遵循着标准流。此时4个定位偏移属性(即:top,right,bottom,left)不会起作用。
relative:被relative修饰的html对象依旧遵循标准文档流,并且参照自身在常规流中的位置通过top,right,bottom,left这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。
absolute:对象脱离标准流,此时偏移属性参照的是离自身最近的定位祖先元素,如果没有定位的祖先元素,则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素,其margin不与其他任何margin折叠。
fixed:与absolute一致,但偏移定位是以窗口为参考。当出现滚动条时,对象不会随着滚动。
sticky:这个是css3中新增的一个属性,对象在常态时遵循常规流。它就像是relative和fixed的合体,当在屏幕中时按常规流排版,当卷动到屏幕外时则表现如fixed。该属性的表现是现实中有时会见到的吸附效果。
举个小例子:
需求:如何让一个div在水平方向和垂直方向都居中?
<!DOCTYPE html> <html> <head> <title>div在水平方向和垂直方向都居中</title> <meta charset="utf-8"> <style> #div { position: absolute; top: 50%; left: 50%; width: 150px; height: 40px; margin: -20px 0 0 -75px; padding: 0 10px; background: rgb(255,100,50); line-height: 2.5; text-align:center; } </style> </head> <body> <div id="div">水平、垂直都居中</div> </body> </html>
效果如图:
十九、定位position练习之导航条
上篇文章介绍了一下css中的position定位属性,一般在开发中,我们使用最多的就是子绝父相来应用position实现元素的定位。什么叫子绝父相呢?就是子元素使用absolute定位,而父元素使用relative定位,因为使用absolute的时候,如果父元素有定位,那么absolute相对的就是自己的父元素。当然除了父元素,你也可以是祖先元素,不管是父元素还是祖先元素,你都要分清你设置为position:absolute的元素是参照谁来定位的,这一点理清了其他都不是问题。
这篇文章我们来举个例子,使用子绝父相,效果展示如下:
这个小小的hot图标就是通过定位来实现布局的,下面是代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>11-子绝父相实现带图片的导航条</title>
<style>
</style>
</head>
<body>
<ul>
<li>网页</li>
<li>知道</li>
<li>文库<img src="hot.gif"/></li>
<li>新闻</li>
<li>贴吧</li>
<li>音乐</li>
<li>金融</li>
</ul>
</body>
</html>
css代码:
*{
margin:0;
padding:0;
}
ul{
list-style:none;
width:710px;
height:50px;
background:#ccc;
margin:0 auto;
margin-top:100px;
font-weight:bold;
}
ul li{
float:left;
width:100px;
line-height:50px;
text-align:center;
border-right:1px solid rgba(0,0,0,0.6);
}
ul li:nth-child(3){
background:skyblue;
position:relative;
}
ul li:last-child{
border-right:0;
}
img{
position:absolute;
top:-1px;
/*让绝对定位的元素水平居中,使用Margin:0 auto无效,百分比针对的是父元素*/
left:50%;
margin-left:-11px;/*图片宽度的一半*/
}
二十、网页开发设计原则
网页开发设计原则总结:
从外到内:先写外部元素的css
从上到下:比如先开发头部,再是内容区,再是尾部,这样可以避免互相影响,可能我说你不太懂,反正这是经验之谈了,写多了css代码就知道了
垂直方向多采用标准流
水平方向多采用浮动流,
嵌套用padding
兄弟用margin