分享

DIV+CSS 常用代码大全

 weiledream 2011-05-19

* html .classdao {} 6.0
*+html .classdao {} 7.0

DISPLAY: block;块状元素

注释代码里面放中文会引起多出行或着很多不确认因素 文字溢出和浮动错位等

style="cursor:hand" 手型显示

<u></u>加下划线

清除浮动:clear:both

IE6.0下margin-left双倍距 解决方法:加入:display: inline;

 

.class_r_x li:hover,.class_r_x li.hover {background: #FFE8E8;} 鼠标经过变色

 

文本字段:input{}[PS:全局定义]

<span class="cuo_" DISABLED>本站声明 <a href="#">阅读>></a></span> 直接给文字加阴影“DISABLED”

-------------------------------------------------------------------

FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ff0000,

EndColorStr=#ffffff); 加在css里面 实现渐变的效果

-------------------------------------------------------------------

display:none;隐藏DIV

-------------------------------------------------------------------

 

.main{width:950px;MARGIN: 0px auto;}

段落缩进:text-indent:2em

.target a:active {test:expression(target="_blank");}定义整站所有的链接都新窗口打开

layout-flow: vertical-ideographic;字体竖排

火狐下取消前面的点:list-style:none

<font color="#006699"> 您的手机号码:</font>

 

none : 默认值     SPAN:对象 指定内嵌文本容器

 

border="0"图边框位0   border:0;

.hangleftcenfootdi02 li{float:left;padding:0 7px;font:normal 100% Tahoma,sans-serif;border-right:1px solid #333333;}/*导航样式*/

display=block,   
    block表示该元素显示为一个块级元素,单独占一行   
    none表示该元素不显示,并且不在网页上占位

white-space: nowrap 属性实现禁止文字自动换行

font-weight:700    字体的粗细         font-family:Georgia; 好看的数字字体

color:#0000FF     字体的颜色     
font-size:12px              字体的大小

font-family: 金梅毛行書;   限制字体

line-height:180%   行间的高度

position:absolute; bottom:0; DIV居底部

font-family:"宋体"    字体的选择

color:#FF0000     颜色的控制

letter-spacing:2px 字间距的控制

border: 1px solid #FF0000   边线        1px是宽度;solid是形态,这里表示实线,再如dotted和dashed是虚线;#000是颜色。( border-bottom:1px solid #D3D3D3; border-left:1px solid #D3D3D3; border-right:1px solid #D3D3D3; 它可以分别对边线进行定义,四个方向)

text-decoration: none;      下滑线  

BORDER-BOTTOM: #ddd 1px dashed; 点阵虚线[大]

<hr size="1" noshade="noshade" style="border:1px #cccccc dotted;"/> 点阵虚线[小]

text-align 对齐元素中的文本(4个方向) text-align:center;    垂直排列-底部vertical-align:bottom;

background-color: #999999; 背景色

background-image: url(/images/200804242338220.jpg); 背景图

background:url(../../img/esyj_/arrowy.gif) no-repeat 4px 3px;

background:url(../images/top_bg.jpg) top center no-repeat; 底图居顶

BACKGROUND: url(/img/body_bg.gif) repeat-y center 50%; 解决背景拉伸与上下延伸的问题

 BACKGROUND: url(../img/background.png) #fff repeat-x 0px 0px   背景居顶横铺 其余的地方为白色

 

background-repeat:no-repeat; 背景禁止拉伸

FLOAT: center; 框里平行居中(4个方向)

margin-top: 100px; 间距 整体边距(4个方向)

padding-top:??px来设置对象的内下边距的样式 对应的有left(左边) right(右边) bottom(底部) top(顶部) 定义全局边距:padding:10px;

display:inline 可用来水平排列对象   去掉li前面的点:list-style:none;

OVERFLOW: hidden;内容会被修剪,但是浏览器不会显示供查看内容的滚动条。

absolute是绝对定位,relative是相对定位 写法“position:absolute;

margin:(外边距)(包含四个方向)

padding:(内边距)(包含四个方向)

 

<img src="images/G-FASE4.GIF" align=absmiddle>文字对齐我绝对中间!

a:link {color: #F00;text-decoration: none;} 链接颜色
a:visited {text-decoration: none;} 已访问链接
a:hover {text-decoration: none;color: #00F;} 变换图象链接
a:active {text-decoration: none;} 活动链接 一般情况下不要这栏

 

text-decoration: underline; 下划线

上下居中:line-height:25px;

 

#main_08_info_08_txt LI span.class_01

 

给LI里面重新定义样式 我们习惯用ID来定义 如果用CLASS的话 会读不到样式

图片样式.yjcs_biao_images li{ width:128px; height:100px; float:left;margin:0 0 20px 14px; text-align:center;}
.yjcs_biao_images img{ width:120px; height:80px;border: 1px solid #BDD5ED; padding:3px 3px 3px 3px; float:left; margin:0 0 10px 0}

 

鼠标移上去以后变成手的形状 style="cursor:hand"

 

浮动 .news_x_l_top_01_tu .hover_bg_txt { margin-left:-180px;PADDING-BOTTOM: 0px; WIDTH: 180px; LINE-HEIGHT: 15px; PADDING-TOP: 0px; POSITION: absolute; TOP: 440px; HEIGHT: 15px; text-align:center; color: Blue; background-color:#E6E6E6}

[PS:TOP为整站的定位;margin-top:10px;相对定位]

 

<button onclick="window.top.hidePopWin()">关闭</button>

如何让图片和文字在同一条水平容器中居中对齐   可以用有个很简单的解决办法 就是在图片上加个样式vertical-align:middle;放在图片的代码里

/*给图片加链接色*/

#qita_qg li A IMG {BORDER-RIGHT: #ddd 1px solid; BORDER-TOP: #ddd 1px solid; BORDER-LEFT: #ddd 1px solid; BORDER-BOTTOM: #ddd 1px solid}
#qita_qg li A:visited IMG {BORDER-RIGHT: #ddd 1px solid; BORDER-TOP: #ddd 1px solid; BORDER-LEFT: #ddd 1px solid; BORDER-BOTTOM: #ddd 1px solid}
#qita_qg li A:hover IMG {BORDER-RIGHT: #eb0156 1px solid; BORDER-TOP: #eb0156 1px solid; BORDER-LEFT: #eb0156 1px solid; BORDER-BOTTOM: #eb0156 1px solid}

 

------------------------------------------网站共用----------------------------------------------------------

* {PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP:0px}

body,div,img,ul,li,span,p,br { margin:0; padding:0;border:0;}
body { font-size:12px; color:#666;margin:0 auto 0 auto; width:950px;}
li { list-style:none;display: inline;}
a { font-size:12px; color:#666; text-decoration:none;}
a:hover { text-decoration:underline; color:#F60;}
img{ border:none;vertical-align:middle;}
h1{font-size:12px; font-weight:bold; color:#000000; float:left}
h2{font-size:14px; font-weight:bold; color:#000000; float:left}

 

PNG透明的方法:<div style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../meihuabao_logo.png);width:1px;height:1px"></div>

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约