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熟练掌握

css+div练手-工作室相关推荐

CSS+DIV练手-博客
前些天做网站,前台样式手生得很,所以赶紧找几个实例做一做,这是一个博客首页,今天练手用css+div仿的. 截图: CSS+HTML源代码 <!DOCTYPE html PUBLIC " ...
台式小风扇（HTML+CSS+JS练手小项目）
台式小风扇(HTML+CSS+JS练手小项目) 功能介绍外观展示 HTML代码 CSS代码 JS代码总结功能介绍前段时间看到这样的风扇特效,感觉还挺好玩,就自己也写一个练练手. 风扇有四个档位 ...
HTML+CSS+JS练手小玩意
HTML+CSS+JS练手小玩意今天准备给我的小组员布置任务时,找到这个网页,很适合学了JS用来练手. 在这里,分享给大家实例索引
ssm练手小项目_20 个 JavaScript+Html+CSS 练手的小项目
前言: 最近在 GitHub 上发现了一个 vanillawebprojects[1] 开源仓库,里面收集了 20 个 JavaScript+Html+CSS的练手项目,没有使用任何框架,可以让你从基 ...
html+css+js之20个练手小项目（一）
html+css+js之20个练手小项目(一)--Hangman 前言一.HTML 二.CSS 三.JS 前言前端新手练习,记录不迷失. 主要练习html和CSS布局以及JS. 来源github, ...
黑马程序员前端-CSS练手之学成在线页面制作
前端学习笔记教程不定期更新中,传送门: 前端HTML第一天:什么是网页?什么是HTML?网页怎么形成? 黑马程序员前端-CSS入门总结黑马程序员前端-CSS之emmet语法黑马程序员前端-CSS的 ...
简单练手使用css样式制作电子相册
先贴上源代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
5个前端练手项目(html css js canvas)
前言: 首先祝大家端午节快乐.本篇文章有5个练手项目对于刚学完前端三剑客的你们.应该是一个很好的实践目录
CSS + DIV 让页脚始终底部
原文:CSS + DIV 让页脚始终底部一前言经常设计页面时用到三层DIV,头DIV与脚DIV一般固定高度,而中间层DIV根据内容的多少,高度不定,我们经常希望但内容很少时,脚DIV保持在底部, ...

css+div练手-工作室

css+div练手-工作室相关推荐

最新文章

热门文章