css+div练手-工作室

今天一天调了两个主界面,另一个见《CSS+DIV练手-博客》,第一个用了5个小时,第二个仅仅用了1个半小时,看样子熟能生巧啊。

截图:

css+div练手-工作室_第1张图片


css+div练手-工作室_第2张图片


源代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS练手</title>
<style type="text/css">
body{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
background-color: #2A3A00;
margin: 0px;
padding: 0px;
}
#main{
position: absolute;
top: 10%;
left: 0%;
width: 100%;
background: url(middle_bg.jpg) repeat-x;
}

#main img{
border:0px;
}

#info{
position:absolute;
top:55%;
left:40%;
width:200px;
}

#info a:hover{
color: #2A3A00;
text-decoration: none;
}

#info a:link,#info a:visited{
color:#FFFFFF;
text-decoration: none;
}

#menu{
position:absolute;
top:65%;
left:40%;
width:200px;
}

#menu ul li{
position:relative;
left:-40px;
list-style-type:none;
width:100px;
padding-left:20px;
background:url(icon1.gif) no-repeat 4px 7px;
}

#menu ul li a:hover {
color: white;
text-decoration: none;
}

#menu ul li a:link,#menu ul li a:visited{
color: #2A3A00;
text-decoration: none;
}
</style>
</head>

<body>
<div id="container">
    <div id="main">
         <a href="index.html"><img src="index.jpg"></a>
    </div>
    <div id="info">
    	<a href="index.html">思想和文化的交流始于文字,我们以新颖而行之有效的方式为您提供实际的服务。</a>
    </div>
    <div id="menu">
      <ul>
          <li><a href="index.html">进入首页</a></li>
          <li><a href="index.html">关于我们</a></li>
          <li><a href="index.html">服务流程</a></li>
          <li><a href="index.html">合作伙伴</a></li>
      </ul>
    </div>
</div>

</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css练手</title>
<style type="text/css">
body{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	background-color: #2A3A00;
	margin: 0px;
	padding: 0px;
	text-align:center;
}

#container{
    position:relative;
	margin:1px auto 0px auto;
	width:640px;
	text-align:left;
	background:#FFFFFF url(left_bg.jpg) repeat-y;
	/* 修补#navigation的背景色问题 */
}

#menu{
	width:150px;
	float:left;
}

#menu ul{
	list-style-type:none;
	margin:0px;
	padding:0px;
}

#menu ul li
{
	border-bottom: 1px solid #B9FF00;
}

#menu ul li a {
    display:block;	 /* 区块显示,非常重要 */
	padding: 5px 5px 5px 0.5em;
	text-decoration: none;
	border-left: 12px solid #3C5300;
	border-right: 1px solid #3C5300;
}


#menu ul li a:link, #menu ul li a:visited {
	background-color: #729E00;
	color: white;
}

#menu ul li a:hover{					
	background-color:#587a00;			
	color:#ffff00;						
}


#main{
	float: left;
	width: 460px;
	margin: 10px 15px 35px 15px;
}


#main h3{
	font-size:15px;
	margin:0px 0px 10px 0px;
	padding:10px 0px 1px 0px;
	border-bottom:1px dotted #777777;	
}

#main a:link, #main a:visited{
	color:#afcd00;
	text-decoration:none;
}

#main a:hover{
	color:#000000;
	text-decoration:underline;
}

#footer{
	clear:both;
	text-align:center;
	background-color:#c7db51;
	margin:0px; padding:1px;
}

#footer a:link, #footer a:visited{
	color:#475300;
	text-decoration:none;
}
#footer a:hover{
	color:#000000;
	text-decoration:underline;
}

/*注意:hover必须放在link和visited的后面,否则鼠标划上去没有效果*/

</style>
</head>

<body>
<div id="container">
<div id="banner">
		<img src="banner.jpg">
</div>
<div id="menu">
        <ul>
        		 <li><a href="index.html">进入首页</a></li>
                  <li><a href="index.html">关于我们</a></li>
                  <li><a href="index.html">服务流程</a></li>
                  <li><a href="index.html">合作伙伴</a></li>
        </ul>
</div>
<div id="main">
	<h3>为您提供精准的翻译服务</h3>
		<p>您是否要将某些文档翻译成标准的英语版本?您是否担心译文会不符合西方语系的语言习惯?您是否遇到语言障碍而放缓向境外拓展业务的步伐?您是否受到时而需要处理外文资料的困扰?</p>
		<p>让我们来帮您解决这些问题。我们这里提供的服务<a href="page3.html">快捷</a> 、高效、准确,而且<a href="page4.html">付费</a>方便。您无需走出家门,就可同我们一起走完服务的全过程,甚至包括付费。</p>
		<p>我们有来自中国和新加坡的翻译专家,他们具有得天独厚的语言基础和深厚的文化背景。他们合作的结晶一定是非常贴切而精美的译文作品。我们会分配以您的目标语种为 母语 的翻译员为你翻译,同时他们也 精通 您的源语语种。</p>
		<p>您若有此需求或任何疑问,请浏览我们的网站,也可随时同我们联系,您会得到耐心的解答。我们的联系方式是: <a href="mailto:[email protected]">[email protected]</a>。</p>

</div>
<div id="footer"><a href="#">联系我们: [email protected]</a>
</div>
</div>


</body>
</html>

做这些就是为了CSS+DIV熟练掌握

你可能感兴趣的:(css+div)