仓酷云

标题: CSS教程之CSS制造网页导航:两侧背景主动延长 [打印本页]

作者: 飘飘悠悠 时间: 2015-1-15 23:17
标题: CSS教程之CSS制造网页导航:两侧背景主动延长
所有的设计第一步就是构思，构思好了。
破洛洛文章简介：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
技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。

作者: 冷月葬花魂 时间: 2015-1-21 17:21
是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。

作者: 谁可相欹 时间: 2015-1-30 21:31
还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。

作者: 深爱那片海 时间: 2015-2-6 16:10
dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。

作者: 灵魂腐蚀 时间: 2015-3-5 15:46
使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。

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

作者: 透明 时间: 2015-3-19 20:55
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。

欢迎光临仓酷云 (http://ckuyun.com/)