HTML 文件框架结构 - argor(4)_H5之家 - 中国HTML5教程资源分享第一站

layout.css

/* 页面初始化 */
html, body, h1, h2, h3, p, ul, ol, li, a {
     padding:0;
     border:0;
     margin:0;
}

/* 网页布局 */

.login-bar{
    text-align:right;

}

.login-bar a{
    color:yellow;
    background:url(login.png) 0 0 no-repeat;
    padding-left:32px;
    height:32px;
    display:inline-block;
    line-height:32px;
}

.login-bar a.qq-login{
     background-position:0 -32px;
}

.login-bar weibo-login{
     background-position:0  0;
}

.nav{
    padding-left:0;
    text-align:center;
    margin:30px;
}

.nav li{
    display: inline;
}

.nav a{
    color:#b56663;
    text-decoration:none;
}

.header {
     padding:20px;
     /*  */
     /* background-color:#000000; */
     background:#000000 url(header.jpg) top left repeat;

     width:890px;
     margin:0 auto;
}

.content {
     padding:35px;
     border:0px solid #dddddd;
     margin:30px auto 5px auto;

     width:880px;

     background:#000000 url(body.jpg) top left repeat;
}

.geli{
    background:#121212;
}

.copyright{
    padding:35px;
    border:0px solid #FFFFFF;
    margin:5px auto 30px auto;

    width:880px;

    background:#FFFFFF url() top left repeat;
}

/* h3标题前留白 */
.content h3 {
    margin: 30px 0 3px 0;
}

.logo {
    text-align:center;

}

.logo img{
    width: 255px;
    height: 166px;
}

/* 美食图片展示 */
.photos {
    margin: 0 0 30px 0;

}

.photos li {
    display:inline;
}

.photos li img {
    width:130px;
    /* height:290px; */
}

body {
    background:#FFFFFF url(main.jpg)top left repeat;
    font: normal normal 16px/33px 微软雅黑, 黑体, Verdana, Arial, sans-serif;
}

h1 {
    color:#ffffff;
    text-align:center;
}

/* 通用样式 */
a {
    text-decoration:none;
    color:darkred;
}

a:hover {
    text-decoration:underline;
    color:darkred;
}

h2, h3 {
    color:#79B1A3;
}

.rec li {
    list-style-type:none;
}

.rec li {
    border: 1px solid #b56663;
    padding-left:50px;
    margin: 15px 10px;
}

.rec li  p{
    padding-left:35px;
}