CSS（2）css文件样式

た入场券 2024-02-17 21:35 59阅读 0赞

### 0 使用说明 ###

*  样式类以\#开头表示id属性， 如\#user
 *  以.开头表示class属性，如 .top
 *  无开头标志，为标签，如 body

### 1 comm.css ###

body {
        font-size:12px;
        margin: 0 auto; /* 边距清零，自动左右居中 */
        width: 1000px;
    }
    .font_style1 {
        font-weight: bold;
    }
    .font_style2 {
        font-weight: bold;
        color: #CC0000;
    }
    .font_style3 {
        color: #FF6600;
    }
    .font_style4 {
        color: #D5A7EF;
    }
    .font_style5 {
        font-weight: bold;
        color: #3366DE;
    }
    .font_style6 {
        color: #FF6600;
        font-weight: bold;
    }
    .underline_style1 {
        height: 2px;
        background-color: #CC0000;
    }
    /*超链接样式*/
    a:link {
        text-decoration: none;
    }

### 2 index.css ###

.top {
        width: 1000px;
        height: 120px;
    }
    
    .user-mid-left {
        width: 215px;
        /*height: 500px;*/
        background-color: pink;
        float: left; /*必须把左浮动写上*/
    }
    
    .ad_info_title, .ad_info_search, .contact_us {
        width: 215px;
        height: 30px;
        background-color: #EDEDED;
        float: left;
        border-top: 1px dotted gray; /*虚线*/
        border-bottom: 1px dotted gray; /*虚线*/
    }
    .ad_info_title span, .ad_info_search span, .contact_us span {  /*span默认是行内元素*/
        margin-left: 5px;
        margin-top: 5px;
        display: block; /*有时为了让span能够响应margin-top，则需要转为块元素显示*/
    }
    .ad_info_list {
        width: 215px;
        height: 230px;
        background-color: #FEFEF6;
        float: left;
        line-height: 16px;
    }
    .ad_info_list ul {
        padding-left: 0px;
    }
    .ad_info_list li {
        margin-left: 10px;
        list-style-type: none;
    }
    .info_search {
        width: 215px;
        height: 110px;
        background-image: url("../images/query.png"); /*以css所在路径为当前路径*/
        float: left;
    }
    .info_search table {
        margin-left: 5px;
        margin-top: 5px;
    }
    .contact_info {
        width: 215px;
        height: 150px;
        background-color: #FEFDF8;
        float: left;
    }
    .contact_info span {
        margin-top: 10px;
        margin-left: 15px;
        display: block;
        line-height: 16px;
    }
    .user_mid_right {
        width: 784px;
        /*height: 500px;*/
        background-color: pink;
        float: right;
    }
    .pay_title, .free_title {
        width:  784px;
        height: 27px;
        background-image: url("../images/fufei.png");
        float: left;
    }
    .free_title {
        background-image: url("../images/mian.png");
    }
    .pay_info_con, .free_info_con {
        width: 784px;
        height: 400px;
        background-color: white;
        float: left;
    }
    .pay_info_con {
        height: 130px;
    }
    .pay_info_con table, .free_info_con table {
        width: 700px;
        margin-left: 20px;
        margin-top: 10px;
        border-collapse: collapse;
        line-height: 24px;
    }
    .pay_info_con table td {
    
    }
    .ad_con {
        width: 784px;
        height: 87px;   
        background-color: white;
        float: left;
    }
    .pagenavi {
        float: right;
    }
    .user_bottom {
        width: 1000px;
        height: 57px;
        background-image: url("../images/bottom_bg.png");
        float: left;
    }
    .user_bottom span {
        display: block;
        margin-top: 20px;
        margin-left: 60px;
    }