寒假作业17

最新推荐文章于 2023-03-22 20:33:15 发布

qq_43027457

最新推荐文章于 2023-03-22 20:33:15 发布

阅读量117

点赞数

分类专栏：作业课作

本文链接：https://blog.csdn.net/qq_43027457/article/details/87294385

版权

课作同时被 2 个专栏收录

35 篇文章 0 订阅

订阅专栏

作业

29 篇文章 0 订阅

订阅专栏

今天复习后所敲的代码。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>翻页</title>
	<style type="text/css">
		*{
			padding: 0px;
			margin: 0px;
		}
		.box1{
			width: 958px;
			height: 40px;
			border: #ebebeb solid 1px;
			margin: 100px auto;
			overflow: hidden;
		}
		.list{
			margin:auto;
		}
		.ul{
			font-size: 12px;
			width:500px;
			font-family: "微软雅黑";
			color: black;
			list-style: none;
			margin: 7px auto;
		}
		.ul:after{
			content:"";
			display: block;
			clear: both;
		}
		span{
			float: left;
		}
		.ul a{
			height: 16px;
			background-color: gold;
			padding: 5px 10px;
			margin: 0px 5px;
			float:left;
			text-decoration: none;
		}
	</style>
</head>
<body>
	<div class="box1">
		<ul class="ul">
			<li><a href="http://www.4399.com" target="_blank">上一页</a></li>
			<li><a href="http://www.4399.com" target="_blank">1</a></li>
			<li><a href="http://www.4399.com" target="_blank">2</a></li>
			<li><a href="http://www.4399.com" target="_blank">3</a></li>
			<li><a href="http://www.4399.com" target="_blank">4</a></li><span>···</span>
			<li><a href="http://www.4399.com" target="_blank">17</a></li>
			<li><a href="http://www.4399.com" target="_blank">18</a></li>
			<li><a href="http://www.4399.com" target="_blank">19</a></li>
			<li><a href="http://www.4399.com" target="_blank">20</a></li>
			<li><a href="http://www.4399.com" target="_blank">下一页</a></li>
		</ul>
	</div>
</body>
</html>






<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>导航条02</title>
	<style type="text/css">
		.box{
			margin: 50px auto;
			width: 958px;
			height: 40px;
			/*background-color: #55a8ea;*/
		}
		ul{
			list-style: none;
		}
		li a:link{
			width: 14.28%;
			height: 15px;
			float: left;
			display: block;
			background-color: #55a8ea;
			text-decoration: none;
			text-align: center;
			padding: 12px 0px;
		}
		li a:hover,li a:active{
			background-color: black;
		}
		#VI{ position: relative; }
		.smallBox{
			height: 28px;
			width: 33px;
			/*background-color: red;*/
			position: absolute;
			left: 570px;
			bottom: -20px;
		}
		.smallBox .top{
			height: 14px;
			/*padding: 1px 0px 1px 0px;*/
			width: 33px;
			background-color: #f47403;
			text-align: center;
			font-size: 12px;
			color: white;
		}
		.smallBox .bottom{
			width: 4px;
			height: 8px;
			margin: auto;
			border-top: solid #f47403 4px;
		}
	</style>
</head>
<body>
	<div class="box">
		<ul>
			<li><a href="http://www.4399.com" target="_blank">首页</a></li>
			<li><a href="http://www.4399.com" target="_blank">网站建设</a></li>
			<li><a href="http://www.4399.com" target="_blank">程序开发</a></li>
			<li><a href="http://www.4399.com" target="_blank">网络营销</a></li>
			<li id="VI"><a href="http://www.4399.com" target="_blank">企业VI
							<span>
								<div class="smallBox">
									<div class="top">new</div>
									<div class="bottom"></div>
								</div>
							</span>
						</a>
			</li>
			<li><a href="http://www.4399.com" target="_blank">案例展示</a></li>
			<li><a href="http://www.4399.com" target="_blank">联系我们</a></li>
		</ul>
	</div>
</body>
</html>