前端开发 | 在线支持

提示：本示例效果没有考虑移动设备，适合在PC端浏览。

【示例】

HTML

<!--顶部 -->
<div id="top"></div>
<div id="top1"><img src="images/bg_top.jpg" width="776" height="121"></div>
<!--主体 -->
<div id="main">
    <div id="content">
        <div id="title"> Hello World -- 第一个CSS3+DIV页面 </div>
        <div class="sub">实例</div>
        <div class="box">
            <div class="tl"> 
                <div class="tr">
                    <div class="bl">
                        <div  class="content br"> 以下代码是我的第一个CSS3+DIV页面，该页面红色居中显示字符串 Hello World!。
                            <pre>
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Hello World</title>
        <style type="text/css">
        h1 {
            color: #FF0000;
            text-align: center;
        }
        </style>
    </head>
    <body>
        <h1>Hello World! </h1>
    </body>
</html>
</pre>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="gotop"><a title="跳到页首" href="#top">返回顶部</a></div>
    </div>
</div>
<!--底部 -->
<div id="footer"></div>
<div id="copyright"> ©2017 <a href="#" target="_black" >mysite.cn</a> all rights reserved </div>

CSS

/* 公共属性
------------------------------------ */
html { min-width: 776px; }
body {
    margin: 0px;
    padding: 0px;
    border: 0px;
    color: #000;
    font-size: 14px;
    line-height: 160%;
    text-align: center;
    background: #6D89DD;
    font-family: '宋体', '新宋体', arial, verdana, sans-serif;
}
a {
    margin: 0px;
    padding: 0px;
    border: 0px;
    text-decoration: none;
}
a:link { color: #E66133; }
a:visited { color: #E66133; }
a:hover {
    color: #637DBC;
    text-decoration: underline;
}
pre {
    text-indent: 0;
    background: #DDDDDD;
    padding: 0;
    margin: 0;
    color: blue;
}
/* 顶部
------------------------------------ */
#top {
    width: 776px;
    margin-right: auto;
    margin-left: auto;
    padding: 0px;
    height: 12px;
    background: url(bg_top1.gif) #fff repeat-x left top;
    overflow: hidden;
}
#top1 {
    width: 776px;
    margin-right: auto;
    margin-left: auto;
    padding: 0px;
    height: 121px;
}
/*  主体 
------------------------------------ */
#main {
    width: 776px;
    margin-right: auto;
    margin-left: auto;
    padding: 1.2em 0px;
    background: url(bg_dot1.gif) #fff repeat left top;
    text-align: left;
}
#content {
    width: 710px;
    margin-right: auto;
    margin-left: auto;
    background: #fff;
}
#title {
    font-weight: bold;
    margin: 0px 0px 0.5em 0px;
    padding: 0.5em 0px 0.5em 1em;
    font-size: 24px;
    color: #00A06B;
    text-align: left;
    border-bottom: solid #9EA3C1 2px;
}
.sub {
    color: #00A06B;
    font-weight: bold;
    font-size: 13px;
    text-align: left;
    padding: 1em 2em 0;
    background: url(0.gif) #fff no-repeat 1em 74%;
}
.content {
    text-indent: 2em;
    font-size: 13px;
    margin-left: 2em;
    padding: 1em 6px;
}
#gotop {
    width: 100%;
    margin: 0px;
    padding: 0px;
    background: #fff;
    height: 2em;
    font-size: 12px;
    text-align: right;
}
/* 底部
------------------------------------ */
#footer {
    clear: both;
    width: 776px;
    margin-right: auto;
    margin-left: auto;
    padding: 0px;
    background: url(bg_bottom.gif) #fff repeat left top;
    text-align: center;
    height: 39px;
    color: #ddd;
}
#copyright {
    width: 776px;
    margin-right: auto;
    margin-left: auto;
    padding: 5px 0px 0px 0px;
    background: #fff;
    text-align: center;
    height: 60px;
    line-height: 13px;
    font-size: 12px;
    color: #9EA0BB;
}
#copyright a { color: #667EBE; }
/* 圆角
------------------------------------ */
.box { background: url(nt.gif) repeat; }
.tl { background: url(tl.gif) no-repeat top left; }
.tr { background: url(tr.gif) no-repeat top right; }
.bl { background: url(bl.gif) no-repeat bottom left; }
.br { background: url(br.gif) no-repeat bottom right; }
body,td,th { font-family: "宋体", "新宋体", arial, verdana, sans-serif; }

下载源代码