Html+Css 纯CSS实现的导航（精通CSS高级WEB解决方案）读书笔记

最新推荐文章于 2024-04-19 09:08:52 发布

高达一号

最新推荐文章于 2024-04-19 09:08:52 发布

阅读量879

点赞数

分类专栏： Html+Css应用文章标签：导航 css html

本文链接：https://blog.csdn.net/u010003835/article/details/50667159

版权

Html+Css应用专栏收录该内容

24 篇文章 0 订阅

订阅专栏

今天看书学习了纯粹的CSS实现的简易导航。

实现效果如下：

整体思路：

1：二级导航基本思路：

第一级 ul 的 li 中嵌套第二级的ul 与li ，并对 ul 设置 float:left ,让其中的 li 水平显示，更改其默认垂直显示的行为。

2：(核心代码)导航的浮动与隐藏：

将二级导航的li 初始时进行 absolute 定位（相对于上一个已定位元素），使其脱离基本文本流 left 给予一个极大的值，如 left: -999em; 使其显示在屏幕之外，

示例代码：

ul.nav li ul{
            position: absolute;
			width: 8em;
			left: -999em;
			margin-left: -1px;
        }

而鼠标悬停或获取焦点时，让其自动定位，恢复正常显示的位置

示例代码

ul.nav li:hover ul{
            left:auto;
        }

3：隐藏问题，利用负margin 清理浮动；上级的浮动可用margin为负值进行清理，

示例：

ul.nav li ul{
            position: absolute;
			width: 8em;
			left: -999em;
			margin-left: -1px;
        }

完整示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模块导航测试页</title>
    <style type="text/css">
		body {
		 	font-family: "Myriad Pro", Frutiger, "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;
		  	font-size: 1.4em;
			margin-top: 4em;
		}
		
        ul.nav, ul.nav ul{
            margin: 0;
            padding: 0;
            list-style-type: none;
            float:left;
            border: 1px solid #486B02;
			background-color: #8BD400;
        }

        ul.nav li{
        	width: 8em;
            float:left;
        }

        ul.nav li ul{
            position: absolute;
			width: 8em;
			left: -999em;
			margin-left: -1px;
        }

        ul.nav li:hover ul{
            left:auto;
        }

        ul.nav li a{
			text-decoration: none;
			display: block;
        	color: #2B3F00;
            /*border-right: 1px solid #486B02;
			border-left: 1px solid #E4FFD3;*/
        }

		/*ul.nav li li a {
			border-top: 1px solid #E4FFD3;
			border-bottom: 1px solid #486B02;	
			border-left: 0;
			border-right: 0;
		}

		ul.nav li:last-child a {
			border-right: 0;
			border-bottom: 0;
		}
*/		
        ul a:focus,ul a:hover{
        	color: #E4FFD3;
        	background-color: #6DA203;
        }
    </style>

</head>

<body>
	<div>
	    <ul class="nav">
	        <li>
	            <a href="#">保健品</a>
	            <ul>
	                <li><a href="#">补肾</a></li>
	                <li><a href="#">补脑</a></li>
	                <li><a href="#">养胃</a></li>
	            </ul>
	        </li>
	        <li>
	            <a href="#">饼干</a>
	            <ul>
	                <li><a href="#">压缩饼干</a></li>
	                <li><a href="#">苏打饼干</a></li>
	                <li><a href="#">威化饼干</a> </li>
	            </ul>
	        </li>
	        <li>
	            <a href="#">衣服</a>
	            <ul>
	                <li><a href="#">裤子</a></li>
	                <li><a href="#">裙子</a></li>
	                <li><a href="#">大衣</a></li>
	            </ul>
	        </li>
	    </ul>
	</div>
    <div style="width:600px;">
    	<br/>
    	<h4>
    		另外一类两栏自适应用到的是margin的上下负值，尤其在一栏高度固定，另外一栏高 度不定的两栏或多栏布局中最为常见。高度不固定栏和高度固定的栏上下错开，均无浮动属性，高度不固定的栏margin-top一个负值，大小就是高度固定 栏的高度，实现了两栏在同一水平线上。且宽度自适应，并且不用担心有浮动出现的一系列问题。
    	</h4>
    </div>
</body>
</html>

高达一号

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Html+Css 纯CSS实现的导航（精通CSS高级WEB解决方案）读书笔记

今天看书学习了纯粹的CSS实现的简易导航。实现效果如下：整体思路：1：二级导航基本思路：第一级 ul 的 li 中嵌套第二级的ul 与li ，并对 ul 设置 float:left ,让其中的 li 水平显示，更改其默认垂直显示的行为。2：(核心代码)导航的浮动与隐藏：将二级导航的li 初始时进行 absolute 定位（相对于上一个已定位元素
复制链接

扫一扫