...这段html代码的效果完全用css代码表现出来? 谢谢

发布网友发布时间：2024-10-03 00:41

共1个回答

热心网友时间：2024-10-19 06:09

奶奶的
我把样式都给你了
你还犹豫
/****** General Styles ******/
/* a style which makes div touch the bottom of content */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html>body .clearfix {
display: inline-block;
width: 100%;
}
* html .clearfix {
/* Hides from IE-mac \*/
height: 1%;
/* End hide from IE-mac */
}
/* ie7 hack*/
*+html .clearfix {
min-height: 1%;
}
.toolBar *{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #493a01;
line-height: 120%;
margin: 0;
padding: 0;
}
.toolBar a, .toolBar a:visited{
color: #333;
text-decoration: underline;
}
.toolBar a:hover{
text-decoration: underline;
}
.toolBar a:focus{
-moz-outline-style: none;
}
.toolBar a.disable, .toolBar a.disable:hover {
color: #ccc;
}
.toolBar input.text{
color: #333;
height: 18px;
line-height: 16px;
background-color: white;
border: 1px solid #ccc;
}
.toolBar input.button{
color: #333;
height: 25px;
line-height: 18px;
padding: 0px 5px 0px;
background-color: white;
border: 1px solid #ccc;
cursor: pointer;
}
.toolBar input.button2{
color: #333;
background: url(images/btn_bg.gif) repeat-x center;
border: 1px solid #ccc;
height: 19px;
line-height: 17px;
text-align: center;
cursor: pointer;
}
.toolBar input.button-submit{
height: 25px;
line-height: 18px;
padding: 0px 5px 0px;
background-color: #f4f6e1;
border: 1px solid #aac051;
cursor: pointer;
color: #567b8e;
}
.toolBar img{
border: none;
}
.toolBar .menuSub-div{
border: 2px solid #ccc;
background: white;
}
/******* layout *******/
.toolBar{
position: fixed;
left: 0;
top: 0;
z-index: 1000;
width: 100%;
}
/** html .toolBar{position:static;} IE6 */
*+html .toolBar{position:absolute;} /* IE7 */
#toolbarPadding{
height: 30px;
display: block !important;
display: none;
}
#innerToolBar{
height: 28px;
background: url(images/bg.gif) repeat-x center;
padding: 2px 5px 0;
}
.innerToolBar a{
padding: 3px 3px 2px !important;
padding: 3px 3px 1px;
text-decoration: underline;
}
.innerToolBar a:hover{
padding: 2px 2px 1px !important;
padding: 2px 2px 0px;
color: #493a01;
background: #f6f6f6;
text-decoration: none;
border: 1px solid #ccc;
}
.innerToolBar a.disable:hover{
color: #ccc;
}
#innerToolBar .tb_spacer{
padding: 0 1px;
}

/******* logo *******/
#tb_logo{
float: left;
margin-right: 5px;
}
#tb_logo a{
padding: 0 !important;
border: none;
background: none;
}

/******* user *******/
#tb_user{
float: left;
padding: 0 5px 0 0;
}
#tb_user .txt{
padding: 6px 4px 4px;
float: left;
display: block;
}

#tb_welcome{
background:#eee;
padding:3px 3px 2px;
cursor:default;
margin:3px 5px 0 0;
float: left;
}
#tb_userN{
font-weight: bold;
cursor: pointer;
float: left;
}
.tb_userN{
background: url(images/username_bg.gif) no-repeat right top;
padding:0 3px 0 0;
margin: 2px 5px 0 0;
}
.tb_innerUserN{
background: url(images/username_bg.gif) no-repeat left top;
padding:2px 0 2px 3px;
display: block;
height: 18px;
float: left;
}

.tb_userN-over{
background-position: right -22px;
}
.tb_userN-over .tb_innerUserN{
background-position: left -22px;
}
.tb_userN-down{
background-position: right -44px;
}
.tb_userN-down .tb_innerUserN{
background-position: left -44px;
padding:3px 0 1px 3px;
}

#tb_userN img{
width: 16px;
height: 16px;
margin-right: 2px;
border: 1px solid #ddd;
}
#tb_userN .subMenuArrow2{
background:url(images/ico_submenushow.gif) center;
float: none;
margin: 1px 1px 1px 3px;
padding: 0 2px;
cursor: pointer;
text-decoration: none;
}

#tb_sohuMsg{
cursor: pointer;
background: url(images/ico_messenger.gif) no-repeat center;
float: left;
}
#tb_user .tb_sohuMsg {
padding: 2px 7px;
margin: 4px 0 0;
}
#tb_user .tb_sohuMsg-over {
padding: 1px 6px;
border: 1px solid #ccc;
background-color: #eee;
}
#tb_sohuMsgFlash{
padding:0 40px 0 0;
}
#tb_sohuMsgFlash embed{
width:170px;
height:120px;
position:absolute;
z-index: 1501;
}

/******* tool *******/
#tb_tool{
float: left;
padding: 6px 4px 4px;
border-left: 1px solid #ccc;
}
/******* sys *******/
#tb_sys{
float: right;
padding: 6px 4px 4px;
}

/******* search *******/
#tb_search{
float: right;
padding: 3px 4px 0;
}
#tb_search input.text {
padding: 0 2px;
border: 1px solid #cecece;
line-height: 16px;
height: 16px;
width: 95px;
background: #e6e6e6;
vertical-align: middle;
}
#tb_search input.button {
width:auto;
line-height: 18px;
height: 18px;
background: #ddd;
cursor: pointer;
background: #ddd;
border: 1px solid #ccc;
vertical-align: middle;
}
/******* addon *******/
#tb_addon{
float: right;
padding: 6px 4px 4px;
}
/******* login form *******/
.menuSub-div-login {
width: 300px;
padding: 0;
}
/****** login form style ******/
.menuSub-div-login .passport {border:1px solid white; height:1%; width:auto;}
/* 全局CSS定义 */
#passportcard *{font-family:"宋体", Verdana, Arial, Helvetica, sans-serif;line-height:normal;}
.passportcard input{border:none;}
.passportc ul,.passportc ol,.passportc li,.passportc span,.passportc p,.passportc form {margin: 0; padding: 0; border: 0;}
.passportc img,.passportc a img,.passportc h3,.passportc h4,.passportc h5,.passportc h6{border:0; margin:0; padding:0;}
.passportc ul,.passportc ol,.passportc li {list-style:none}

/* 链接颜色 */
.passportc a {color: #333;text-decoration:none}
.passportc a:link,.passportc a:visited{color:#333;font-weight: normal;}
.passportc a:hover {color:#fc7821;text-decoration:underline;}

/* 登录前 */
.passportc {width:278px;height:158px;font-size:12px;border:1px #c3cecd solid;background:#fff;text-align:left;}

.passportc b{color:#FF0000;font-weight:bold;}
.passportc h2,.passportc h4{color:#333;margin:8px 10px -8px 10px!important;margin:8px 10px 0px 10px;font-size:12px;}/*标题*/
.passportc h2{background:url(images/pic002.gif) no-repeat right top;font-weight:bold;}
.passportc h4 span{margin-right:169px;font-weight:bold;}
.passportc .ppthree{
display:inline;
color:#999999;
font-weight:bold;
margin:auto 60px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.ppcontent{width:268px;height:136px;padding:15px 0px 0px 10px!important;padding:0px 0px 0px 10px;background:url(images/pic001.gif) no-repeat center ;}
.ppcontent dt{color:#333;height:16px;}
.ppcontent dl{padding:0px 0px 0px 23px!important;padding:10px 0px 0px 23px;margin:0;}
.ppcontent dd{color:#333;margin:0px 0px 5px 0px!important;margin:0px 0px 3px 0px;padding:0}

.ppcontent h3,.ppcontent h6{font-size:12px;font-weight: normal;margin-top:7px;}
.ppcontent h6{margin-top:10px;}
.ppcontent h6 a:link,.ppcontent h6 a:visited{margin-right:27px;}
.ppcontent h3 span{margin:5px 34px 0px 38px;color: #313031;}

.ppcontent .sign{background:url(images/pic004.gif) no-repeat; width:63px; height:19px;border:0;font-size:12px;padding-top:1px!important;padding-top:4px;color:#333;}
.ppcontent .ppinput {color:#333;border:1px #ccc solid;height:17px;width:166px!important;width:164px;background:#fff;font-size:12px; vertical-align:text-bottom;}

.ppselecter, .ppselecter * {color:#333;font-size:12px; font-family:"宋体", Verdana, Arial, Helvetica, sans-serif; line-height:normal;}
.ppselecter {border: 1px solid #c3cecd; width: 166px;margin-left:1px;}
.ppselecter .ppseltit {background-color: #c3cecd;height:15px;padding-top:4px;text-indent:6px; color:#333;}
.ppselecter table td table td {padding: 3px;}
.ppselecter .active {background:#fc7821; color:white; font-weight: normal;}

/* 登录中 */
.ppWaitMsg{background:url(images/load.gif) no-repeat center 30px;color:#333;padding-top:90px;padding-left:50px;font-size:12px;width:190px;font-weight: normal;}
/******* start menu *******/
.toolBar .menuSub-div-start{
width: 400px;
background: #f6f6f6 url(images/startmenu_bg.gif) repeat-x center top;
border: 1px solid #ccc;
}
.pst{
padding: 2px;
}
.pst a{
color: #333;
text-decoration: underline;
}
.pst a:hover{
color: red;
text-decoration: underline;
}
.pst_head{
height: 22px;
}
.pst_title{
float: left;
font-weight: bold;
color: black;
padding: 2px;
}
.pst_title .pst_p{
color: #eb281c;
font-weight: bold;
}
.pst_sohu3{
float: left;
font-weight: bold;
color: #999;
padding: 2px 0 2px 100px;
}
.pst_content{
float: right;
width: 292px;
}
.pst_tips{
border:1px solid #ccc;
padding:5px 5px 5px 25px;
background: url(images/ico_tips.gif) no-repeat 5px center;
background-color: #ffffe1;
margin: 0 0 5px 0;
}
.pst_tips ul{
list-style: inside;
}
.pst_innerContent{
background: white;
border: 1px solid #ccc;
height: 250px;
width: 280px;
padding: 5px;
overflow-y: auto;
overflow-x: hidden;
}
.pst_content_load{
margin: 15px auto;
}
.pst_loader{
padding: 0 0 0 20px;
width: 90px;
background: url(images/loading.gif) no-repeat left center;
}
.pst_cnt_actions{
padding: 5px 5px 7px;
margin-bottom: 5px;
}
.pst_mTitle{
height: 18px;
padding: 4px 5px 0;
background: url(images/startmenu_mTitle_bg.gif) repeat-x center top;
border: 1px solid #e9e9e9;
font-weight: bold;
}
.pst_mRfs{
float: right;
background: url(images/ico_rfs.gif) no-repeat center;
height: 16px;
width: 16px;
cursor: pointer;
}
.pst_mCnt{
padding: 5px 10px;
}
.pst_mCnt ul{
padding: 0;
margin: 0 0 0 15px;
list-style: outside disc;
}
.pst_mCnt li{
margin: 5px 0;
white-space: nowrap;
width: 100%;
overflow: inherit !important;
overflow: hidden;
text-overflow:ellipsis;
}
li.pst_videoSub{
border-bottom: 1px solid #ccc;
clear: both;
width: auto;
}
.pst_videoCover img{
width: 64px;
height: 48px;
border: 1px solid #ccc;
padding: 2px;
margin: 5px 5px 5px 0;
float: left;
}
.pst_videoDesc{
white-space: normal;
padding: 8px 0 0 0;
display: block;
}
.pst_groupJoin li{
white-space: normal;
}
.pst_groupJoin li img{
width: 20px;
height: 15px;
border: 1px solid #ccc;
padding: 1px;
}
.pst_groupJoin input{
height: 18px;
border: 1px solid #ccc;
background: white;
cursor: pointer;
margin-left: 5px;
}
.pst_sidebar{
float: left;
width: 100px;
}
.pst_ico{
text-align: center;
padding: 5px;
}
.pst_ico img{
border: 1px solid #ccc;
padding: 1px;
background: white;
width: 50px;
height: 50px;
}
.pst_pdtMenu{
list-style: none;
padding: 0;
margin: 0;
}
.pst_pdtMenu li{
clear: both;
display: block;
padding: 0;
margin: 0;
height: 28px;
width: 98px;
}
li.pst_pdtMenuActive{
background: white url(images/pdtmenu_active_bg.gif) no-repeat left center;
}
.pst_pdtMenu a{
display: block;
float: left;
height: 16px;
padding: 7px 0 5px 0;
text-decoration: none;
background: url(images/pdtmenu_bg.gif) repeat-x left top;
}
.pst_pdtMenu a:visited{
text-decoration: none;
}
.pst_pdtMenu a:hover{
color: #333;
background: #eee url(images/pdtmenu_bg.gif) repeat-x left -56px;
border: 1px solid #ded09c;
padding: 6px 0 4px 0;
text-decoration: none;
}

a.pst_pdtMenuName{
padding: 7px 5px 5px 10px;
width: 60px;
}
.pst_pdtMenu-over a.pst_pdtMenuName{
background: #eee url(images/pdtmenu_bg.gif) repeat-x left -28px;
border: 1px solid #ded09c;
padding: 6px 4px 4px 9px;
}
a.pst_pdtMenuName:hover, a.pst_pdtMenuName-active{
background: #eee url(images/pdtmenu_bg.gif) repeat-x left -56px;
border: 1px solid #ded09c;
padding: 6px 4px 4px 9px;
}

a.pst_pdtMenuNameWide{
padding: 7px 5px 5px 10px;
width: 83px;
}
a.pst_pdtMenuNameWide:hover{
padding: 6px 4px 4px 9px;
}

a.pst_pdtMenuArrow{
background: url(images/pdtmenuArrow_bg.gif) no-repeat left top;
width: 23px;
padding: 7px 0 5px;
}
.pst_pdtMenu-over a.pst_pdtMenuArrow{
background: #eee url(images/pdtmenuArrow_bg.gif) no-repeat left -28px;
border: none;
padding: 7px 0 5px;
}
a.pst_pdtMenuArrow:hover, a.pst_pdtMenuArrow-active, .pst_pdtMenu-over a.pst_pdtMenuArrow-active{
background: #eee url(images/pdtmenuArrow_bg.gif) no-repeat left -56px;
border: none;
padding: 7px 0 5px;
}

.pst_pdtMenu a span{
background-position: center;
background-repeat: no-repeat;
padding: 8px;
margin-right: 2px;
}
.pst_mnBlog{
background-image: url(images/ico_blog.gif);
}
.pst_mnPP{
background-image: url(images/ico_pp.gif);
}
.pst_mnMusic{
background-image: url(images/ico_music.gif);
}
.pst_mnVideo{
background-image: url(images/ico_video.gif);
}
.pst_mnGroup{
background-image: url(images/ico_group.gif);
}
.pst_mnMsg{
background-image: url(images/ico_messenger.gif);
}

.pst_foot{
height: 24px;
}
.pst_otherPdt{
float: left;
background: url(images/pst_go.gif) no-repeat 5px center;
padding: 4px 0 2px 40px;
margin: 2px 0 0;
}
.pst_otherPdt a{
text-decoration: none;
}
.pst_camp{
float: right;
padding: 4px 0 2px;
}
.pst_camp a{
background: #ccc url(images/pst_camp.gif) no-repeat center;
display: block;
height: 20px;
width: 54px;
}

/*
=== Sohu Blog PPP StyleSheet File ================================
Style Name: pink
Version: 1.0
Author: Todd Lee (www.todd-lee.com)
First Created: 2006-05-24
Last Update: 2006-05-24
Copyright: Sohu.com (www.sohu.com)
==============================================================
*/
/****** General Styles ******/
*{
/*
color: #333;
*/
}
body{
background-color: #7D15A5;
background-image: url(images/footer.jpg);
background-repeat: no-repeat;
background-position: center bottom;
}
div,table,ul,span,p{color: #3F0059;}
a{
/*
color: #333;
text-decoration: underline;
*/
}
a:hover{
/*
color: red;
text-decoration: underline;
*/
}
textarea{
/*
background-color: white;
border: 1px solid #ccc;
*/
}
select{
/*
background-color: white;
border: 1px solid #ccc;
*/
}
input.text{
/*
background-color: white;
border: 1px solid #ccc;
*/
}
input.button{
/*
background-color: white;
border: 1px solid #ccc;
*/
}
/****** Main Layout Styles ******/
#topPadding{
display:none;}
#wrapper{
background-image: url(images/banner.jpg);
background-repeat: no-repeat;
background-position: center top;
}
#innerWrapper{
background-image: url(images/footer2.jpg);
background-position: center bottom;
background-repeat: no-repeat;
}
#header{
background:none;
height:286px;
padding-top: 30px;
}
#innerHeader{
background:none;
margin-left: 0px;
padding-top: 30px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
/****** Header Elements Styles ******/
#blogTitle, #blogTitle a, #blogTitle input{
color: #000;
font-size: 18px;
font-weight: bold;
line-height: 1.6em;
text-decoration: none;

}
#blogUrl a:link{
color: #fff;
}
#blogDesc{
margin:0px;
color: #FFFFFF;
font-size: 14px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
/****** NavBar Elements Styles ******/
#navBar{
background:none;
border:none;
padding-left: 10px;
padding-right:10px;
height:39px;
}
#innerNavBar{
background:none;
border:none;
}
/**修改mainNav*/
#mainNav li{
background: #E3C0F9 url(images/navbg.jpg) repeat-x left top;
border: 1px solid #780489;
cursor: pointer;
margin: 6px 2px 0px 0px;
padding: 3px 8px 3px;
}

#mainNav li.active{
background: #E9CEF9;
border-top: 2px solid #D90BDA;
border-bottom: none;
margin: 3px 2px 0px 0px;
padding: 3px 8px 7px;
cursor: auto;
}
#mainNav li.private{
background: url(images/navbg2.jpg) repeat-x left top;
cursor: auto
}
#mainNav li.hover{
border-color: red;
}
#mainNav li .pageTitle{
white-space: nowrap;
font-weight: bold;
float: left;
margin-top: 4px;
cursor: pointer;
}
#mainNav li .pageTitleHover{
background-color: #ddd;
}
.modCtnInfo-private {
margin: -5px 18px 0 18px;
background: #FBF5EF;
position:relative;
}
#optionNav li{
white-space:nowrap;
}
/**/

#mainWrapper{
border:none;
background:none;
background-image: url(images/top2.jpg);
background-repeat: no-repeat;
background-position: center top;
padding:0px;
margin:0px auto;
}
#innerMainWrapper{
border:none;
background:none;
background-color: #E3C0F9;
margin-top: 0px;
margin-right: auto;
margin-bottom: 48px;
margin-left: auto;
padding-bottom: 0px;
}
/****** Mod Elements Styles ******/
.mod{
border:none;
background-image: url(images/mod_03.jpg);
background-repeat: no-repeat;
background-position: left top;
}
.mod .modFrame{
border: none;
background:none;
background-image: url(images/modr_04.jpg);
background-repeat: no-repeat;
background-position: right top;
}
.mod .modTable{
background-image: url(images/mod_07.jpg);
background-repeat: no-repeat;
background-position: left bottom;
}
.mod .modCon{
overflow:hidden;
}
.mod tbody{

}
.Feeds-content ul{ margin:0px;padding-left:18px!important;}
.Feeds-content ul{ margin:0px;padding-left:18px!important;}
#tooltip{
border: 3px solid #eee;
position: absolute;
z-index: 2000;
background: white;
}
#tooltip .mod{
background:none;
}
#tooltip .modFrame{
background:none;
padding: 5px;
overflow: hidden;
border: 1px solid #ccc;
}

