web前端编程实战实例：制作静态京东首页

编程语言 2018-08-11 01:02:26 阅读次数: 0 
<!DOCTYPE html>
<html>
<head>
	<title>京东_曾柯伟</title>
	<link rel="stylesheet" type="text/css" href="京东.css">
</head>
<body>
	<nav class="nav1">
		<p><img src="./静态页面素材/Images/icon_1.png"/>	
		收藏京东<span id="nav_text1">你好欢迎来到京东！<a href="#">[登录]</a>
		<a href="#">[免费注册]</a> &nbsp | &nbsp <a href="#">我的订单</a>
		&nbsp | &nbsp <a href="#">手机京东</a> &nbsp | &nbsp 客户服务 &nbsp | &nbsp
		网站导航 
		</span></p>
	</nav>



	<div class="div1">
		<div class="div1_pic margin_top_3px">
			<a href="http://www.jd.com" target="_blank">
			<img src="./静态页面素材/Images/logo.png"></a>
		</div>
		<div class="div1_input01"><input type="text" name="username" id="input1" placeholder="游戏键鼠"></div>
		<!--设置默认内容-->

		<div class="div1_p1"><p>热门搜索： &nbsp 
		<span id="div1_p1_span1">校园之星</span> &nbsp 
		<span id="div1_p1_span2">礼品卡 &nbsp 沙发 &nbsp 九阳 &nbsp 洗衣机国庆惠 &nbsp 汽车用品 &nbsp LG &nbsp G2 &nbsp 考研大纲</span></p></div>


		<div class="div1_01 img_bigger"><a href="#"><p><img src="./静态页面素材/Images/icon_10.PNG">我的京东 &nbsp</p></a></div>


		<div class="div1_02 img_bigger"><a href="#"><p><img src="./静态页面素材/Images/icon_11.PNG">去购物车结算 &nbsp</p></a></div>
		<div class="clear"></div><!--清除浮动-->
	</div>


	<div class="div2">
		<div class="div2_01"><a href="#">全部商品分类</a></div>
		<div class="div2_02"><a href="#">首页</a></div>
		<div class="div2_02"><a href="#">服装城</a></div>
		<div class="div2_02"><a href="#">京东超市</a></div>
		<div class="div2_02"><a href="#">团购</a></div>
		<div class="div2_02"><a href="#">拍卖</a></div>
		<div class="div2_02"><a href="#">在线游戏</a></div>
		<div class="clear"></div><!--清除浮动-->
	</div>



	<div class="div3">
		<div class="div3_01">
			<ul class="div3_01_ul">
				<li><a href="#">图书、音像、数字商品 <span id="d3ul_li">></span> </a></li>
				<li><a href="#">家用电器 <span id="d3ul_li">></span></a></li>
				<li><a href="#">手机、数码 <span id="d3ul_li">></span></a></li>
				<li><a href="#">电脑、办公<span id="d3ul_li">></span></a></li>
			</ul>
		</div>

		<div class="div3_02 img_bigger"><a href="#"><img src="./静态页面素材/Uploads/advs/banner_1.jpg"></a></div>
		<div class="div3_03 div3_1_6 img_bigger"><a href="#">1</a></div>
		<div class="div3_04 div3_1_6 img_bigger"><a href="#">2</a></div>
		<div class="div3_05 div3_1_6 img_bigger"><a href="#">3</a></div>
		<div class="div3_06 div3_1_6 img_bigger"><a href="#">4</a></div>
		<div class="div3_07 div3_1_6 img_bigger"><a href="#">5</a></div>
		<div class="div3_08 div3_1_6 img_bigger"><a href="#">6</a></div>

		<div class="div3_09 img_bigger"><a href="#"><img src="./静态页面素材/Uploads/advs/adv_1.jpg"></a></div>

		<div class="div3_10">
			<div class="div3_10_01"><strong>京东快报</strong></div>
			<div class="div3_10_02"><a href="#">更多快报></a></div>

			<div class="div3_10_03"><hr></div>

			<div class="div3_10_04">
				<div><a href="#">"月光行动"之黄金周</a></div>
				<div><a href="#">图书音像全场100减20</a></div>
				<div><a href="#">天津东亚运动会影响配送</a></div>
				<div><a href="#">汽车用品国庆不打烊</a></div>
			</div>

			<div class="div3_10_05">
				<div><a href="#">雙十季 &nbsp 10月大牌狂飙</a></div>
				<div><a href="#">电视家影十一大满减</a></div>
				<div><a href="#">国庆期间京东正常配送！</a></div>
				<div><a href="#">家装季亿元东券免费领</a></div>
			</div>

			<div class="div3_10_06">
				<a href="#"><div class="div3_10_06_1 hr_hover"><strong>充值</strong></div></a>
				<a href="#"><div class="div3_10_06_2 hr_hover"><strong>旅行</strong></div></a>
				<a href="#"><div class="div3_10_06_3 hr_hover"><strong>彩票</strong></div></a>
				<a href="#"><div class="div3_10_06_4 hr_hover"><strong>游戏</strong></div></a>
			</div>

			<div class="div3_10_07">
				<form action="#" method="post">
					<p><span class="div3_10_07p1">
						手机号： <input type="tel" name="usertel" placeholder="请输入手机号" class="div3_10_07in"></span>
					</p>
					<p ><span class="div3_10_07p2">支持移动、联通、电信</span></p>
					<p>
					<span class="div3_10_07p3">面值：
						<span class="div3_10_07se"> 
						<select style="border:1px solid #e3e4e5;">
							<option>100</option>
							<option>150</option>
							<option>200</option>
							<option>250</option>
							<option>300</option>
						</select>
						</span>
						<span class="d3_10_07_sep">98.60-99.60</span>
					</span>
					</p>
					<p><span class="div3_10_07p4">
					<input type="submit" name="充值" value="点击充值" id="d3_10_07_btn">
					<a href="#" class="d3_10_07_btnp">两元博千万，双色球6+1</a>
					</span></p>
				</form>
			</div>
		</div>

		<div class="div3_11">
			<div class="div3_11_01 img_bigger">
				<a href="#"><img src="./静态页面素材/Uploads/goods/goods_1.jpg"></a>
			</div>
			<div class="div3_11_02 img_bigger">
				<a href="#"><img src="./静态页面素材/Uploads/goods/goods_2.jpg"></a>
			</div>
			<div class="div3_11_03 img_bigger">
				<a href="#"><img src="./静态页面素材/Uploads/goods/goods_3.jpg"></a>
			</div>
			<div class="div3_11_04 d3_11_lr">
				<a href="#"><</a>
			</div>
			<div class="div3_11_05 d3_11_lr">
				<a href="#">></a>
			</div>
		</div>
	</div>

	<div class="div4">

		<div class="div4_01">
			<a href="#"><div class="div4_01_1 hr_hover"><strong>疯狂抢购</strong></div></a>
			<a href="#"><div class="div4_01_2 hr_hover"><strong>猜您喜欢</strong></div></a>
			<a href="#"><div class="div4_01_3 hr_hover"><strong>热卖商品</strong></div></a>
			<a href="#"><div class="div4_01_4 hr_hover"><strong>热评商品</strong></div></a>
			<a href="#"><div class="div4_01_5 hr_hover"><strong>新品上架</strong></div></a>

			<a href="#"><div class="div4_01_6"><strong>京东首发</strong></div></a>
		</div>

		<div class="div4_02">
			<a href="#"><div class="div4_02_1 img_bigger">
				<img src="./静态页面素材/Uploads/goods/goods_4.jpg">
				<p>京东自营211，简约百搭！防水帆布单肩斜挎包，三</p>
				<p>京东价： <strong><span id="payying">¥3399.00</span></p></strong>
			</div></a>

			<a href="#"><div class="div4_02_2 img_bigger">
				<img src="./静态页面素材/Uploads/goods/goods_5.jpg">
				<p>京东自营211，简约百搭！防水帆布单肩斜挎包，三</p>
				<p>京东价： <strong><span id="payying">¥3399.00</span></p></strong>
			</div></a>

			<a href="#"><div class="div4_02_3 img_bigger">
				<img src="./静态页面素材/Uploads/goods/goods_6.jpg">
				<p>京东自营211，简约百搭！防水帆布单肩斜挎包，三</p>
				<p>京东价： <strong><span id="payying">¥3399.00</span></p></strong>
			</div></a>

			<a href="#"><div class="div4_02_4 img_bigger">
				<img src="./静态页面素材/Uploads/goods/goods_7.jpg">
				<p>京东自营211，简约百搭！防水帆布单肩斜挎包，三</p>
				<p>京东价： <strong><span id="payying">¥3399.00</span></p></strong>
			</div></a>

			<a href="#"><div class="div4_02_5 img_bigger">
				<img src="./静态页面素材/Uploads/goods/goods_8.jpg">
				<p>京东自营211，简约百搭！防水帆布单肩斜挎包，三</p>
				<p>京东价： <strong><span id="payying">¥3399.00</span></p></strong>
			</div></a>
		</div>

		<div class="div4_03">
			<a href="#"><div class="div4_03_">
					<div class="div4_03_1 img_bigger">
						<img src="./静态页面素材/Uploads/goods/goods_9.jpg">
					</div>
					<div class="div4_03_2"><p>
						<strong><span style="color: red;">首发</span> &nbsp 德赛便携式移动DVD</strong><br>
						<span class="div4_03_2p">灵动的外观！灵巧的身体！全区解码，支持RMVB网络格式，17英寸大壳！
						</span>
					</div></p>
			</div></a>

			<a href="#"><div class="div4_03_3">
				<strong><span style="color: red;">首发</span> &nbsp 
				康佳42寸安卓4D电视</strong><br>
				<span class="div4_03_3p">最新一代网络智能电视康佳52AD系列，极致超窄边框设计，配置Android4.0操作系统，不闪式3D技术，全通道2D转4D，内置wifi。</span>
				<div class="div4_03_4 img_bigger">
					<img src="./静态页面素材/Uploads/goods/goods_10.jpg">
				</div>
			</div></a>
		</div>
	</div>

	<div class="div5">
		<div class="div5_01">
			<a href="#"><div class="div5_01_1"><strong>限时抢购</strong></div></a>
		</div>

		<div class="div5_02">
			<div class="div5_01_2">
				<a href="#"><strong>今日限购</strong></a>
				<a href="#" class="div5_01_2p">更多团购></a>
			</div>
		</div>

		<div class="div5_03">
			<a href="#"><div class="div5_03_1 img_bigger">
				<div class="d5_3_1p1">
					剩余<span>00</span>小时<span>45</span>分<span>15</span>秒
				</div>
				<div class="d5_3_1pic1">
					<img src="./静态页面素材/Uploads/goods/goods_11.jpg">
					<p>京东自营211，简约百搭！防水帆布单肩斜挎包，三</p>
					<p>京东价： <strong><span id="payying">¥3399.00</span></p></strong>
				</div></a>				
			</div>

			<a href="#"><div class="div5_03_2 img_bigger">
				<div class="d5_3_1p1">
					剩余<span>00</span>小时<span>45</span>分<span>15</span>秒
				</div>
				<div class="d5_3_1pic1">
					<img src="./静态页面素材/Uploads/goods/goods_12.jpg">
					<p>京东自营211，简约百搭！防水帆布单肩斜挎包，三</p>
					<p>京东价： <strong><span id="payying">¥3399.00</span></p></strong>
				</div></a>				
			</div>

			<a href="#"><div class="div5_03_3 img_bigger">
				<div class="d5_3_1p1">
					剩余<span>00</span>小时<span>45</span>分<span>15</span>秒
				</div>
				<div class="d5_3_1pic1">
					<img src="./静态页面素材/Uploads/goods/goods_13.jpg">
					<p>京东自营211，简约百搭！防水帆布单肩斜挎包，三</p>
					<p>京东价： <strong><span id="payying">¥3399.00</span></p></strong>
				</div></a>				
			</div>

			<a href="#"><div class="div5_03_4 img_bigger">
				<div class="d5_3_1p1">
					剩余<span>00</span>小时<span>45</span>分<span>15</span>秒
				</div>
				<div class="d5_3_1pic1">
					<img src="./静态页面素材/Uploads/goods/goods_14.jpg">
					<p>京东自营211，简约百搭！防水帆布单肩斜挎包，三</p>
					<p>京东价： <strong><span id="payying">¥3399.00</span></p></strong>
				</div></a>				
			</div>

			<a href="#"><div class="div5_03_5 img_bigger">
				<div class="d5_3_1p1">
					剩余<span>00</span>小时<span>45</span>分<span>15</span>秒
				</div>
				<div class="d5_3_1pic1">
					<img src="./静态页面素材/Uploads/goods/goods_15.jpg">
					<p>京东自营211，简约百搭！防水帆布单肩斜挎包，三</p>
					<p>京东价： <strong><span id="payying">¥3399.00</span></p></strong>
				</div></a>				
			</div>
		</div>

		<div class="div5_04">
			<a href="#"><div class="div5_04_pic1 img_bigger">
				<img src="./静态页面素材/Uploads/goods/group_1.jpg">
			</div></a>

			<a href="#"><div class="div5_04_pic2 img_bigger">
				<img src="./静态页面素材/Uploads/advs/adv_2.jpg">
			</div></a>
		</div>
	</div>

	<div class="div6">
		<div class="div6_01">
			<div class="div6_01_pic">
				<img src="./静态页面素材/Images/icon_12.PNG">
			</div>
			<div class="div6_01_ul">
				<ul>
					<a href="#"><h2><strong>购物指南</strong></h2></a>
					<a href="#"><li>购物流程</li></a>
					<a href="#"><li>会员介绍</li></a>
					<a href="#"><li>团购机票</li></a>
					<a href="#"><li>常见问题</li></a>
					<a href="#"><li>大家电</li></a>
					<a href="#"><li>联系客服</li></a>
				</ul>
			</div>
		</div>

		<div class="div6_02">
			<div class="div6_01_pic">
				<img src="./静态页面素材/Images/icon_13.PNG">
			</div>
			<div class="div6_01_ul">
				<ul>
					<a href="#"><h2><strong>配送方式</strong></h2></a>
					<a href="#"><li>购物流程</li></a>
					<a href="#"><li>团购机票</li></a>
					<a href="#"><li>常见问题</li></a>
					<a href="#"><li>大家电</li></a>
					<a href="#"><li>联系客服</li></a>
				</ul>
			</div>
		</div>

		<div class="div6_03">
			<div class="div6_01_pic">
				<img src="./静态页面素材/Images/icon_14.PNG">
			</div>
			<div class="div6_01_ul">
				<ul>
					<a href="#"><h2><strong>支付方式</strong></h2></a>
					<a href="#"><li>购物流程</li></a>
					<a href="#"><li>会员介绍</li></a>
					<a href="#"><li>团购机票</li></a>
					<a href="#"><li>常见问题</li></a>
					<a href="#"><li>大家电</li></a>
				</ul>
			</div>
		</div>

		<div class="div6_04">
			<div class="div6_01_pic">
				<img src="./静态页面素材/Images/icon_15.PNG">
			</div>
			<div class="div6_01_ul">
				<ul>
					<a href="#"><h2><strong>售后服务</strong></h2></a>
					<a href="#"><li>购物流程</li></a>
					<a href="#"><li>会员介绍</li></a>
					<a href="#"><li>团购机票</li></a>
					<a href="#"><li>联系客服</li></a>
				</ul>
			</div>
		</div>

		<div class="div6_05">
			<div class="div6_01_pic">
				<img src="./静态页面素材/Images/icon_16.PNG">
			</div>
			<div class="div6_01_ul">
				<ul>
					<a href="#"><h2><strong>特色服务</strong></h2></a>
					<a href="#"><li>购物流程</li></a>
					<a href="#"><li>会员介绍</li></a>
					<a href="#"><li>团购机票</li></a>
					<a href="#"><li>大家电</li></a>
					<a href="#"><li>联系客服</li></a>
				</ul>
			</div>
		</div>

		<div class="div6_06">
			<div>
				<img src="./静态页面素材/Images/icon_17.PNG">
			</div>
			<div class="div6_06p"><a href="#">
				<p><strong>京东自营覆盖区县</strong></p>
				<p>京东已向全国1232个区县提供自营配送服务，支持货到付款、POS机刷卡和售后上门服务。</p>
			</a></div>
			<div class="div6_06a">
				<a href="#">查看详情</a>
			</div>
		</div>
	</div>

	<div class="div7">
		<div class="div7_01">
			<p>
			<a href="#">关于我们</a> &nbsp | &nbsp
			<a href="#">关于我们</a> &nbsp | &nbsp
			<a href="#">关于我们</a> &nbsp | &nbsp
			<a href="#">关于我们</a> &nbsp | &nbsp
			<a href="#">关于我们</a> &nbsp | &nbsp
			<a href="#">关于我们</a> &nbsp | &nbsp
			<a href="#">关于我们</a> &nbsp | &nbsp
			<a href="#">关于我们</a> &nbsp | &nbsp
			<a href="#">关于我们</a> &nbsp | &nbsp
			<a href="#">关于我们</a> 
			</p>
		</div>

		<div class="div7_02">
			<p>北京市公安分局备案编号110105014669 &nbsp | &nbsp 京ICP证070359号 &nbsp | &nbsp 互联网药品信息服务资格证编号（京）-非经营性-2011-0034 &nbsp | &nbsp 新出发京零 字第大120007号</p>
			<p>
				音像制品经营许可证苏宿批005号 &nbsp | &nbsp 出版物经营许可证编号新出发（苏）批字第N-012号 &nbsp | &nbsp 互联网出版许可证编号新出网证（京）字150号
			</p>
			<p>
				网络文化经营许可证京网文[2011]0168-061号 Copyright @ 2004-2013
				京东JD.com版权所有
			</p>
			<p>
				京东旗下网站:360TOP &nbsp 迷你挑 &nbsp English Site
			</p>
		</div>

		<div class="div7_03">
			<a href="#"><img src="./静态页面素材/Images/validate_1.gif"></a>
			<a href="#"><img src="./静态页面素材/Images/validate_2.gif"></a>
			<a href="#"><img src="./静态页面素材/Images/validate_3.PNG"></a>
			<a href="#"><img src="./静态页面素材/Images/validate_4.PNG"></a>
		</div>
	</div>
</body>
</html>
*{
	margin: 0;
	padding: 0;
	border: 0;
}


a{
	color: black;
	text-decoration: none;
}

a:hover{
	color: red;
}

.img_bigger:hover{
	transform: scale(1.05,1.05);
	box-shadow: 0 0 10px #0000ff;
	cursor: pointer;
	z-index: 500;
}/*图片划过放大加阴影*/

.hr_hover:hover{
	color: red;
	border-bottom: 1.5px solid red;
}/*下划线改色*/

.nav1{
	height: 19px;/*没按比例放大缩小*/
	font-family: "Microsoft YaHei";
	font-size: 15px;
	background-color: #F8F8F8;
	border: 3px #696969; 
	padding: 8px;
	padding-left: 170px;
	padding-right: 152px;
	/*text-indent: 5em;/*缩进*/
	overflow: hidden;/*超出盒子会被隐藏*/
	white-space:nowrap;
	text-decoration: none;
	box-shadow: 0.5px 0.5px 0.5px #F8F8F8;
}

.nav1 a{
	color: black;
}

.nav1 a:hover{
	color: red;
	text-decoration: underline;
}


.margin_top_3px{
	margin-top: 3px;/*两个盒子间的间距*/
}

#nav_text1{
	float:right;/*全部元素右对齐*/
	text-decoration: none;
}

.div1{
	margin-right: 152px;
	margin-left: 170px;
	font-size: 15px;
	height: 70px;
	font-family: "微软雅黑";
	position: relative;/*父盒子要设置为相对定位，子盒子才能绝对定位*/
}

.div1_pic{
	width: 320px;
	height: 60px;
}

.div1_input01{
	position: absolute;
	left: -90px;
	top: 3px;
}

#input1{
	position: absolute;
	top: 2px;
	left: 420px;
	width: 550px;
	height: 30px;
	border:5px solid red;
	padding-left: 8px;
	font-size: 15px;
}

.clear{
	clear: both;
}

.div1_p1{
	position: absolute;/*绝对定位，前提父窗口已经是相对定位*/
	top: 50px;
	left: 330px;
	font-size: 12px;
}

#div1_p1_span1{
	color: red;
}

#div1_p1_span2{
	color: #A0A0A0;
}

.div1_01{
	position: absolute;
	top: 30px;
	left: 1010px;
	padding: 2px;
	padding-left: 5px;
	text-align: center;  
	box-shadow: 0.5px -0.5px 0.5px #F8F8F8;
	border: 1px solid #e3e4e5;
	background-color: #fff;
}

.div1_02{
	position: absolute;
	top: 30px;
	left: 1130px;
	padding: 2px;
	padding-left: 5px;
	text-align: center; 
	box-shadow: 0.5px -0.5px 0.5px #F8F8F8;
	border: 1px solid #e3e4e5;
	background-color: #fff;
}

.div2{
	margin-right: 152px;
	margin-left: 170px;
	margin-top: 14px;
	height: 39px;
	background-color: red;
	padding:13px;
	font-size: 20px;
	text-align: center;
}

.div2_01 a{
	margin: 5px;
	margin-top: 0px;
	margin-right: 20px; 
	padding-top: 5px;
	padding-bottom: 10px;
	padding-left: 50px;
	padding-right: 50px;
	color: white;
	float: left;
}

.div2_01 a:hover{
	background-color: #A00000;
}

.div2_02 a{
	margin-left: 5px;
	padding-top: 5px;
	padding-bottom: 10px;
	padding-left: 25px;
	padding-right: 25px; 
	color: white;
	float: left;
}/*div2_02类下的a*/

.div2_02 a:hover{
	background-color: #A00000;
}

.div3{
	text-align: center;
	height: 416px;
	margin-right: 170px;
	margin-left: 170px;
	position: relative;/*父盒子要设置为相对定位，子盒子才能绝对定位*/
}

.div3_01{
	width: 257px;
	height: 397px;
	border:2px solid red;
	border-top: 0px;
}

.div3_01_ul{
	padding: 8px;
	padding-left: 55px;
	line-height: 25pt;
	text-align: left;
	list-style-type: square;
}


#d3ul_li{
	color:#909090; 
}

.div3_02{
	position: absolute;
	top:10px;
	left: 272px;
}

.div3_1_6{
	background-color: #989898;
	height: 21px;
	width: 21px;
	border-radius: 50%;/*化成圆*/
	opacity: 0.7;/*透明度*/
	z-index: 600;
}

.div3_03{
	position: absolute;
	top: 220px;
	left: 760px;
}

.div3_04{
	position: absolute;
	top: 220px;
	left: 790px;
}

.div3_05{
	position: absolute;
	top: 220px;
	left: 820px;
}

.div3_06{
	position: absolute;
	top: 220px;
	left: 850px;
}

.div3_07{
	position: absolute;
	top: 220px;
	left: 880px;
}

.div3_08{
	position: absolute;
	top: 220px;
	left: 910px;
}

.div3_09{
	position: absolute;
	top: 10px;
	left: 950px;
}

.div3_10{
	position: absolute;
	top: 90px;
	left: 950px;
	width: 310px;
	height: 307px;
	border:1px solid #e3e4e5;
}

.div3_10_01{
	position: absolute;
	top:0px;
	left: 3px;
	width: 70px;
}

.div3_10_02{
	position: absolute;
	top: 0px;
	right: 5px;
}

.div3_10_02 a{
	color: blue;
}

.div3_10_02 a:hover{
	color: red;
}

.div3_10_03{
	position: absolute;
	top:25px;
}

.div3_10_03 hr{
	border: 1.5px solid #A8A8A8;
	width: 310px;
}

.div3_10_04{
	position: absolute;
	top: 30px;
	left: 2px;
	height: 82px;
	width: 133px;
	padding:10px;
	text-align: left;
	font-size: 13px;
	line-height: 13pt;
	border-bottom:1px solid #e3e4e5;
}

.div3_10_05{
	position: absolute;
	top: 30px;
	left: 155px;
	height: 82px;
	width: 133px;
	padding:10px;
	text-align: left;
	font-size: 13px;
	line-height: 13pt;
	border-bottom:1px solid #e3e4e5;
}

.div3_10_06{
	width: 310px;
	height: 40px;
	position: absolute;
	top:133px;
}

.div3_10_06_1{
	height: 24px;
	width: 35px;
	padding-top:8px;
	padding-bottom: 8px;
	padding-left: 21px;
	padding-right: 21px;
	border-bottom: 1.5px solid #A8A8A8;
	position: absolute;
	left: 0px;
	top: 0px;
}

.div3_10_06_2{
	height: 24px;
	width: 35px;
	padding-top:8px;
	padding-bottom: 8px;
	padding-left: 21px;
	padding-right: 21px;
	border-bottom: 1.5px solid #A8A8A8;
	position: absolute;
	left: 77px;
	top: 0px;
}

.div3_10_06_3{
	height: 24px;
	width: 35px;
	padding-top:8px;
	padding-bottom: 8px;
	padding-left: 21px;
	padding-right: 21px;
	border-bottom: 1.5px solid #A8A8A8;
	position: absolute;
	left: 154px;
	top: 0px;
}

.div3_10_06_4{
	height: 24px;
	width: 35px;
	padding-top:8px;
	padding-bottom: 8px;
	padding-left: 21px;
	padding-right: 21px;
	border-bottom: 1.5px solid #A8A8A8;
	position: absolute;
	left: 231px;
	top: 0px;
}

.div3_10_07{
	position: absolute;
	top: 177px;
	width: 310px;
	height: 135px;
	line-height: 23pt;
	text-align: left;
}

.div3_10_07p1{
	padding-left: 20px;
}

.div3_10_07p2{
	font-size: 13px;
	padding-left: 90px;
}

.div3_10_07p3{
	padding-left: 20px;
}

.div3_10_07p4{
	padding-left: 90px;
}

.div3_10_07se{
	padding-left: 18px;
}

.d3_10_07_sep{
	font-size: 10px;
}

.div3_10_07in{
	width: 100px;
	height: 20px;
	border:1px solid #e3e4e5;
}

#d3_10_07_btn{
	width: 71px;
	height: 23px;
	border-radius: 10%;
	background-color: red;
	color: white;
}

#d3_10_07_btn:hover{
	background-color: #A00000;
}

.d3_10_07_btnp{
	color: blue;
	font-size: 9px;
}

.d3_10_07_btnp a:hover{
	color: red;
}

.div3_11{
	position: absolute;
	top:250px;
	left: 272px;
	width: 670px;
	height: 149px;
}

.div3_11_01{
	position: absolute;
	left: 37px;
	height: 149px;
	width: 202px;
}

.div3_11_02{
	position: absolute; 
	left: 229px;
}

.div3_11_03{
	position: absolute; 
	left:431px;
}

.d3_11_lr a{
	color: #888888;
}

.d3_11_lr:hover{
	background-color: #E0E0E0;
	opacity: 0.7;/*透明*/
}

.div3_11_04{
	height: 149px;
	width: 38px;
	position: absolute;
	left: 0px;
	font-size: 40px;
	line-height: 140px;
	border-radius: 10%;
}

.div3_11_05{
	height: 149px;
	width: 38px;
	position: absolute;
	right: 0px;
	font-size: 40px;
	line-height: 140px;
	border-radius: 10%;
}

.div4{
	height: 272px;
	margin-right: 152px;
	margin-left: 170px;
	position: relative;
}

.div4_01{
	height: 40px;
}

.div4_01_1{
	height: 24px;
	width: 188px;
	padding-top:8px;
	padding-bottom: 8px;
	text-align: center;
	border-bottom: 1.5px solid #A8A8A8;
	position: absolute;
	left: 0px;
	top: 0px;
}

.div4_01_2{
	height: 24px;
	width: 189px;
	padding-top:8px;
	padding-bottom: 8px;
	text-align: center;
	border-bottom: 1.5px solid #A8A8A8;
	position: absolute;
	left: 188px;
	top: 0px;
}

.div4_01_3{
	height: 24px;
	width: 189px;
	padding-top:8px;
	padding-bottom: 8px;
	text-align: center;
	border-bottom: 1.5px solid #A8A8A8;
	position: absolute;
	left: 377px;
	top: 0px;
}

.div4_01_4{
	height: 24px;
	width: 189px;
	padding-top:8px;
	padding-bottom: 8px;
	text-align: center;
	border-bottom: 1.5px solid #A8A8A8;
	position: absolute;
	left: 566px;
	top: 0px;
}

.div4_01_5{
	height: 24px;
	width: 189px;
	padding-top:8px;
	padding-bottom: 8px;
	text-align: center;
	border-bottom: 1.5px solid #A8A8A8;
	position: absolute;
	left: 755px;
	top: 0px;
}

.div4_01_6{
	height: 24px;
	width: 309px;
	padding-top:8px;
	padding-bottom: 8px;
	text-align: left;
	border-bottom: 1.5px solid #A8A8A8;
	position: absolute;
	right: 0px;
	top: 0px;
}

.div4_02{
	width: 944px;
	height: 231px;
	border-bottom:1px solid #e3e4e5;
}

.div4_02 a:hover{
	color: black;
}

#payying{
	font-size: 15px;
	color: red;
}

.div4_02_1{
	padding:31px;
	padding-top: 20px;
	padding-bottom: 0px;
	width: 126px;
	font-size: 10px;
}

.div4_02_2{
	padding:31px;
	padding-top: 20px;
	padding-bottom: 0px;
	width: 127px;
	font-size: 10px;
	position: absolute;
	top: 40px;
	left: 188px;
}

.div4_02_3{
	padding:31px;
	padding-top: 20px;
	padding-bottom: 0px;
	width: 127px;
	font-size: 10px;
	position: absolute;
	top: 40px;
	left: 377px;
}

.div4_02_4{
	padding:31px;
	padding-top: 20px;
	padding-bottom: 0px;
	width: 127px;
	font-size: 10px;
	position: absolute;
	top: 40px;
	left: 566px;
}

.div4_02_5{
	padding:31px;
	padding-top: 20px;
	padding-bottom: 0px;
	width: 127px;
	font-size: 10px;
	position: absolute;
	top: 40px;
	left: 755px;
}

.div4_03{
	width: 312px;
	height: 231px;
	position: absolute;
	top: 40px;
	right: 0px;
	border:1px solid #e3e4e5;
	border-top: 0px;
}

.div4_03_{
	height: 120px;
	border-bottom: 1px dashed #e3e4e5;
}

.div4_03_1{
	position: absolute;
	top: 5px;
	left: 5px;
	width: 100px;
	height: 100px;
}

.div4_03_2{
	position: absolute;
	top: 5px;
	left: 110px;
	font-size: 15px;
}

.div4_03_2p{
	color: #909090;
	font-size:10px; 
}

.div4_03_2p:hover{
	color: red;
}

.div4_03_3{
	width: 200px;
	font-size: 15px;
}

.div4_03_3p{
	color: #909090;
	font-size:10px; 
}

.div4_03_3p:hover{
	color: red;
}

.div4_03_4{
	position: absolute;
	right: 5px;
	top:125px;
	width: 100px;
	height: 100px;
}

.div5{
	height: 306px;
	margin-right: 152px;
	margin-left: 170px;
	position: relative;
}

.div5_01{
	height: 40px;
}

.div5_01_1{
	height: 24px;
	width: 944px;
	padding-top:8px;
	padding-bottom: 8px;
	text-align: left;
	border-bottom: 1.5px solid #A8A8A8;
}

.div5_02{
	height: 40px;
}

.div5_01_2{
	height: 24px;
	width: 309px;
	padding-top:8px;
	padding-bottom: 8px;
	text-align: left;
	border-bottom: 1.5px solid #A8A8A8;
	position: absolute;
	right: 0px;
	top: 0px;
}

.div5_01_2p{
	color: blue;
	margin-left: 150px;
}

.div5_03{
	width: 944px;
	height: 262px;
	border-bottom:1px solid #e3e4e5;
	position: absolute;
	top: 42px;
}

.div5_03_1{
	padding:31px;
	padding-top: 20px;
	padding-bottom: 0px;
	width: 126px;
	height: 211px;
	font-size: 10px;
	position: relative;
}

.d5_3_1p1{
	color: #909090;
	font-size:12px; 
	position: absolute;
	top: 5px;
	left: 15px;
}

.d5_3_1p1 span{
	font-size: 25px;
}

.d5_3_1pic1{
	position: absolute;
	top: 40px;
	left: 30px;
}

.div5_03_2{
	padding:31px;
	padding-top: 20px;
	padding-bottom: 0px;
	width: 126px;
	height: 211px;
	font-size: 10px;
	position: absolute;
	top: -232px;
	left: 188px;
	position: relative;
}

.div5_03_3{
	padding:31px;
	padding-top: 20px;
	padding-bottom: 0px;
	width: 126px;
	height: 211px;
	font-size: 10px;
	position: absolute;
	top: -464px;
	left: 377px;
	position: relative;
}

.div5_03_4{
	padding:31px;
	padding-top: 20px;
	padding-bottom: 0px;
	width: 126px;
	height: 211px;
	font-size: 10px;
	position: absolute;
	top: -696px;
	left: 566px;
	position: relative;
}

.div5_03_5{
	padding:31px;
	padding-top: 20px;
	padding-bottom: 0px;
	width: 126px;
	height: 211px;
	font-size: 10px;
	position: absolute;
	top: -928px;
	left: 755px;
	position: relative;
}

.div5_04{
	width: 312px;
	height: 262px;
	position: absolute;
	top: 40px;
	right: 0px;
	border:1px solid #e3e4e5;
	border-top: 0px;
}

.div5_04_pic1{
	position: absolute;
	top: 5px;
	right: 10px;
}

.div5_04_pic2{
	position: absolute;
	top: 165px;
	right: 0px;
}

.div6{
	margin-top: 5px;
	border-top: 1px solid #e3e4e5;
	border-bottom: 1px solid #e3e4e5;
	height: 190px;
	margin-right: 152px;
	margin-left: 170px;
	position: relative;
}

.div6_01{
	padding:31px;
	padding-top: 20px;
	padding-bottom: 0px;
	width: 126px;
	height: 170px;
	font-size: 10px;
	position: relative;
}

.div6_02{
	padding:31px;
	padding-top: 20px;
	padding-bottom: 0px;
	width: 126px;
	height: 170px;
	font-size: 10px;
	position: absolute;
	top: 0px;
	left: 188px;
}

.div6_03{
	padding:31px;
	padding-top: 20px;
	padding-bottom: 0px;
	width: 126px;
	height: 170px;
	font-size: 10px;
	position: absolute;
	top: 0px;
	left: 377px;
}

.div6_04{
	padding:31px;
	padding-top: 20px;
	padding-bottom: 0px;
	width: 126px;
	height: 170px;
	font-size: 10px;
	position: absolute;
	top: 0px;
	left: 566px;
}

.div6_05{
	padding:31px;
	padding-top: 20px;
	padding-bottom: 0px;
	width: 126px;
	height: 170px;
	font-size: 10px;
	position: absolute;
	top: 0px;
	left: 755px;
}

.div6_01_ul ul{
	list-style-type: none;
	position: relative;
	left: 45px;
	top: -45px;
}

.div6_06{
	position: absolute;
	top: 10px;
	right: 10px;
	width: 202px;
	height: 169px;
}

.div6_06p{
	position: relative;
	top: -169px;
	font-size: 13px;
	line-height:15pt; 
}

.div6_06a{
	position: relative;
	top: -120px;
	left: 149px;
	font-size: 13px;
}

.div7{
	margin-top: 5px;
	height: 190px;
	margin-right: 152px;
	margin-left: 170px;
	position: relative;
}

.div7_01{
	height: 32px;
	text-align: center;
	padding-top: 10px;
	font-size: 13px;
}

.div7_02{
	text-align: center;
	height: 75px;
	font-size: 13px;
}

.div7_03{
	height: 64px;
	text-align: center;
}

具体程序及素材：链接：https://pan.baidu.com/s/1BN0MG8FkAb0ekzjhHCP8BQ 密码：i9g6

猜你喜欢

转载自blog.csdn.net/qq_37358422/article/details/81476801
今日推荐
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
周排行
计算机组成与设计（七）—— 除法器
Integer Approximation(分治+枚举)
大话数据库索引
windows10系统JDK的配置及下载地址
mysql实现秒值转换中原六仔平台搭建
Codeforces Round #556 (Div. 1)
百练1064 网线主管
Codeforces 995F Cowmpany Cowmpensation
子集生成之增量构造法，位向量法，二进制法
ERROR: cmd.exe failed with args /c "/APK\gradle\rungradle.bat...
每日归档
更多
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022