case 3

最新推荐文章于 2024-08-08 10:33:11 发布

爱小黄

最新推荐文章于 2024-08-08 10:33:11 发布

阅读量186

点赞数

分类专栏： JavaWeb 文章标签： html css

本文链接：https://blog.csdn.net/weixin_44110581/article/details/112233801

版权

JavaWeb 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			a{
				text-decoration: none;
				/* 行转块 */
				display: block;
				line-height: 50px;
				width: 200px;
				height: 80px;
				padding: 10px;
				/* 左右有效 */
				margin: 10px;
			}
			/* 未访问 */
			a:link{
				color: #000;
			}
			/* 访问 */
			a:visited{
				color: red;
			}
			/* 悬停 */
			a:hover{
				color:lawngreen;
			}
			/* 激活 */
			a:active{
				color: yellow;
			}
		</style>
	</head>
	<body>
		<a href="">BaiDu
		</a>
	</body>
</html>

定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{margin: 0;}
			.box1{
				width: 500px;/* width 100% */
				height: 200px;
				background-color: red;
				position: absolute;
				z-index: 100;
			}
			.box2{
				width: 500px;
				height: 200px;
				background-color: yellow;
				border: 1px solid black;
				position: relative;
				/* 定位的级别高*/ 
				/* position: absolute; */
				/* 参考点为当前页面的左上角 
				脱标：宽度变为内容宽 脱离主框架 级别比低
				*/
				top: 10px;/*表示距离上10像素 上下一个起作用 可以用正负表示相反 */
				/* left: 10px; */
				padding: 30px;
			}
			.box3{
				width: 500px;
				height: 200px;
				background-color: blue;
			}
			.box4{
				width: 300px;
				height: 100px;
				background-color: green;
				position: absolute;/* 相对于父辈定位 定位：子绝对父相对 不会考虑参考盒子的padding*/
				/* 居中 */
				left: 50%;
				top: 10px;
				margin-left: -150px;
			}
		</style>
	</head>
	<body>
		<div class="box2">
		<div class="box1"></div>
			<div class="box4">
			</div>
		</div>
		<div class="box3"></div>
	</body>
</html>

二级菜单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	<style type="text/css">
		/* 初始化 */
		*{padding: 0;margin: 0;}
		.img{
			vertical-align: bottom;
		}
		/* 元素选择器 */
		li{
			/* 列表样式 */
			list-style: none;
		}
		a{
			/* 下划线 */
			text-decoration: none;
		}
		/* 公共样式 */
	/* :;width: 986px;margin: 0 auto; */
		.bd{border: 1px solid red;}
		.fl{float: left;}
		.fr{float: right;}
		.clearfix::before,.clearfix::after{
			content: ""; 
			display: table;
		}
		.clearfix::after{
			clear: both;
		}
	</style>
	</head>
	<body>
		<header class="w clearfix">
			<div class="logo fl"><img src="images/uclogo.png" alt=""></div>
			<!-- 无序列表 -->
			<ul class="navigetion fr ">
				<li class="fl current"><a href="">首页</a></li>
				<li class="fl "><a href="">下载</a>
				<!-- 二级导航 -->
					<ur class="subnav">
						<li><a href="">手机UC</a></li>
						<li><a href="">电脑浏览器</a></li>
						<li><a href="">TV浏览器</a></li>
					</ur>	
				</li>
				<li class="fl"><a href="">公司</a></li>
				<li class="fl"><a href="">合作</a></li>
				<li class="fl"><a href="">社区</a></li>
				<li class="fl"><a href="">帮助</a></li>
			</ul>
		</header>
	</body>
</html>

html

<!-- 问题 ：一级导航被二级导航挤出 -->

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>uc</title>
	</head>
	<style type="text/css">
		/* 初始化 */
		* {
			padding: 0;
			margin: 0;
		}

		.img {
			vertical-align: bottom;
		}

		/* 元素选择器 */
		li {
			/* 列表样式 */
			list-style: none;
		}

		a {
			/* 下划线 */
			text-decoration: none;
		}

		/* 公共样式 */
		.w {
			width: 986px;
			margin: 0 auto;
		}

		.bd {
			border: 1px solid red;
		}

		.fl {
			float: left;
		}

		.fr {
			float: right;
		}

		.clearfix::before,
		.clearfix::after {
			content: "";
			display: table;
		}

		.clearfix::after {
			clear: both;
		}

		/* 特殊 */
		header {
			width: 100%;
			/* 不能生效*/
			position: fixed;
			background-color: white;
			z-index: 100;
			top: 0;
		}

		.logo {
			padding-top: 15px;
			padding-bottom: 12PX;
		}

		/* 解决 ul和a的问题*/
		.current>li {
			border-bottom: 3px solid red;
		}

		.navigetion {
			margin-top: 5px;
			padding-right: 20px;
		}

		.navigetion>li {
			border-bottom: 3px solid transparent;
			margin-left: 32px;
			padding: 0 10px;
		}

		.navigetion a {
			color: black;
			display: block;
			font-size: 20px;
			line-height: 67px;
		}

		.navigetion>li:hover {
			/* 限制为子元素 */
			color: #fb7a43;
		}

		.navigetion a:hover {
			color: #fb7a43;
		}

		.navigetion>li:hover .subnav {
			/* 限制为子元素 */
			display: block;
			position: absolute;
		}

		.subnav a {
			color: white;
		}

		.subnav li {
			background-color: #fb7a43;
			display: block;
		}

		.subnav {
			display: none;
		}

		.subnav>li:hover {
			background-color: #fa6523;
		}

		.subnav a:hover {
			color: white;
		}

		.main {
			padding-top: 70px;
		}

		.banner {
			height: 400px;
			background: no-repeat url(images/banner.jpg) center 0;
			background-color: #181818;
		}

		.icons {
			height: 145px;
		}

		.icon {
			background: url(images/icon.png) no-repeat 49px 21px;
			width: 138px;
			padding-top: 58px;

		}

		.icon:nth-child(2) {
			background-position: -90px 21px;
		}

		.icon:nth-child(3) {
			background-position: -224px 21px;
		}

		.icon:nth-child(3)::before {
			content: "";
			display: table;
			width: 23px;
			height: 11px;
			background: url(images/icon.png)-140px -280px no-repeat;
			position: absolute;
			top: 15px;
			left: 362px;
		}

		.icon:nth-child(4) {
			background-position: -364px 21px;
		}

		.icon:nth-child(4)::before {
			content: "";
			display: table;
			width: 23px;
			height: 11px;
			background: url(images/icon.png)-140px -280px;
			position: absolute;
			top: 15px;
			left: 500px;
		}

		.icon:nth-child(5) {
			background-position: -506px 21px;
		}

		.icon:nth-child(6) {
			background-position: -646px 21px;
		}

		.icon:hover {
			/*背景图片上移120*/
			background-position: 49px -99px;
		}

		.icon:nth-child(2):hover {
			background-position: -90px -99px;
		}

		.icon:nth-child(3):hover {
			background-position: -224px -99px;

		}

		.icon:nth-child(4):hover {
			background-position: -364px -99px;

		}

		.icon:nth-child(5):hover {
			background-position: -506px -99px;

		}

		.icon:nth-child(6):hover {
			background-position: -646px -99px;

		}

		.icon a {
			display: block;
			font-size: 11px;
			line-height: 81px;
			text-align: center;
			color: red;
		}

		.toocode {
			fgloat: right;
			background: no-repeat url(images/twocode.png);
			width: 128px;
			font-size: 11px;
			line-height: 71px;
			padding-top: 106px;
			text-align: center;
			position: absolute;
			top: -32px;
			right: -4px;
		}

		.icons .w {
			position: relative;
		}

		.news {
			margin-bottom: 36px;
		}

		.new {
			width: 290px;
		}

		.new:nth-child(2) {
			margin: 0 58px;
		}

		.title {
			top: 24px;
			left: 24px;
		}

		.title h4 {
			margin-top: 20px;
			font-size: 20px;
			font-weight: 200;
			line-height: 60px;
		}

		.title a {
			color: #000000;
			position: relative;
			font-size: 15px;
			line-height: 58px;
			margin-right: 20PX;
			margin-top: 20px;
		}

		.title a::after {
			content: "";
			width: 6px;
			height: 6px;
			border: 2px solid #e0e0e0;
			border-left-color: transparent;
			border-bottom-color: transparent;
			transform: rotate(45deg);
			position: absolute;
			margin-top: 25px;
		}

		.title div {
			/* width: 6px;
			height: 6px;
			border: 2px solid red;
			border-left-color: transparent;
			border-bottom-color: transparent;
			transform:rotate(45deg);
			margin-top: 20px; */
		}

		.pic {
			background: #f2f2f2 no-repeat;
			/* url(images/activity_pic.jpg) */
			padding-top: 120px;
		}

		.new:nth-child(1) .pic {
			background-image: url(images/activity_pic.jpg);
		}

		.new:nth-child(2) .pic {
			background-image: url(images/news_pic.jpg);
		}

		.new:nth-child(3) .pic {
			background-image: url(images/community_pic.jpg);
		}

		.pic a {
			font-size: 12px;
			line-height: 34px;
			display: block;
			text-align: center;
			color: #000000;
		}

		.new ul {}

		.new ul li {}

		.new ul li a {
			font-size: 14px;
			line-height: 29px;
			color: #000000;
			word-spacing: 8px;
		}

		footer {
			background-color: #333333;
			height: 471px;
		}

		.foot_up {
			padding-top: 46px;
			width: 164px;
			color: #aaaca9;
		}

		.foot_up p {
			font-size: 13px;
			line-height: 21px;
			font-weight: bold;
		}

		.foot_up a {
			color: #aaaca9;
			font-size: 11px;
			line-height: 19px;
		}

		.earth {
			width: 135px;
			height: 22px;
			border: 2px solid #424443;
			position: relative;

		}

		.earth a::before {
			content: "";
			background: url("images/icon.png") 4px -289px no-repeat;
			width: 24px;
			/* 必须加宽高才显示 */
			height: 19px;
			position: absolute;
			left: 0px;
			/* 在earth上 定位 */
		}

		.earth a {
			padding-left: 22pX;
			color: #aaaca9;
		}

		.earth a::after {
			content: "";
			width: 10px;
			/* 必须加宽高才显示 */
			height: 17px;
			background: url("images/icon.png") -31px -290px no-repeat;
			/* margin-left: 5px; */
			right: 5px;
			position: absolute;
		}

		.up_ic {
			padding-top: 46px;
		}

		.up_ic li {
			color: #aaaca9;
			position: relative;
		}

		.up_ic li>a::before {
			content: "";
			background: url("images/icon.png") 0px -315px no-repeat;
			width: 23px;
			/* 必须加宽高才显示 */
			height: 22px;
			position: absolute;
			left: 0px;
			/* 在earth上 定位 */
		}

		.up_ic li>a:hover::before {
			background: url("images/icon.png") -25px -315px no-repeat;
		}

		.up_ic li:nth-child(3) a::before {
			background-position: 0px -340px;
		}

		.up_ic li:nth-child(3):hover a::before {
			background-position: -25px -340px;
		}

		.up_ic li:nth-child(4) a::before {
			background-position: 0px -365px;
		}

		.up_ic li:nth-child(4):hover a::before {
			background-position: -25px -365px;
		}

		.up_ic li:nth-child(5) a::before {
			background-position: 0px -395px;
		}

		.up_ic li:nth-child(6) a::before {
			background-position: 0px -419px;
		}

		.up_ic li:nth-child(7) a::before {
			background-position: 0px -444px;
		}

		.up_ic li:nth-child(5):hover a::before {
			background-position: -25px -395px;
		}

		.up_ic li:nth-child(6):hover a::before {
			background-position: -25px -419px;
		}

		.up_ic li:nth-child(7):hover a::before {
			background-position: -25px -444px;
		}

		.up_ic li>a {
			color: #aaaca9;
			font-size: 15px;
			line-height: 27px;
			padding-left: 24PX;
		}

		.foot-center {}

		.links-box {
			margin-top: 20px;
			padding-left: 7px;
			border-top: 1px dotted #555555;
			border-bottom: 1px dotted #555555;
			position: relative;
		}

		.links-box a {
			margin-top: 2px;
			padding-left: 3px;
			padding-right: 7px;
			font-size: 12px;
			line-height: 35px;
			font-family: "黑体";
			color: #ada7a9;
			font-weight: 400;
			border-right: 1px solid #546658;
		}

		.links-box>a:nth-child(14) {
			margin-right: 58px;
			border-right: 0;
		}

		.links-box>a:nth-child(14)::after {
			content: "";
			background: url("images/icon.png") -100px -280px no-repeat;
			/* 移动背景 上 加 下减，左加 右减 */
			width: 16px;
			/* 必须加宽高才显示 */
			height: 16px;
			position: absolute;
			right: 0px;
			/* 在earth上 定位 */
			top: 9px;
		}

		.links-box p {
			display: inline-block;
			font-size: 11px;
			line-height: 35px;
			font-family: "黑体";
			color: #6c6869;
		}

		.foot-text div {
			display: inline-block;
		}

		.foot-text div:nth-child(1) {
			padding-top: 31px;
		}

		.foot-text div:nth-child(2) {
			padding-top: 20px;
			padding-left: 16px;
			padding-right: 103px;
			font-size: 11px;
			line-height: 19px;
			font-family: "黑体";
			color: #666d66;
		}

		.foot-right {
			margin-top: 27px;
		}

		.foot-right div {
			margin-right: 15px;
		}

		.foot-right div:nth-child(4) {
			margin-right: 0px;
		}
	</style>
	<body>
		<!-- 语义化标签 :头部-->
		<header class="clearfix">
			<div class="w">
				<div class="logo fl"><img src="images/uclogo.png" alt=""></div>
				<!-- 无序列表 -->
				<ul class="navigetion fr">
					<li class="fl current" style="border-bottom: 3px solid red;"><a href="">首页</a></li>
					<li class="fl "><a href="">下载</a>
						<!-- 二级导航 -->
						<ul class="subnav">
							<li><a href="">手机UC </a></li>
							<li><a href="">电脑浏览器</a></li>
							<li><a href="">TV浏览器 </a></li>
						</ul>
					</li>
					<li class="fl"><a href="">公司</a>
						<!-- 二级导航 -->
						<ul class="subnav">
							<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>
							<li><a href="">UC闪屏 </a></li>
						</ul>
					</li>
					<li class="fl"><a href="">合作</a></li>
					<li class="fl"><a href="">社区</a></li>
					<li class="fl"><a href="">帮助</a></li>
				</ul>
			</div>
		</header>
		<div class="main">
			<div class="banner"></div>
			<div class="icons">
				<div class="w clearfix">
					<div class="icon fl"><a href="">Android版下载</a></div>
					<div class="icon fl"><a href="">iPhone版下载</a></div>
					<div class="icon fl"><a href="">电脑版下载</a></div>
					<div class="icon fl"><a href="">Pad版下载</a></div>
					<div class="icon fl"><a href="">TV版下载</a></div>
					<div class="icon fl"><a href="">WP版下载</a></div>
					<div class="toocode bd">手机扫一扫下载</div>
				</div>

			</div>

			<div class="news w clearfix">
				<div class="new fl clearfix">
					<div class="title clearfix">
						<h4 class="fl">活动专区</h4>
						<a href="" class="fr">更多</a>
						<div class="fl"></div>
					</div>
					<div class="pic"><a href="">上uc.cn，下载抢100G流量礼包</a></div>
					<ul>
						<li><a href="">你没得到奖，因为你没有摇一摇</a></li>
						<li><a href="">第二季环保袋活动开放申请啦</a></li>
						<li><a href="">最壕UC微信号，天天送大奖</a></li>
						<li><a href="">UC省钱攻略大曝光：6000万红包等你来！</a></li>
						<li><a href="">手机浏览器成移动上网第一入口 UC稳居市场</a></li>
					</ul>
				</div>
				<div class="new fl  clearfix">
					<div class="title clearfix">
						<h4 class="fl">新闻动态</h4>
						<a href="" class="fr">更多</a>
						<div class="fl"></div>
					</div>
					<div class="pic"><a href="">不断寻找合伙人</a></div>
					<ul>
						<li><a href="">神马搜索与《梦想星搭档》展开娱乐内</a></li>
						<li><a href="">UC九游11月报告：《乱斗西游》成MOBA手</a></li>
						<li><a href="">UC浏览器“抢票帮”颠覆传统 亲朋好友</a></li>
						<li><a href="">UC浏览器新版造就极致视频体验</a></li>
						<li><a href="">手机浏览器使用频率仅次于即时通讯</a></li>
					</ul>
				</div>
				<div class="new fl  clearfix">
					<div class="title clearfix">
						<h4 class="fl">社区热帖</h4>
						<a href="" class="fr">更多</a>
						<div class="fl"></div>
					</div>
					<div class="pic"><a href="">UC浏览器抢票帮正式发布！团结一切力量</a></div>
					<ul>
						<li><a href=""> UC浏览器Android版10.0皮肤制作教程</a></li>
						<li><a href="">年底求加薪技巧！哥拼的是拍马屁的技巧 </a></li>
						<li><a href=""> UC浏览器抢票帮——召唤朋友一起帮你抢</a></li>
						<li><a href=""> UC姐神秘面容首次曝光，多图胆小慎入</a></li>
						<li><a href="">【uc记者团】2015年春节回家 攻略</a></li>
					</ul>
				</div>
			</div>
		</div>
		<!-- 语义化标签 :尾部-->
		<footer clearfix>
			<div class="w clearfix">
				<div class="foot-uup fl clearfix">
					<ul class="foot_up fl">
						<p>UC浏览器</p>
						<li><a href="">产品动态</a></li>
						<li><a href="">功能介绍</a></li>
						<li><a href="">安卓浏览器</a></li>
						<li><a href="">iPhone浏览器</a></li>
						<li><a href="">电脑浏览器</a></li>
						<li><a href="">WP浏览器</a></li>
						<li><a href="">iPad浏览器</a></li>
						<li><a href="">aPad浏览器</a></li>
						<li><a href="">TV浏览器</a></li>
						<li><a href="">塞班浏览器</a></li>
					</ul>
					<ul class="foot_up fl">
						<p>公司</p>
						<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>
						<li><a href="">荣誉之旅</a></li>
						<li><a href="">联系我们</a></li>
						<li><a href="">投资者</a></li>
						<li><a href="">UC闪屏</a></li>
					</ul>
					<ul class="foot_up fl">
						<p>其它产品</p>
						<li><a href="">UC九游</a></li>
						<li><a href="">PP助手</a></li>
						<li><a href="">神马搜索</a></li>
						<li><a href="">UC云</a></li>
						<li><a href="">U点充值</a></li>
						<li><a href="">用户中心</a></li>
						<li><a href="">体验中心</a></li>
						<li><a href="">帮助中心</a></li>
						<li><a href="">意见反馈</a></li>
					</ul>
					<ul class="foot_up fl">
						<p>开放合作</p>
						<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>
					<ul class="foot_up fl">
						<p>招聘</p>
						<li><a href=""> 社会招聘 </a></li>
						<li><a href="">人才推荐</a></li>
						<li><a href="">实习生招聘</a></li>
						<li><a href="">内部推荐</a></li>
						<li><a href="">走进UC</a></li>

					</ul>
					<ul class="up_ic fl">
						<div class="earth"><a class="" href="">中文版</a></div>
						<li><a href="">手机站 </a></li>
						<li><a href="">Pad站</a></li>
						<li><a href="">TV站</a></li>
						<li><a href="">UC浏览器微博</a></li>
						<li><a href="">UC浏览器贴吧</a></li>
						<li><a href="">UC浏览器微信</a></li>
					</ul>
				</div>
				<div class="foot-center fl">
					<div class="links-box">
						<a href="">阿里巴巴集团</a>
						<a href="">淘宝网</a>
						<a href="">天猫</a>
						<a href="">聚划算</a>
						<a href="">全球速卖通</a>
						<a href="">阿里巴巴国际交易市场</a>
						<a href="">1688</a>
						<a href="">阿里妈妈</a>
						<a href="">阿里旅行·去啊</a>
						<a href="">阿里云计算</a>
						<a href="">YunOS</a>
						<a href="">阿里通信</a>
						<a href="">万网</a>
						<a href="">高德</a>
					</div>
					<div class="links-box" style="margin: 0px;border-top: 0;">
						<p>友情连接:</p>
						<a href="">手机游戏</a>
						<a href="">网易科技</a>
						<a href="">dospy智能手机网</a>
						<a href="">历趣手机软件</a>
						<a href="">威锋网</a>
						<a href="">小说全搜</a>
						<a href="">IT之家</a>
						<a href="">前瞻网</a>
						<a href="">手机软件下载</a>
						<a href="">pc6下载</a>
						<a href="">安卓市场</a>
						<a href="" style="border-right: 0;">机锋网</a>
						<a href="" style="border-right: 0;"></a>
					</div>
				</div>
				<div class="foot-text">
					<div class="fl">
						<img src="images/logo_company.png" alt="">
					</div>
					<div class="fl">
						<span style="font-family:Arial;">&copy; </span>
						2004-2014 uc.cn 版权所有 网络文化经营许可证：文网文[2010]176号<br>
						中华人民共和国互联网药品信息服务资格证：（粤）-非经营性-2011-0120<br>
						增值电信业务经营许可证: 粤B2-20070379 粤ICP备09210879号</div>
				</div>
				<div class="foot-right fl">
					<div class="fl"><img src="images/qa_wen.png" alt=""></div>
					<div class="fl"><img src="./images/gs.png" alt=""></div>
					<div class="fl"><img src="./images/knet_cn.png" alt=""></div>
					<div class="fl"><img src="images/anva.png" alt=""></div>
				</div>
			</div>
		</footer>
	</body>
</html>

css


		/* 初始化 */
		*{padding: 0;margin: 0;}
		
		.img{
			vertical-align: bottom;
		}
		/* 元素选择器 */
		li{
			/* 列表样式 */
			list-style: none;
		}
		a{
			/* 下划线 */
			text-decoration: none;
		}
		/* 公共样式 */
		.w{width: 986px;margin: 0 auto;}
		.bd{border: 1px solid red;}
		.fl{float: left;}
		.fr{float: right;}
		.clearfix::before,.clearfix::after{
			content: ""; 
			display: table;
		}
		.clearfix::after{
			clear: both;
		}
		/* 特殊 */
		header{
			width: 100%; /* 不能生效*/
			position: fixed;
			background-color: white;
			z-index: 100;
			top:0;
		}
		.logo{
			padding-top: 15px;
			padding-bottom: 12PX;
		}
		/* 解决 ul和a的问题*/
		.current {
			border-bottom: 3px solid red;
		}
		.navigetion{
			margin-top:5px;
			padding-right: 20px;
		}
		.navigetion>li{
			margin-left: 32px;
			padding: 0 10px;
			}

		.navigetion a{
			color: black;
			display: block;
			font-size: 20px;
			line-height: 67px;
		}
		.navigetion>li:hover{/* 限制为子元素 */
			color:#fb7a43;
		}
		.navigetion a:hover {color: #fb7a43;}
		.navigetion>li:hover .subnav{/* 限制为子元素 */
			display: block;
			position:absolute;
		}
		.subnav a{color: white;}
		.subnav li{
			background-color: #fb7a43;
			display: block;
		}
		.subnav{display: none;}
		.subnav>li:hover{background-color: #fa6523;}
		.subnav a:hover {color: white;}
		.main{padding-top: 70px;}
		.banner{
			height: 400px;
			background:no-repeat url(images/banner.jpg) center 0;
			background-color: #181818;
		}
		
		.icons{
			height: 145px;
			border-bottom: 1px solid red;
		}
		.icon{
			background: url(images/icon.png) no-repeat 49px 21px;
			width: 138px;
			padding-top: 58px;
		
		}
		.icon:nth-child(2){
			background-position: -90px 21px;
		}
		.icon:nth-child(3){
			background-position: -224px 21px;
		}
		.icon:nth-child(3)::before{
			content: ""; 
			display: table;
			width: 23px;
			height: 11px;
			background: url(images/icon.png)-140px -280px no-repeat ;
			position: absolute;
			top: 15px;
			left: 362px;
		}
		.icon:nth-child(4){
			background-position: -364px 21px;
		}
		.icon:nth-child(4)::before{
			content: ""; 
			display: table;
			width: 23px;
			height: 11px;
			background: url(images/icon.png)-140px -280px  ;
			position: absolute;
			top: 15px;
			left: 500px;
		}
		.icon:nth-child(5){
			background-position: -506px 21px;
		}
		.icon:nth-child(6){
			background-position: -646px 21px;
		}
		.icon:hover{/*背景图片上移120*/ 
			background-position: 49px -99px;
		}
		.icon:nth-child(2):hover{
			background-position: -90px -99px;
		}
		.icon:nth-child(3):hover{
			background-position: -224px -99px;
			
		}
		.icon:nth-child(4):hover{
			background-position: -364px -99px;
			
		}
		.icon:nth-child(5):hover{
			background-position: -506px -99px;
			
		}
		.icon:nth-child(6):hover{
			background-position: -646px -99px;
			
		}
		
		.icon a{
			display: block;
			font-size: 11px;
			line-height: 81px;
			text-align: center;
			color: red;
		}
	.toocode{
		fgloat: right;
		background:no-repeat url(images/twocode.png);
		width: 128px;
		font-size: 11px;
		line-height: 71px;
		padding-top: 106px;
		text-align: center;
		position: absolute;
		top: -32px;
		right: -4px;
	}
	.icons .w{
		position: relative;
	}
	.news{
		margin-bottom: 36px;
	}
	.new{
		width: 290px;
	}
	.new:nth-child(2){
		margin: 0 58px;
	}
	.title{
		top: 24px;
		left: 24px;
	}
	.title h4{
		margin-top: 20px;
		font-size: 20px;
		font-weight: 200;
		line-height: 60px;
	}
	.title a{
		color: #000000;
		position: relative;
		font-size: 15px;
		line-height: 58px;
		margin-right: 20PX;
		margin-top: 20px;
	}
	.title a::after{
		content: "";
		width: 6px;
		height: 6px;
		border: 2px solid #e0e0e0;
		border-left-color: transparent;
		border-bottom-color: transparent;
		transform:rotate(45deg);
		position: absolute;
		margin-top: 25px;
	}
 	.title div{
		/* width: 6px;
		height: 6px;
		border: 2px solid red;
		border-left-color: transparent;
		border-bottom-color: transparent;
		transform:rotate(45deg);
		margin-top: 20px; */
	} 
	.pic{
		background: #f2f2f2 	no-repeat;
		/* url(images/activity_pic.jpg) */
		padding-top: 120px;
	}
	.new:nth-child(1) .pic{
		background-image: url(images/activity_pic.jpg);
	}
	.new:nth-child(2) .pic{
		background-image: url(images/news_pic.jpg);
	}
	.new:nth-child(3) .pic{
		background-image: url(images/community_pic.jpg);
	}
	.pic a{
		font-size: 12px;
		line-height: 34px;
		display: block;
		text-align: center;
		color: #000000;
	}
	
	.new ul{
	}
	.new ul li{
	}
	.new ul li a{
		font-size: 14px;
		line-height: 29px;
		color: #000000;
		word-spacing: 8px;
	}
	footer{
		background-color: #333333;
		height: 471px;
	}
	.foot_up{
		padding-top: 46px;
		width: 164px;
		color: #aaaca9;
	}
	.foot_up p{
		font-size: 13px;
		line-height: 21px;
		font-weight: bold;
	}
	.foot_up a{
		color: #aaaca9;
		font-size: 11px;
		line-height: 19px;
	}
	.earth{
		width: 135px;
		height: 22px;
		border: 2px solid #424443;
		position: relative;
		
	}
	.earth a::before{
		content: "";
		background:url("images/icon.png") 4px -289px no-repeat;
		width: 24px;					/* 必须加宽高才显示 */
		height: 19px;																				
		position: absolute;	
		left: 0px;/* 在earth上 定位 */
	}
	.earth a{
		padding-left: 22pX;
		color: #aaaca9;
	}
	.earth a::after{
		content: "";
		width: 10px;					/* 必须加宽高才显示 */
		height: 17px;	
		background:url("images/icon.png") -31px -290px no-repeat;
		/* margin-left: 5px; */
		right: 5px;
		position: absolute;
	}
	.up_ic {
		padding-top: 46px;
	}
	.up_ic li{
		color: #aaaca9;
		position: relative;
	}
	.up_ic li>a::before{
		content: "";
		background:url("images/icon.png") 0px -315px no-repeat;
		width: 23px;					/* 必须加宽高才显示 */
		height: 22px;																				
		position: absolute;	
		left: 0px;/* 在earth上 定位 */
	}
	.up_ic li>a:hover::before{
		background:url("images/icon.png") -25px -315px no-repeat;
	}
	.up_ic li:nth-child(3) a::before{
		background-position:0px -340px ;
	}
	.up_ic li:nth-child(3):hover a::before{
		background-position:-25px -340px ;
	}
	.up_ic li:nth-child(4) a::before{
		background-position:0px -365px ;
	}
	.up_ic li:nth-child(4):hover a::before{
		background-position:-25px -365px ;
	}
	.up_ic li:nth-child(5) a::before{
		background-position:0px -395px ;
	}
	.up_ic li:nth-child(6) a::before{
		background-position:0px -419px ;
	}
	.up_ic li:nth-child(7) a::before{
		background-position:0px -444px ;
	}
	.up_ic li:nth-child(5):hover a::before{
		background-position:-25px -395px ;
	}
	.up_ic li:nth-child(6):hover a::before{
		background-position:-25px -419px ;
	}
	.up_ic li:nth-child(7):hover a::before{
		background-position:-25px -444px ;
	}
	.up_ic li>a{
		color: #aaaca9;
		font-size: 15px;
		line-height: 27px;
		padding-left: 24PX;
	}
	.foot-center{
	}
	.links-box{
		margin-top: 20px;
		padding-left: 7px;
		border-top: 1px dotted #555555;
		border-bottom: 1px dotted #555555;
		position: relative;	
	}
	.links-box a{
		margin-top: 2px;   
		padding-left: 3px;   
		padding-right: 7px;   
		font-size: 12px;   
		line-height: 35px;   
		font-family: "黑体";   
		color: #ada7a9;   
		font-weight: 400;   
		border-right: 1px solid #546658;   
	}

	.links-box>a:nth-child(14){
		margin-right: 58px;  
		border-right: 0;   
	}	
	.links-box>a:nth-child(14)::after{
		content: "";
		background:url("images/icon.png") -100px -280px no-repeat;
		/* 移动背景 上 加 下减，左加 右减 */
		width: 16px;					/* 必须加宽高才显示 */
		height: 16px;																				
		position: absolute;	
		right: 0px;/* 在earth上 定位 */
	    top:9px;
	}	
	.links-box p{			
		display: inline-block;				
		
		font-size: 11px;
				
		line-height: 35px;					
		font-family: "黑体";					
		color: #6c6869;					
	}	
	
	.foot-text div{
		display: inline-block;
	}
	.foot-text div:nth-child(1){
		padding-top: 31px;}
	.foot-text div:nth-child(2){
		padding-top: 20px;
		padding-left: 16px;	
		padding-right: 103px;	
		font-size: 11px;	
		line-height: 19px;	
		font-family: "黑体"; 	
		color: #666d66;
	}
	.foot-right{
		margin-top: 27px;
	}
	.foot-right div{
		margin-right: 15px;
	}
	.foot-right div:nth-child(4){
		margin-right: 0px;
	}

爱小黄

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
case 3

a<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> a{ text-decoration: none; /* 行转块 */ display: block; line-height: 50px; width: 200px;
复制链接

扫一扫