简单css

最新推荐文章于 2024-07-02 11:33:04 发布

三月三荷

最新推荐文章于 2024-07-02 11:33:04 发布

阅读量491

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/qq_28254783/article/details/72820616

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.省略号
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
多行：
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
-webkit-line-clamp: 3; /** 显示的行数 **/
overflow: hidden; /** 隐藏超出的内容 **/
2.对齐：
text-align: justify;
text-justify:inter-ideograph;/*ie*/
3.清除浮动
.clearfix:after{
content: "020";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* 触发 hasLayout */
zoom: 1;
}
4.首行缩进
text-indent:2em;
5.解决高度自适应问题
http://jsfiddle.net/luin/25BbH/7/
6.placeholder
.my-error::-webkit-input-placeholder { color: #e1e1e1; }
/* 火狐浏览器 */
.my-error::-moz-placeholder { color:#e1e1e1; }
7.渐变
圆角盒子：.box{ -moz-border-radius: 5px 5px 5px 5px; -webkit-border-radius: 5px 5px 5px 5px; -o-border-radius:5px 5px 5px 5px; border-radius: 5px 5px 5px 5px;}
2
阴影盒子：.box{ -moz-box-shadow:5px 5px 10px gray; -webkit-box-shadow:5px 5px 10px gray; -o-box-shadow:5px 5px 10px gray; box-shadow:5px 5px 10px gray;}
3
线性渐变:.box{ background-color: #f3f3f3; background: -webkit-linear-gradient(top,#F8F8F8 0,#eeeeee 100%);//代表从上到下，从白到蓝的渐变 background: -moz-linear-gradient(top,#F8F8F8 0,#eeeeee 100%); background: -o-linear-gradient(top,#F8F8F8 0,#eeeeee 100%); background: linear-gradient(to bottom,#F8F8F8 0,#eeeeee 100%);}
4
放射性渐变:.box{ background-color: #f3f3f3; background: -webkit-radial-gradient(circle,white,blue);//代表圆心是白色，然后逐渐的过渡到圆周的蓝色 background: -moz-radial-gradient(circle,white,blue); background: -o-radial-gradient(circle,white,blue); background: radial-gradient(circle,white,blue);}
5
透明盒子：1)使用rgba()函数：接受4个参数，分别代表red、green、blue中的三个值，取值范围是0-255，最后一个值是alpha不透明度 #div{ background:rgb(170,240,0); background:rgba(170,240,0,0.5); }2)使用opacity #div{ background:rgb(170,240,0); opacity:0.5; filter:alpha(opacity=50); }
6
文字阴影：.demo1 { text-shadow: red 0 1px 0;}text-shadow: X-Offset Y-Offset Blur ColorX-Offset表示阴影的水平偏移距离，其值为正值时阴影向右偏移，如果其值为负值时，阴影向左偏移；Y-Offset是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移反之其值是负值时阴影向顶部偏移；Blur是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将Blur值设置为0；Color是指阴影的颜色，其可以使用rgba色。

7.mouseout触发内部元素事件
在onmouseover时先进行如下判断，结果为true时再执行方法体：
$("#popFormDiv").mouseover(function () {
var s = event.fromElement || event.relatedTarget;
if (!this.contains(s)) { $(this).show("slow"); }
});

在onmouseout时先进行如下判断，结果为true时再执行方法体：
$("#popFormDiv").mouseout(function () {
var s = event.toElement || event.relatedTarget;
if (!this.contains(s)) { $(this).hide("slow"); }
});
8.加快网络加载速度
　　加快网页的打开速度，有三个途径：一是提高网络带宽，二是用户在本机做优化，三是网站设计者对网页做一定的优化。
　　以下是一些处理方法：
优化图片，使用恰当的图像格式；
优化CSS；
减少http请求（去除一些不必要的对象、将临近的两张图片合成一张、合并CSS）
去除不必要加载项
有些内容可以静态化就将其静态化，以减少服务器的负担
统计代码放在页尾
9.placeholder
https://segmentfault.com/q/1010000000397925
10.calc

-moz-calc(100% - (10px + 5px) * 2);
width:-webkit-calc(100% - (10px + 5px) * 2);
width: calc(100% - (10px +

11.css精灵

background: url(/Assets/CBG/img/hw1_sprite.png) no-repeat 0 -70px;
position: absolute;
display: block;
width: 25px;
height: 25px;
content: "";
top: 8px;
left: 8px;

12.
一：CSS判断横屏竖屏
写在同一个CSS中

@media screen and (orientation: portrait) {
/*竖屏 css*/
}
@media screen and (orientation: landscape) {
/*横屏 css*/
}
分开写在2个CSS中

竖屏
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
横屏
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
二：JS判断横屏竖屏
<body onorientatiοnchange="updateOrientation();">
//判断手机横竖屏状态：
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
if (window.orientation === 180 || window.orientation === 0) {
alert('竖屏状态！');
}
if (window.orientation === 90 || window.orientation === -90 ){
alert('横屏状态！');
}
}）

如果你不希望用户使用横屏方式查看你的网页，你可以在设备旋转时间监听里面对body使用CSS3里面的transition中的旋转来保持页面竖向。

三月三荷

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
简单css

1.省略号 overflow: hidden;white-space: nowrap;text-overflow: ellipsis;多行： word-break: break-all; text-overflow: ellipsis; display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/ -webkit
复制链接

扫一扫