20160603 html5学习代码
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了20160603 html5学习代码相关的知识,希望对你有一定的参考价值。
接上部分index.html
<!--导航-->
<nav >
<div class="wp">
<ul>
<li class="on">
<a href="" >首页</a>
</li>
<li>
<a href="">整体家装</a>
</li>
<li>
<a href="">装修案例 </a>
<dl>
<dd><a href="">0001</a></dd>
<dd><a href="">0002</a></dd>
<dd><a href="">0003</a></dd>
</dl>
</li>
<li>
<a href="" >设计明星</a>
<dl>
<dd><a href="">0001</a></dd>
<dd><a href="">0002</a></dd>
<dd><a href="">0003</a></dd>
</dl>
</li>
<li>
<a href="">走进都都</a>
</li>
<li>
<a href=""> 服务规范</a>
</li>
<li>
<a href="">施工管理</a>
</li>
<li>
<a href="">在线服务</a>
</li>
</ul>
</div>
</nav>
接上部分index.css
/*导航*/
nav{
background-color: #4b4948;
height: 46px;
}
nav ul li{
list-style: none;
/*list-style-type: none;*/
float: left;
position: relative;
}
nav ul li a{
/* position: relative;*//*相对定位*/
width: 150px;
height: 46px;
display: block;
text-align: center;
line-height: 46px;
font-size: 18px;
color: #ffffff;
}
nav ul li.on a,nav ul li a:hover{
background-color: #f08300;
}
nav ul li dl{
left: 0;
top: 100%;/*相对父级a来说*/
position: absolute;/*绝对定位,根据上面的相对定位来定位*/
width: 100%;
z-index: 333;
color: rebeccapurple;
background-color: #666;
display: none;
}
nav ul li:hover dl{/*鼠标到li上面dl显示出来*/
display: block;
}
/*
绝对定位会脱离文档流,要找到它最近的父元素有position:relative
或者有position:absolute ;或者position:fixed的元素进行定位
如果所有父元素没有找到相关position元素,则直接定位body。
*/
以上是关于20160603 html5学习代码的主要内容,如果未能解决你的问题,请参考以下文章