综合设计一个OPPE主页--页面的底部

最新推荐文章于 2024-07-12 16:27:40 发布
最新推荐文章于 2024-07-12 16:27:40 发布
阅读量101 收藏
点赞数
分类专栏： CSS HTML 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47295886/article/details/126031231
版权
CSS 同时被 2 个专栏收录
36 篇文章 0 订阅
订阅专栏
HTML
29 篇文章 0 订阅
订阅专栏

 分析结构：

在一行里面， 一个图片，文字  

 实现效果： 

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<title>OPPO</title>
</head>
<body>
	<!-- 页面的顶部 -->
	<div id="top">
		<div class="container"></div>
	</div>
	<!-- 页面的头部 -->
	<div id="header">
		<div class="container">
			<!-- 左边有三项 -->
			<!-- /*实现整体 浮动*/ -->
			<div class="header_left left">
				<div class="xlwb"></div>
				<div class="txwb"></div>
				<div class="tel">4001-666-888</div>
			</div>
			<!-- 右边的相同样式就是文字不同 列表适合一点 有五项-->
			<ul class="right">
				<li><a href="#">登录</a></li>
				<li><a href="#">注册</a></li>
				<li><a href="#">积分兑换</a></li>
				<li><a href="#">帮助中心</a></li>
				<li class="shop_car">
					<span></span>
					<a href="#">购物车</a>
				</li>

			</ul>
		</div>
	</div>
	<!-- 页面的导航栏 -->
	<div id="nav">
		<div class="container">
			<!-- 左边有一项 -->
			<div class="logo left">
				<img src="img/logo.png" alt="logo">
			</div>
			<!-- 右边的相同样式就是文字不同 列表适合一点 有7项-->
			<ul class="right">
				<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="#">ColorOS</a></li>
			</ul>

			
		</div>
	</div>
	<!-- 页面的横幅 -->
	<div id="banner">
		<div class="container"></div>
	</div>
	<!-- 页面的明星机型部分 -->
	<div id="star">
		<div class="container">
			<!-- 上边有一项这项里面有图片 -->
			<div class="star_top">
				<img src="img/i-c-title.png" alt="明星机型的图片">
			</div>
			<!-- 下边有一项 这项li里面有图片机型 文字价格 且具有相似的结构4部分 使用列表标签 -->
			<ul>
				<li>
					<div><img src="img/20141030152751NRihyRENa7.jpg" alt="照片"></div>
					<h2>N3</h2>
					<p>电动旋转摄像头</p>
					<!-- &yen十页符号作为人名币 -->
					<p class="money">&yen;3999 立即购买<span></span></p>
				</li>
				<li class="line"></li>
				<li>
					<div><img src="img/20141029162235J7aJmCHkFm.jpg" alt="照片"></div>
					<h2>R5</h2>
					<p>电动旋转摄像头</p>
					<!-- &yen十页符号作为人名币 -->
					<p class="money">&yen;3999 立即购买<span></span></p>
				</li>
				<li class="line"></li>
				<li>
					<div><img src="img/20150120092342k2ABsEHnQN.jpg" alt="照片"></div>
					<h2>R1C</h2>
					<p>薄至4.85mm</p>
					<!-- &yen十页符号作为人名币 -->
					<p class="money">&yen;2999 立即购买<span></span></p>
				</li>
				<li class="line"></li>
				<li>
					<div><img src="img/20150423183545tYnFzYnn3p.jpg" alt="照片"></div>
					<h2>A31</h2>
					<p>竟在掌握</p>
					<!-- &yen十页符号作为人名币 -->
					<p class="money">&yen;999 立即购买<span></span></p>
				</li>
			</ul>
		</div>
	</div>
	<!-- 页面的精选配件 -->
	<div id="accessory">
		<div class="container">
			<!-- 上部分 -->
			<div class="acc_top">
				<img src="img/wb.png" alt="精选配件">
			</div>
			<!-- 下部分 -->
			<div class="acc_main">
				<!-- 分成左右两部分 -->
				<div class="acc_left left">
					<!-- 左边部分分成上下两部分 -->
					<div class="acc_left_top">
						<!-- 上面的分成左右两部分 -->
						<div class="acc_left_top_left">
							<img src="img/20150413174400N0dPnxUKHk.jpg" alt="皮套">
						</div>
						<div class="acc_left_top_right">
							<!-- 右边的部分分为上下两部分 -->
							<div class="acc_left_top_right_top">
								<p>OPPO手机官网AAESSORY配件</p>
								<ul>
									<li>耳机</li>
									<li>耳机</li>
									<li>耳机</li>

									<li>耳机</li>
									<li>耳机</li>
									<li>耳机</li>
								</ul>
								<h2 class="line"></h2>
								<p>全部配件<span></span></p>
							</div>

							<div class="acc_left_top_right_bottom">
								<img src="img/20131120165101xYIYzhkVEy.jpg" alt="电源适配器">
							</div>
						</div>
					</div>
					<div class="acc_left_bottom">
						<img src="img/20150413174340NLV2gvV4FU.jpg" alt="数据线">
					</div>
				</div>
				<div class="acc_right right">
					<div>
						<img src="img/20150123182505RO822scYYt.jpg" alt="闪充">
					</div>
					<div>
						<img src="img/20141230145609l7Fsk7CdHy.jpg" alt="耳麦">
					</div>
					<div>
						<img src="img/20141011101157yZEFpMrk0h.jpg" alt="耳机">
					</div>
					<div>
						<img src="img/201410270957132inlm3IwsV.jpg" alt="蓝牙耳机">
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- 页面的搜素欧珀部分 -->
	<div id="world">
		<div class="container">
			<div class="world_top">
				<img src="img/weibo.png" alt="欧珀">
			</div>
			<div class="world_main">
				<div class="worle_left left">
					<div><img src="img/201403261455420lqMPNGENc.png" alt="购物积分"></div>
					<div><img src="img/20150226100534QqezQ85N6y.jpg" alt="分期付款"></div>
					<div><img src="img/20140926184007v2rjcVFcbW.jpg" alt="货到付款"></div>
					<div><img src="img/20131212113902waaLqQUWfB.jpg" alt="固件升级"></div>
				</div>
				<div class="world_right right">
					<div class="world_title">
						<div class="news">新闻</div>
						<div class="weibo">微博</div>
					</div>

				<!-- 	图片具有相同的元素 使用列表 -->
				<ul>
					<li> <!-- 每一个列表里面 是图文混排 所以采用自定义列表 -->
						<dl>
							<dt>
								<img src="img/20150227161036GqO59Dvta2.jpg" alt="梦幻">
							</dt><!-- 自定义列表的标题是图片 -->
							<dd>OPPO R5金色版 打造纽约时装周梦幻之旅</dd><!-- 关于列表项的描述 -->
						</dl>
					</li>
					<li> <!-- 每一个列表里面 是图文混排 所以采用自定义列表 -->
						<dl>
							<dt>
								<img src="img/201502271135596D2wBJxvH0.jpg" alt="杂志">
							</dt><!-- 自定义列表的标题是图片 -->
							<dd>OPPO 手动打造 时尚杂志封面大片的感觉</dd><!-- 关于列表项的描述 -->
						</dl>
					</li>
					<li> <!-- 每一个列表里面 是图文混排 所以采用自定义列表 -->
						<dl>
							<dt>
								<img src="img/20140604145924CFBnAtVjqN.jpg" alt="耳机">
							</dt><!-- 自定义列表的标题是图片 -->
							<dd>业界革命 OPPO发布全球最高灵敏度平板耳机PM-1</dd><!-- 关于列表项的描述 -->
						</dl>
					</li>
					<li> <!-- 每一个列表里面 是图文混排 所以采用自定义列表 -->
						<dl>
							<dt>
								<img src="img/20140919101741cvR0TcGkaq.jpg" alt="大奖">
							</dt><!-- 自定义列表的标题是图片 -->
							<dd>极致原音 OPPO PM-1耳机斩获大奖给大家</dd><!-- 关于列表项的描述 -->
						</dl>
					</li>
				</ul>
				</div>
			</div>
		</div>
	</div>
	<!-- 页面的服务部分 -->
	<div id="service">
		<div class="container">
			<ul>
				<li class="service0">
					<dl>
						<dt></dt>
						<dd class="dd1">正品保障</dd>
						<dd class="dd2">所有商品都是原装的</dd>
					</dl>
				</li>
				<li class="service1">
					<dl>
						<dt></dt>
						<dd class="dd1">79元起包邮</dd>
						<dd class="dd2">高效的物流直达配送</dd>
					</dl>
				</li>
				<li class="service2">
					<dl>
						<dt></dt>
						<dd class="dd1">7天退换货</dd>
						<dd class="dd2">支持7天退货，30天换货</dd>
					</dl>
				</li>
				<li class="service3">
					<dl>
						<dt></dt>
						<dd class="dd1">285自提点</dd>
						<dd class="dd2">轻松自在，覆盖各大城市</dd>
					</dl>
				</li>
				<li class="service4">
					<dl>
						<dt></dt>
						<dd class="dd1">365家客服网点</dd>
						<dd class="dd2">所有商品都是原装的</dd>
					</dl>
				</li>
			</ul>
		</div>
	</div>
	<!-- 页面的售后服务 -->
	<div id="alter_sale">
		<div class="container">
			<ul>
				<li>
					<ol>
						<li><a href="#">关于我们</a></li>
						<li><a href="#">关于OPPO</a></li>
						<li><a href="#">新闻中心</a></li>
						<li><a href="#">人才招聘</a></li>
						
					</ol>
				</li>

				<li>
					<ol>
							<li><a href="#">推荐机型</a></li>
							<li><a href="#">N3</a></li>
							<li><a href="#">R5</a></li>
							<li><a href="#">R1C</a></li>
							<li><a href="#">Find 7</a></li>
					</ol>
				</li>

				<li>
					<ol>
							<li><a href="#">购物相关</a></li>
							<li><a href="#">帮助中心</a></li>
							<li><a href="#">周边产品</a></li>
							<li><a href="#">OPPO体验店</a></li>
							<li><a href="#">客户服务政策</a></li>
					</ol>
				</li>

				<li>
					<ol>
							<li><a href="#">会员中心</a></li>
							<li><a href="#">产品注册</a></li>
							<li><a href="#">会员注册</a></li>
							<li><a href="#">会员登录</a></li>
					</ol>
				</li>

				<li>
					<ol>
							<li><a href="#">关注我们</a></li>
							<li class="a">
								<a href="#">
									<span class="xlwb"></span>
									新浪微博
								</a>
							</li>
							<li class="a">
								<a href="#">
									<span class="txwb"></span>腾讯微博
								</a>
							</li>
							<li class="a">
								<a href="#">
									<span class="rrw"></span>
									人人网
								</a>
							</li>
							<li class="a">
								<a href="#">
									<span class="qqkj"></span>
									QQ空间
								</a>
							</li>
					</ol>
				</li>

				<li>
					<ol>
							<li>
								<a href="#">联系我们</a>
							</li>
							<li class="b">
								<a href="#">
									<span></span>
								4001-666-88
								</a>
							</li>
							<li class="c">
								<a href="#">7*24小时客服电话
							</a>
							</li>
							<li class="d">
								<a href="#"><span></span>在线客服
								</a>
							</li>
							<li class="e">
								<a href="#">服务时段：8:30-22:00</a>
							</li>
					</ol>
				</li>

			</ul>
		</div>
	</div>
	<!-- 页面的底部 -->
	<div id="footer">
		<div class="container">
			<p>
				<img src="img/i-f-logo.png" alt="oppo">
				<span>@2005-2005 北京市xxxxxxxx</span>
				<a href="#">版权说明</a>
				<a href="#">使用协议</a>
				<a href="#">网站地图</a>
				<a href="#">友情链接</a>
				<a href="#">联系我们</a>
			</p>
			
		</div>
	</div>
</body>
</html>

css

/*初始化样式*/
/*将默认的样式清零*/
*{
	padding: 0;
	margin: 0;
	font-size: 14px;
}
/*清除列表前面的标识 */
ol,ul{
	list-style-type: none; 
}
/*清除超链接的默认样式*/
a{
	color: #666;/*灰色*/
	text-decoration: none;/*去除下划线*/
}
/*将左右浮动写在类里面*/
.left{
	float: left;
}
.right{
	float: right;
}
/*测试部分*/
#top,#header,#nav,#banner,#star,#accessory,#world,#service,#alter_sale,#footer{
	height: 100px;
	width: 100%;
	/*border: 1px solid #000;*/
}
.container{
	width: 1280px;
	/*border: 1px solid #f00;*/
	margin: 0 auto; /*内容部分居中*/
}


/**********************************************
*****************页面的顶部样式*****************
***********************************************/
#top{
	height: 5px;
	background-color: #00925f;
}
/**********************************************
*****************页面的头部样式*****************
***********************************************/
#header{
	height: 30px;
	background-color: #2d2d2d;
}
/*新浪微博图标的设置*/
#header .xlwb{
	width: 22px;
	height: 19px;
	background: url("../img/icons.png") no-repeat -48px -98px; /*偏移量量一下*/
}
/*腾讯微博图标的设置*/
#header .txwb{
	width: 17px;
	height: 24px;
	background: url("../img/icons.png") no-repeat -28px -93px; /*偏移量量一下*/
}
/*电话的设置*/
#header .tel{
	color: #17925f;
	font-size: 14px;
}
/*实现一行显示 浮动*/
#header .header_left div{
	float: left;
	margin:6px 10px 0px; /*上边距6 左右边距10 下边距0 */

}
#header ul li{
	float: left;
	line-height: 30px;
}
#header li a{
	color: #b2b2b2;
	font-size: 14px;
	border-right: 1px solid #b2b2b2;
	padding:0px 10px;/*文字与边框的距离*/
}
#header li a:hover{
	color: #00925f;
}
#header .shop_car span{
	width: 19px;
	height: 16px;
	margin-left: 10px;
	display: inline-block; /*可以设置了*/
/*	span是行内元素 无法设置行内宽度 改变显示方式*/
	background: url("../img/icons.png") no-repeat 0px -96px;
}
#header .shop_car a{
	border: none;
}

/**********************************************
*****************页面的的导航栏样式**************
***********************************************/
#nav{
	height: 90px;
	background-color: #eeeeee;
}
#nav li{
	float: left;
	margin: 0px 15px;
	line-height: 90px; /*文字居中*/
}
#nav li a{
	color: #666666; /*文字颜色*/
	font-weight: bold;/*加粗效果*/
}
#nav li a:hover{ /*注意这: 后面不能有空格*/
	color: #00925f; /*文字颜色*/
	font-weight: bold;/*加粗效果*/
}
/**************************************************
*****************页面的明星机型部分样式**************
***************************************************/

#star{
	height: 700px;
	background-color: #f2f2f2;
}

#star .star_top{
	text-align: center;/*div居中对齐*/
	margin: 20px; /*使之与上边界存在一个距离*/
}
#star ul{
	width: 1265px;/*调整成适合自己电脑页面的大小*/
	margin: 10px auto;


}
#star li{
	width: 300px;
	/*border: 1px solid #000;*/
	float: left;
	border-bottom: 4px solid #dfdfdf;
	transition:all 0.3s linear ;
}
#star li:hover{
	border-bottom: 4px solid #4bf5d0;
	transform: translateY(-10px);

}
#star li img{
	width: 300px;

}
#star li h2{
	text-align: center;/*文字居中对齐*/
	margin-top: 10px; /*文字和照片之间的距离*/
}
#star li p{
	text-align: center;/*文字居中对齐*/
	margin: 10px 0; /*上下边距 左右0*/
	font-size: 12px;
	color: #bdbdbd;
}
#star .money{
	color: #00925F;
	font-size: 14px;
}
#star li span{
	/*	span是行内元素 无法设置行内宽度 改变显示方式*/
	width: 13px;
	height: 13px;
	margin-left: 5px;
	display: inline-block; /*可以设置了*/
	vertical-align: middle;/*属性设置一个元素的垂直对齐方式 此元素放置在父元素的中部。*/
	background: url("../img/icons-1.png") no-repeat -177px -1014px;/*偏移量的设置宽度 高度*/
}
#star .line{
	width: 0;
	height: 450px;
	border-left: 1px solid #eaeaea;
	margin: 0 10px;
}

/**************************************************
*****************页面的精选配件部分的样式**************
***************************************************/
#accessory{
	height: 950px;
	background-color: #f6f6f6;
	overflow: hidden; /*防止对下面 模块产生影响*/
}
#accessory .acc_main{
	width: 1090px;
	margin: 10px auto;
	
}

#accessory .acc_top{
	overflow: hidden;
	text-align: center;
	margin: 20px 0;
}

#accessory .acc_left{
	width: 540px;
	height: 950px;
	/*border: 2px solid #000;*/
	margin-top: 10px;
}
/*************************************/
#accessory .acc_left_top_left img{
	width: 250px;
	float: left;
	border-bottom: 3px solid #eaeaea;
	margin-right: 10px;
	margin-bottom: 20px;
	transition:all 0.3s linear ;
}
#accessory .acc_left_top_left img:hover{
	border-bottom: 3px solid #00925f;
	transform: translateY(-10px);
}

/*************************************/
#accessory .acc_left_top_right_top {
	float: left;
	width: 250px;
	height: 250px;
	border-bottom: 3px solid #eaeaea;
	background-color: #fff;
	padding: 20px;
	box-sizing: border-box; /*改变元素实际计算方式 加上内边距后元素实际大小发生了变化*/
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
	transition:all 0.3s linear ;
}

#accessory .acc_left_top_right_top:hover{
	border-bottom: 3px solid #00925f;
	transform: translateY(-10px);
}

#accessory .acc_left_top_right_top p:first-child{
	font-size: 14px;
	font-weight: bold;/*加粗*/
	text-align: center;
	border-bottom: 1px solid #ccc;
	padding-bottom: 10px;
}
#accessory .acc_left_top_right_top li{
	float: left;
	width: 100px;
	height: 40px;
	text-align: center;
	line-height: 40px;
}
#accessory .acc_left_top_right_top li:hover{
	color: #00925f;
}
#accessory .acc_left_top_right_top .line{
	width: 150px;
	height: 0;
	border-top: 1px solid #ccc;
	clear: both; /*清除浮动*/
	margin: 10px auto;
}
#accessory .acc_left_top_right_top p{
	text-align: center;
}
#accessory .acc_left_top_right_top p:hover{
	color: #00925f;
}
#accessory .acc_left_top_right_top span{
	/*	span是行内元素 无法设置行内宽度 改变显示方式*/
	width: 13px;
	height: 13px;
	margin-left: 10px;
	display: inline-block; /*可以设置了*/
	vertical-align: middle;/*属性设置一个元素的垂直对齐方式 此元素放置在父元素的中部。*/
	background: url("../img/icons-1.png") no-repeat -177px -1014px;/*偏移量的设置宽度 高度*/
}

/*************************************/
#accessory .acc_left_top_right_bottom img{
	float: left;
	border-bottom: 3px solid #eaeaea;
	margin: 10px;
	transition:all 0.3s linear ;
	width: 250px;
}
#accessory .acc_left_top_right_bottom img:hover{
	transform: translateY(-10px);
	border-bottom: 3px solid #00925f;
}


/*************************************/
#accessory .acc_left_bottom img{
	width: 520px;
	border-bottom: 3px solid #eaeaea;
	transition:all 0.3s linear ;
}
#accessory .acc_left_bottom img:hover{
	border-bottom: 3px solid #00925f;
	transform: translateY(-10px);
}

/*************************************/
#accessory .acc_right{
	width: 540px;
	/*border: 1px solid orange;*/
}
#accessory .acc_right img{
	width: 250px;	
}
#accessory .acc_right div:first-child img{ /*相同元素的第一个元素*/
	width: 520px;
	height: 250px;
	
}
#accessory .acc_right div:last-child img{ /*相同元素的第一个元素*/
	
	height: 241px;
	
}
#accessory .acc_right div{
	float: left;
	margin: 10px;
	border-bottom: 3px solid #eaeaea;
	transition:all 0.3s linear ;
}
#accessory .acc_right div:hover{
	border-bottom: 3px solid #00925f;
	transform: translateY(-10px);
}
/**************************************************
*****************页面的搜素欧珀部分的样式**************
***************************************************/

#world{
	height: 700px;
	/*clear: both;这个在这里清除浮动没有效果*/
	overflow: hidden; /*清除浮动也是没有效果*/
	background-color:  #eaeaea;
}
#world .world_top{
	text-align: center;
	margin: 20px 0px;

}
#world .worle_left{
	width: 800px;
}
#world .worle_left div{
	float: left;
	margin: 10px;
	border-bottom: 3px  solid #eaeaea;
	transition:all 0.3s linear ;
}

#world .worle_left div:hover{
	border-bottom: 3px  solid #00925f;
	transform: translateY(-10px);

}

#world .world_right{
	margin-top: 10px;
	width: 400px;
	height: 567px;
	background-color: #fff;
}
#world .world_right img{
	width: 100px;
	height: 100px;
}
#world .world_right .world_title{
	height: 60px;
}
#world .world_right .world_title div{
	height: 60px;
	width: 200px;
	background-color: #eaeaea;
	text-align: center;
	line-height: 60px;
	float: left;
	border-top: 3px solid #eaeaea;

}
#world .world_right .world_title div:hover{
	color:  #00925f;
}
#world .world_right .world_title div:first-child{
	background-color: #fff;
	border-top: 3px solid #00925f;
}
#world .world_right ul li{
	background-color: #eaeaea;
	margin: 20px 10px;
}
#world .world_right dl{
	width: 380px;
	height: 100px;
	position: relative; /*为了下面的那个图片相对于这个框移动*/
}
#world .world_right dl dt{
	position: absolute;
}
#world .world_right dl dd{
	position: absolute;
	top: 20px;
	left: 140px;
}
#world .world_main{
	width: 1214px;
	margin: 10px auto;
}
/**************************************************
*****************页面的服务部分的样式**************
***************************************************/
#service{
	height: 100px;
	background-color: #fff;

}
#service dl{
	width: 200px;
	height: 100px;
	/*border: 1px solid #000;*/
	position: relative; /*为了下面的图片部分定位使用relative*/
}
#service dl dt{ /*图片部分*/
	width: 42px;
	height: 42px;
	background: url("../img/icons.png") no-repeat 0px -44px;
	position: absolute ;
	top: 30px;
	left: 10px;
}
#service .service1 dt:nth-child(1){
	background: url("../img/icons.png") no-repeat -51px -44px;

}
#service .service2 dt:nth-child(1){
	background: url("../img/icons.png") no-repeat -100px -44px;

}
#service .service3 dt:nth-child(1){
	background: url("../img/icons.png") no-repeat -152px -44px;

}
#service .service4 dt:nth-child(1){
	background: url("../img/icons.png") no-repeat -200px -41px;

}
#service dl .dd1{
	position: absolute ;
	top: 30px;
	left: 60px;
	font-weight: bold;

}
#service dl .dd2{
	position: absolute ;
	top: 50px;
	left: 60px;
	color: #aaa;
	font-size: 12px;

}
#service li{
	float: left;
	margin: 0px 10px;
	transition:all 0.3s linear ;
}
#service li:hover{
	transform: translateY(-10px);
}
#service ul{
	width: 1110px;
	margin: 0 auto;
	height: 98px;
	border-bottom: 1px solid #333;
}
/**************************************************
*****************页面的售后服务部分的样式**************
***************************************************/

#alter_sale{
	height: 200px;
	background-color: #fff;
}
#alter_sale ul{
	width: 1100px;
	margin: 0px auto;
	padding-top: 20px;
}
#alter_sale ul li{
	width: 140px;
	float: left;
	text-align: center;
	margin: 0 20px;
}
#alter_sale ol li{
	line-height: 30px;
}
#alter_sale ol li:first-child a{
	font-weight: bold;
}
#alter_sale .a{
	position: relative;
}

/*新浪微博图标的设置*/
#alter_sale  .xlwb{
	display: inline-block;
	width: 25px;
	height: 25px;
	background: url("../img/icons-1.png") no-repeat 0px -880px; /*偏移量量一下*/
	position: absolute;
	left: 5px;
	top: 3px;
}
#alter_sale .a a:hover{
	color: red;
}
#alter_sale .a a:hover .xlwb{
	background: url("../img/icons-1.png") no-repeat -140px -880px; /*偏移量量一下*/
}
/*腾讯微博图标的设置*/
#alter_sale  .txwb{
	display: inline-block;
	width: 25px;
	height: 25px;
	background: url("../img/icons-1.png") no-repeat 0px -908px; /*偏移量量一下*/
	position: absolute;
	left: 5px;
	top: 3px;
}
#alter_sale .a a:hover .txwb{
	background: url("../img/icons-1.png") no-repeat -140px -908px; /*偏移量量一下*/
}



/*人人网图标的设置*/
#alter_sale  .rrw{
	display: inline-block;
	width: 25px;
	height: 25px;
	background: url("../img/icons-1.png") no-repeat 0px -938px; /*偏移量量一下*/
	position: absolute;
	left: 5px;
	top: 3px;
}
#alter_sale .a a:hover .rrw{
	background: url("../img/icons-1.png") no-repeat -140px -938px; /*偏移量量一下*/
}


/*qq空间图标的设置*/
#alter_sale  .qqkj{
	display: inline-block;
	width: 25px;
	height: 25px;
	background: url("../img/icons-1.png") no-repeat 0px -854px; /*偏移量量一下*/
	position: absolute;
	left: 5px;
	top: 3px;

}
#alter_sale .a a:hover .qqkj{
	background: url("../img/icons-1.png") no-repeat -140px -854px; /*偏移量量一下*/
}

#alter_sale  .b span{
	display: inline-block;
	width: 33px;
	height: 33px;
	background: url("../img/icons.png") no-repeat 0px 0px; /*偏移量量一下*/
	position: absolute;
	left: -35px;

}
#alter_sale  .b a{
	color: #00925f;
	font-size: 17px;
	position: relative;
}
#alter_sale  .c,.e a{
	font-size: 8px;

}
#alter_sale  .d a span{
	display: inline-block;
	width: 33px;
	height: 33px;
	background: url("../img/icons.png") no-repeat -38px 0px; /*偏移量量一下*/
	position: absolute;
	left: -55px;


}
#alter_sale  .d a{
	color: #00925f;
	font-size: 17px;
	position: relative;
}
/**************************************************
*****************页面的底部的样式**************
***************************************************/
#footer{
	height: 40px;
	background-color: #2d2d2d;
}
#footer p{
	line-height: 40px;

}
#footer p img{
	margin-left: 20px;

}
#footer p span{
	color: #828282;
	margin: 0px 430px 0px 20px;
}
#footer p a{
	color: #fff;
	margin: 0px 10px;
}
#footer p a:hover{
	color: #00925f;

}

¡Venceremo
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
综合设计一个OPPE主页--导航栏的设计
weixin_47295886的博客
07-26 206
先进行内容框分析在样式设置。
综合设计一个OPPE主页--页面的精选配件的设计
weixin_47295886的博客
07-26 155
代码】综合设计一个OPPE主页--页面的精选配件的设计。
制作一个静态oppo官网页面
luohanisme的博客
11-28 2405
制作一个静态oppo官网页面
HTML+CSS完成的oppo页面
qq_43601848的博客
11-12 1901
早期学习时自己写的简单的静态页面
前端oppo网页布局练习
tao__f的博客
09-15 1287
html部分： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>oppo商城</title> <link rel="stylesheet" href="in
空间人气精灵啊http://cxqq.net?&=残血第一FD模块发布中心提醒您&请把网站地址放进QQ资料中永久保存以便下次访问！
11-29
综合这些信息，"空间人气精灵"可能是一个自动化工具，用于增加QQ空间的访问量和互动。用户需谨慎使用，遵循免责声明中的规定，并按照升级方法定期更新软件以获取最佳效果和最新的功能。同时，要注意保护个人信息安全...
oppo reno ace刷写第三方rec资源+步骤 实测支持安卓多版本
06-24
oppo reno ace刷写第三方rec资源+步骤 实测支持安卓多版本 1----请使用本人实测的资源来刷写你的机型 2----资源可以支持不同安卓版本刷写第三方rec 3-----内含刷写资源和详细刷写教程步骤 4-----完美兼容当前此...
quick_app:快应用 军装照
05-18
九大厂商他们分别是 小米、中兴、华为、金立、联想、魅族、努比亚、oppe、vivo、一加1.2. 快应用和微信小程序的对比1.2.1. 用户量比较腾讯2017年度财报显示，微信及WeChat合并月活跃用户达9.886亿小米副总裁洪锋...
IELET2001G25Kode：Kode for IELET2001 prosjekt Gruppe 25
02-16
Dersom Portene eråpne，serveren er oppe，女友har domenet和samme IP地址kan duprøveåbesøke她： ://ielet2001g25.ddns.net/ OPPSETT AV IELET2001 G25“ SMARTHUS” Finn frem tastatur，mus，skjerm和HDMI...
SAP MM 配置大全
05-28
3.16 定义每一个地点的仓储地点MRP SPRO 30 3.17 定义负责人员 SPRO 31 3.18 定义缺省的资源 OP42 31 3.19 定义能力计划员 SPRO 32 3.20 定义资源的公式（工作中心） OP21 32 3.21 定义带缺省值的参数文件 OPN1 33 ...
OPPO官网web界面开发案例
weixin_43698704的博客
01-08 1万+
成品 等等 一、框架实现 构建top,header,nav,banner,star,accessory,world,serve,after_sale,footer10个部分框架，然后再逐步构建每一部分。 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&...
HTML+CSS+JavaScript仿京东购物商城网站 web前端制作服装购物商城 html电商购物网站
热门推荐
VX_WJ88950106的博客
08-06 2万+
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web......
网页设计作业——仿oppo官网手机商城(1页) HTML+CSS+JavaScript 学大学生网页制作期末作业
qq_524614081的博客
04-21 1381
HTML5期末大作业：手机商城网站设计——仿oppo官网手机商城(1页) HTML+CSS+JavaScript 学大学生网页制作期末作业 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可
更新商品前端接口编写
最新发布
weixin_55639995的博客
07-12 150
那么在vue运行的时候,会加载所有的ref属性特征的元素还有组件。标签中ref的作用就是将 该组件注册到vue对象的ref属性中。使用插槽,那个scope就是代表着一行的数据。然后里面的选项遍历的是 js定义的数据。如果文字显示过多可以使用 文本隐藏显示。表单绑定还有表单数据的绑定。数据绑定使用的表单绑定状态。写form表单然后封装数据。状态的选择使用的是选择框。副标题使用的是文本域。状态页面使用,下拉框。富文本选择器使用组件。使用后端枚举类型去写。
Node多版本管理器NVM安装使用
GongWeiBuQi的博客
07-11 141
安装node很方便，只需要一条命令可以轻松切换node版本可以多版本node并存。
Javafx利用fxml变换场景的小细节
2301_80311013的博客
07-09 819
在这个代码中，在JavaFX中，FXMLLoader是用来加载FXML文件并将其转换为Java对象（例如控制器类）的工具。当您使用FXMLLoaderFXMLLoader在整个过程中，FXMLLoader是使用JavaFX的后台线程（也称为JavaFX线程）来执行这些操作的，这是为了保持UI线程的响应性。这意味着在用户界面（UI）线程中，您不会看到任何阻塞，即使FXMLLoader正在执行耗时的操作。当FXMLLoader完成加载并调用load()方法时，它会返回一个Parent。
一个使用Go语言和现代Web技术构建跨平台桌面应用程序开源项目
yunmoon的博客
07-10 968
Wails作为一个桥梁，连接强大的Go后端逻辑与丰富的Web前端界面，允许开发者利用两者的最佳特性来开发应用。
前端javascript中的排序算法之插入排序
峰会路转的博客
07-09 171
【代码】前端javascript中的排序算法之插入排序。
oppe手机 Android13获取不到存储权限
05-27
如果你在使用OPPO手机的Android13系统时无法获取到存储权限，可能是因为OPPO手机在Android13系统中加强了权限管理，导致应用无法直接获取到存储权限。你可以尝试以下解决方法： 1. 检查应用的权限设置：在应用管理中，检查应用是否已经被授予了存储权限。如果没有，手动开启存储权限即可。 2. 重启手机：有时候系统会出现一些异常，导致应用无法正常获取到权限。此时，尝试重启手机可能会解决问题。 3. 清除应用缓存：在应用管理中，清除应用的缓存数据，然后重新启动应用，再次尝试获取存储权限。 4. 升级应用版本：如果应用版本较旧，可能会存在一些已知的权限问题。尝试更新应用到最新版本，看看是否能够解决问题。 如果以上方法都不能解决问题，可以尝试联系OPPO官方客服或者到OPPO官方论坛上发帖求助。他们会给出更具体的解决方案。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值