?? css.css
字號:
/*****************************************************************
******************************************************************
以下為所有風(fēng)格通用樣式
margin: 0;padding: 0;設(shè)置外邊距,內(nèi)邊距空隙都為0
font-size: 12px;為字體大小.一般表格內(nèi)的,不受他控制
li,ul設(shè)置list-style: none;主要是取消默認(rèn)的小圓點.不太好看
******************************************************************
*****************************************************************/
body, form, ul, li, p, dl, dd, dt ,h,td,th,h3{
margin: 0;
padding: 0;
font-size: 12px;
}
li,ul{
list-style: none;
}
body{
background:url(../images/bg.gif) center;
}
/******************************************
TD中的color: #333333;為沒有超級鏈接的字體顏色
VERTICAL-ALIGN: top;表格里的內(nèi)容居頂
text-align:left;表格里的內(nèi)容居左
*******************************************/
TD {
color: #333;
VERTICAL-ALIGN: top;
}
/******************************************
border:1px solid #ccc; 表單邊框為1個像素的實線,
要為虛線改solid為dotted,要換顏色改#ccc
可以自定義背景顏色
background:#eee;
*******************************************/
input,textarea{
border:1px solid #3371B2;
background:#F7F7F7;
}
/******************************************
網(wǎng)頁整體寬度
******************************************/
.wrap{
width:900px;
padding:0 10px 0 10px;
background:#fff;
margin:auto;
}
/*橫幅廣告*/
#banner_ad{
margin-top:5px;
display:none;
}
/******************************************
font-size: 12px;超級鏈接字體大小
color:字體顏色
text-decoration: none;沒有下畫線.要有下畫線.改none為underline
a 為統(tǒng)一超級鏈接,
a:link沒有點擊過的超級鏈接樣式
a:visited 被點擊過的超級鏈接樣式
a:hover 鼠標(biāo)指向時的超級鏈接樣式
a:active 被用戶激活(在鼠標(biāo)點擊與釋放之間發(fā)生的事件)時的樣式.少用
*******************************************/
a {
font-size: 12px;
}
a:link {
color: #333;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #333;
}
a:hover {
text-decoration: underline;
color: #333;
}
a:active {
text-decoration: none;
}
/******************************************
#toplogin 網(wǎng)頁頂部登錄框表格ID編號
background表格背景顏色
height高度
*******************************************/
#toplogin{
background:#F7F7F7;
border:1px solid #3371B2;
height:20px;
}
#toplogin td{
padding:1px 0 1px 0 ;
}
#toplogin .jstime{
margin-top:5px;
margin-right:5px;
}
/******************************************
#toplogin input.login_name用戶名表單,
#toplogin input.login_pwd密碼表單,寫在一行,用,號分開共用樣式
width:90px;表單寬
height:15px;表單高
*******************************************/
#toplogin input.login_name,#toplogin input.login_pwd{
width:90px;
height:15px;
}
/******************************************
#toplogin input.login_sub提交按鈕表單,
width:90px;表單寬
height:15px;表單高
background:#D2E4FC; 背景顏色
*******************************************/
#toplogin input.login_sub{
width:40px;
height:19px;
background:#3371B2;
color:#fff;
}
/******************************************
#header div 頭部LOGO與廣告圖的容器,
float:left;靠左排列
#header div.ad廣告容器,樣式指定了靠右
*******************************************/
#header div{
float:left;
}
#header div.ad{
float:right;
font-size:25px;
font-weight:bold;
color:#fff;
font-style: italic;
padding-top:10px;
padding-right:10px;
letter-spacing:3px;
}
#header div.search{
float:right;
font-weight:bold;
color:#fff;
padding-top:100px;
padding-right:10px;
letter-spacing:3px;
}
/******************************************
#header頭部大表格
margin-bottom:10px;與下面的表格距離10像素
border-top:#ccc 1px solid;表格上方一個像素的實線,顏色為#ccc,
可以把solid改成虛線dotted
#header td 大表格內(nèi)的TD
padding-top:8px;上方留空8個像素
*******************************************/
#header{
margin-bottom:10px;
border-top:#ccc 0px solid;
background:url(../images/logobg.gif);
}
#header td{
padding:0px;
margin:0px;
}
/******************************************
#guide頭部網(wǎng)站導(dǎo)航表格編號
margin-top:5px;與上方表格距離5像素
border:1px #6B92D6 solid;邊框樣式solid改為dotted則為虛線
height:28px;高度
background:#D2E4FC;背景顏色
#guide td導(dǎo)航表格內(nèi)部TD容器
border:1px solid #FFF;內(nèi)邊框樣式
padding:6px 3px 4px 3px;導(dǎo)航文字與上右下左的距離
*******************************************/
#guide{
margin-top:5px;
border:1px #3371B2 solid;
height:28px;
background:#3371B2;
}
#guide td{
border:1px solid #FFF;
padding:6px 3px 4px 3px;
}
#guide td a{
color:#fff;
}
/******************************************
整體大表格之間的間隙
******************************************/
.MainTable{
margin-top:5px;
}
/******************************************
.MainTable .guide樣式導(dǎo)航表格樣式
margin-top:5px;與上方表格的距離
border:1px #A7CAFA solid;邊框樣式,solid可更換成dotted虛線
height:20px;表格高度
background:#F5FAFE;表格背景顏色
.MainTable .guide td{ padding:5px; 表格內(nèi)的文字距離四周的間距
可改成 padding:5px 0 0 0;指上右下左
*******************************************/
.MainTable .guide{
margin-top:5px;
border:1px #3371B2 solid;
height:20px;
background:#F7F7F7;
}
.MainTable .guide td{
padding:5px 0 2px 5px;
border:1px #FFF solid;
}
/*****************************************************************
******************************************************************
內(nèi)容大表格模塊樣式
width:100%;占滿整個空間寬度
margin-top:5px;與上一個表格間距為5個像素
overflow:hide;內(nèi)容超過時,將隱藏.不過上面用百分比,一般這里設(shè)置無效.
只有上面用具體像素,這里才生效
border:1px #A7CAFA solid;邊框樣式,1個像素,可以改solid為虛線dotted,要取消邊框改1px為0px
******************************************************************
******************************************************************/
.dragTable{
width:100%;
margin-top:5px;
overflow:hide;
background:#F7F7F7;
border:1px #3371B2 solid;
}
/******************************************
內(nèi)容表格模塊頭部樣式
background:#D2E4FC;背景顏色
height:20px;高度
padding-left:1em;字體與左邊距離
padding-top:7px;字體與上方距離
border:1px #FFF solid;內(nèi)邊框樣式,一般設(shè)置為0px較多,即不要內(nèi)邊框居多
******************************************/
.dragTable .head{
background:#FFf url(../images/headbg.gif);
height:20px;
padding-left:1em;
padding-top:7px;
border:1px #A8CFE7 solid;
border-bottom:1px #A8CFE7 solid;
color:#fff;
}
.dragTable .head a{
color:#fff;
}
/******************************************
模塊主題文字
float:left;居左,
可以設(shè)置為粗體 font-weight:bold;顏色為color:#000;
******************************************/
.dragTable .TAG{
float:left;
}
/******************************************
右邊窄表格模塊樣式
width:98%;寬度
line-height:17px;字體行高
******************************************/
.MainTable .Side .dragTable{
width:98%;
}
.MainTable .Side .dragTable .middle{
line-height:17px;
}
/******************************************
內(nèi)容模塊主體部分
padding:8px;距離四周距離為8個像素,
可以改成更具體些的padding:8px 0 0 0;即上右下左的距離
line-height:20px;行高,即是使用<br>換行符時的文字行高
******************************************/
.dragTable .middle{
padding:6px 1px 4px 7px;
height:50px;
line-height:20px;
}
/******************************************
右邊窄表格最新,最熱的內(nèi)容樣式.
width:210px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
通過設(shè)定固定寬度,使控制自動隱藏超出邊界的內(nèi)容自動隱藏,用省略號表示
只對<ul><li>有效
******************************************/
.MainTable .Side .dragTable .middle ul li{
width:210px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
/******************************************
右邊窄表格最新,最熱的標(biāo)題樣式.
必須<ul><li>有超鏈接的才有效
display:block;定義鏈接為實體,方便做效果處理
margin-left:4px;文字與左邊大表格邊框的距離
text-indent:0.6em;文字與小圖標(biāo)的距離
background:url(title_icon3.gif) no-repeat left; 右邊列表,最熱,最新等等標(biāo)題前面的小圖標(biāo)
no-repeat 不平鋪 left;背景居左
******************************************/
.MainTable .Side .dragTable .middle ul li a{
display:block;
margin-left:4px;
text-indent:0.6em;
background:url(../images/title_icon3.gif) no-repeat left;
}
/******************************************
列表頁,包括首頁,文章子欄目文章表格樣式,表格高度
******************************************/
#AutoRows .dragTable .middle{
height:100px;
padding-top:0px;
padding-bottom:0px;
}
/******************************************
列表頁,包括首頁,文章子欄目文章標(biāo)題樣式
width:246px;
display:block;
overflow:hidden;
text-overflow:ellipsis;
定義width指定寬度.是為了自動隱藏超出邊界的標(biāo)題.用百分比不能控制
line-height:18px;行高
text-indent:0.6em;文字小圖標(biāo)的距離
background:url(../images/title_icon3.gif) no-repeat ;標(biāo)題前的小圖標(biāo)
background-position: 0 40%; 小圖標(biāo)X,Y的坐標(biāo)
******************************************/
#AutoRows .dragTable ul li{
width:246px;
display:block;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
line-height:18px;
text-indent:0.6em;
background:url(../images/title_icon3.gif) no-repeat ;
background-position: 0 40%;
}
/******************************************
文章中列表頁中的圖片主題,圖片列表
?? 快捷鍵說明
復(fù)制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -