div css 门户架构

html-css09

div css 门户架构,第1张

/* 全局样式 */

body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0padding:0border:0}

body{background:#fffcolor:#333font-size:12pxmargin-top:5pxfont-family:"宋体"}

ul,ol{list-style-type:none}

select,input,img,select{vertical-align:middle}

a{text-decoration:underline}

a:link{color:#009}

a:visited{color:#800080}

a:hover,a:active,a:focus{color:#c00}

.clearit{clear:both}

/* page */

#page{width:950pxoverflow: visible_display:inline-blockmargin:0 auto}

/* 顶部 top */

.top{height:27pxposition:relativez-index:99padding:1pxborder:1px #fdd26c solidborder-bottom:1px #e1a841 solidcolor:#000background:url(http://i1.sinaimg.cn/home/deco/2008/0329/sinahome_0803_ws_001.gif) repeat-x 0 0 #fff}

.top a,.top a:visited{color:#000text-decoration:none}

.top a:hover,.top a:active{color:#000text-decoration:underline}

.topBlk{height:27pxoverflow:hidden_display:inline-blockbackground:url(http://i1.sinaimg.cn/home/deco/2008/0329/sinahome_0803_ws_001.gif) repeat-x 0 -50px #fdc145}

.tB02,.tB03,.tB04{float:leftoverflow:hidden}

.tB03 ul,.tB04 ul{line-height:29px}

.tB03 li,.tB04 li{float:left}

.tB03 li{padding:0 7px 0 6px}

.tB04 li{float:left}

.tB04 a{display:blockpadding:0 0 0 12pxbackground:url(http://i2.sinaimg.cn/dy/deco/2008/1121/sinahome_0803_ws_002_new.gif) no-repeat 0 -142px}

.tB04 a#setHomePage{background:url(http://i2.sinaimg.cn/dy/deco/2008/1121/sinahome_0803_ws_002_new.gif) no-repeat 0 -92pxpadding-right:12px}

.tB04 a#sinaMobile{background:url(http://i0.sinaimg.cn/dy/deco/2009/0317/sinahome_mobile_icon_01.gif) no-repeat 0 8pxpadding-right:12px}

.tB02{width:445px}

.tB03{width:262pxbackground:url(http://i2.sinaimg.cn/dy/deco/2008/1121/sinahome_0803_ws_002_new.gif) no-repeat 260px -42px}

.tB04{padding:0 0 0 10px}

/* 快速登录 */

.loginFld{padding:0 0 0 10px}

.loginFld legend{display:none}

.usernameFld,.passwordFld{float:leftwidth:141pxoverflow:hidden}

.usernameFldlabel,.passwordFldlabel{float:leftpadding:0 8px 0 0line-height:29px}

.usernameFldinput,.passwordFldinput{float:leftwidth:86pxposition:relative}

.usernameFldinput input,.passwordFldinput input{width:84pxheight:16pxpadding:0margin:0position:absolutetop:5pxleft:0border:1px #e7d6a2 solidcolor:#444background:url(http://i2.sinaimg.cn/dy/deco/2008/1121/sinahome_0803_ws_002_new.gif) no-repeat 0 0 #fffline-height:16pxfont-size:12pxtext-indent:3px}

.bottonFld{float:leftwidth:60pxoverflow:hiddenpadding:0 0 0 93px}

#bottonFldsubmit{width:49pxheight:19pxoverflow:hiddenpadding:0margin:5px 0 0 0border:1px #ffac32 solidbackground:url(http://i1.sinaimg.cn/home/deco/2008/0329/sinahome_0803_ws_001.gif) repeat-x 0 -100px #ffecccfont-size:12pxtext-align:centerline-height:15pxcursor:pointer}

.otherFld{float:leftwidth:64px}

.otherFldlostpassword{line-height:29px}

/* select */

.loginFldselect{width:110pxposition:absolutetop:6pxleft:278pxz-index:9999}

#loginFldselectdis{width:79pxheight:17pxoverflow:hiddenpadding:0 18px 0 0text-align:centerline-height:17pxbackground:url(http://i2.sinaimg.cn/dy/deco/2008/1121/sinahome_0803_ws_002_new.gif) no-repeat 0 -200px #fffborder:1px #ffa930 soliddisplay:blockcursor:pointer}

#loginFldselectop{width:97pxpadding:5px 0overflow:hiddenborder:1px #fdad34 solidposition:absolutetop:18pxleft:0background:url(http://i1.sinaimg.cn/home/deco/2008/0329/sinahome_0803_ws_001.gif) repeat-x 0 -150px #fffcf5filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90)-moz-opacity:.9opacity:0.9}

#loginFldselectop li{line-height:22pxheight:20pxoverflow:hiddentext-align:left}

#loginFldselectop li a{display:blockheight:20pxoverflow:hiddenmargin:0 5pxpadding-left:12px}

#loginFldselectop li a:hover,#loginFldselectop li a:active{background:#fef0e2text-decoration:none}

#loginFldselectop li#loginFldselectop_line{height:1pxoverflow:hiddenbackground:#ffc88efont-size:0line-height:0margin:2px 5px 3px}

#loginFldselectop li a.disabled{color:#999cursor:default}

#loginFldselectop li a.disabled:hover,#loginFldselectop li a.disabled:active{background:none}

/* logo&nav */

.logonav{height:85pxoverflow:hiddenborder:1px #e0e0e0 solidborder-top:nonemargin-bottom:8pxposition:relativez-index:0background:url(http://i1.sinaimg.cn/home/deco/2008/0329/sinahome_0803_ws_001.gif) repeat-x 0 -400px #f9f9f9}

/* logo */

.logo{width:145pxheight:52pxposition:absolutetop:0left:10px}

.logo h1{height:44pxposition:absolutetop:10px*top:8pxleft:13px}

/* weather */

.weather{height:20pxoverflow:hiddenposition:absolutetop:57pxleft:6pxz-index:98}

/* 导航 */

.nav{width:790pxheight:85pxoverflow:hiddenposition:absolutetop:0right:0}

.nav_1,.nav_2,.nav_3{overflow:hidden_display:inline-blockfloat:leftpadding-top:13px}

.nav_1{width:440pxbackground:url(http://i2.sinaimg.cn/dy/deco/2008/1121/sinahome_0803_ws_002_new.gif) no-repeat 439px -287px}

.nav_2{width:107pxbackground:url(http://i2.sinaimg.cn/dy/deco/2008/1121/sinahome_0803_ws_002_new.gif) no-repeat 106px -287pxmargin-left:3pxdisplay:inline}

.nav_3{width:125px}

.nav ul{height:23pxclear:both}

.nav li{float:leftpadding:0 6px 0 6pxmargin-left:-1pxtext-align:centerline-height:14pxbackground:url(http://i2.sinaimg.cn/dy/deco/2008/1121/sinahome_0803_ws_002_new.gif) no-repeat 0 -250px}

.nav .nav_1 li{padding:0 6px 0 7px}

.nav a,.nav a:visited{color:#000text-decoration:none}

.nav a:hover,.nav a:active{color:#c00text-decoration:none}

/* Part */

.Part{width:950pxoverflow:hidden_display:inline-blockpadding-bottom:10pxclear:both}

.left{width:160pxoverflow:hiddenfloat:left_display:inline-blockbackground:url(http://i0.sinaimg.cn/home/deco/2008/0329/sinahome_0803_ws_003_new.gif) repeat-y 0 0 #ffd77bborder-bottom:1px #e5b952 solid}

#PartA{height:810pxoverflow:hidden}

#PartA .left{height:810px}

#PartB{padding-bottom:0}

#PartB .left{height:299px}

#PartC{padding:10px 0*padding:10px 0 0 0overflow:visible}

#PartC .left{height:581px}

#PartC .rightbox{overflow:visible}

#PartC .right{overflow:visible}

#PartD .left{height:380px}

#PartE .left{height:410px}

#PartF .left{height:310px}

#PartG .left{height:248px}

#PartH .left{height:391px}

#PartI .left{height:507px}

.rightbox{width:790pxoverflow:hiddenfloat:left_display:inline-block}

.middle,.right{width:395pxoverflow:hidden_display:inline-blockfloat:left}

.colpadding{padding:0 0 0 10px}

.md{background:url(http://i0.sinaimg.cn/home/deco/2008/0329/sinahome_0803_ws_003_new.gif) repeat-y -400px 0 #fffborder-bottom:1px #d1d1d1 solidoverflow:hidden_display:inline-block}

.md_2{background:url(http://i0.sinaimg.cn/home/deco/2008/0329/sinahome_0803_ws_003_new.gif) repeat-y -400px 0 #fffborder-bottom:1px #d1d1d1 solidborder-top:1px #d1d1d1 solidoverflow:hidden_display:inline-blockmargin-bottom:10px}

.md_3{}

.md_3 h2{height:28pxoverflow:hiddenfont-size:14pxmargin:0 1px}

.md_3 h2 .capname{float:leftpadding:6px 0 0 14pxline-height:14px}

.md_purple{background:url(http://i0.sinaimg.cn/home/deco/2008/0329/sinahome_0803_ws_003_new.gif) repeat-y -1200px 0 #fffborder-bottom:1px #cdbff1 solid}

.md_purple h2{background:url(http://i1.sinaimg.cn/home/deco/2008/0329/sinahome_0803_ws_001.gif) repeat-x 0 -650px #cdbff1color:#5d1c9f}

.md_purple h2 a,.md_purple h2 a:visited{color:#5d1c9ftext-decoration:none}

.md_purple h2 a:hover,.md_purple h2 a:active{color:#5d1c9ftext-decoration:underline}

.md_pink{background:url(http://i0.sinaimg.cn/home/deco/2008/0329/sinahome_0803_ws_003_new.gif) repeat-y -1600px 0 #fffborder-bottom:1px #ffb5b5 solid}

.md_pink h2{background:url(http://i1.sinaimg.cn/home/deco/2008/0329/sinahome_0803_ws_001.gif) repeat-x 0 -700px #ffb5b5color:#e84d4d}

.md_pink h2 a,.md_pink h2 a:visited{color:#e84d4dtext-decoration:none}

.md_pink h2 a:hover,.md_pink h2 a:active{color:#e84d4dtext-decoration:underline}

.md_orange{background:url(http://i0.sinaimg.cn/home/deco/2008/0329/sinahome_0803_ws_003_new.gif) repeat-y -2000px 0 #fffborder-bottom:1px #ffdeb4 solid}

.md_orange h2{background:url(http://i1.sinaimg.cn/home/deco/2008/0329/sinahome_0803_ws_001.gif) repeat-x 0 -750px #ffdeb4color:#ff6000}

.md_orange h2 a,.md_orange h2 a:visited{color:#ff6000text-decoration:none}

.md_orange h2 a:hover,.md_orange h2 a:active{color:#ff6000text-decoration:underline}

.md_green{background:url(http://i0.sinaimg.cn/home/deco/2008/0329/sinahome_0803_ws_003_new.gif) repeat-y -2400px 0 #fffborder-bottom:1px #cfe8c4 solid}

.md_green h2{background:url(http://i1.sinaimg.cn/home/deco/2008/0329/sinahome_0803_ws_001.gif) repeat-x 0 -800px #cfe8c4color:#338e3a}

.md_green h2 a,.md_green h2 a:visited{color:#338e3atext-decoration:none}

.md_green h2 a:hover,.md_green h2 a:active{color:#338e3atext-decoration:underline}

.md_yellow{background:url(http://i0.sinaimg.cn/home/deco/2008/0329/sinahome_0803_ws_003_new.gif) repeat-y -2800px 0 #fffborder-bottom:1px #f6d76d solid}

.md_yellow h2{background:url(http://i1.sinaimg.cn/home/deco/2008/0329/sinahome_0803_ws_001.gif) repeat-x 0 -850px #f6d76dcolor:#ee9802}

.md_yellow h2 a,.md_yellow h2 a:visited{color:#ee9802text-decoration:none}

.md_yellow h2 a:hover,.md_yellow h2 a:active{color:#ee9802text-decoration:underline}

.md_blue{background:url(http://i0.sinaimg.cn/home/deco/2008/0329/sinahome_0803_ws_003_new.gif) repeat-y -3200px 0 #fffborder-bottom:1px #b7d0ef solid}

.md_blue h2{background:url(http://i1.sinaimg.cn/home/deco/2008/0329/sinahome_0803_ws_001.gif) repeat-x 0 -900px #b7d0efcolor:#005ece}

.md_blue h2 a,.md_blue h2 a:visited{color:#005ecetext-decoration:none}

.md_blue h2 a:hover,.md_blue h2 a:active{color:#005ecetext-decoration:underline}

.hd{height:27pxoverflow:hiddenbackground:url(http://i1.sinaimg.cn/home/deco/2008/0329/sinahome_0803_ws_001.gif) repeat-x 0 -500px #858585}

.hd h2{height:27pxoverflow:hidden_display:inline-blockbackground:url(http://i2.sinaimg.cn/dy/deco/2008/1121/sinahome_0803_ws_002_new.gif) no-repeat right -550px #f6f6f6float:leftpadding:0 3px 0 0}

.hd h2 .capname{padding:8px 20px 0 23pxheight:19pxline-height:14pxfont-size:14pxcolor:#333display:blockfloat:leftbackground:url(http://i2.sinaimg.cn/dy/deco/2008/1121/sinahome_0803_ws_002_new.gif) no-repeat left -600px}

.hd h2 .capsl{}

.hd h2 .capsr{}

.hd h2 a,.hd h2 a:visited{color:#333text-decoration:nonecursor:pointer}

.hd h2 a:hover,.hd h2 a:active{color:#333text-decoration:underline}

.hd .hdlink{float:rightpadding:7px 6px 0 0color:#fffae1line-height:14px}

.hd .hdlink a,.hd .hdlink a:visited{color:#fffae1text-decoration:underline}

.hd .hdlink a:hover,.hd .hdlink a:active{color:#ffd77btext-decoration:underline}

.hd ul{height:27pxoverflow:hiddenfloat:left}

.hd li{height:27pxoverflow:hidden_display:inline-blockbackground:url(http://i2.sinaimg.cn/dy/deco/2008/1121/sinahome_0803_ws_002_new.gif) no-repeat right -850px #797979float:leftpadding:0 3px 0 0cursor:pointer}

.hd li .capname{padding:8px 13px 0 16pxheight:19pxline-height:14pxfont-size:14pxcolor:#333display:blockfloat:leftbackground:url(http://i2.sinaimg.cn/dy/deco/2008/1121/sinahome_0803_ws_002_new.gif) no-repeat left -800pxfont-weight:bold}

.hd li a,.hd li a:visited{color:#ffftext-decoration:nonecursor:pointer}

.hd li a:hover,.hd li a:active{color:#ffftext-decoration:underline}

.hd li .videoNewsLeft{padding:0 0 0 0background:none}

.hd li.on{background:url(http://i2.sinaimg.cn/dy/deco/2008/1121/sinahome_0803_ws_002_new.gif) no-repeat right -550px #f6f6f6}

.hd li.on .capname{background:url(http://i2.sinaimg.cn/dy/deco/2008/1121/sinahome_0803_ws_002_new.gif) no-repeat left -600px}

.hd li.on a,.hd li.on a:visited{color:#333text-decoration:nonecursor:pointer}

.hd li.on a:hover,.hd li.on a:active{color:#333text-decoration:underline}

.hd li.on .videoNewsLeft{background:url(http://i1.sinaimg.cn/dy/deco/2007/1211/yocc/unfcn_mj_01.gif) no-repeat -19982px 50%padding-left:20px}

.hd #videomenu li.on .capname{padding-left:4pxpadding-right:4px}

.hd_2{height:24pxoverflow:hiddenmargin:0 1pxbackground:url(http://i1.sinaimg.cn/home/deco/2008/0329/sinahome_0803_ws_001.gif) repeat-x 0 -601px #fff4cb}

.md_2_menu{width:311pxheight:22pxoverflow:hiddenpadding:1px 1px 0 0float:right}

.md_2_menu li{width:60pxheight:22pxoverflow:hiddenbackground:url(http://i2.sinaimg.cn/dy/deco/2008/1121/sinahome_0803_ws_002_new.gif) no-repeat 0 -950pxfloat:leftpadding:0 2px 0 0}

.md_2_menu li a,.md_2_menu li a:visited,.md_2_menu li a:hover,.md_2_menu li a:active{display:blockpadding:5px 0 0 0height:17pxline-height:14pxtext-align:centertext-decoration:nonecolor:#000}

.md_2_menu li.on{background:url(http://i2.sinaimg.cn/dy/deco/2008/1121/sinahome_0803_ws_002_new.gif) no-repeat 0 -972px}

.md_2_menu li.on a,.md_2_menu li.on a:visited,.md_2_menu li.on a:hover,.md_2_menu li.on a:active{color:#982e00font-weight:bold}

.md2_list{float:leftpadding:0 10px 0 0}

.mdbtmlinkblk1{height:28pxoverflow:hiddenpadding:2px 0 1pxmargin:0 2pxbackground:url(http://i0.sinaimg.cn/home/deco/2008/0329/sinahome_0803_ws_003_new.gif) no-repeat -802px 0 #fff7e3text-align:centerline-height:30pxcolor:#ea3d00}

.mdbtmlinkblk1 a,.mdbtmlinkblk1 a:visited{color:#ea3d00text-decoration:none}

.mdbtmlinkblk1 a:hover,.mdbtmlinkblk1 a:active{color:#c00text-decoration:underline}

.h2_lf_s1{height:24pxoverflow:hiddenbackground:url(http://i2.sinaimg.cn/dy/deco/2008/1121/sinahome_0803_ws_002_new.gif) no-repeat 0 -750px #ffe4a6}

.h2_lf_s1 .capname{line-height:14pxfont-size:12pxcolor:#333padding:6px 0 0 0text-align:centerdisplay:block}

.h2_lf_s1 a,.h2_lf_s1 a:visited{color:#333text-decoration:none}

.h2_lf_s1 a:hover,.h2_lf_s1 a:active{color:#333text-decoration:underline}

.h2_lf_s2{height:24pxoverflow:hiddenclear:bothbackground:url(http://i2.sinaimg.cn/dy/deco/2008/1121/sinahome_0803_ws_002_new.gif) no-repeat 0 -1150px #c71b1bcolor:#ffffont-size:12px}

.h2_lf_s2 a,.h2_lf_s2 a:visited{color:#ffftext-decoration:none}

.h2_lf_s2 a:hover,.h2_lf_s2 a:active{color:#ffftext-decoration:underline}

.h2_lf_s2 .capname{float:leftpadding:7px 0 0 22pxline-height:14px}

.lBlk1{padding:6px 5px 0 2px}

.lBlk1 ul li{line-height:21pxcolor:#000background-position:5px 1px}

/* 图文 */

.imgtxt01{padding:10px 0 0 14pxheight:95pxoverflow:hidden_display:inline-block}

.it01img{width:105pxfloat:leftoverflow:hidden}

.it01img a,.it01img a:visited{color:#ffftext-decoration:underlinedisplay:block}

.it01img a:hover,.it01img a:active{color:#ffatext-decoration:underlinen}

.it01img a img{border:1px #ccc solid}

.it01img a:hover img,.it01img a:active img{border:1px #ffc133 solid}

.it01ib{display:blockpadding-bottom:3px}

.it01tb{display:blockheight:18pxpadding:4px 0 0 0line-height:14pxoverflow:hiddenbackground:#c00cursor:pointertext-align:center}

.it01txt{float:leftpadding-left:2pxwidth:263px}

.it01txt ul li{font-size:14pxline-height:24pxpadding-left:14px}

.imgtxt02{padding:10px 0 0 14pxheight:116pxoverflow:hidden_display:inline-block}

.it02img{width:105pxfloat:leftoverflow:hidden}

.it02img a,.it02img a:visited{color:#ffftext-decoration:underlinedisplay:block}

.it02img a:hover,.it02img a:active{color:#ffatext-decoration:underlinen}

.it02img a img{padding:7px 8px 23pxbackground:url(http://i2.sinaimg.cn/dy/deco/2008/1121/sinahome_0803_ws_002_new.gif) no-repeat 0 -650pxdisplay:block}

.it02img a:hover img,.it02img a:active img{background:url(http://i2.sinaimg.cn/dy/deco/2008/1121/sinahome_0803_ws_002_new.gif) no-repeat 0 -1350pxdisplay:block}

.it02ib{display:blockpadding-bottom:3px}

.it02tb{display:blockheight:18pxpadding:4px 0 0 0line-height:14pxoverflow:hiddenbackground:#c00cursor:pointertext-align:center}

.it02txt{margin-top:-2pxfloat:leftpadding-left:2pxwidth:263px}

.it02txt ul li{font-size:14pxline-height:24pxpadding-left:14px}

.imgtxt03{padding:6px 0 0 9pxoverflow:hiddenclear:both}

.it03img{padding:0 0 8px 3px}

.it03img img{border:1px #000 solid}

.it03txt{_display:inline-blockoverflow:hidden}

.it03txt li{float:leftpadding:0 5px 0 0line-height:14pxheight:21px}

/* 列表 */

.mdlist{padding:8px 0 0 9px}

1、符合W3C标准。微软等公司均为W3C支持者。这一点是最重要的,因为这保证您的网站不会因为将来网络应用的升级而被淘汰。

2、支持浏览器的向后兼容,也就是无论未来的浏览器大战,胜利的是IE7或者是火狐,您的网站都能很好的兼容。

3、搜索引擎更加友好。相对与传统的table,

采用DIV+CSS技术的网页,对于搜索引擎的收录更加友好。

4、样式的调整更加方便。内容和样式的分离,使页面和样式的调整变得更加方便。

现在YAHOO,MSN等国际门户网站,网易,新浪等国内门户网站,和主流的WEB2.0网站,均采用DIV+CSS的框架模式,更加印证了DIV+CSS是大势所趋。

5、CSS的极大优势表现在简洁的代码,对于一个大型网站来说,可以节省大量带宽,而且众所周知,搜索引擎喜欢清洁的代码。

6、表现和结构分离,在团队开发中更容易分工合作而减少相互关联性