12.28作业

最新推荐文章于 2023-12-28 11:23:17 发布

冷暖自知···

最新推荐文章于 2023-12-28 11:23:17 发布

阅读量127

点赞数

本文链接：https://blog.csdn.net/weixin_43167531/article/details/85332657

版权

作业1

<!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>

作业2

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>导航条01</title>
	<style type="text/css">
		*{
			padding: 0px;
			margin: 0px;
		}
		.box{
			width: 958px;
			height: 16px;
			border: #333 solid 1px;
			padding: 12px 0px;
			margin: 100px auto;
		}
		.boxInner{
			margin: 0px auto;
			width: 780px;
		}
		.boxInner a{
			margin: 0px 25px;
			font-size: 14px;
			color: #333;
			font-family: "微软雅黑";
		}
		a:link{
			text-decoration: none;
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="boxInner">
			<a href="#">首页</a>|
			<a href="#">网站建设</a>|
			<a href="#">程序开发</a>|
			<a href="#">网络营销</a>|
			<a href="#">企业VI</a>|
			<a href="#">案例展示</a>|
			<a href="#">联系我们</a>
		</div>
	</div>
</body>
</html>

作业3

<!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>

冷暖自知···

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
12.28作业

作业1&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;翻页&lt;/title&gt; &lt;style type="text/css"&gt; *{ padding:
复制链接

扫一扫