码迷,mamicode.com
首页 > Web开发 > 详细

20150921css2

时间:2015-10-12 18:59:34      阅读:139      评论:0      收藏:0      [点我收藏+]

标签:

一、border边框

border:1px solid #F00;

border-style:dashed虚线 dotted点点点 边框样式

border-width:3px;边框宽度

border-color:#F00;边框颜色

还可以控制四个边的属性

border-top、border-bottom、border-left、border-right

二、背景

background-color:#F00; 背景颜色

background-image:url(../image/2.jpg);/*背景图片*/

background-repeat:no-repeat;/*背景不平铺*/

background-repeat:repeat-x;/*横向平铺*/

background-repeat:repeat-y;/*纵向平铺*/

background-position:10px 20px;/*图像的方位距DIV左10px 上面20px */

background-size:cover;/*CSS3拉伸铺满*/

background-attachment:fixed;/*背景图片固定*/文本大于图片时,可以让图片固定

可以写成一句话:

background:blue url(xx.jpg) no-repeat fixed 5px 10px;

把常用的图标放到透明的png,可以减少宽带

background-position:0px  -100px;/*定位图片的位置*/

三、表格样式

<caption>表格标题<caption>

caption-side:bottom;/*标题在下面*/

table{ width:160px; heigt:200px; border-collapse:collapse;}/*细线合并*/

td,th{ border:1px solid red; text-align:center}/*td,th共用一个样式*/

<th scope="col">列表头

<th scope="row">行表头

四、去掉超链接的下划线

<a href="#">a<a>

Text-decoration:none; underline下划线 line-through删除线 overline至顶线

五:伪类

a:link  a:visited a:hover a:active

#d1:hover{ cursor:pointer; }鼠标放上显示手的形状

 六:overflow

当内容超出DIV的宽度

overflow:hidden;超过隐藏

overflow:auto;超过显示滚动条

overflow:scroll;不超过、超过都有滚动条

七、选择器

#d1 a{d1下的a标签}

#d1 #d2 a {d1下的d2下的a标签}

#d1,#d2{d1,d2共用一个样式}

 

css最核心的就是:浮动、盒子模型、定位

ID用处:上证指数

把基础练熟

20150921css2

标签:

原文地址:http://www.cnblogs.com/16lily521/p/4872340.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!