1.css替换简单图标的展示方法
.box1 span{width:0px;height:0px;font-size:0;display:inline-block;position:absolute;left:11px;top:10px;border-right:6px solid transparent;border-top:50px solid #f00}
.box2 span{width:0px;height:0px;font-size:0;display:inline-block;position:absolute;left:11px;top:100px;border-right:50px solid transparent;border-top:10px solid #ddd}
.box21 span{width:0px;height:0px;font-size:0;display:inline-block;position:absolute;left:111px;top:100px;border-right:50px solid #ddd;border-bottom:50px solid transparent}
.box3 span{width:0px;height:0px;font-size:0;display:inline-block;position:absolute;left:11px;top:200px;border:10px solid #000;border-color:transparent transparent transparent #f00}
.box4 span{width:0px;height:0px;font-size:0;display:inline-block;position:absolute;left:11px;top:300px;border:10px solid #000;border-color:transparent transparent #f00 transparent}
.box5 span{width:0px;height:0px;font-size:0;display:inline-block;position:absolute;left:11px;top:400px;border:10px solid #000;border-bottom:10px solid transparent}
.box6 span,
.box6 span i{width:0px;height:0px;font-size:0;display:inline-block;position:absolute;left:11px;top:500px;border:8px solid #000;border-color:transparent transparent #000 transparent}
.box6 span i{left:-7px;top:-6px;border:7px solid #fff;border-color:transparent transparent #fff transparent}
.box7 span,
.box7 span i{width:0px;height:0px;font-size:0;display:inline-block;position:absolute;left:11px;top:600px;border:50px solid #f00;border-color:transparent transparent transparent #f00}
.box7 span i{left:-50px;top:-30px;border:30px solid #fff;border-color:transparent transparent transparent #fff}
</style>
<body> <div class="box1 box2 box3 box4 box5"> <span></span> </div> <div class="box6 box7"> <span><i></i></span> </div>
2.css3 新方法的代码和效果
1）border-radius:
<div id="divone"></div>
#divone{
width: 200px;
height: 200px;
border: 1px solid red;
border-radius: 15px;
}
可以写为 : -moz-border-radius
-webkit-border-radius:
#divone{
width: 200px;
height: 200px;
border: 1px solid red;
border-radius:0px 15px 25px 45px;
}
border-radius:1 2 3 4 分别代表的是左上角 右上角 右下角 左下角
2)box-shadow 只有chrome 和 safair 支持这个阴影的效果
#divone{
width: 200px;
height: 200px;
border: 1px solid #000;
background:#fff;
box-shadow:13px -11px 10px #333;
}
box-shadow:1 2 3 4 分别代表的值是 阴影左边的距离， 阴影右边的距离 ，阴影清晰度 颜色
3)resize overflow
#divone{
width: 100px;
height: 100px;
border: 1px solid #000;
resize: both;
overflow: auto;
}
右下角可以进行缩放
4）css 多栏布局
-webkit-column-count:4
-webkit-column-gap:20px;
column-count: 栏数 column-width:栏宽 column-gap:各栏之间的空白间隔 如果没有设定column-count：在允许宽范围内尽可能多的增加栏目
#divone{
-webkit-column-count : 4;
-webkit-column-gap : 20px;
-moz-column-count : 4;
-moz-column-gap : 20px;
column-rule: 1px solid #00000;
}
5) word-wrap:属性是用来防止太长的字符串溢出，可以用两个属性值 normal 和 break-word
normal 是默认的只允许在断电截断文字，break-word 文字可以在任何需要的地方截断匹配分配的空间并防止溢出
6)媒体查询
@media all and(max-width:480px){
#divdone{width:400px;height：400px;backgroundL:red}
}
时间： 2024-12-28 23:08:14