/*网站页面主要分为两类
1、包含主导航栏的一、二级页面，主要用于导航和一般性介绍(用site.master + site.css控制)；
2、不包含主导航栏的三级页面，是课件、活动、文章等栏目下的具体内容(用page.master + page.css控制);
3、此外，个别排版和内容比较复杂的页面附加单独的css文件控制，如home和service页面。
----------------------------------------------------------*/
*
{
margin:0;
padding:0;
border:0;
}
/* CSS Reset
Reset margin, padding, border to 0;
----------------------------------------------------------*/
body
{
background-color: #FFFFFF;
font-size: 100%;
font-family: 'Myriad Web Pro' , Calibri, Georgia, Arial, Courier;
color: #000000;
}
/* Explicitly Define Page and Font
Set page background as White;
Use flexible font size, 100% as defined by users.
----------------------------------------------------------*/
/* Structure Layout and Naming Rules
[ Blocks Vertically from top to bottom ]
等号后的三字母是为相应的DIV进行ID定位时使用的名称：
Top = top;
Banner = ban;
Navigation = nav;
Advertisement = adv;
Main Content = mac;
Column Left = col;
Column Middle = com;
Column Right = cor;
Bottom = bot;
Details defined as below.
元素定义按照屏幕显示自上而下的顺序，先碰到谁就先定义谁。
----------------------------------------------------------*/
.bar
{
width: 100%;
background-color: #024959;
}
/* Top Bar and Bottom Bar
Both bars share common features like width and background color;
Without height definition, which is determined by child element;
Using class rather than id, whick can be applied to several elements on one page.
边条定义宽度、颜色，没有定义高度，因为里面会放文字内容，把它撑起来，到与文字高度相适应。
注意：这里是bar在上,top在下，所以先定义bar。
----------------------------------------------------------*/
.bar a, .bar a:hover
{
color: #FFFFFF;
text-decoration: underline;
}
/* Hyper Links in Top and Bottom Bars
Make text white;
Set underline as a visual hint of links.
对边条里的文字和链接定义颜色、下划线。
----------------------------------------------------------*/
#top
{
width: 960px;
height: 50px;
margin: 0 auto;
font-size: 1.8em;
line-height: 50px;
color: #FFFFFF;
overflow: hidden;
}
/* Top Bar Content Holder
Fixed size = 960*50;
Horizontally centered;
Font format defined collectively here rather than individually in each cell;
"overflow: hidden" avoid impact on following elements if users use extremely large fonts.
ID=top的div放在CLASS=bar的div里面。
这里通过宽度和边距设置使其居中。
----------------------------------------------------------*/
#top .cellA
{
width: 480px;
margin-left: 30px;
float: left;
}
/* Top Bar Cell
Holding SiteMapPath.
ID=top的div里面又包含三个小的div，通过浮动使它们水平分布。
从左至右分别为cellA, cellB, cellC。
cellA包含网站地图路径的文字信息。
----------------------------------------------------------*/
#top .cellB
{
width: 330px;
float: left;
}
/* Top Bar Cell
Holding "Hi"+ User Name.
Prepared for future authentication, good!
cellB准备用来显示登陆后的用户名及问候语(现在是空的)。
----------------------------------------------------------*/
#top .cellC
{
width: 150px;
float: left;
}
/* Top Bar Cell
Holding "LogIn" and "LogOut" controls.
Prepared for future authentication, good!
cellC准备用来放置登陆和退出的控件(现在是空的)。
----------------------------------------------------------*/
#ban
{
width: 100%;
background-image:url(../image/logo/bg.gif);
background-repeat: repeat-x;
}
/* Banner Bar
Size=960*140;
Fixed size prevents its from collapse even if its child elements are floated;
Centered horizontally;
Inherit the white background from body.
只定义宽度，使其横跨整个屏幕。
----------------------------------------------------------*/
#image
{
width: 960px;
height: 180px;
margin: 0 auto;
}
/* Logo Container
Size=480*140;
Floated to left;
Note that although "cellA" is floated to left, its parent "div#ban" doesn't collapse;
because "div#ban" has specified width and height, it remains the frame even it is empty.
这里div包含公司名称的文字图片复合logo，它是一个设计好的图片，尺寸为960*140。
ID=image的div放在ID=ban的div里面。
这里div的大小与内含图片一致，通过宽度和边距设置使其在父元素里水平居中。
----------------------------------------------------------*/
#nav
{
width: 100%;
height: 44px;
background-color: #092140;
}
/* Navigation Bar
Bar size = 100%*30;
Set background color.
主导航栏定义宽度为整个屏幕，高度是为了配合按钮的突出效果。
----------------------------------------------------------*/
#nav ul
{
padding: 1px 0 0 1px;
background-color: White;
}
/* Fake Border
1px white padding on top and left like two lines;
for its child "li"s, we define only a bottom border of 1px,
together they make perfect surrounding lines around each "li".
Other methods can't achieve even lines.
----------------------------------------------------------*/
#nav li
{
position: relative;
}
/* For the Position of Child Elements
"li"s have child "ul"s that need to be positioned absolutely;
that requires parent elements to have this setting.
----------------------------------------------------------*/
#nav a
{
display: block;
border-bottom: 1px solid white;
font-family: Myriad Web Pro, Calibri;
font-size: 1.8em;
line-height: 2em;
text-align: left;
text-decoration: none;
white-space: nowrap;
background-color: #BF2A2A;
color: White;
}
/* Links in Navigation div
Display "a" as block, experienced like a real button;
Users don't need to hover mouse precisely on text to activate links;
Setting height=2em can match well with font-size=1.2em;
Specify height only, don't define width, by default it is the width of parent;
Padding left and right relatively works well with dynamic width;
"ul"=>"li"=>"a" one block in another block;
"a" has height definition, its width=parent "li" width;
No size definition for "li", its width=parent "ul" width, its height=content height="a"height;
As a result, "a"width="li"width="ul"width;
So where comes the width of "ul"? we don't define it anywhere.
The secret is that if you absolutely position a block element, in this case, the "ulB""ulC""ulD""ulE";
its width is no longer determined by parent, but by child "liB""liC""liD""liE";
while "li"s don't have size definition neither, so it keeps going down and reaches "a";
"a" has height definition, and text inside to determine width;
Eventually, "a" determines not only the height but also the width of "li"and"ul".
border-bottom work together with "ul" padding-top,left to present border look around both "li"and"a";
line-height=height can vertically center text in block element;
white-space:nowrap keeps text in one line.
----------------------------------------------------------*/
#nav a:hover
{
background: #F24738;
}
/* Link Effect
Change color when hovering.
----------------------------------------------------------*/
#nav .ulA
{
width: 959px;
height: 29px;
margin: 0 auto;
text-align: center;
background-color: #092140;
}
/* ulA Effect
Don't forget we define top and left padding of 1px for all "ul"s;
The target size of "ulA" =960*30;
same height and background-color with Nav Bar;
"margin: 0 auto" can center the "ulA" on Nav Bar;
"text-align: center" will center child inline-block "li"s in "ulA".
----------------------------------------------------------*/
#nav .liA
{
display: inline-block;
height: 30px;
margin: 0 0.3em;
}
/* liA Effect
"display: inline-block" can make "liA"s stack horizontally while maintain some block features;
Set height = Nav Bar height;
Horizontal margins help separate "liA"s from each other and evenly distribute them along Nav Bar.
----------------------------------------------------------*/
#nav .liA > a
{
width: 5em;
height: 2em;
margin: 0 auto;
padding: 0 0.5em;
border: none;
border-radius: 0.5em 0.5em 0 0;
text-align: center;
line-height: 2em;
position: relative;
top: -0.5em;
}
/* liA>a Effect
用空格分隔的选择符，“如：.liA a”， .liA下的不论是儿子辈的a还是孙子辈的a都应用样式;
".liA > a"这样写, .liA下的只有儿子辈的a应用样式.
The look and layout of "liA"s and their child "a"s are different from the rest "li"s and "a"s;
We make specific settings for them;
Set relative size = 5em*2em, so it changes when users choose different font sizes;
"margin: 0 auto" makes "a"s horizontally centered in "liA"s;
Use vertical paddings to expand "a"s, so they are a bit higher than Nav Bar;
Use horizontal paddings to expand "a"s, so text inside stays away from edges;
Offset the general border-bottom setting for "a"s;
"border-radius: 0.5em 0.5em 0 0" gives "a"s round-corner tag look;
center text inside "a"s horizontally;
line-height=height can center text inside "a"s vertically;
"position: relative"and"top: -0.6em" move "a"s from original position upward a bit,so that
the expanded "a"s overflow upward rather than downward.
----------------------------------------------------------*/
#nav .ulB
{
position: absolute;
left: -8000em;
top: 2.6em;
z-index: 5;
}
/* ulB Effect
"position: absolute" is a key step to solve the problems mentioned earlier;
"left: -8000em" helps hide "ulB"s if mouse does not hover on "liA"s;
"top: 1.8em" is the best distance by trying many values;
"z-index: 5" make sure the drop down menu is visible, won't be covered by any element beneath the Nav Bar.
----------------------------------------------------------*/
#nav .ulA > li:hover > ul
{
left: 0;
}
/* ulB Effect
The strict child element modifier ">" helps identify "ulB"s in the structure;
".ulA > li:hover > ul"
means find elements with class=ulA, when its direct child "li" is hovered, set that "li"s direct child as "left: 0";
".liA:hover > ul"
might work as well, but that requires to add class=liA to many "li"s, current syntax is more efficient.
Notice: for ":hover" to work, no space at either side of ":";
Is there a way of changing parent element appearance by hovering child element?
----------------------------------------------------------*/
#nav .liB
{
}
/* liB Effect
Reserved for future use.
----------------------------------------------------------*/
#nav .liB > a
{
width: 5em;
height: 2em;
margin: 0 auto;
padding: 0 0.5em;
text-align: left;
line-height: 2em;
}
/* .liB > a Effect
"position: absolute" is a key step to solve the problems mentioned earlier;
"left: -8000em" helps hide "ulB"s if mouse does not hover on "liA"s;
"top: 1.8em" is the best distance by trying many values;
"z-index: 5" make sure the drop down menu is visible, won't be covered by any element beneath the Nav Bar.
----------------------------------------------------------*/
#nav .ulC
{
position: absolute;
left: -8000em;
top: -1px;
z-index: 6;
}
/* ulC Effect
"position: absolute" continues for "ul";
"left: -8000em" left far away;
"top: -1px" to offset the 1px padding-top for all "ul"s;
so that sub-menu "ul" aligns with parent "li" horizontally;
"z-index: 6" makes sub-menu "ul" appears above other things;
Following "ul"s have identical settings.
----------------------------------------------------------*/
#nav .ulB > li:hover > ul
{
left: 100%;
}
/* ulC Effect
When users hover mouse over a "li", its sub-menu "ul" appears;
"left: 100%" is a genius setting, it allows sub-menu "ul" to align perfectly with its parent "li";
Please note that the width of parent "li" varies because the text in "a" is different from each other.
----------------------------------------------------------*/
#nav .liC
{
}
#nav .ulD
{
position: absolute;
left: -8000em;
top: -1px;
z-index: 7;
}
#nav .ulC > li:hover > ul
{
left: 100%;
}
#nav .liD
{
}
#nav .ulE
{
position: absolute;
left: -8000em;
top: -1px;
z-index: 8;
}
#nav .ulD > li:hover > ul
{
left: 100%;
}
#nav .liE
{
}
/* Comments Omitted
Since from "ulC" downward, settings are identical except for increasing z-index.
----------------------------------------------------------*/
#mac
{
width: 960px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
/* Main Content Container
For efficiency, we use master page as template;
This "div" holds the ContentPlaceHolder so that this part of page changes from page to page.
用于放置ContentPlaceHolder，各页面的主体内容都在这里面了。
定义宽度并居中。
----------------------------------------------------------*/
#adv
{
width: 960px;
margin: 2px auto;
}
/* Advertisement for Picture Slide Show
Fixed size=960*320, make sure pictures match the dimensions before insertion;
Why fixed size? because its parent "#mac" is set width=960 and centered horizontally.
已超出site.master范围，是为default页面元素所用。
用于放置主页上的滚动图片广告。
定义宽度和边距，使其水平居中，上下为图片与相邻元素留3px的空隙。
----------------------------------------------------------*/
.photo
{
width: 960px;
margin: 2px auto;
text-align: center;
}
/* Photo Container
Size=960*320;
for the main pages decoration photos.
已超出site.master范围，是为除主页外的其他一、二级页面元素所用。
在与主页上滚动图片广告位置相对应的地方放置静态装饰图片。
定义宽度和边距，使其水平居中，上下为图片与相邻元素留3px的空隙。
----------------------------------------------------------*/
.photo1
{
width: 500px;
margin: 10px auto;
}
.photo2
{
width: 300px;
margin: 30px auto;
}
/* Photo Container
Size=500*height;
Size=300*height;
for photos centered on various pages.
为了适应不同尺寸的图片，可以分别设置几个相应尺寸的容器。
定义宽度和边距，使其水平居中，上下为图片与相邻元素留3px的空隙。
----------------------------------------------------------*/
.iLogo
{
margin: 0;
padding: 0;
border: 0;
}
/* Logo Image
Size=380*107;
Set top and left margins to push the image away from parent edges.
统一设定装饰图片格式。
----------------------------------------------------------*/
#bot
{
width: 100%;
height: 40px;
margin: 0 auto;
}
/* Bottom Bar Container
Specified size = 960*40, it won't collapse when we float child elements;
Meanwhile it can expand its parent height to the same value;
Horizontally centered.
----------------------------------------------------------*/
#bot .cell
{
width: 600px;
margin: 0 auto;
font-size: 1.2em;
color: #FFFFFF;
line-height: 40px;
text-align: center;
}
/* Bottom Bar Container Cell
Hold icon and text;
Set height, background-color, font-size;
Unlike cells in top bar, cells in bottom bar are uniform in size, one class for all.
结构性元素的定义到此为止。
以下非结构性的元素定义全站尽量保持一致。
----------------------------------------------------------*/
p
{
margin: 0.5em 0;
font-size: 1.1em;
line-height: 1.3em;
text-align: justify;
text-indent: 2em;
}
/* Pagraph
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6
{
color: #024959;
margin: 1em 0;
}
h1
{
font-size: 1.6em;
}
h2
{
font-size: 1.5em;
}
h3
{
font-size: 1.3em;
}
h4
{
font-size: 1.1em;
}
h5, h6
{
font-size: 1em;
}
/* Heading
----------------------------------------------------------*/
ul, ol, li
{
list-style: none;
}
#mac ul, #mac ol
{
margin: 1em 0 2em 2em;
}
#mac ul li
{
margin: 0.5em 0;
}
#mac ol li
{
margin: 0.5em 0;
list-style-type: decimal;
}
/* Offset List Style
No symbols leading the "ul"s or "li"s.
----------------------------------------------------------*/
a.k
{
display: block;
margin: 0.5em 0;
}
/* A as paragraphs in text
Displayed as block like paragraphs;
Horizontal margins defined.
----------------------------------------------------------*/
h4.zk {
width: 330px;
margin: 0;
padding: 0.2em 0 0.1em 0;
border-radius:0.5em 0.5em 0 0;
float: right;
text-align: center;
background-color: #F24738;
color: #FFFFFF;
}
/* 字块标签
set the tab of a text block
----------------------------------------------------------*/
div.zk {
clear: both;
margin-bottom: 2em;
padding: 1em 2em;
border: solid 1px #F24738;
border-radius: 0.8em 0 0.8em 0.8em;
}
/* 字块内容
可包含段落和清单等其他块状元素
set the main body of a text block
----------------------------------------------------------*/
.tac {
margin: 1em 0;
width: 100%;
}
.tac table {
width: 100%;
border-collapse: collapse;
caption-side: top;
}
.tac caption
{
margin-bottom: 0.2em;
font-size: 1.2em;
color: #024959;
}
.tac th {
border: 1px solid gray;
background-color: gray;
padding: 0.2em;
color: white;
}
.tac td {
border: 1px solid gray;
padding: 0.5em;
}
/* Table Container and Table Elements Format
There are so many elements whose appearance is controlled by tables;
To avoid impact their default settings (you have to correct them piece by piece if changed);
I figured another way to use table safely;
Use a "div" to wrap a "table" whenever a "table" is needed;
Define a class for the "div", and all its "table" related child elements;
That way, settings here won't change "table" styles elsewhere;
As class, it allows as many "table"s as needed on one page.
----------------------------------------------------------*/
.gdv table {
margin: 10px auto;
}
.gdv th
{
font-size: 1.3em;
font-weight: bold;
text-align: center;
}
.gdv td
{
padding-left: 1.5em;
line-height: 2em;
white-space: nowrap;
}
.gdv td a
{
text-decoration: none;
}
.gdv td a:hover
{
color: Blue;
}
.ydh
{
margin: 1em 0;
width: 200px;
float: right;
}
.gdv .ydh a
{
color: #BF2A2A;
font-weight: bold;
}
/* Gridview Table Container
Use "gdv" div to hold gridview table.
----------------------------------------------------------*/
.eit {
margin: 1em 0;
width: 100%;
}
.eit table {
margin: 0 auto;
border-collapse: collapse;
}
.eit td
{
width: 480px;
text-align: center;
font-weight: bold;
}
/* Event Pages Image Table
Use "eit" table to hold photo and caption.
----------------------------------------------------------*/
/* Frequently Used Class
For example, to center block elements;
Details defined as below.
----------------------------------------------------------*/
.clear
{
clear: both;
}
.mark
{
background-color: Yellow;
}
.mid
{
float: left;
padding-right: 5px;
vertical-align: middle;
}
/* Image Alignment
Please note that if you plan to put several images in rows and columns'
standardize their size in AI or PS first;
"vertical-align: middle" can align the text with the middle level of the image;
just the line that have both the text and the image;
Originally, I tried to use element selector "#botR image" to apply the style;
However, that works for IE only, not for firfox or chrome;
Guess there is something wrong with the "image" control in ASP.NET;
So I define this general class, then assign it to the "image" control in ASP.NET;
This way, it works for everyone.
----------------------------------------------------------*/
.jzk
{
margin: 0 auto;
}
/* Horizontally Center Block Elements
If there is nothing else to define;
Only need to center a block element in its parent element.
好像不行，块元素可能还需要定义一个宽度才奏效。
----------------------------------------------------------*/
.jzx
{
text-align: center;
}
/* Horizontally Center Inline Elements
If there is nothing else to define;
Only need to center the inline element inside a block element.
----------------------------------------------------------*/