下拉菜单作业_PHP中文网手记

摘要：尊师太法旨，删了几行CSS代码，但是剩下的就实在想不出精减方案了。用边框做分隔符的方法试过，但是实在太难调了，准备周末的时候专门抽时间搞一下。这节课还没完全播放完就跳出了作业提示，最后模糊的听到了那个多列下拉菜单可以用div来实现，所以我作业里鬼畜的用了6个div（其中一个是用来做横的分隔符），好像ul也是能搞起，我周末试下ul.下面是代码，请老师拨冗审阅，批评指正。*{margin:0px;&n

尊师太法旨，删了几行CSS代码，但是剩下的就实在想不出精减方案了。

用边框做分隔符的方法试过，但是实在太难调了，准备周末的时候专门抽时间搞一下。

这节课还没完全播放完就跳出了作业提示，最后模糊的听到了那个多列下拉菜单可以用div来实现，所以我作业里鬼畜的用了6个div（其中一个是用来做横的分隔符），好像ul也是能搞起，我周末试下ul.下面是代码，请老师拨冗审阅，批评指正。

*{margin:0px; padding:0px;}
.header{width:100%; height:40px; background-color:#ccc} /*脑袋要放个背景色*/
.header_content{width:1200px; background-color:; text-align:center; margin:0px auto;} /*第二层要居个中*/
.header_right{width:580px; float:right;} /*右边导航的div*/
.header_right a{text-decoration:none; font-size:12px; color:#696969; line-height:40px;} /*顶部右边导航*/
a:hover{color:red;}

.header_red{display:inline-block; height:40px; width:65px; text-align:center;} 
.header_red:hover{color:red; background-color:white;} /*鼠标触发红字白底*/
.header_gray{display:inline-block; height:40px; width:65px; text-align:center;} 
.header_gray:hover{color:#696969; background-color:white;} /*鼠标蟹发灰字白底*/

.header_left a{display:inline-block;width:80px; height:40px; margin-left:10px;
text-decoration:none; font-size:12px; color:#696969; line-height:40px;}
.header_left a:hover{background:white; color:red;} /*地理定位鼠标触发红字白底*/

.box1{width:240px; height:140px; display:none;border:1px solid #ccc;border-top:none;}
.header_red:hover .box1{display:block;}
.box1_1{float:left;width:110px; height:60px;margin:10px 5px;line-height:20px;}
.box1_2{float:left;width:110px; height:40px;margin:10px 5px;line-height:20px;}
.clear{clear:both;}
ul li{list-style:none;color:#696969;text-align:left;}
ul li:hover{color:red;}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="shortcut icon" type="image/x-icon" href="images/666.jpg">
		<link rel="stylesheet" type="text/css" href="css/jd.css">
		<link rel="stylesheet" type="text/css" href="css/font-awesome-4.7.0/css/font-awesome.min.css">
		<title>下拉菜单实现作业-仿京东顶部导航</title>
	</head>
	
	<body>
		<div class="header">
			<div class="header_content">
				<div class="header_right">
					<a href="" >你好，请登入</a>
					
					<a href="" style="color:red">免费注册</a>
					
					<a href="">|我的订单</a>
					
					<a href="" class="header_red">|我的京东&nbsp;<i class="fa fa-angle-down"></i>
						<div class="box1">
							<div class="box1_1">
								<ul>
									<li>待处理订单</li>
									<li>返修退换货</li>
									<li>降价商品</li>
								</ul>
							</div>
							<div class="box1_1">
								<ul>
									<li>待处理订单</li>
									<li>返修退换货</li>
									<li>降价商品</li>
								</ul>
							</div>
							<div class="clear"></div>
							<div style="height:1px; background:#ccc;"></div>
							<div class="box1_2">
								<ul>
									<li>我的京豆</li>
									<li>我的白条</li>
								</ul>
							</div>
							<div class="box1_2">
								<ul>
									<li>我的优惠券</li>
									<li>我的理财</li>
								</ul>
							</div>
							<div class="clear"></div>
						</div>
					</a>
					
					<a href="">|京东会员</a>
					
					<a href="" class="header_red">|企业采购&nbsp;<i class="fa fa-angle-down"></i></a>
					
					<a href="" class="header_gray">|客户服务&nbsp;<i class="fa fa-angle-down"></i></a>
					
					<a href="" class="header_gray">|网站导航&nbsp;<i class="fa fa-angle-down"></i></a>
					
					<a href="">|手机京东</a>	
				</div>
				
				<div class="header_left">
					<a href=""><i class="fa fa-lightbulb-o" style="color:red; font-size:14px; font-weight:bold;"></i>&nbsp; 杭州</a>
				</div>
			</div>
		</div>
	</body>
</html>

批改老师：灭绝师太批改时间：2018-11-23 13:41:00
老师总结：完成的不错！没有下拉菜单的导航建议就是用a标签，有二级的话就用ul,个人感觉这样代码思路清晰点！

下拉菜单作业

热门词条