作为一个程序员,深受不会美工之苦,于是发奋图强,学习美工,下面是我小作,还不完美,做一记录,再图更新。
请教如何使页面居中。
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
- <HTML>
- <HEAD>
- <style type="text/css">
- * {
- margin: 0px;
- padding: 0px;
- }
- body {
- font-family: Arial, Helvetica, sans-serif;
- font-size: 12px;
- margin: 0px auto;
- height: auto;
- width: 760px;
- border:1px #66CCFF solid;
- }
- .header {
- height: 100px;
- width: 760px;
- background-image: url(header.jpg);
- background-repeat: no-repeat;
- margin:0px 0px 3px 0px;
- border:1px #66CCFF solid;
- }
- .contentleft {
- height: 250px;
- width: 150px;
- font-size: 14px;
- list-style-type: none;
- float:left;
- border:1px #66CCFF solid;
- }
- .contentleft li {
- float:left;
- }
- .contentleft li a{
- color:#000000;
- text-decoration:none;
- padding-top:4px;
- display:block;
- width:97px;
- height:22px;
- text-align:center;
- background-color: #009966;
- margin-left:2px;
- }
- .contentleft li a:hover{
- border:1px #66CCFF solid;
- color:#FFFFFF;
- }
- .content {
- height:auto;
- width: 760px;
- line-height: 1.5em;
- padding: 10px;
- border:1px #66CCFF solid;
- }
- .content p {
- text-indent: 2em;
- }
- .content h3 {
- font-size: 16px;
- margin: 10px;
- }
- .footer {
- height: 50px;
- width: 760px;
- line-height: 2em;
- text-align: center;
- background-color: #009966;
- padding: 10px;
- border:1px #66CCFF solid;
- }
- .contentright{
- height: 250px;
- width: 580px;
- font-size: 14px;
- list-style-type: none;
- border:1px #66CCFF solid;
- float:right;
- }
- .logo{
- background-image: url(scltemp.jpg);
- height: 100px;
- width: 75px;
- }
- </style>
- <! @author 孙程亮 E-mail:sclsch@188.com -->
- <TITLE> New Document </TITLE>
- <META NAME="Generator" CONTENT="EditPlus">
- <META NAME="Author" CONTENT="">
- <META NAME="Keywords" CONTENT="">
- <META NAME="Description" CONTENT="">
- </HEAD>
- <BODY>
- <div class="header">
- <div class="logo"></div>
- </div>
- <div class="content">
- <div class="contentleft">
- <li><a href="#">首 页</a></li>
- <li><a href="#">文 章</a></li>
- <li><a href="#">相册</a></li>
- <li><a href="#">Blog</a></li>
- <li><a href="#">论 坛</a></li>
- <li><a href="#">帮助</a></li>
- </div>
- <div class="contentright">
- <h3>前言</h3>
- <p>第一段内容</p>
- <h3>理解CSS盒子模式</h3>
- <p>第二段内容</p>
- </div>
- </div>
- <div class="footer">
- <p>关于华升 | 广告服务 | 华升招聘 | 客服中心 | Q Q留言 | 网站管理 | 会员登录 | 购物车</p><p>Copyright ©2006 - 2008 Tang
- Guohui. All Rights Reserved</p>
- </div>
- </BODY>
- </HTML>