CSS教程之CSS制造网页导航:两侧背景主动延长

只看该作者 · 发表于 2015-1-15 23:17:27

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

所有的设计第一步就是构思，构思好了。
破洛洛文章简介：CSS制造网页导航:两侧背景主动延长.
办法来历于土豆网的导航，在这里记录一下完成的思绪。
次要是使用position属性的absolute和relative共同z-index来完成的，经由过程position:absolute将必要平展的背景层叠在另外一背景上，如许便可以完成统一地位的两个背景，再利用z-index将内容提拔到最高阶显现。

<divid=”a”>
<divid=”b”>
<ul>
<li><ahref=”http://www.prower.cn/category/internet”>互联网谈</a></li>
<li><ahref=”http://www.prower.cn/category/interaction”>交互计划</a></li>
<li><ahref=”http://www.prower.cn/category/technic”>手艺行动</a></li>
</ul>
<divid=”c”></div>
</div>
<divid=”d”></div>
</div>

起首将个中一个背景款式写在<divid=”a”>上，然后是将另外一个背景款式写在<divid=”d”>上，<divid=”b”>为内容层，<divid=”c”>是另外一个背景款式层，能够自在的呈现在<divid=”b”>内里的任何一个地位。如土豆网两头的谁人有弧线的背景。
然后是款式方面：

#a{background:#f00;height:50px;position:relative;width:100%;}
#b{height:50px;margin:0auto;position:relative;width:950px;z-index:9000;}
#c{background:#ff0;height:50px;position:absolute;left:100px;top:0;width:100px;z-index:-1;}
#d{background:#f60;height:50px;position:absolute;left:0;top:0;width:50%;z-index:1;}
ul{line-height:50px;position:relative;z-index:9001;}

详细代码拜见：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>两侧背景主动延长</title><styletype="text/css">body,ul,li,a{margin:0;padding:0;font-size:14px;}#a{background:#f00;height:50px;position:relative;width:100%;}#b{height:50px;margin:0auto;position:relative;width:950px;z-index:9000;}#c{background:#ff0;height:50px;position:absolute;left:100px;top:0;width:100px;z-index:-1;}#d{background:#f60;height:50px;position:absolute;left:0;top:0;width:50%;z-index:1;}ul{line-height:50px;position:relative;z-index:9001;}li{float:left;list-style:none;margin-right:20px;}a{color:#04a;text-decoration:none;}a:hover{color:#fff;}</style></head><body><divid="a"><divid="b"><ul><li><ahref="http://www.poluoluo.com/category/internet">互联网谈</a></li><li><ahref="http://www.poluoluo.com/category/interaction">交互计划</a></li><li><ahref="http://www.poluoluo.com/category/technic">手艺行动</a></li><li><ahref="http://www.poluoluo.com/category/internet">互联网谈</a></li><li><ahref="http://www.poluoluo.com/category/interaction">交互计划</a></li><li><ahref="http://www.poluoluo.com/category/technic">手艺行动</a></li><li><ahref="http://www.poluoluo.com/category/internet">互联网谈</a></li><li><ahref="http://www.poluoluo.com/category/interaction">交互计划</a></li><li><ahref="http://www.poluoluo.com/category/technic">手艺行动</a></li></ul><divid="c"></div></div><divid="d"></div></div></body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]
</p>
学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。

只看该作者 · 发表于 2015-1-17 20:47:16

技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。

只看该作者 · 发表于 2015-1-21 17:21:52

是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。

只看该作者 · 发表于 2015-1-30 21:31:10

还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。

只看该作者 · 发表于 2015-2-6 16:10:09

dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。

只看该作者 · 发表于 2015-3-5 15:46:37

使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。

只看该作者 · 发表于 2015-3-12 10:22:36

直接用代码建立链接，如：可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接，可以再选中文字后在代码中插入html标签，页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。

只看该作者 · 发表于 2015-3-19 20:55:47

Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] CSS教程之CSS制造网页导航:两侧背景主动延长

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子