15.布局流程
一、确定页面的版心; 二、确定页面中的行模块,以及每个页面中的列模块 三、制作HTML结构 例:.top+.banner+(.main>.left+.right)+.footer 高度剩余法:高度直接设置成-想用的margin的值,就能省略margin
16.消除浮动
<div class="fat">
<div class="big"></div>
<div class="son"></div>
<div class="clear"></div>
</div>
这种情况-父标签不给高度,在子标签均浮动时,浮动流的特点就显现出来,
浮在了页面的上面,此时父标签就成了一条线
清除浮动的本质:解决父级元素因为子级浮动引起内部高度为0的问题.
一、额外标签法:
最后一个浮动标签的后面,新添加一个标签,清除浮动,父标签自动检测子标签的高度,以最高的为准
二、overflow: hidden;在父标签中添加这一句,意为:让父级管好子级
不是所有浮动都要消除,谁影响布局,就消除谁.
三、伪元素清除浮动,写一个clearfix的类,哪个盒子需要清除,就把这个类加到其类之中
.clearfix:after{
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix{
*zoom: 1;
}
四、双伪元素清除
.clearfix:before,.clearfix:after{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom: 1;
}
17.定位
定位属性主要包括定位模式和边偏移,定位模式:static、relative、absolute、fixd
一、相对定位特点:
1.可以通过边偏移量移动位置,但原来所占的位置,继续占有
2.每次移动位置,都是以自己的左上角为基点移动
二、绝对定位特点(不占位置):
1.若所有父元素没有定位,以浏览器当前屏幕为准
2.若父元素有定位,则按照最近的已经定位的父元素为准
三、子绝父相
子元素是绝对定位,父元素是相对定位,例如:浮在兄弟标签上的三角,
如果给它相对定位,它就会占位置,就不能浮在其它上面;
父元素如果给绝对定位,因为它不占位置了,所以下面的盒子会浮上来.
所以大多情况下用子绝父相.
四、答疑解惑
1.浮动不能超过内边距
2.上下两张图片,上面那张float:left,下面那张上不去,所以浮动不是
完全脱标,绝对定位是完整意义的脱标
3.加了定位或者浮动的盒子,margin就会失效
4.引入ico图标-不是字体也不是图片,放到head标签中.
www.jd.com/favicon.ico
<link rel="shortcut icon" href="favicon.ico"> 网站是这么写
django里这么写(用png显得不专业):
<link rel="apple-touch-icon" sizes="76x76"
href={% static "img/apple-icon.png" %}>
5.导航栏中不同a标签之间的竖线可以用一个宽1px高10px的li标签做.
logo部分的文字比较重要,不能删掉,让其移出去然后切掉 <div class="logo"> <h1> <a href="#" title="京东网">京东</a> </h1> </div> text-indent:-9999px;overflow:hidden; 行内块元素之间有缝隙,用float可以消除
五、绝对定位的盒子水平/垂直居中
1.首先left50%,走到父盒子的一半大小;
2.然后走自己外边距负的一般值,margin-left
六、固定定位:fixd
1.是特殊的绝对定位,完全脱标,不占位置,不跟着滚动条滚动
2.固定定位的元素跟父标签没有关系,只认浏览器
3.定位模式转换:跟浮动一样,元素添加了绝对定位和固定定位之后,
元素模式也会发生转换,都转换为行内块元素,行内块的宽度和高度跟内容有关,
相对定位则没发生模式转换,背景图片在css中.
七、z-index
1.z-index默认属性是0,取值越大,定位元素在层叠元素中越居上;
2.取值相同,则根据书写顺序,后来居上,后面不能加单位;
3.只有相对定位、绝对定位、固定定位有此属性,其余标准流、浮动
静态定位都无此属性,也不能指定此属性.
例子:
div {
200px;
height: 300px;
border: 1px solid #ccc;
float: left;
margin-left: -1px;
}
div:hover{
border: 1px solid #f40;
position: relative;
}
相对定位比标准流高一级,浮在上面;但这种方式是:鼠标放在上面之后才变成相对定位,
但当div中有一层覆盖另一层时,div就需要有relative,这就需要用到z-index,
div {
200px;
height: 300px;
border: 1px solid #ccc;
float: left;
margin-left: -1px;
position: relative;
}
div:hover{
border: 1px solid #f40;
z-index: 1;
}
子标签浮动-父标签清除浮动,子标签绝对定位-父标签相对定位
18.其他
一、display-显示
display:none-隐藏某个元素;display:block-显示某个元素
隐藏之后不再保留位置
二、visibility-可见性
visible:对象可视;hidden:对象隐藏
隐藏之后,继续保留原有位置.
土豆案例:
鼠标经过a,然后a里面的mask就显示出来,所以用后代选择器
<style> *{ padding: 0; margin: 0; } a{ display: block; width: 376px; height: 319px; margin: 100px; position: relative; } .mask{ width: 100%; height: 100%; background: rgba(0,0,0,0.4) url("../image/arr.png") no-repeat center; position: absolute; top: 0; left: 0; display: none; } a:hover .mask{ display: block; } </style> </head> <body> <a href="#"> <img src="../image/tudou.png" height="319" width="376"> <div class="mask"></div> </a> </body>
三、overflow
visible:不剪切内容也不添加滚动条;hidden:溢出隐藏,不显示超出部分
scroll:总是显示滚动条;auto:在需要时剪切内容并添加滚动条
19.用户界面样式
一、cursor-鼠标样式
<ul> <li style="cursor: default">默认</li> <li style="cursor: pointer">小手</li> <li style="cursor: move">移动</li> <li style="cursor: text">文本</li> </ul>
二、消除轮廓线
input{outline:none}
一个input搜索框一般这么做:
input{
outline: none;
border: 1px solid #ccc;
200px;
height: 25px;
background: url("../image/arr.png") no-repeat 20px center;
}
三、文本域防拖拽
textarea{resize: none;}
四、解决图片底部有缝隙问题
给img:middle|top等,让图片不要和基线对齐
img{vertical-align: middle;border: 0;}
转换为块级元素可以:img{display: block;border: 0;}
vertical-align只针对行内元素或者行内块元素,特别是行内块元素,
通常用来控制图片/表单与文字的对齐
五、溢出的文字隐藏
white-space设置文本显示方式
normal:默认处理方式;
nowrap:强制同一行内显示所有文本,知道文本结束或br标签才换行
overflow: hidden
text-overflow: ellipsis;溢出的部分用省略号代替
想实现这种效果必须有这三句话
20.精灵技术
一、CSS精灵是一种处理网页背景图像的方式,把多个小背景图整合到一张大图中,
其目的是减少服务器请求次数,提高页面的加载速度.
使用background-position属性精确定位
例子:
span{
display: inline-block;
background: url("../image/tudou.png") no-repeat;
}
.aa{
110px;
height: 120px;
background-position: -363px -8px;
}
二、滑动门例子:
a包着span,精灵图左边给a标签,右边给span,内容在span中
<style> .nav li{ } .nav a{ height: 33px; line-height: 33px; color: #fff; text-decoration: none; display: inline-block; background: url("../image/arr.png") no-repeat; padding-left: 15px; } .nav span{ display: inline-block; height: 33px; background: url("../image/arr.png") no-repeat right; padding-right: 15px; } .nav a:hover, .nav a:hover span{ background-image: url("../image/ao.png"); } </style> </head> <body> <div class="nav"> <ul> <li> <a href="#"> <span>首页</span> </a> </li> <li> <a href="#"> <span>新闻客户端</span> </a> </li> </ul> </div> </body> 样式最后一行的意思是:只替换图片,之后的属性不替换.