CSS圆角边框
CSS3中,新增圆角边框,盒子可以变圆角
border-radius:..px
/*也可以是百分比*/
/*圆角矩形做法:设置为高度的50%*/
简写属性:上左 上右 下右 下左(以左上为上,类似padding)
CSS盒子阴影
用box-shadow为盒子添加阴影
默认外阴影outset,但不可以写这个单词,否则阴影无效。
盒子阴影不占空间,不会影响其他盒子布局。
拓展:
鼠标经过盒子时才显示阴影,结合之前的案例
.box:hover{
box-shadow: 10px 10px 10px 10px #965a5a;
}
/*所有盒子都可以用hover*/
文字阴影
了解即可。text-shadow
CSS浮动
标准流
标签按规定默认方式排列
为什么需要浮动
而浮动可以改变元素标签默认的排列方式。最典型应用:让多个块级元素一行内排列显示。
网页布局第一准则:多个块级元素纵向排列标准流,多个块级元素横向排列用浮动。
什么是浮动
float属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘初级包含块或另一个浮动框的边缘。
两个div盒子float后,会在水平方向上合并。
浮动特性
- 浮动的元素会脱离标准流(脱标),即为不受原排版的控制,浮在网页上,移动到指定位置上则停止。
- 浮动的盒子不再保留原先的位置。让其他标准流占有。
- 浮动的元素会一行内显示且元素顶部对齐,一行内元素满了自动换行,缩小屏幕时作用。
- 浮动的元素具有行内块的特性 ,等于加了display:inline-block,如果是块元素改变后,不设置宽度,宽度则随内容变化
浮动元素经常和标准流父级搭配使用
先用标准流盒子确定位置,再用浮动内部对齐
范例
<!DOCTYPE html>
<html lang="en">
<head>
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
.box{
width: 1226px;
height: 285px;
background-color: royalblue;
margin: 0 auto;
}
.box li{
width: 296px;
height: 285px;
background-color: salmon;
margin-right: 14px;
float: left;
}
/* 必须写.box .last,不然权重不足以覆盖上边的样式 */
.box .last{
margin-right: 0;
/* 最后一个不需要右外边距 */
}
</style>
</head>
<body>
<ul class="box">
<li></li>
<li></li>
<li></li>
<li class="last"></li>
</ul>
</body>
</html>
网页布局案例2:
综合运用浮动和盒子阴影
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.box{
width: 1226px;
height: 615px;
background-color:pink;
margin: 0 auto;
}
.left
{
float: left;
width: 225px;
height: 615px;
background-color: salmon;
}
.right{
float: left;
width: 992px;
height: 615px;
}
.small{
width: 234px;
height: 300px;
background-color: sienna;
float: left;
margin:0 0 14px 14px;
/* margin不会撑大盒子,高度已经固定 */
}
.small:hover{
box-shadow:7px 7px 15px 6px rgb(142, 146, 150);
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right">
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
</div>
</div>
</body>
</html>
页面布局案例3
由于需要再浏览器中全面布局,所以上下两个盒子不需要设置宽度,自适应浏览器的宽度,称为通栏。若在一个大盒子中,则设置宽度。(注释掉的部分为在一个盒子中布局)。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
*{
padding: 0;
/* ul自带padding,需清空 */
}
/* .box{
width: 500px;
height: 500px;
border:1px solid steelblue;
margin:0 auto;
} */
.top{
margin:5px auto;
/* width: 480px; */
height: 50px;
background-color: steelblue;
}
.banner{
margin: 10px auto;
width: 720px;
height: 95px;
background-color: steelblue;
}
li{
list-style: none;
}
.zhong{
width: 720px;
height: 80px;
margin: auto;
}
.zhong li{
background-color: steelblue;
width: 177px;
height: 75px;
margin-right: 4px;
float: left;
}
.box .last,
.box .last2{
margin-right: 0%;
}
.xia{
width: 720px;
height: 105px;
margin:10px auto;
}
.xia li{
width: 177px;
height: 100px;
background-color: steelblue;
float: left;
margin-right: 4px;
}
.foot{
/* width: 480px; */
height: 120px;
background-color: steelblue;
margin:0 auto;
}
</style>
</head>
<body>
<div class="box">
<div class="top"></div>
<div class="banner"></div>
<ul class="zhong">
<li></li>
<li></li>
<li></li>
<li class="last"></li>
</ul>
<ul class="xia">
<li></li>
<li></li>
<li></li>
<li class="last2"></li>
</ul>
<div class="foot"></div>
</div>
</body>
</html>
浮动布局注意:
一个元素浮动了,理论上其余兄弟元素也要浮动。
浮动的盒子只会影响盒子后面的标准流,不影响前面的标准流。如有3个盒子,第一个不浮动,第二个浮动,则不会浮到第一个上面。第一,三个浮动,第二个不浮动,则第二个在第一个盒子下面,但第三个还在第二个盒子后面
思考:
所有大盒子必须设置高度吗?
不一定,如果像一个产品界面,产品很多很多,或者新闻页面不知道有多少文字不方便给高度,这时则不需要设置高度,让子盒子撑开父亲。
但是像下图,两个盒子浮动后为同一行,已经脱标,则父元素没有被撑大,高度也就为0.
所以,在父盒子很多的情况下,不方便给高度,但是子盒子浮动又不占位置,导致父盒子高度为0,影响下面的标准流盒子,这就需要清除浮动。
清除浮动
本质就是消除浮动带来的影响
额外标签法
是W3C推荐的做法。是通过在浮动元素末尾添加一个空的标签例如 div style=”clear:both” /div(新增盒子必须是块级元素,才能占最后一行撑开盒子),或则其他标签br等亦可。
优点:通俗易懂,书写方便
缺点:添加许多无意义的标签,结构化较差。
父级添加overflow
可以给父级添加: overflow为 hidden| auto| scroll 都可以实现。
优点: 代码简洁
缺点: 内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素。
after伪元素法
为空元素额外标签法的升级版,好处是不用单独加标签了
CTRL C+CTRL V使用
/*同样是父盒子调用*/
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* IE6、7 专有 */
.clearfix {
*zoom: 1;
}
双伪元素清除浮动
同上
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
PS切图
图层切图
切片切图
插件切图
选中web,选择导出路径,就可一键导出。多个图层则多选。
CSS属性书写顺序
.jdc {
display: block;
position: relative;
float: left;
width: 100px;
height: 100px;
margin: 0 10px;
padding: 20px 0;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
color: #333;
background: rgba(0,0,0,.5);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}