#tooltip .modFrame, #tooltip .modFrame div{
background:none;
color: #333;
}
/***********/
.mod .mheader{
border: none;

}
.mod .lt{
width: 0px;
background: none;
border: none;
}
.mod .t{
background: none;
border: none;
}
.mod .modHeader{
padding-top: 16px;
}
.mod .rt{
width: 0px;

}
.mod .mneck{ border-right:solid 1px #A761D3;
border-left:solid 1px #A761D3;}
.mod .ec{}
.mod .modEditCon{
background: none;
border: none;
}

.mod .mbody{
border-right:solid 1px #A761D3;
border-left:solid 1px #A761D3;
}
.mod .l{
/*width: 0px;*/
}
.mod .c{}
.mod .modCon{
}
.mod .r{
/*width: 0px;*/
}

.mod .mfooter{

}
.mod .lb{
width:0px;

}
.mod .b{
height:36px;
background-image: url(images/mod_08.jpg);
background-repeat: no-repeat;
background-position: right bottom;
}
.mod .rb{
width: 0px;}
/***********/
.mod .modShow img, .mod .modHide img{
/*
width: 16px;
height: 16px;
background-image: url(images/ico_showMod.gif);
*/
}
.mod .modHide img{
/*background-image: url(images/ico_hideMod.gif);*/
}
.mod .modTitle, .mod .modTitle a{
/*color: #333;*/
}
.mod .modEdit a{
/*
color: #333;
text-decoration: underline;
*/
}
.mod .modCls img{
/*
width: 16px;
height: 16px;
background-image: url(images/ico_cls.gif);
*/
}
.mod .modRfs img{
/*
width: 16px;
height: 16px;
background-image: url(images/ico_rfs.gif);
*/
}
/****** item box ******/
.item{}
.item-top{}
.item-bottom{}
.item hr{
/*border-top: 1px solid #ccc;*/
}
.item-title{
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #663366;
}
.item-title h3{
color: #CC0066;
}
.item-title h3, .item-title h3 a{color: #CC0066;}
.item-label{}
.item-label a{
/*color: #006699;*/
}
.item-body{}
.item-body-hidden{}
.item-content{
/*border-bottom: 1px solid #ccc;*/
}
.item-content, .item-content a{
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #993366;
}
.item-info, .item-info a{
color: #000000;
}
/*#header{
background-image: url(images/headerBg2.png);
height: 120px;
}*/

.item-more{
font-weight: bold;
text-align: right;
color: #6d0d0d;
}

.item-more a{
font-weight: bold;
color: #6d0d0d;
}
#footer{
clear: both;
}
#innerFooter{
text-align: center;
padding: 20px 40px;
border: none;
}
#contact {
color: #123a32;
}

#contact a{
color: #123a32;
}

#copyright {
color: #123a32;
}