div css 门户架构
发布网友
发布时间：2022-04-21 09:46
共3个回答
热心网友
时间：2022-04-22 08:43
/* 全局样式 */
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;}
body{background:#fff;color:#333;font-size:12px; margin-top:5px;font-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:950px; overflow: visible; _display:inline-block; margin:0 auto;}
/* 顶部 top */
.top{height:27px; position:relative; z-index:99; padding:1px; border:1px #fdd26c solid; border-bottom:1px #e1a841 solid; color:#000; background: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:#000; text-decoration:none;}
.top a:hover,.top a:active{color:#000; text-decoration:underline;}
.topBlk{height:27px; overflow:hidden; _display:inline-block; background:url(http://i1.sinaimg.cn/home/deco/2008/0329/sinahome_0803_ws_001.gif) repeat-x 0 -50px #fdc145;}
.tB02,.tB03,.tB04{float:left; overflow: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:block; padding:0 0 0 12px; background: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 -92px; padding-right:12px;}
.tB04 a#sinaMobile{background:url(http://i0.sinaimg.cn/dy/deco/2009/0317/sinahome_mobile_icon_01.gif) no-repeat 0 8px; padding-right:12px;}
.tB02{width:445px;}
.tB03{width:262px; background: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:left; width:141px; overflow:hidden;}
.usernameFldlabel,.passwordFldlabel{float:left; padding:0 8px 0 0; line-height:29px;}
.usernameFldinput,.passwordFldinput{float:left; width:86px; position:relative;}
.usernameFldinput input,.passwordFldinput input{width:84px; height:16px; padding:0; margin:0; position:absolute; top:5px; left:0; border:1px #e7d6a2 solid; color:#444; background:url(http://i2.sinaimg.cn/dy/deco/2008/1121/sinahome_0803_ws_002_new.gif) no-repeat 0 0 #fff; line-height:16px; font-size:12px; text-indent:3px;}
.bottonFld{float:left; width:60px; overflow:hidden; padding:0 0 0 93px;}
#bottonFldsubmit{width:49px; height:19px; overflow:hidden; padding:0; margin:5px 0 0 0; border:1px #ffac32 solid; background:url(http://i1.sinaimg.cn/home/deco/2008/0329/sinahome_0803_ws_001.gif) repeat-x 0 -100px #ffeccc; font-size:12px; text-align:center; line-height:15px; cursor:pointer;}
.otherFld{float:left; width:px;}
.otherFldlostpassword{line-height:29px;}
/* select */
.loginFldselect{width:110px; position:absolute; top:6px; left:278px; z-index:9999;}
#loginFldselectdis{width:79px; height:17px; overflow:hidden; padding:0 18px 0 0; text-align:center; line-height:17px; background:url(http://i2.sinaimg.cn/dy/deco/2008/1121/sinahome_0803_ws_002_new.gif) no-repeat 0 -200px #fff; border:1px #ffa930 solid; display:block; cursor:pointer;}
#loginFldselectop{width:97px; padding:5px 0; overflow:hidden; border:1px #fdad34 solid; position:absolute; top:18px; left:0; background:url(http://i1.sinaimg.cn/home/deco/2008/0329/sinahome_0803_ws_001.gif) repeat-x 0 -150px #fffcf5;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90); -moz-opacity:.9; opacity:0.9;}
#loginFldselectop li{line-height:22px; height:20px; overflow:hidden; text-align:left;}
#loginFldselectop li a{display:block; height:20px; overflow:hidden; margin:0 5px; padding-left:12px;}
#loginFldselectop li a:hover,#loginFldselectop li a:active{background:#fef0e2; text-decoration:none;}
#loginFldselectop li#loginFldselectop_line{height:1px; overflow:hidden; background:#ffc88e; font-size:0; line-height:0; margin:2px 5px 3px;}
#loginFldselectop li a.disabled{color:#999;cursor:default;}
#loginFldselectop li a.disabled:hover,#loginFldselectop li a.disabled:active{background:none;}
/* logo&nav */
.logonav{height:85px; overflow:hidden; border:1px #e0e0e0 solid; border-top:none; margin-bottom:8px; position:relative; z-index:0; background:url(http://i1.sinaimg.cn/home/deco/2008/0329/sinahome_0803_ws_001.gif) repeat-x 0 -400px #f9f9f9;}
/* logo */
.logo{width:145px; height:52px; position:absolute; top:0; left:10px;}
.logo h1{height:44px;position:absolute; top:10px; *top:8px; left:13px;}
/* weather */
.weather{height:20px; overflow:hidden; position:absolute; top:57px; left:6px; z-index:98;}
/* 导航 */
.nav{width:790px; height:85px; overflow:hidden; position:absolute; top:0; right:0;}
.nav_1,.nav_2,.nav_3{overflow:hidden; _display:inline-block; float:left; padding-top:13px;}
.nav_1{width:440px; background:url(http://i2.sinaimg.cn/dy/deco/2008/1121/sinahome_0803_ws_002_new.gif) no-repeat 439px -287px;}
.nav_2{width:107px; background:url(http://i2.sinaimg.cn/dy/deco/2008/1121/sinahome_0803_ws_002_new.gif) no-repeat 106px -287px;margin-left:3px;display:inline;}
.nav_3{width:125px;}
.nav ul{height:23px;clear:both;}
.nav li{float:left; padding:0 6px 0 6px; margin-left:-1px; text-align:center; line-height:14px; background: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:#000; text-decoration:none;}
.nav a:hover,.nav a:active{color:#c00; text-decoration:none;}
/* Part */
.Part{width:950px; overflow:hidden; _display:inline-block; padding-bottom:10px; clear:both;}
.left{width:160px; overflow:hidden; float:left; _display:inline-block; background:url(http://i0.sinaimg.cn/home/deco/2008/0329/sinahome_0803_ws_003_new.gif) repeat-y 0 0 #ffd77b; border-bottom:1px #e5b952 solid;}
#PartA{height:810px; overflow:hidden;}
#PartA .left{height:810px;}
#PartB{padding-bottom:0;}
#PartB .left{height:299px;}
#PartC{padding:10px 0; *padding:10px 0 0 0; overflow: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:790px; overflow:hidden; float:left; _display:inline-block;}
.middle,.right{width:395px; overflow:hidden; _display:inline-block; float: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 #fff; border-bottom:1px #d1d1d1 solid; overflow: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 #fff; border-bottom:1px #d1d1d1 solid; border-top:1px #d1d1d1 solid; overflow:hidden; _display:inline-block; margin-bottom:10px;}
.md_3{}
.md_3 h2{height:28px; overflow:hidden; font-size:14px; margin:0 1px;}
.md_3 h2 .capname{float:left; padding:6px 0 0 14px; line-height:14px;}
.md_purple{background:url(http://i0.sinaimg.cn/home/deco/2008/0329/sinahome_0803_ws_003_new.gif) repeat-y -1200px 0 #fff; border-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 #cdbff1; color:#5d1c9f;}
.md_purple h2 a,.md_purple h2 a:visited{color:#5d1c9f;text-decoration:none;}
.md_purple h2 a:hover,.md_purple h2 a:active{color:#5d1c9f;text-decoration:underline;}
.md_pink{background:url(http://i0.sinaimg.cn/home/deco/2008/0329/sinahome_0803_ws_003_new.gif) repeat-y -1600px 0 #fff; border-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 #ffb5b5; color:#e84d4d;}
.md_pink h2 a,.md_pink h2 a:visited{color:#e84d4d;text-decoration:none;}
.md_pink h2 a:hover,.md_pink h2 a:active{color:#e84d4d;text-decoration:underline;}
.md_orange{background:url(http://i0.sinaimg.cn/home/deco/2008/0329/sinahome_0803_ws_003_new.gif) repeat-y -2000px 0 #fff; border-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 #ffdeb4; color:#ff6000;}
.md_orange h2 a,.md_orange h2 a:visited{color:#ff6000;text-decoration:none;}
.md_orange h2 a:hover,.md_orange h2 a:active{color:#ff6000;text-decoration:underline;}
.md_green{background:url(http://i0.sinaimg.cn/home/deco/2008/0329/sinahome_0803_ws_003_new.gif) repeat-y -2400px 0 #fff; border-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 #cfe8c4; color:#338e3a;}
.md_green h2 a,.md_green h2 a:visited{color:#338e3a;text-decoration:none;}
.md_green h2 a:hover,.md_green h2 a:active{color:#338e3a;text-decoration:underline;}
.md_yellow{background:url(http://i0.sinaimg.cn/home/deco/2008/0329/sinahome_0803_ws_003_new.gif) repeat-y -2800px 0 #fff; border-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 #f6d76d; color:#ee9802;}
.md_yellow h2 a,.md_yellow h2 a:visited{color:#ee9802;text-decoration:none;}
.md_yellow h2 a:hover,.md_yellow h2 a:active{color:#ee9802;text-decoration:underline;}
.md_blue{background:url(http://i0.sinaimg.cn/home/deco/2008/0329/sinahome_0803_ws_003_new.gif) repeat-y -3200px 0 #fff; border-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 #b7d0ef; color:#005ece;}
.md_blue h2 a,.md_blue h2 a:visited{color:#005ece;text-decoration:none;}
.md_blue h2 a:hover,.md_blue h2 a:active{color:#005ece;text-decoration:underline;}
.hd{height:27px; overflow:hidden; background:url(http://i1.sinaimg.cn/home/deco/2008/0329/sinahome_0803_ws_001.gif) repeat-x 0 -500px #858585;}
.hd h2{height:27px; overflow:hidden; _display:inline-block; background:url(http://i2.sinaimg.cn/dy/deco/2008/1121/sinahome_0803_ws_002_new.gif) no-repeat right -550px #f6f6f6; float:left; padding:0 3px 0 0;}
.hd h2 .capname{padding:8px 20px 0 23px; height:19px; line-height:14px; font-size:14px; color:#333; display:block; float:left; background: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:#333; text-decoration:none; cursor:pointer;}
.hd h2 a:hover,.hd h2 a:active{color:#333; text-decoration:underline;}
.hd .hdlink{float:right; padding:7px 6px 0 0; color:#fffae1; line-height:14px;}
.hd .hdlink a,.hd .hdlink a:visited{color:#fffae1; text-decoration:underline;}
.hd .hdlink a:hover,.hd .hdlink a:active{color:#ffd77b; text-decoration:underline;}
.hd ul{height:27px; overflow:hidden; float:left;}
.hd li{height:27px; overflow:hidden; _display:inline-block; background:url(http://i2.sinaimg.cn/dy/deco/2008/1121/sinahome_0803_ws_002_new.gif) no-repeat right -850px #797979; float:left; padding:0 3px 0 0; cursor:pointer;}
.hd li .capname{padding:8px 13px 0 16px; height:19px; line-height:14px; font-size:14px; color:#333; display:block; float:left; background:url(http://i2.sinaimg.cn/dy/deco/2008/1121/sinahome_0803_ws_002_new.gif) no-repeat left -800px; font-weight:bold;}
.hd li a,.hd li a:visited{color:#fff; text-decoration:none; cursor:pointer;}
.hd li a:hover,.hd li a:active{color:#fff; text-decoration:underline;}
.hd li .videoNewsLeft{padding:0 0 0 0; background: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:#333; text-decoration:none; cursor:pointer;}
.hd li.on a:hover,.hd li.on a:active{color:#333; text-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:4px; padding-right:4px;}
.hd_2{height:24px; overflow:hidden; margin:0 1px; background:url(http://i1.sinaimg.cn/home/deco/2008/0329/sinahome_0803_ws_001.gif) repeat-x 0 -601px #fff4cb;}
.md_2_menu{width:311px; height:22px; overflow:hidden; padding:1px 1px 0 0; float:right;}
.md_2_menu li{width:60px; height:22px; overflow:hidden; background:url(http://i2.sinaimg.cn/dy/deco/2008/1121/sinahome_0803_ws_002_new.gif) no-repeat 0 -950px; float:left; padding: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:block; padding:5px 0 0 0; height:17px; line-height:14px; text-align:center; text-decoration:none; color:#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:#982e00; font-weight:bold;}
.md2_list{float:left; padding:0 10px 0 0;}
.mdbtmlinkblk1{height:28px; overflow:hidden; padding:2px 0 1px; margin:0 2px; background:url(http://i0.sinaimg.cn/home/deco/2008/0329/sinahome_0803_ws_003_new.gif) no-repeat -802px 0 #fff7e3; text-align:center; line-height:30px; color:#ea3d00;}
.mdbtmlinkblk1 a,.mdbtmlinkblk1 a:visited{color:#ea3d00; text-decoration:none;}
.mdbtmlinkblk1 a:hover,.mdbtmlinkblk1 a:active{color:#c00; text-decoration:underline;}
.h2_lf_s1{height:24px; overflow:hidden; background: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:14px; font-size:12px; color:#333; padding:6px 0 0 0; text-align:center; display:block;}
.h2_lf_s1 a,.h2_lf_s1 a:visited{color:#333; text-decoration:none;}
.h2_lf_s1 a:hover,.h2_lf_s1 a:active{color:#333; text-decoration:underline;}
.h2_lf_s2{height:24px; overflow:hidden; clear:both; background:url(http://i2.sinaimg.cn/dy/deco/2008/1121/sinahome_0803_ws_002_new.gif) no-repeat 0 -1150px #c71b1b; color:#fff; font-size:12px;}
.h2_lf_s2 a,.h2_lf_s2 a:visited{color:#fff; text-decoration:none;}
.h2_lf_s2 a:hover,.h2_lf_s2 a:active{color:#fff; text-decoration:underline;}
.h2_lf_s2 .capname{float:left; padding:7px 0 0 22px; line-height:14px;}
.lBlk1{padding:6px 5px 0 2px;}
.lBlk1 ul li{line-height:21px; color:#000; background-position:5px 1px;}
/* 图文 */
.imgtxt01{padding:10px 0 0 14px; height:95px; overflow:hidden; _display:inline-block;}
.it01img{width:105px; float:left; overflow:hidden;}
.it01img a,.it01img a:visited{color:#fff; text-decoration:underline; display:block;}
.it01img a:hover,.it01img a:active{color:#ffa; text-decoration:underlinen;}
.it01img a img{border:1px #ccc solid;}
.it01img a:hover img,.it01img a:active img{border:1px #ffc133 solid;}
.it01ib{display:block; padding-bottom:3px;}
.it01tb{display:block; height:18px; padding:4px 0 0 0; line-height:14px; overflow:hidden; background:#c00; cursor:pointer; text-align:center;}
.it01txt{float:left; padding-left:2px; width:263px;}
.it01txt ul li{font-size:14px; line-height:24px; padding-left:14px;}
.imgtxt02{padding:10px 0 0 14px; height:116px; overflow:hidden; _display:inline-block;}
.it02img{width:105px; float:left; overflow:hidden;}
.it02img a,.it02img a:visited{color:#fff; text-decoration:underline; display:block;}
.it02img a:hover,.it02img a:active{color:#ffa; text-decoration:underlinen;}
.it02img a img{padding:7px 8px 23px; background:url(http://i2.sinaimg.cn/dy/deco/2008/1121/sinahome_0803_ws_002_new.gif) no-repeat 0 -650px; display: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 -1350px; display:block;}
.it02ib{display:block; padding-bottom:3px;}
.it02tb{display:block; height:18px; padding:4px 0 0 0; line-height:14px; overflow:hidden; background:#c00; cursor:pointer; text-align:center;}
.it02txt{margin-top:-2px; float:left; padding-left:2px; width:263px;}
.it02txt ul li{font-size:14px; line-height:24px; padding-left:14px;}
.imgtxt03{padding:6px 0 0 9px; overflow:hidden; clear:both;}
.it03img{padding:0 0 8px 3px;}
.it03img img{border:1px #000 solid;}
.it03txt{_display:inline-block; overflow:hidden;}
.it03txt li{float:left; padding:0 5px 0 0; line-height:14px; height:21px;}
/* 列表 */
.mdlist{padding:8px 0 0 9px;}
参考资料：这是新浪的网站的架构以及内页命名
热心网友
时间：2022-04-22 10:01
每个人的习惯不同，只要易管理，易理解，易分类，就可以了！！！！
热心网友
时间：2022-04-22 11:36
命名一般不要用left、right等表示方位的词，因为万一哪天改版，左边的内容挪动到右边了呢？到时候不是很麻烦？
