网页头部+尾部

最新推荐文章于 2024-09-22 13:27:33 发布

一叶舟轻-dly

最新推荐文章于 2024-09-22 13:27:33 发布

阅读量4.1k

点赞数 4

分类专栏： HTML 文章标签： html5

本文链接：https://blog.csdn.net/xinzhelantian/article/details/56482226

版权

HTML 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

大概从二月份开始学习Web前端的东西，从HTML学起。照着视频学习了<div>布局，认为网页就是先把整体给建出来，然后再去给各个部分修饰。但是在写网页的时候，还是一部份弄好，再弄下一部分。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>水平</title>
<style type="text/css">
	*{padding:0px;}
	ul{
		list-style:none;
	}
	#head{
		width:100%;
		height:40px;
		background-color:#0066CC;
		margin:20px 0px;
	}
	#head ul{ padding:0px 5px 0px 150px;}
	#head ul li{
		float:left;
		width:100px;
		position:relative;
	}
	#head ul li a{
		text-decoration:none;
		background:#0066CC; 
		color:white;
		font-size:15px;
		line-height:20px;
		text-align:center;
		display:block;
		height:20px;
		padding:10px;
		
	}
	#head ul li a:hover{
		background:#FF6699;
	}
	#head ul li ul li{
	    float:none;
		left:-150px;
		margin-top:1px;
	}
	#head ul li ul{
		display:none; 
	}
	#head ul li:hover ul{
		display:block;
	}
	#body{
		height:200px;
		width:100%;
		}
	#foot{
		background-color:#CCC;
		height:40px;
		width:100%;	
		margin:20px 0px;
	}
	#foot ul{ padding:0px 5px 0px 200px;}
	#foot ul li a{
			text-decoration:none;
			background-color:#CCC;
			line-height:20px;
			color:#333;
			float:left;
			width:75px;
			text-align:center;
			padding:10px;
			display:block;
		    height:20px;
		}
	#foot ul li a:hover{background:#FF99FF;}
    p{text-align:center;}
</style>
</head>

<body>
	<div id="head">
		<ul>
			<li><a href="#">首页</a></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></li>
			<li><a href="#">极客社区</a></li>
		</ul>
	</div>
<div id="body">
    
    
    </div>
<div id="foot">
    	<ul>
        	<li><a href="#">公司简介|</a></li>
            <li><a href="#">招贤纳士|</a></li>
            <li><a href="#">广告服务|</a></li>
            <li><a href="#">联系方式|</a></li>
            <li><a href="#">版权声明|</a></li>
            <li><a href="#">网站客服</a></li>
        </ul>
    </div>
	<p>京ICP证09002463 | Copyright</p>
</body>
</html>