css+div练手-工作室
今天一天调了两个主界面,另一个见《CSS+DIV练手-博客》 ,第一个用了5个小时,第二个仅仅用了1个半小时,看样子熟能生巧啊。
截图:
源代码:
<!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:demo@demo.com">demo@demo.com</a>。</p> </div> <div id="footer"><a href="#">联系我们: demo@demo.com</a> </div> </div> </body> </html>
做这些就是为了CSS+DIV熟练掌握