A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 南国之南 中级黑马   /  2016-7-20 23:24  /  1600 人查看  /  2 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

这个是上一个帖子的样式部分
*{
        margin: 0;
        padding: 0;
}
ul{
        list-style-type: none;
}
a{
        text-decoration: none;
}
#header{
        width: 1349px;
        height:170px;
        background-color: #eee;
        margin: 0 auto;
}
#header_main{
        width:1002px;
        height:155px;
        margin: 0 auto;
        position: relative;
}
#header_main #header_logo{
        width: 216px;
        height: 144px;
        background-color: #aaeecc;
        position: absolute;
        left: 0;
        top: 0;
}
#header_main #header_img{
        width:231px;
        height:95px;
        background-color: #aaeecc;
        position: absolute;
        right: 0;
        top:0;
}
#header_main #header_nav{
        width: 768px;
        height: 46px;
        position: absolute;
        bottom: 0;
        right: 0;
}

#header_main #header_nav li{
        float: left;
        width:96px;
        height:46px;
        text-align: center;
        line-height: 46px;
}
#header_main #header_nav li a{
        text-decoration: none;
        color: #000;
        font-size: 18px;
        display: block;
        width:96px;
        height: 46px;
}
#header_main #header_nav li a:hover{
        background-color: red;
        color:#fff;
}
#header_foot{
        width: 1349px;
        height:15px;
        margin: 0 auto;
        background-color: #ff0000;
}
#main{
        width:1002px;
        margin: 0 auto;
}
#main #banner{
        width :1002px;
        height:344px;
        background-color:#eee;
        box-shadow: 0 10px 20px #999;
}

#main #content{
        width:1002px;
        height:460px;
        margin-top: 20px;
}
#main .content_com{
        height:460px;
        float: left;
}
#main #content #content_showcase{
        width: 730px;
        margin-right: 2px;
}
#main #content #content_news{
        width: 260px;
        margin-left:10px;
}
#main .content_top{
        height:60px;
}
#main .content_bot{
        height:390px;
        margin-top:10px;
}
#content_showcase_top_l{
        width:120px;
        height: 49px;
        margin-top: 11px;
        float: left;
        background-image: url("images/content_l.png");
}
#content_showcase_top_r{
        width:610px;
        height: 49px;
        margin-top: 14px;
        float: left;
        background-image: url("images/2.png");
}
#content_news_top_l{
        width:190px;
        height: 49px;
        margin-top: 11px;
        float: left;
        background-image: url("images/content_r.png");
}
#content_news_top_r{
        width:70px;
        height: 60px;
        position: relative;
        float: left;
}
#content_showcase_top {position: relative;}
#more{
        position: absolute;
        width:50px;
        height:20px;
        bottom:20px;
        right: 0px;
}
#more a{
        display: block;
        width:50px;
        height: 20px;
        background-image: url("images/3.png");
        background-position: -18px -7px;
}
#content_news_top_r_top{
        width:50px;
        height:20px;
        position: absolute;
        top:20px;
        right: 0;
}

#content_news_top_r_top a{
        display: block;
        width:50px;
        height: 20px;
        background-image: url("images/3.png");
        background-position: -18px -7px;
}
#content_news_top_r_bot{
        width:70px;
        height:20px;
        position: absolute;
        bottom: 0;
        right: 0;
        background-image: url("images/3.png");
        background-position: 0 -27px;
}
#content_news_bot{

}
#content_news_bot #news_top{
        width:255px;
        height:65px;
        background-image:url("images/news_top.png") ;
        margin:0 auto;
}
#content_news_bot #news_content{
        width:270px;
        height:20px;
        margin-top: 5px;
}
#content_news_bot #news_content ul{
        margin-left: 5px;
}
#content_news_bot #news_content li{
        float: left;
}
#content_news_bot #news_content a{
        text-decoration: none;
        text-align: center;
        line-height: 18px;
        display: block;
        width:40px;
        height:18px;
        background-color: #666;
        margin-left: 1px;
        color: #fff;
        font-size: 12px;
}
#content_news_bot #news_content a:hover{
        background-color: red;
}
#content_news_bot #news_bot{
        width: 270px;
        height: 290px;
}
#content_news_bot #news_bot dd{
        width: 260px;
        height: 90px;
        margin-top: 10px;
}
#content_news_bot #news_bot dd b{
        font-size: 16px;
        font-weight: block;
}
#content_news_bot #news_bot dd p{
        font-size: 14px;
        line-height: 17px;
}
#content_news_bot #news_bot dd a{
        background-color: #eee;
        text-decoration: none;
        width:10px;

}
#content_news_bot #news_bot dd hr{
        margin-top: 10px;
}
#content #content_showcase_bot li{
        width:235px;
        height: 180px;
        float: left;
        margin-top:10px;
}
#content #content_showcase_bot .LI{
        margin-left: 12px;
        margin-right: 12px;
}
#content #content_showcase_bot img{
        width:225px;
        height: 140px;
        padding: 5px;
        border: 1px solid #bbb;
}
#content #content_showcase_bot p{
        margin-top:1px;
        height: 29px;
        color: #000;
        text-align: center;
        line-height: 29px;
        background-color: #eee;
}
#bot{
        width: 1002px;
        height:400px;
        margin-top: 20px;
}

.bot_top{
        height:50px;
}
.bot_bot{
        height:330px;
        margin-top:20px;
}
#bot #bot_disigner{
        width: 410px;
        height: 400px;
        float: left;
}
#bot #bot_disigner_box{
        width:410px;
        height:330px;
}
#bot #bot_disigner_box ul{
        width:410px;
        height:165px;
}
#bot #bot_disigner_box li{
        float: left;
}
#bot #bot_disigner_box li a{
        display: block;
        width:120px;
        height: 155px;
}
#bot #bot_disigner_box li a img{
        width:120px;
        height: 155px;
}
#bot #bot_disigner_box .A{
        padding-right: 10px;
        padding-bottom: 8px;
        border-right: 1px solid #bbb;
        border-bottom: 1px solid #bbb;
}
#bot #bot_disigner_box .B{
        padding-right: 10px;
        padding-left: 10px;
        padding-bottom: 8px;
        border-bottom: 1px solid #bbb;
}
#bot #bot_disigner_box .C{
        padding-left: 10px;
        padding-bottom: 8px;
        border-left: 1px solid #bbb;
        border-bottom: 1px solid #bbb;
}
#bot #bot_disigner_box .D{
        padding-right: 10px;
        padding-top: 8px;
        border-right: 1px solid #bbb;
}
#bot #bot_disigner_box .E{
        padding-right: 10px;
        padding-left: 10px;
        padding-top: 8px;
}
#bot #bot_disigner_box .F{
        padding-left: 10px;
        padding-top: 8px;
        border-left: 1px solid #bbb;
}
#bot #bot_about{
        width: 312px;
        height: 400px;
        float: left;
        margin:0 5px;
}
#bot #bot_contact{
        width: 270px;
        height: 400px;

        float: left;
}

#bot  #more{
        position: absolute;
        width:50px;
        height:20px;
        bottom:5px;
        right: 0px;
}
#bot  #more a{
        display: block;
        width:50px;
        height: 20px;
        background-image: url("images/3.png");
        background-position: -18px -10px;
}
#bot_disigner_top,#bot_about_top,#bot_contact_top{position: relative;}
#bot_disigner_top_l,#bot_about_top_l,#bot_contact_top_l{
        width:120px;
        height: 49px;
        margin-top: 11px;
        float: left;
}
#bot_disigner_top_l{background-image: url("images/disigner.png");}
#bot_about_top_l{background-image: url("images/aboutus.png");}
#bot_contact_top_l{background-image: url("images/contactus.png");        }
#bot_disigner_top_r,#bot_about_top_r,#bot_contact_top_r{
       
        height: 49px;
        margin-top: 15px;
        float: left;
        background-image: url("images/2.png");
}
#bot_disigner_top_r{width:290px;}
#bot_about_top_r{width:192px;}
#bot_contact_top_r{width:150px;margin-top: 14px;}
#bot_about #bot_about_bot #about_img{
        width:305px;
        height: 115px;
        margin:0 auto;
        background-image: url("images/about.png")
}
#bot_about #bot_about_bot p{
        font-size: 16px;
        line-height: 18px;
        margin-top:10px;
}
#bot_about #bot_about_bot a{
        text-decoration: none;
        color: red;
        float:right;
}
.bot_contact_bot1{
        float:left;
        width: 56px;
        height: 70px;
}
.bot_contact_bot2{
        float: right;
        width:209px;
        height:50px;
}
.bot_contact_bot2 p{
        font-size: 14px;
        margin-top: 5px;
        text-align: center;
        color:#666;
}
.bot_contact_bot2 #man{
        height:50px;
        width:209px;
}       
.bot_contact_bot2 #man ul{
        height:50px;
        width:209px;
}
.bot_contact_bot2 #man li{
        float: left;
       
}
.bot_contact_bot2 #man li a{
        display: block;
        width: 35px;
        height:35px;
        margin-top:5px;
        margin-left: 10px;
        border: 1px solid #fff;
        border-radius: 20px;
        background-color: #eee;
}
.bot_contact_bot2 #man li #man1{
        background-image: url("images/man.png");
        background-position: -8px -3px;
}
.bot_contact_bot2 #man li #man2{
        background-image: url("images/man.png");
        background-position: -45px -3px;
}
.bot_contact_bot2 #man li #man3{
        background-image: url("images/man.png");
        background-position: -82px -3px;
}
.bot_contact_bot2 #man li #man4{
        background-image: url("images/man.png");
        background-position: -119px -3px;
}

#footer{
        width:1349px;
        height: 200px;
        margin:0 auto;
        margin-top:20px;
}
#footer #footer_top{
        height: 170px;
        background-color:  #444;
}
#footer #footer_top #footer_box{
        width: 1002px;
        height:170px;
        margin:0 auto;
        background-color: #444;
}
#footer #footer_top #footer_box #footer_box_l{
        width:610px;
        height:170px;
        float:left;
}
#footer #footer_top #footer_box #footer_box_l li{
        float: left;
        width: 150px;
        border-right:1px solid #fff;
        text-align: center;
}
#footer #footer_top #footer_box #footer_box_l .no{
        border-right:none;
}
#footer #footer_top #footer_box #footer_box_l .yes{
        border-left: 1px solid #fff;
}
#footer #footer_top #footer_box #footer_box_l li a{
        display: block;       
}
#footer #footer_top #footer_box #footer_box_l li h3{
        font-size: 18px;
        font-weight: bolder;
        line-height: 40px;
        margin-top: 20px;
        color: #fff;
}
#footer #footer_top #footer_box li p{
        color:#ccc;
}
#footer #footer_top #footer_box #footer_box_r{
        width:150px;
        height:170px;
        float:left;
}
#footer #footer_top #footer_box #footer_box_r p{
        text-align: center;
        line-height: 120px;
        font-size: 18px;
        color: #ccc;
}
#footer #footer_bot{

        height: 30px;
        background-color: #000;
}

2 个回复

倒序浏览
好多好厉害,顶一个。CSS就是多写多用就行了,难倒不是太难,就是很繁琐。很零碎。
回复 使用道具 举报
顶一个。顶一个。
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马