题目:
请设计如图所示的页面:
代码:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>World Word</title>
<style>
*
{
margin: 0;
padding: 0;
}
body
{
margin-top: 20px;
}
.container
{
width: 620px;
margin: auto;
height: 444px;
border: 1px solid #333;
}
.header
{
height: 100px;
background-color: #A5D31F;
color: #fff;
width: 620px;
}
.header h1
{
width: 416px;
height: 79px;
background:url('images/logo.GIF') no-repeat
6px 6px;
text-indent: -999px;
}
.header ul li
{
display: inline-block;
float:right;
}
.header ul li a
{
padding-right: 8px;
font-size: 14px;
text-decoration-line: none;
color:#006600;
}
.sidebar1
{
position: absolute;
width: 140px;
height: 320px;
background-color: #060;
float: left;
}
.sidebar1 ul
{
width: 96px;
background-color: #9c0;
margin-top: 12px;
margin-left: 22px;
margin-right:22px;
float: left;
list-style: none;
}
.sidebar1 ul li
{
line-height: center;
border-bottom: 1px solid #006600;
padding-top: 3px;
padding-left: 16px;
padding-bottom: 3px;
border-left: 5px solid #FF9900;
}
.sidebar1 ul li a
{
text-decoration-line: none;
font-size:14px;
color: #000;
}
.sidebar1 ul li .current
{
color: #666;
}
.content
{
width: 446px;
height: 320px;
position: relative;
float: right;
padding-left: 20px;
padding-right: 20px;
}
h2
{
text-align: center;
font-size: 16px;
padding-top: 40px;
padding-bottom: 2px;
border-bottom: 3px double black;
}
.content p
{
text-indent: 2em;
padding-top: 16px;
line-height: 24px;
font-size: 14px;
}
.footer
{
height: 24px;
background-color: #f90;
width: 620px;
float: left;
}
.footer p
{
text-align: center;
font-size: 14px;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>World Word</h1>
<ul class=menu>
<li><a href="#">设为首页</a></li>
<li><a href="#">加入收藏</a></li>
</ul>
<!-- end .header --></div>
<div class="sidebar1">
<ul class="nav">
<li><a href="#">翻译服务</a></li>
<li><a href="#" class="current">网站建设</a></li>
<li><a href="#">服务流程</a></li>
<li><a href="#">付费</a></li>
</ul>
<!-- end .sidebar1 --></div>
<div class="content">
<h2>网站建设</h2>
<p>一幅美观而高效的页面、一个强而有力的标志是其所有者的形象,也是他向外展示自己而给人留下深刻印象的第一个机会。它所具有的美应该能抓住浏览者的眼睛,它所包含的内容应该能锁住他们的心。</p>
<p>这需要一支熟练而具有市场观念的团队来实现。这就是您选择“World-Word”的原因,让我们来帮您实现上述目的。我们的团队会把他们丰富的经验、知识及才干注入到您的网站中。</p>
<p>当然,如果您需要,由于我们得天独厚的业务专长,我们也可以将您的网站无缝地制作成英文版/中文版。</p>
<!-- end .content --></div>
<div class="footer">
<p>与我们联系:<a href="mailto:service@world-word.com">service@world-word.com</a></p>
<!-- end .footer --></div>
<!-- end .container --></div>
</body>
</html>
运行结果: