最新文章
- MySQL中, group by 和 order by 一起使用会有排序问题,group by 和 order by 同时使用时要注意的地方
- Vue学习笔记(10) ——Vue组件中的data和methods
- Vue学习笔记(9) ——Vue组件创建的几种方式
- Vue学习笔记(8) ——Vue实例的生命周期
- Vue学习笔记(7) —— 过滤器 filter的基本使用
- Vue学习笔记(6) ——v-if指令和v-show指令
- Vue学习笔记(5) —— v-for指令和key属性
- Vue学习笔记(5) —— Vue中样式-class样式和style样式
- Vue学习笔记(4) —— v-model指令,双向数据绑定
- Vue学习笔记(3) —— Vue事件修饰符
关注我

在线咨询
x
有什么可以帮到你

点击咨询
CSS常用样式
- 分类:WEB前端
- 时间:2017-09-29
- 共982人围观
简介CSS常用样式,通过最近几次对网页布局的经历,总结几个常见并且容易出错的的布局样式,记下,备忘
通过最近几次对网页布局的经历,总结几个常见并且容易出错的的布局样式如下:
定位
static:静态定位\rrelative:相对定位\rabsolute:绝对定位\rfixed:固定定位
圆角
border-radius: ? px;\rborder-radius: ? %;\r/*\r如果你在 border-radius 属性中只指定一个值,那么将生成 4 个 圆角。\r但是,如果你要在四个角上一一指定,可以使用以下规则:\r四个值: 第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角。\r三个值: 第一个值为左上角, 第二个值为右上角和左下角,第三个值为右下角\r两个值: 第一个值为左上角与右下角,第二个值为右上角与左下角\r一个值: 四个圆角值相同\r*/\r\r 属性 描述\rborder-radius 所有四个边角 border-*-*-radius 属性的缩写\rborder-top-left-radius 定义了左上角的弧度\rborder-top-right-radius 定义了右上角的弧度\rborder-bottom-right-radius 定义了右下角的弧度\rborder-bottom-left-radius 定义了左下角的弧度
添加阴影
box-shadow:10px 10px 5px #888;
添加多个背景图像
background-image:url(img_flwr.gif),url(img_tree.gif);/* 逗号隔开 */
css文本框文字顶部对齐
vertical-align:top;
背景是否重复
background-repeat:no-repeat; /* 不重复 */\rbackground-repeat:repeat; /* 重复 */
删除线
text-decoration: line-through;
省略号
overflow: hidden;\rtext-overflow:ellipsis;\rwhite-space: nowrap;\rwidth: 100px; /* 必须有宽度 */
清除默认的margin 和 padding
body{\r margin: 0;\r padding: 0;\r}\r\rul{\r margin: 0;\r padding: 0;\r}\r\rul li{\r list-style-type:none; /* 清前面圆点 */\r margin: 0;\r padding: 0;\r}
a标签移上去有 “小手”
a:hover{\r cursor:pointer;\r}
超过几行省略
display: -webkit-box;\r-webkit-box-orient: vertical;\r-webkit-line-clamp: n; /* n 为具体行数 */\roverflow: hidden;
返回列表:WEB前端