前端开发--css--特征布局练习题

最新推荐文章于 2022-06-30 19:32:56 发布

小哦--

最新推荐文章于 2022-06-30 19:32:56 发布

阅读量269

点赞数

分类专栏： html +css +javascript

本文链接：https://blog.csdn.net/sundanping_123/article/details/95310139

版权

html +css +javascript 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>翻页效果</title>
	<style type="text/css">

		.con{
			list-style: none;
			padding: 0;
			margin: 50px auto 0;
			width: 600px;
			height: 40px;
			border: 1px solid black;
			text-align: center;
			font-size: 0;
		}

		.con li{
			display: inline-block;
			height: 26px;
			font-size: 17px;
			margin: 7px;
		}

		.con li a{
			display: block;
			background-color: gold;
			height: 26px;
			line-height: 26px;
			text-decoration: none;
			padding: 0  10px;
			font:normal  12px/26px  'Microsoft Yahei';
			color: black;

		}

		.con li a:hover{
			background-color: red;
			color: white;
		}



	</style>
</head>
<body>
	<!-- ul.con>(li>a{1})*11   -->

	<ul class="con">
		<li><a href="#">上一页</a></li>
		<li><a href="#">1</a></li>
		<li><a href="#">2</a></li>
		<li><a href="#">3</a></li>
		<li><a href="#">4</a></li>
		<li><span>…</span></li>
		<li><a href="#">17</a></li>
		<li><a href="#">18</a></li>
		<li><a href="#">19</a></li>
		<li><a href="#">20</a></li>
		<li><a href="#">下一页</a></li>
	</ul>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>翻页效果</title>
	<style type="text/css">

		.menu{
			list-style: none;
			margin: 50px auto 0;
			padding: 0;
			width: 958px;
			height: 40px;
			border: 1px solid #666;
			text-align: center;
			font-size: 0;
		}

		.menu li{
			display: inline-block;
			font-size: 14px;
			height: 40px;

		}

		.menu li a{
			display: block;
			height: 40px;
			font:normal  14px/40px  'Microsoft Yahei';
			text-decoration: none;
			color: black;		
		}

		.menu li a:hover{
			color: red;
		}

		.menu li span{
			display: block;
			height: 40px;
			font:normal  14px/40px  'Microsoft Yahei';
			margin: 0  20px;

		}


	</style>
</head>
<body>

	<!-- ul.menu>(li>a{网站建设})*7 -->

	<ul class="menu">
			<li><a href="#">首页</a></li>
			<li><span>|</span></li>
			<li><a href="#">网站建设</a></li>
			<li><span>|</span></li>
			<li><a href="#">程序开发</a></li>
			<li><span>|</span></li>
			<li><a href="#">网络营销</a></li>
			<li><span>|</span></li>
			<li><a href="#">企业VI</a></li>
			<li><span>|</span></li>
			<li><a href="#">案例展示</a></li>
			<li><span>|</span></li>
			<li><a href="#">联系我们</a></li>
		</ul>	
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>翻页效果</title>
	<style type="text/css">

		.menu{
			list-style: none;
			padding: 0;
			width: 960px;
			height: 40px;
			margin: 50px auto 0;
			background-color: #55a8ea;

		}

		.menu li{
			width: 100px;
			height: 40px;
			float: left;
		}

		.menu li a{
			display: block;
			width: 100px;
			height: 40px;
			font:normal  14px/40px  'Microsoft Yahei';
			text-align: center;
			color: white;
			text-decoration: none;
			/*position: relative;*/
		}

		.menu li a:hover{
			background-color:  #00619f;
		}

		.menu .new{
			/*width: 33px;
			height: 20px;*/
			background: url(images/new1.png)  no-repeat;
			position: absolute;
			left: 609px;
			top: 35px;
		}


	</style>
</head>
<body>

	<ul class="menu">
		<li><a href="#">首页</a></li>
		<li><a href="#">公司简介</a></li>
		<li><a href="#">程序开发</a></li>
		<li><a href="#">网络营销</a></li>
		<li><a href="#">企业VI</a></li>
		<li><a href="#">案例提示</a></li>
		<li><a href="#">联系我们</a></li>
		<li   class='new'></li>
	</ul>

</body>
</html>

在这里插入图片描述