网页制作实践步骤二 主页

主页内容大致确定：

还是可以的吧0.0

其实最主要的是css代码：

/* Made by Liu Xindi since summer of 2015 */


/*引用中文字体*/
@font-face{
    font-family: 'MyFont-normal';
    src:url('../font/SourceHanSansCN-Normal.otf');
    font-weight:normal;
    font-style:normal;
}
@font-face{
    font-family: 'MyFont-heavy';
    src:url('../font/SourceHanSansCN-Heavy.otf');
    font-weight:normal;
    font-style:normal;
}
@font-face{
    font-family: 'MyFont-light';
    src:url('../font/SourceHanSansCN-Light.otf');
    font-weight:normal;
    font-style:normal;
}
@font-face{
    font-family: 'MyFont-medium';
    src:url('../font/SourceHanSansCN-Medium.otf');
    font-weight:normal;
    font-style:normal;
}
@font-face{
    font-family: 'logo';
    src:url('../font/Logo2.otf');
    font-weight:normal;
    font-style:normal;
}
/*样式重置*/
body,ul,p,h1,h2,h3,h4,h5,dl,dd,form,input,textarea,select{
    padding:0;
    margin:0;

}
a{
    letter-spacing: 3px;
}
li{
    list-style: none;
}
image{
    border: none;
}

a{
    text-decoration: none;
}
a:hover{
    text-decoration: none;
}


/*总体背景*/
body{
    background-image: url("../image/content-bg.jpg");
}

/* 导航栏 */
.header{
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    font-weight: 700;
    background-color: transparent;
    position: relative;
    width: 1140px;
    height: 111px;
    margin:0 auto;
}
.header_left{
    float: left;
    height: 40px;
    width: 135px;
    margin: 35px 0;
}
.header_left a{
    color:#ffffff;
}
.header_middle{
    padding-left: 200px;
    padding-top: 45px;
}
.list{
}
.list li{
    float: left;
    display: block;
    width: 110px;
    height: 34px;
    text-align: center;

}
.list li a{
    color: #ffffff;
    text-align: center;
    padding-top: 5px ;
    margin-bottom: 0;
    position: absolute;
}
.list a:hover{
    border-bottom: 2px solid #FFF;
}
.header_right{
}
.header_right li{
    float:right;
    display: block;
    width: 110px;
    height: 34px;
    text-align: center;
}
.header_right a{
    color: #ffffff;
    text-align: center;
    padding: 5px 0
}
.header_right a:hover{
    border-bottom: 2px solid #FFF;
}
.header_right a.btn{
    background: #FFF none repeat scroll 0% 0%;
    font-weight: 700;
    padding-left: 10px;
    padding-right: 10px;
    color: #F56857
}
.header_right a.btn:hover {
    border: 2px solid #FFF;
    background: transparent none repeat scroll 0px 0px;
    color: #FFF;
}
.btn {
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 4px;
}


/*正界面*/
.container{
    text-align: center;
    width: 1170px;
    margin: 0 auto;
    padding-top: 90px;
    padding-left: 15px;
    padding-right: 15px;

}
.myh1{
    color: #ffffff;
    font-size: 80px;
    font-weight: 200;
    letter-spacing: -2px;
    margin-bottom: 25px;
}
.container p{
    color:#ffffff;
    letter-spacing: 3px;
}