Home >Web Front-end >HTML Tutorial >Several issues to pay attention to in CSS DIV layout_html/css_WEB-ITnose

Several issues to pay attention to in CSS DIV layout_html/css_WEB-ITnose

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


Naming issue

Header: header
Login bar: loginbar
Logo: logo
Sidebar: sidebar
Advertisement: banner
Navigation: nav
Sub-navigation: subnav
Menu: menu
Sub-menu: submenu
Search: search
Scroll: scroll
Page body: main
Content: content
Tag page: tab
Article list: list
Prompt information: msg
Tips: tips
Column title: title
Join: joinus
Guide: guild
Service: service
Hot spot: hot
News: news
Download: download
Register: regsiter
Status: status
Button: btn
Vote: vote
Partner: partner
Friendly link: friendlink
Footer: footer
Copyright: copyright
Submit: submit
Text box: textbox
Statistics: count


/* Global CSS definition*/
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;}

/* link color*/
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;}
/* Color attribute [define rules, lowercase c plus color name] */
.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;}
/* Font attribute [define rules, lowercase f plus attribute name] */
.fB {font-weight: bold;}
.fI {font-style: italic;}

/* Font size*/
.f12px{ font-size:12px;}
.f14px{ font-size:14px;}

/* Others Properties*/
.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; }


Scroll bar Color definition

(IE only)

scrollbar-face-color: #E0D5BE;
scrollbar- track-color: #EBE4D3;
scrollbar-highlight-color: #ffffff;
scrollbar-shadow-color: #ffffff;
scrollbar-3dlight-color: #ffffff;< ;!--//Setting the color of the upper and left edges of the scroll bar-->
scrollbar-dark-shadow-color: #ffffff;
scrollbar-arrow-color: #978C71;

How to use CSS to make a layer in half transparent?

Define your layer using the following stylesheet
.alpha { filter: Alpha(Opacity=50, FinishOpacity=50, Style=0, StartX=0, StartY=0, FinishX=100, FinishY =100| Starting from 0, 1.2.3...there is uniform transparency, radial shape transparency...

StartX=X coordinate of starting transparency, basically the upper left corner of the picture and layer (0)

StartY = The Y coordinate where transparency starts, which is basically the upper left corner of the image or layer (0)
FinishX = The X coordinate where transparency ends, which is basically the lower right corner of the image or layer (the width of the image or layer)
FinishY=The Y coordinate to end the transparency, which is basically the lower right corner of the picture or layer (the height of the picture or layer)


The above structures can be used in combination, for example: left column title lefttitle; bottom navigation footernav
The writing principles are:
1. Always use lowercase letters; 2. Use English as much as possible; 3. Do not add dashes or underlines; 4. Try not to abbreviate words unless they are words that are easy to understand at a glance.



Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn