Heim >Web-Frontend >HTML-Tutorial >CSS+DIV布局中注意的几个问题_html/css_WEB-ITnose

CSS+DIV布局中注意的几个问题_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:33:011066Durchsuche


命名问题

页头:header
登录条:loginbar
标志:logo
侧栏:sidebar
广告:banner
导航:nav
子导航:subnav
菜单:menu
子菜单:submenu
搜索:search
滚动:scroll
页面主体:main
内容:content
标签页:tab
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
加入:joinus
指南:guild
服务:service
热点:hot
新闻:news
下载:download
注册:regsiter
状态:status
按钮:btn
投票:vote
合作伙伴:partner
友情链接:friendlink
页脚:footer
版权:copyright
提交:submit
文本框:textbox
统计:count


/* 全局CSS定义 */
body { text-align: center; font-family:"宋体", arial;margin:0; padding:0; background: #FFF; font-size:12px; color:#000;}
div,form,img,ul,ol,li,dl,dt,dd {margin: 0; padding: 0; border: 0;}
h1,h2,h3,h4,h5,h6 { margin:0; padding:0;}
table,td,tr,th{font-size:12px;}

/* 链接颜色 */
a:link {color: #1f3a87; text-decoration:none;}
a:visited {color: #83006f;text-decoration:none;}
a:hover {color: #bc2931; text-decoration:underline;}
a:active {color: #bc2931;}
/* 颜色属性 [定义规则,小写c加颜色名称] */
.cRed,a.cRed:link,a.cRed:visited{ color:Red; }
.cBlue,a.cBlue:link,a.cBlue:visited{color:#1f3a87;}
.cDRed,a.cDRed:link,a.cDRed:visited{ color:#bc2931;}
.cGray,a.cGray:link,a.cGray:visited{ color: #4F544D;}
.cDGray,a.cDGray:link,a.cDGray:visited{ color: #666;}
.cWhite,a.cWhite:link,a.cWhite:visited{ color:#fff;}
.cBlack,a.cBlack:link,a.cBlack:visited{color:#000;}
a.cBlack:hover{color:#bc2931;}
.cYellow,a.cYellow:link,a.cYellow:visited{color:#ff0;}
.cGreen,a.cGreen:link,a.cGreen:visited{color:#008000;}
/* 字体属性 [定义规则,小写f加属性名称] */
.fB {font-weight: bold;}
.fI {font-style: italic;}

/* 字体大小*/
.f12px{ font-size:12px;}
.f14px{ font-size:14px;}

/* 其他属性 */
.left{ float: left;}
.right{ float: right;}
.clear{ clear: both; font-size:1px; width:1px; visibility: hidden; }
.hidden {display: none;}
.unLine ,.unLine a{text-decoration: none;}
.noBorder{border:none; }


滚动条的颜色定义

(IE only)

scrollbar-face-color: #E0D5BE;
scrollbar-track-color: #EBE4D3;
scrollbar-highlight-color: #ffffff;
scrollbar-shadow-color: #ffffff;
scrollbar-3dlight-color: #ffffff;
scrollbar-dark-shadow-color: #ffffff;
scrollbar-arrow-color: #978C71;

怎样用CSS把层做成半透明?

用下面的样式表定义你的层
.alpha { filter: Alpha(Opacity=50, FinishOpacity=50, Style=0, StartX=0, StartY=0, FinishX=100, FinishY=100}

解释:
Opacity=开始的不透明度(100的话就不透明了)
FinishOpacity=结束的不透明度(100的话就不透明了)
Style=样式,从0开始,1.2.3....有均匀透明啊,放射形状透明啊...
StartX=开始透明的X坐标,基本上为图片、层的左上角(0)
StartY= 开始透明的Y坐标,基本上也为图片、层的左上角(0)
FinishX=结束透明的X坐标,基本上也图片、层的右下(图片、层的宽度)
FinishY=结束透明的Y坐标,基本上也为图片、层的右下角(图片、层的高度)


以上结构可以组合使用,例如:左列标题lefttitle;底部导航footernav
 书写原则是:
 1.一律小写; 2.尽量用英文; 3.不加中杠和下划线; 4.尽量不缩写,除非一看就明白的单词.

 

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn