web前端学习笔记(最新)

写python爬虫的第一天,拿百度练手遇到 “ 被反爬遇到<title>百度安全验证</title> ” 的解决方案 博主第一次写博文,第一次学爬虫,就是想分享,大家见怪不怪, 首先我设置了一个自定义UA代理池并没有采用插件pip install fake-useragent形式进行随机获取print(ua.ie) ua_list = [ 'Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Maxthon 2.0', 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_0) AppleWebKit/535.11 阅读详情

web前端学习笔记

大家好,我是链表哥,新的学期,新的学习,我会为您展示我的学习进程。

一:什么是WEB前端?

在这里插入图片描述

所谓的Web前端指的是用户所能接触到的,并服务于用户的前沿端口,经我们程序员编辑修饰后展示给大众,如各个网页,淘宝是网站页面等。

二:学习门路:

我的自学是黑马程序员pink老师发布的视频,可在b站搜索到。、、
用的软件是HBulider,大家可根据老师或者习惯来下载web前端编辑工具、、、在这里插入图片描述

三: HBulider的常用快捷键

1.激活代码助手 Alt + /
2.开启关闭注释整行 Ctrl + /
3.开启关闭注释已选内容 Ctrl + Shift + /
4.删除此行Ctrl+D
5.向左选中 Ctrl + Shift + 向左
6.向右选中 Ctrl + Shift + 向右
7.运行Ctrl+R

四:字体图标

字体图标相等对于难以放大缩小的图片来说有很多的优势,而且易于移动端响应,同时http请求相对于图片也更小,下面就让我们学习一下如何运用图标。

4-1:图标的下载

 http://icomoon.io

IcoMoon成立于2011年,推出的第一个自定义图标字体生成器,它允许用户选择他们所需要的图标,使它们成一字型。 内容种类繁多,非常全面,网速较慢的原因是国外网站。

4.2 首先把 fonts文件夹放入我们 根目录下

4.3 点开文件中的链接,复制图标右侧的正方形

4.4在样式(style)里申明字体

@font-face {
font-family: ‘icomoon’;
src: url(‘fonts/icomoon.eot?7kkyc2’);
src: url(‘fonts/icomoon.eot?7kkyc2#iefix’) format(‘embedded-opentype’),
url(‘fonts/icomoon.ttf?7kkyc2’) format(‘truetype’),
url(‘fonts/icomoon.woff?7kkyc2’) format(‘woff’),
url(‘fonts/icomoon.svg?7kkyc2#icomoon’) format(‘svg’);
font-weight: normal;
font-style: normal;
}

4.5 给盒子使用字体

span {
font-family: “icomoon”;
}

更新icon图标

如果图标不够用了,可将我们压缩包里面的selection.json 重新上传到icomoon网站,下载新的压缩包,重新替换原来的包即可。

9月14日

今日目标:完整的快捷键引用。
绝对位置和相对位置的补充
表格的应用。

10月23日

到今天为止,我的前端项目已经基本完成了,运用了html,css,js等语言。
版面设计,可分为index目录页,列表页、详情页和注册页等。

附上index首页的html、js代码
<!DOCTYPE html>
<html lang="zh-CN">
	
	<head>
		<meta charset="UTF-8">
		    
		<title>品优购-综合网购首选-正品低价、品质保障、配送及时、轻松购物!</title>
		<meta name="description" content="品优购JD.COM-专业的综合网上购物商城,销售家电、数码通
			      讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务,
			      为您提供愉悦的网上购物体验!" />
		<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机
			,数码,配件,手表,存储卡,品优购" />
		<link rel="stylesheet"  href="css/base.css"/>
		<link rel="stylesheet"  href="css/common.css"/>
		<link rel="shortcut icon" href="favicon.ico"  type="image/x-icon"/> 
		<link rel="stylesheet" href="css/index.css" />
		<!--引入 首页的css文件-->
		<script src="js/animate.js"></script>
		<!--animate.js必须写到index.js上面-->
		<script src="js/index.js"></script>
	</head>
	
	<body>
		<!--顶部快捷导航启动-->
		<div class="shortcut">
			<div class="w">
				<div class="fl">
					<ul>
						<li>品优购欢迎你!</li>
						<li> <a href="#">请登录</a> 
					    <a href="#" class="style-red"> 免费注册 </a>		
						</li>
					</ul>
				</div>
				<div class="fr">
					<ul>
						<li><a href="#">我的订单</a></li>
						<li class=spacer></li>
						<li><a href="#">我的品优购</a>
							<i class="icomoon"></i>
						</li>
						<li class=spacer></li>
						<li><a href="#">品优购会员</a></li>
						<li class=spacer></li>
						<li><a href="#">企业采购</a></li>
						<li class=spacer></li>
						<li><a href="#">关注品优购</a> <i class="icomoon"></i> </li>
						<li class=spacer></li>
						<li><a href="#">客户服务</a> <i class="icomoon"></i> </li>
						<li class=spacer></li>
						<li><a href="#">网站导航</a> <i class="icomoon"></i> </li>
						
						
					</ul>
				</div>
			</div>
		</div>
		<!--顶部快捷导航结束-->
		<!--header制作-->
		<div class="header w"> 
			<div class="logo"> 
			<h1>
				<a herf="index.html" title="品优购">品优购</a>
			</h1> <!--h1很重要,搜索引擎就靠这个找,所以要添加文字-->
			</div>
			<!--搜索-->
			<div class="search">
				<input type="text" class="text" value="请搜索.." >
				<button class=btn>搜索</button>
			</div>
			<!--热词-->
			<div class="hotwords">
			<a herf="#" class="style-red">优惠购首发</a>
			<a herf="#">亿元优惠</a>
			<a herf="#">9.9元团购</a>
			<a herf="#">每满99减30</a>
			<a herf="#">成人用品</a>
			<a herf="#">电脑	</a>
			<a herf="#">通信	</a>
							 				
			</div>
			<!--我的购物车-->
			<div class="shopcar">
				<i class="car"></i>  我的购物车  <i class="arrow"></i>
				<i class="count">8</i>
			</div>
				<!--每个图片都得新建一个class-->
				
		</div>
		<!--header结束-->
		
		<!--顶部导航nav-->  <!-- 此处需要一个操作:取消隐藏-->
		<div class="nav"> 	
			<div class="w">
				<div class="dropdown fl" >
					<div class="dt">全部商品分类</div>
					<div class="dd" >       <!--此处要取消隐藏-->
						<ul>
							<li class="menu_item " > <a href="#">家用电器</a><i></i></li>
							<li class="menu_item "> 
								<a href="list.html">手机</a>	、	
								<a href="#">数码</a>	、	
								<i></i>
							</li>
							<li class="menu_item "> <a href="#">图书、音像、数字商品</a> <i></i></li>
							<li class="menu_item "> <a href="#">家居、家具、家装、厨具</a> <i></i></li>
							<li class="menu_item "> <a href="#">服饰内衣、个护化妆</a> <i></i></li>
							<li class="menu_item "> <a href="#">运动健康、汽车用品</a> <i></i></li>
							<li class="menu_item "> <a href="#">彩票、旅行</a> <i></i></li>
							<li class="menu_item "> <a href="#">理财、众筹</a> <i></i></li>
							<li class="menu_item "> <a href="#">箱包、珠宝、奢侈品、鞋靴</a> <i></i></li>
							<li class="menu_item "> <a href="#">运动户外、钟表</a> <i></i></li>
							<li class="menu_item "> <a href="#">母婴、玩具</a> <i></i></li>

						</ul>
					</div>
					
				</div>
				<!--右侧当好模式-->
				<div class="navitems fl" >
					<ul>
					<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>
					</ul>
				</div>
			</div>
		</div>
		<!--顶部导航nav结束-->
		
	
		<div class="w">
			<div class="main">
				<div class="focus fl">
					<a href="javascript:;" class="arrow-l"> < </a>
					<a href="javascript:;" class="arrow-r"></a>
					
					<!--滚动区-->
					<ul>
						<li>
							<a href="#"><img src="upload/focus.png" alt="" ></a>
						</li>
						<li>
							<a href="#"><img src="upload/banner1.jpg" alt="" ></a>
						</li>
						<li>
							<a href="#"><img src="upload/banner2.jpg" alt="" ></a>
						</li>
						<li>
							<a href="#"><img src="upload/banner3.jpg" alt="" ></a>
						</li>
						
					
					</ul>
					<ol class="circle">
						
					</ol>
				</div>
				
				<div class="newflash fr">
					<div class="news">
						<div class="news-hd">
							评优购快报
							<a href="#"> 更多&gt;</a>
						</div>
						<div class="news-bd">
							<ul>
								<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>
						</div>
					</div>
					<div class="lifeservise">
						<ul>
							<li><a href="#">
								<i class="servise_ico servise_ico_huafei">
								</i>   
								   <p>话费</p>
								
							</a>
							</li>
							<li><a href="#">
								<i class="servise_ico servise_ico_feiji">
								</i>   
								   <p>飞机</p>
								
							</a>
							<span class="hot"> </span>
								</li>
							<li><a href="#">
								<i class="servise_ico servise_ico_dianyingpiao">
								</i>   
								   <p>电影票</p>
								
							</a></li>
							<li><a href="#">
								<i class="servise_ico servise_ico_youxi">
								</i>   
								   <p>游戏</p>
								
							</a></li>
							<li><a href="#">
								<i class="servise_ico servise_ico_caipiao">
								</i>   
								   <p>彩票</p>
								
							</a></li>
							<li><a href="#">
								<i class="servise_ico servise_ico_jiayouzhan">
								</i>   
								   <p>加油站</p>
								
							</a></li>
							<li><a href="#">
								<i class="servise_ico servise_ico_jiudian">
								</i>   
								   <p>酒店</p>
								
							</a></li>
							<li><a href="#">
								<i class="servise_ico servise_ico_huochepiao">
								</i>   
								   <p>火车票</p>
								
							</a></li>
							<li><a href="#">
								<i class="servise_ico servise_ico_zhongchou">
								</i>   
								   <p>众筹</p>
								
							</a></li>
							<li><a href="#">
								<i class="servise_ico servise_ico_licai">
								</i>   
								   <p>理财</p>
								
							</a></li>
							<li><a href="#">
								<i class="servise_ico servise_ico_lipingka">
								</i>   
								   <p>礼品卡</p>
								
							</a></li>
							<li><a href="#">
								<i class="servise_ico servise_ico_baitiao">
								</i>   
								   <p>白条</p>
								
							</a></li>
						</ul>
					</div>
					<div class="bargain">
						<img src="upload/bargin.jpg" alt="" />
					</div>
				</div>
 			</div>
		</div>
		
		<!--推荐服务模块-->
		<div class="recommend w">
			<div class="recom-hd fl">
				<img src="img/clock.png" alt="" />
				<h3>今日推荐</h3>
			</div>
			<div class="recom-bd fl">
				<ul>
					<li><a href="#"></a><img src="upload/1.jpg" alt="" /></li>
					<li><a href="#"></a><img src="upload/2.jpg" alt="" /></li>
					<li><a href="#"></a><img src="upload/3.jpg" alt="" /></li>
					<li class="last"><a href="#"></a><img src="upload/4.jpg" alt="" /></li>
				</ul>
			</div>
		</div>
		<!--推荐服务模块结束-->
		
		<!--楼层区 开始-->
		<div>
			<div class="jiadian w">
				<div class="box-hd">
					<h3>家用电器</h3>
					<div class="tab-list ">
						<ul>
							<li><a href="#" class="style-red">热门</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>
						</ul>
					</div>
				</div>
				<div class="box-bd">
					 <ul class="tab-con">
					 	<li class="w209">
					 		<ul class="tab-con-list">
					 			<li ><a href="#">节能补贴</a></li>
					 			<li ><a href="#">4K电视</a></li>
					 			<li ><a href="#">空气净化箱</a></li>
					 			<li ><a href="#">电饭煲</a></li>
					 			<li ><a href="#">滚筒洗衣机</a></li>
					 			<li ><a href="#">电热水器</a></li>
					 		</ul><img src="upload/floor-1-1.png" alt="" /></li>
					 	<li class="w329">
					 		<img src="upload/floor-1-b02.png" alt="" />
					 	</li>
					 	<li class="w219">
					 		<div class="tab-con-item"> 
					 			<a href="#"><img src="upload/floor-1-2.png" alt="" /></a>
					 		</div>
					 		<div class="tab-con-item">
					 			<a href="#"><img src="upload/floor-1-3.png" alt="" /></a>
					 		</div>
					 	</li>
					 	<li class="w220">	<div class="tab-con-item">
					 			<a href="#"><img src="upload/floor-1-4.png" alt="" /></a>
					 		</div></li>
					 	<li class="w220">	<div class="tab-con-item">
					 			<a href="#"><img src="upload/floor-1-5.png" alt="" /></a>
					 		</div>
					 		<div class="tab-con-item">
					 			<a href="#"><img src="upload/floor-1-6.png" alt="" /></a>
					 		</div></li>
					 </ul>
				</div>
			</div>
			<div class="jiadian w">
				<div class="box-hd">
					<h3>手机通讯</h3>
					<div class="tab-list ">
						<ul>
							<li><a href="#" class="style-red">热门</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>
						</ul>
					</div>
				</div>
				<div class="box-bd">
					 <ul class="tab-con"> 
					 	<li class="w209">
					 		<ul class="tab-con-list">
					 			<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><img src="upload/211.jpg" alt="" /></li>
					 	<li class="w329">
					 		<img src="upload/212.jpg" alt="" />
					 	</li>
					 	<li class="w219">
					 		<div class="tab-con-item"> 
					 			<a href="#"><img src="upload/213.jpg" alt="" /></a>
					 		</div>
					 		<div class="tab-con-item">
					 			<a href="#"><img src="upload/214.jpg" alt="" /></a>
					 		</div>
					 	</li>
					 	<li class="w220">	<div class="tab-con-item">
					 			<a href="#"><img src="upload/215.jpg" alt="" /></a>
					 		</div></li>
					 	<li class="w220">	<div class="tab-con-item">
					 			<a href="#"><img src="upload/216.jpg" alt="" /></a>
					 		</div>
					 		<div class="tab-con-item">
					 			<a href="#"><img src="upload/217.jpg" alt="" /></a>
					 		</div></li>
					 </ul>
				</div>
			</div>
			<div class="jiadian w">
				<div class="box-hd">
					<h3>电脑办公</h3>
					<div class="tab-list ">
						<ul>
							<li><a href="#" class="style-red">热门</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>
						</ul>
					</div>
				</div>
				<div class="box-bd">
					 <ul class="tab-con">
					 	<li class="w209">
					 		<ul class="tab-con-list">
					 			<li ><a href="#">SSD硬盘</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><img src="upload/311.jpg" alt="" /></li>
					 	<li class="w329">
					 		<img src="upload/312.jpg" alt="" />
					 	</li>
					 	<li class="w219">
					 		<div class="tab-con-item"> 
					 			<a href="#"><img src="upload/313.jpg" alt="" /></a>
					 		</div>
					 		<div class="tab-con-item">
					 			<a href="#"><img src="upload/314.jpg" alt="" /></a>
					 		</div>
					 	</li>
					 	<li class="w220">	<div class="tab-con-item">
					 			<a href="#"><img src="upload/315.jpg" alt="" /></a>
					 		</div></li>
					 	<li class="w220">	<div class="tab-con-item">
					 			<a href="#"><img src="upload/316.jpg" alt="" /></a>
					 		</div>
					 		<div class="tab-con-item">
					 			<a href="#"><img src="upload/317.jpg" alt="" /></a>
					 		</div></li>
					 </ul>
				</div>
			</div>
		</div>
		<!--楼层区  结束-->
		<!--固定电梯导航-->
		<div class="fixedtool">
			<ul>
				<li class="current">家用电器</li>
				<li>手机通讯</li>
				<li>电脑办公</li>
				<li>家用家具</li>
				<li>益虫</li>
				<li>星灵</li>
			</ul>
		</div>
		<!--固定电梯导航结束-->
		
			
		<!--动画开始-->
			
			
		
			
		<!--动画结束-->
		
			
		<!--footer start-->
		
		<div class="footer">
			<div class="w">
				<!--mod_servise-->
				<div class="mod_servise">

					<ul>
						<li>
							<i class="mod-service-icon mod_servise_kuai"></i>
							<div class="mod_servise_tit">
								<h5>正品保障</h5>
								<p>正品保障,提供发票</p>
							</div>
						</li>
						<li>
							<i class="mod-service-icon mod_servise_zheng"></i>
							<div class="mod_servise_tit">
								<h5>极速物流</h5>
								<p>极速物流,极速送达</p>
							</div>
						</li>
						<li><i class="mod-service-icon mod_servise_bao"></i>
							<div class="mod_servise_tit">
								<h5>无忧售后</h5>
								<p>七天无理由退货</p>
							</div></li>
						<li><i class="mod-service-icon mod_servise_ti"></i>
							<div class="mod_servise_tit">
								<h5>特色服务</h5>
								<p>私人定制家电套餐</p>
							</div></li>
						<li><i class="mod-service-icon mod_servise_gong"></i>
							<div class="mod_servise_tit">
								<h5>家电中心</h5>
								<p>您的购物指南</p>
							</div></li>
					</ul> <!--cs精灵技术-->
				</div>
			<!--mod_help-->
			<div class="mod_help">
				<dl class="mod_help_item">
					<dt>购物指南</dt>
					<dd><a href="#">购物流程</a></dd>
					<dd><a href="#">会员介绍</a></dd>
					<dd><a href="#">常见问题/团购</a></dd>
					<dd><a href="#">大家电</a></dd>
					<dd><a href="#">联系客服</a></dd>
					
				</dl>
				
				<dl class="mod_help_item">
					<dt>特色服务</dt>
					<dd><a href="#">夺宝岛</a></dd>
					<dd><a href="#">DIY装机</a></dd>
					<dd><a href="#">延保服务/团购</a></dd>
					<dd><a href="#">品优购E卡</a></dd>
					<dd><a href="#">品优购通信</a></dd>
					




				</dl>
				
				<dl class="mod_help_item">
					<dt>配送方式</dt>
					<dd><a href="#">上门自提</a></dd>
					<dd><a href="#">985限时达</a></dd>
					<dd><a href="#">配送服务查询</a></dd>
					<dd><a href="#">配送费收取标准</a></dd>
					<dd><a href="#">海外配送</a></dd>
					
				</dl>
				
				<dl class="mod_help_item">
					<dt>支付方式</dt>
					<dd><a href="#">货到付款</a></dd>
					<dd><a href="#">在线支付</a></dd>
					<dd><a href="#">分期付款/团购</a></dd>
					<dd><a href="#">邮局汇款</a></dd>
					<dd><a href="#">公司转账</a></dd>
				


	
				</dl>
				
				<dl class="mod_help_item">
					<dt>售后服务</dt>
					<dd><a href="#">售后政策</a></dd>
					<dd><a href="#">价格保护</a></dd>
					<dd><a href="#">退款说明/团购</a></dd>
					<dd><a href="#">返修/退换货</a></dd>
					<dd><a href="#">取消订单</a></dd>
					




				</dl>
				
				<dl class="mod_help_item mod_help_app ">
					<dt>帮助中心</dt>
					<dd>
						<img src="upload/wx_cz.jpg" alt="" />
						<p>评优购客户端</p>
					</dd>
					
				</dl>
			</div>
			
			<!--mod_copy_right-->
			<div class="mod_copyright">
			
			<p class="mod_copyright_link">
				关于我们 | 联系我们 | 关于我们 | 商家入驻 | 营销中心 | 友情链接 | 关于我们 | 营销中心 | 友情链接 | 关于我们
			</p>
			
			<p class="mod_copyright_info">
				地址:北京市昌平区建材城西路金燕龙办公楼一层 邮编:100096 电话:400-618-4000 传真:010-82935100
                 <br />
				京ICP备08001421号京公网安备110108007702
			</p>
			
			
			</div>
			<!--mod_copy_right-->
			</div>
		</div>	
		 
		<!--footer end-->
		
		<div id="divFly" style="position:absolute;">
<img src="favicon.ico" />
</div>

		
		<script type="text/javascript">
function DivFlying() {
  var div = document.getElementById("divFly");
  if (!div) {
 return;
  }
  var intX = window.event.clientX;
  var intY = window.event.clientY;
  div.style.left = intX + "px";
  div.style.top = intY + "px";
}
document.onmousemove = DivFlying;
</script>
	</body>
</html>


<!--下次看76个
	
-->

css代码

/*此文件放首页的样式*/
.main {
	width: 980px;
	height: 455px;
	margin-left: 219px ;
	margin-top: 10px;
}
.focus {
 /*子绝对,父窗体相对;*/
	position: relative;
	width: 727px;
	height: 455px;
	overflow: hidden;
}
.focus ul{
	position: absolute;
	top: 0;
	left: 0;
	width: 600%;
	}
.focus ul li{
	float: left;
}
.newflash {
	width: 250px;
	height: 455px;
	/*background-color: skyblue; */  /*左边窗体*/
}
.arrow-l ,
.arrow-r {
	display: none;
	position: absolute;
	top: 50%;
	margin-top: -20px ;
	width: 24px;
	height: 40px;
	background: rgba(0, 0, 0, .3);
	text-align: center;
	line-height: 40px;
	color: #fff;
	font-family: 'icomoon';
	font-size: 18px;
	z-index: 2; /*层级比图片高,显示小圆圈*/
}
.arrow-r {
	right: 0;  /*右侧透明图标靠右*/
}
.circle{
	position: absolute;
	bottom: 10px;
	left: 50px;
}
.circle li{
	float: left;
	width: 8px;
	height: 8px;
	/*background-color: #fff;*/
	border: 2px solid rgba(255, 255, 255, 0.5);
	margin: 0 3px;
	border-radius: 50% ;
	/*鼠标经过显示小手*/
	cursor: pointer;
}
/*小圆圈鼠标点击后变成白色*/
.current {
	background-color: #fff;
	box-shadow: ; /*?*/
}
/*接下来的是左边的div区域*/
.news {
	height: 163px;
	border: 1px solid #ccc;
/*	background-color: pink;*/
}
.lifeservise {
		overflow: hidden;  /*超出隐藏*/
	height: 208px;
	/*background-color: purple;*/
	border: 1px solid #ccc;
	border-top:none ; /*无上边距*/
}
.bargain {
	height: 75px;
	margin-top: 5px;
}
.news-hd {
	height: 32px;
	border-bottom: 1px dotted #ccc; /*dotted点线 dashed虚线*/
	padding: 0 15px;
	font-size: 14px;
	line-height: 34px;
	padding-left: 15px;
}
.news-hd  a {
	float: right;
	font-size: 12px;
	;
}
.news-bd {
	padding: 10px 0 0 15px;
}
.news-bd li {
	height: 23px;
}
.lifeservise ul {

	width: 252px;			/*子盒子可以比父盒子大,将ul设置大一点就能一行装4个图片了,然后超出部分隐藏*/
}
.lifeservise li {
	position: relative;
	float: left;
	width: 62px;
	height: 70px;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}
.lifeservise li a {
	display: block;
	overflow: hidden; /*解决i引起的外边距合并问题*/
	height: 100%;
}
.servise_ico {
	display: block;
	width: 24px;
	height: 24px;
	background: url(../img/icons.png) no-repeat;
	margin: 10px auto;
}
.lifeservise li p {
	text-align: center;
}
.hot {
	position:  absolute;
	right: 0;
	top: 0;
	width: 12px;
	height: 15px; 
	background: url(../img/jian.jpg) no-repeat;
}
.servise_ico_huafei {
	background-position: -17px -16px;
} 
.servise_ico_feiji {
	background-position: -80px -18px;
	width: -26px;
		}
.servise_ico_dianyingpiao {
	background-position: -139px -18px;
	width: -26px;
}
.servise_ico_youxi {
	background-position: -205px -18px;
	width: -26px;
}
.servise_ico_caipiao {
	background-position: -17px -87px;
	width: -26px;
}
.servise_ico_jiayouzhan {
	background-position: -78px -86px;
}
.servise_ico_jiudian {
	background-position: -141px -86px;
}
.servise_ico_huochepiao {
	background-position: -203px -86px;
}
.servise_ico_zhongchou {
	background-position: -17px -156px;
}
.servise_ico_licai {
	background-position: -139px -16px;
}
.servise_ico_lipingka {
	background-position: -203px -16px;
}
.servise_ico_baitiao {
	background-position: -17px -16px;
}
/*推荐模块*/
.recommend {
	height: 163px;
	
	margin-top: 10px;
}
.recom-hd {
	width: 200px;
	height: 163px;
	background-color: #5c5251;
	text-align: center;
}
.recom-hd img {
	margin:30px 0 10px 0 ;
}
.recom-hd h3 {
	font-size:18px ;
	color:#fff ;
	font-weight: normal;
}
.recom-bd {
	width: 1000px;
	height: 163px;
	background-color: #ebebeb;
}
.recom-bd li {
	float: left;
	width: 249px;
	height: 145px;
	border-right: 1px solid #ccc;
	margin-top: 10px;

} 
.recom-bd last {/*提权,last放入recom-bd中去*/
	border-right: 0;
}
.box-hd {
	height: 30px;

	border-bottom: 2px solid #C81623;
	margin-top: 25px;
}
.box-hd h3 {
	 float: left;
	 font-size: 18px;
	color:  #c81623;
}
.tab-list {
	float: right;
	line-height: 30px;
	
}
.tab-list li{
	float: left;
}
.tab-list li a {
	margin: 0 10px;
}
.box-bd {
	height: 360px;

} 
.tab-con li {
	height: 361px;
}
.w209 {
	width: 209px;
	background-color: #f9f9f9;
}
.w329 {
	width: 329px;
}
.w219 {
	width: 219px;
	border-right: 1px solid #ccc;
}
.w220 {
	width: 220px;
	border-right: 1px solid #ccc;
}
.tab-con li {
	float: left;
	height: 360px;
}
.tab-con-item {
	border-bottom: 1px solid #ccc;
}
.tab-con-list li {
	width: 86px;
	height: 32px;
	line-height: 32px;
	border-bottom: 1px solid #ccc;
	margin-left: 10px;
	
	text-align: center;
}
.tab-con-list {
	overflow: hidden;
	margin-bottom: 15px;
}
.box-bd li {
	overflow: hidden;
}
.box-bd img {
	/*过度写到本身上*/
	transition: all 0.2s;
} /*鼠标经过图片往右走*/
.box-bd img:hover {
	margin-left: 8px;
}
/*电梯导航*/
.fixedtool {
	position: fixed;
	width: 66px;
	background-color: #fff;
	top:100px;
	left: 50% ;
	margin-left: -666px; /*先中间的一半再版心的一半再加上自己宽度的一半*/
	
}
.fixedtool li {
	height: 32px;
	line-height: 32px; /*行高*/
	text-align: center;
	font-size: 12px;
	border-bottom: 1px solid #ccc;
	cursor:pointer; /*鼠标变成小手*/
}
.fixedtool .current {
	background-color: #c81623;
	color: #fff;
}
 @keyframes move{
	0% {
       
        top: 100%;
        bottom: 0%;
    }
    100% {
        
        top: 10%;
        bottom: 100%;
               
    }
}
.move {
	
	width: 60px;
	height: 60px;
	background-color: pink;
	animation-name: move;
	animation-duration: 5s;
}
.ani {
	position:fixed;
	width: 1000px;
	height: 1000px;
	top: 0;
}


js,比较难的轮播图
window.addEventListener('load',function() {
	/*获取左右按钮*/
	var arrow_l = document.querySelector('.arrow-l');
	var arrow_r = document.querySelector('.arrow-r');
	var focus = document.querySelector('.focus');
	var focusWidth = focus.offsetWidth;
	/*鼠标经过显示隐藏的左右按钮*/
	focus.addEventListener('mouseenter',function(){
		arrow_l.style.display = 'block';
		arrow_r.style.display = 'block';
		clearInterval(timer);
		timer = null;
	})
	/*鼠标离开隐藏左右按钮*/
	focus.addEventListener('mouseleave',function(){
		arrow_l.style.display = 'none';
		arrow_r.style.display = 'none';
		timer = setInterval(function(){
	 	arrow_r.click();
	 },1300);
	})
	/*自动生成圆点*/
	var ul = focus.querySelector('ul');
	var ol = focus.querySelector('.circle');
	for(var i=0;i<ul.children.length;i++) {
		var li = document.createElement('li');
		li.setAttribute('index',i);
		ol.appendChild(li);
		li.addEventListener('click',function() {
			for(var i = 0;i<ol.children.length;i++) {
				ol.children[i].className = '';
			}
			this.className = 'current';
			var index =this.getAttribute('index');
			var focusWidth = focus.offsetWidth;
			num = index;
			circle = index;
			console.log(focusWidth);
			console.log(index);
			animate(ul,-index*focusWidth);
		})
	}
	/*第一个圆圈current*/
	ol.children[0].className = 'current';
	/*克隆第一张图并放在最后*/
	var first = ul.children[0].cloneNode(true);
	ul.appendChild(first);
	/*点击右侧按钮切换*/
	var num = 0;
	var circle=0;
	arrow_r.addEventListener('click',function() {
		/*走到最后再从新开始*/
		if(num == ul.children.length-1) {
			ul.style.left = 0;
			num = 0;
		}
		num++;
		animate(ul,-num*focusWidth);
		circle++;
		if(circle == ol.children.length) {
			circle=0;
		}
		for(var i = 0;i< ol.children.length;i++) {
			ol.children[i].className = '';
		}
		ol.children[circle].className = 'current';
	
	});
	
	arrow_l.addEventListener('click',function() {
		/*走到最后再从新开始*/
		if(num == 0) {
			num = ul.children.length-1;
			ul.style.left = -num * focusWidth+ 'px';
		}
		num--;
		animate(ul,-num*focusWidth);
		circle--;
		if(circle < 0 ) {
			circle=ol.children.length - 1;
		}
		circleChange();
		for(var i = 0;i< ol.children.length;i++) {
			ol.children[i].className = '';
		}
		ol.children[circle].className = 'current';
	});
	/*自动播放*/
	 var timer = setInterval(function(){
	 	arrow_r.click();/*手动调用点击事件*/
	 },1300);
})

anime动画(JS)
function animate(obj,target,callback) {
	clearInterval(obj.timer);
	obj.timer= setInterval(function(){
		var step = (target - obj.offsetLeft)/10;
		step = step > 0 ? Math.ceil(step) : Math.floor(step);
		if (obj.offsetLeft == target){
			clearInterval(obj.timer);
			if(callback) {
				callback();
			}
		}
		obj.style.left = obj.offsetLeft + step +'px';
	},15);
}

== 持续更新中ing… ==

爬虫百度图片进入百度验证怎么办? 文章目录前言爬虫百度图片时,总是有时好有时坏 解决方案更改headers:(2)我选择通过如下命令升级pip:(3)再下载cryptography(4)最后尝试最初的下载早中晚温差较大,注意保暖哦,sincerely,end. 前言   爬虫百度图片时,总是有时好有时坏(爬不上的居多),已解决,如有错误,请纠正,万分感谢! 爬虫百度图片时,总是有时好有时坏 解决方案 出现问题: 根据调试信息,我观察到了返回结果如下: <!DOCTYPE html> <html lang="zh-C 阅读详情

相关推荐

php爬取百度关键词时出现,百度安全验证,解决方法

爬取关键词出现结果: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>百度安全验证</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="apple-mobile-web

sinat_32823207的博客 7710

从315MHz到125kHz:手把手教你用Arduino模拟汽车钥匙的RKE/PKE信号(附代码)

本文详细介绍了如何使用Arduino开发板和射频模块模拟汽车钥匙的RKE/PKE信号,包括硬件准备、代码实现和安全机制。通过实践教程,读者可以深入理解315MHz和125kHz信号在汽车电子领域的应用,掌握无钥匙进入系统的核心技术。

weixin_30945039的博客 224

Html5 学习笔记 【PC固定布局】 实战2 导航栏搜索区域

<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>项目实战 PC端固定布局</title> <link rel="stylesheet" href="css/style.css"&gt...

weixin_30925411的博客 160

从零搭建IoT数据中台:STM32+WebSocket实现边缘设备与Web端实时双向通信

本文详细介绍了如何从零搭建基于STM32和WebSocket协议的IoT数据中台,实现边缘设备与Web端的实时双向通信。通过硬件选型、协议设计、服务器搭建及安全优化,提供了一套低延迟、高并发的企业级解决方案,适用于智能农业和工业监控等场景。

tea88的博客 750

第三课 NXP S32K144 MCAL 集成到Vector davinci SIP-第一弹

将NXP S32K144 MCAL 集成到Vector davinci SIP的第三方库,导出ARXMl给Vector davinci SIP使用

candleer的博客 5857

SpringBoot验证码

“原生 js + SpringBoot + hutool 工具” 实现浏览器验证码功能,点击可刷新。

ThinkStu的博客 28万+

电流舵DAC设计(一)

如果分辨率继续增加,温度计码译码逻辑成为面积的主要决定因素,数字版图面积增加,总的面积消耗成上升趋势。缺点是:对于高分辨率的 DAC,高位码元和低位码元权重相差很大,当输入码元转换时(以 8 位二进制型 DAC 为例)尤其是中码转换(从 01111111 转换到 10000000),因为此时电流源的选通动作并非理想情况下的绝对一致等因素,导致在极短的时间内,码元会从 01111111 跳转到 11111111 再跳到10000000,这个过程中所有开关都参与转换,会引起最大幅度的尖峰毛刺(glitch);

模拟芯片设计 2875

2024年前端最新jQuery学习笔记,web前端开发资料

其实前端开发的知识点就那么多,面试问来问去还是那么点东西。所以面试没有其他的诀窍,只看你对这些知识点准备的充分程度。so,出去面试时先看看自己复习到了哪个阶段就好。这里再分享一个复习的路线:(以下体系的复习资料是我从各路大佬收集整理好的)《前端开发四大模块核心知识笔记》最后,说个题外话,我在一线互联网企业工作十余年里,指导过不少同行后辈。帮助很多人得到了学习和成长。开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

2401_84438160的博客 1090

Allegro如何画Photoplot_Outline操作指导

在用Allegro进行PCB设计的时候,最后进行光绘输出前,Photoplot_Outline是必备一个图形,所有在Photoplot_Outline中的图形将被输出,Photoplot_Outline以外的图形都将不被输出。如何绘制Photoplot_Outline,具体操作如下。如何画Photoplot_Outline操作指导。

weixin_54787054的博客 2641

Web前端最全ts学习笔记八:类型保护,2024年最新web前端面试项目上的难点有哪些

function isString(val: any): val is string { // 根据函数的返回值确定是不是string类型。// 以上的情况都可以通过js来判断出来的 , 可以增加一个字面量类型来进行判断 可识别类型。// ts 是给代码的 js是自己的逻辑 ts不关心,ts只关心类型。//if(val!== null){ // 内层函数可能会判断不正常。// ts 语法 为了有类型提示 不会关心js怎么执行。// null保护 val!// is语法 用来定义自己的类型。

2401_84616533的博客 645

第14.11章 高翔博士最新开源框架Lightning-LM源码解读(十一):离线定位模块全解析,从激光匹配到位姿图优化的极致优化

本文介绍了Lightning-LM离线定位模块的技术架构与实现细节。该模块基于3D激光雷达与IMU融合,采用改进版NDT匹配算法实现高精度定位,具备动态图层更新、多源信息融合等特性。核心流程包括数据预处理、激光里程计处理、IMU预测与点云去畸变、位姿图优化等环节,通过轻量级miao库实现高效增量优化。文章详细解析了模块的代码结构、关键函数功能及数据流,为SLAM系统的开发与优化提供了实践参考。

行知SLAM 376

2024年Web前端最新ts学习笔记七:泛型,web开发环节

在面试前我花了三个月时间刷了很多大厂面试题,最近做了一个整理并分类,主要内容包括html,css,JavaScript,ES6,计算机网络,浏览器,工程化,模块化,Node.js,框架,数据结构,性能优化,项目等等。包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目,涵盖了初中级前端技术点。HTML5新特性,语义化浏览器的标准模式和怪异模式xhtml和html的区别使用data-的好处meta标签canvasHTML废弃的标签。

2401_84437530的博客 952

怀旧版电脑GBC模拟器

再现原版GBC掌机的界面,电脑运行连游戏界面都一样大小,很怀旧,很真实,(英文版)强烈推荐,很小的文件,很难才找到的。

lwip-2.0.3

lwip是瑞典计算机科学院(SICS)的Adam Dunkels 开发的一个小型开源的TCP/IP协议栈。实现的重点是在保持TCP协议主要功能的基础上减少对RAM 的占用。

Web前端最新【前端】layui前端框架学习笔记,在线前端开发培训

框架原理真的深入某一部分具体的代码和实现方式时,要多注意到细节,不要只能写出一个框架。算法方面很薄弱的,最好多刷一刷,不然影响你的工资和成功率😯在投递简历之前,最好通过各种渠道找到公司内部的人,先提前了解业务,也可以帮助后期优秀 offer 的决策。要勇于说不,对于某些 offer 待遇不满意、业务不喜欢,应该相信自己,不要因为当下没有更好的 offer 而投降,一份工作短则一年长则 N 年,为了幸福生活要慎重选择!!!开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

2401_84446882的博客 753

RU DOS版、EFI版32bit/64bit BIOS常用工具

DOS版、EFI版的RU工具,可用来查看IO、MEM、PCI、SMBIOS等资源。亲测在EFI SHELL下可用。

Web前端最新JavaScript学习笔记之函数,2024最新大厂前端面试真题解析

总的来说,面试官要是考察思路就会从你实际做过的项目入手,考察你实际编码能力,就会让你在电脑敲代码,看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时,有一个清晰的逻辑思路,清楚知道自己在和面试官说项目说技术时的话就好了开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】时,有一个清晰的逻辑思路,清楚知道自己在和面试官说项目说技术时的话就好了[外链图片转存中…(img-ks97b7dP-1715906535774)]

2401_84446919的博客 1116

计算机控制技术及应用

《计算机控制技术及应用》通过总结作者的科研成果和吸收国内外的先进理论、方法和技术,以计算机控制系统的网络化、开放化、智能化和集成化发展趋势为主线索,主要介绍计算机控制系统的基本概念和计算机控制系统的典型形式,计算机控制系统的数学描述与基本分析方法,以及数字PID控制器、最少拍控制系统、达林算法、状态变量设计法等设计方法及其各种改进算法。重点突出计算机控制系统输入输出通道接口的设计方法和典型控制系统的设计案例与实现方法等。

Web前端最全前端学习笔记一一html的常用标签,2024年最新web前端高级面试

定义着重文字。定义斜体字。

2401_84447390的博客 387

2024年Web前端最新【学习笔记】 Thymeleaf的前端渲染(价值50)(1),web开发规范

你要问前端开发难不难,我就得说计算机领域里常说的一句话,这句话就是『难的不会,会的不难』,对于不熟悉某领域技术的人来说,因为不了解所以产生神秘感,神秘感就会让人感觉很难,也就是『难的不会』;当学会这项技术之后,知道什么什么技术能做到什么做不到,只是做起来花多少时间的问题而已,没啥难的,所以就是『会的不难』。开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】我特地针对初学者整理一套前端学习资料💗💗🌈每日一语:不要在夕阳下时幻想,要在旭日东升时努力!🌈🍒。

2401_84437604的博客 718

Web前端最新JS学习笔记(JavaScript基础学习必备),2024年最新web前端面试都问什么

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】这样封装代码确实解决了代码冗余的问题,但是每次调用函数 createStudent() 都会创建新函数 sayHi(),也就是说每个对象都有自己的 sayHi() 版本,而事实上,每个对象都共享一个函数。为了解决这个问题,我们引入面向对象编程里的一个重要概念:构造函数。通过构造函数来创建对象。首先在构造函数内没有创建对象,而是使用 this 关键字,将属性和方法赋给了 this 对象。

2401_84447417的博客 507

web前端关于 requestAnimationFrame() 学习笔记,2024年最新web开发学习培训

疯狂编程学习效果可视化写博客阅读优秀代码心态调整。

2401_84140832的博客 369

2024年Web前端最新CSS学习笔记,web可视化开发

天地灵气孕育出一颗能量巨大的混元珠,元始天尊将混元珠提炼成灵珠和魔丸,灵珠投胎为人,助周伐纣时可堪大用;而魔丸则会诞出魔王,为祸人间。元始天尊启动了天劫咒语,3年后天雷将会降临,摧毁魔丸。太乙受命将灵珠托生于陈塘关李靖家的儿子哪吒身上。然而阴差阳错,灵珠和魔丸竟然被掉包。本应是灵珠英雄的哪吒却成了混世大魔王,这调皮捣蛋顽劣不堪的哪吒却徒有一颗做英雄的心。然而面对众人对哪吒的误解和即将来临的天雷的降临,哪吒是否命中注定会立地成魔,他将何去何从哪吒之魔童降世结果图展示4.4阴影。

2401_84434237的博客 907

Web前端最新HTML5学习笔记,2024年最新字节跳动前端内部面试题

在面试前我花了三个月时间刷了很多大厂面试题,最近做了一个整理并分类,主要内容包括html,css,JavaScript,ES6,计算机网络,浏览器,工程化,模块化,Node.js,框架,数据结构,性能优化,项目等等。包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目,涵盖了初中级前端技术点。HTML5新特性,语义化浏览器的标准模式和怪异模式xhtml和html的区别使用data-的好处meta标签canvasHTML废弃的标签。

2401_84437691的博客 1020

2024年最新【学习笔记】 Thymeleaf的前端渲染(价值50),2024年最新Web前端视频开发面试问题

面试一面会问很多基础问题,而这些基础问题基本上在网上搜索,面试题都会很多很多。最好把准备一下常见的面试问题,毕竟面试也相当与一次考试,所以找工作面试的准备千万别偷懒。面试就跟考试一样的,时间长了不复习,现场表现肯定不会太好。表现的不好面试官不可能说,我猜他没发挥好,我录用他吧。内容主要包括前言本期博客是JavaWeb的一个后端向前端数据传输的一个渲染过程,所用到的技术也是就我们今天的。上篇我们讲过前端给发送请求到后端,这次我们讲后端把数据放到前端渲染!本篇篇博客可。

2401_84619432的博客 682

web前端关于 requestAnimationFrame() 学习笔记(1),2024年最新web前端页面性能优化

学习canvas制作JS动画,基本使用的都是定时器setInterval(),但是忽然发现了一个比较好的canvas动画使用的requestAnimationFrame,之前在开课吧的JS教学视频接触过这个方法,但是忽然忘了。立马进行了百度,找到了一篇讲的比较清晰的文章。以下仅作为笔记,如侵权,请联系删除。

2401_84140832的博客 351

2024年Web前端最新ES6学习笔记(二),2024年最新2024中级Web前端开发面试解答

面试前要精心做好准备,简历上写的知识点和原理都需要准备好,项目上多想想难点和亮点,这是面试时能和别人不一样的地方。还有就是表现出自己的谦虚好学,以及对于未来持续进阶的规划,企业招人更偏爱稳定的人。开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】万事开头难,但是程序员这一条路坚持几年后发展空间还是非常大的,一切重在坚持。为了帮助大家更好更高效的准备面试,特别整理了《前端工程师面试手册》电子稿文件。前端面试题汇总JavaScript性能linux前端资料汇总。

2401_84435866的博客 1069

前端学习笔记一一html的常用标签,2024年最新web前端面试题基础

网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。需要这份系统化的资料的朋友,可以添加V获取:vip1024c (备注前端)一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长![外链图片转存中…(img-dbd4DLjr-1713474834737)]

sfdsfgdgd的博客 987
上一篇: 数据库技术应用学习贴(最新)
下一篇: C#窗体--下拉列表框和列表框的增删改
链表哥
博客等级 码龄7年 1粉丝 5原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值