淘宝项目实战相关知识点

news2024/11/28 11:43:35

淘宝各个方面的布局大部分都是常规操作，在这里我就简单记录一下练习过程中的相关知识点，比较简短。相关知识点如下： 

行高的取值

假设font-size为16px

line-height:normal;

line-height:1.5;24px，先继承后计算

line-height:200%;32px，先计算后继承

line-height:50px;

line-height:5em;80px，先计算后继承

除了准确的像素值，其余都是行高本身的值*font-size的值

base标签 

  •  base 基础url，页面中所有url为#的都会跳转到基础url
  • base也可以设置别的属性，比如target
  • 一个页面只能出现一个base标签

空白折叠处理方法

设置父元素font-size为0，空白折叠的空白部分由父元素的font-size决定 

 IEfilter滤镜

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff9000',endColorstr=#ffff5000' , GradientType=1);1表示从左到右渐变，0表示从上到下渐变
 

图片垂直居中显示的方法

给图片的父元素添加display:table-cell属性，该属性可使其子元素都能够垂直居中

 表格

table{
    border-collapse: collapse;  /* 边框模式，合并的模式 */
}
th,td{
    padding: 0;
}

属性 

	table-layout: fixed;	/* 定义列宽的算法，fixed的计算方式为根据表格宽度自动计算列宽，每列的宽度为均分整个表格的宽度 */

word-break:keep-all;遇空格就强制换行

index.html: 

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>淘宝网 - 淘！我喜欢</title>
	<link rel="stylesheet" href="css/index.css">
	<link rel="icon" href="favicon.ico">
	<base target="_blank">
</head>

<body>
	<!-- 头部信息 -->
	<div id="headMessage" class="layer clearfix">
		<ul class="fl">
			<li class="title">
				<span>中国大陆</span>
				<span class="iconfont arrow">&#xe733;</span>
			</li>
			<li class="mr7">
				<a href="#" class="login mr7">亲，请登录</a>
				<a href="#">免费注册</a>
			</li>
			<li>
				<a href="#">手机逛淘宝</a>
			</li>
		</ul>

		<ul class="fr">
			<li>
				<a href="#">我的淘宝</a>
				<span class="iconfont arrow">&#xe733;</span>
			</li>
			<li>
				<span class="iconfont mr5 c4">&#xe63a;</span>
				<a href="#">购物车</a>
				<strong>0</strong>
				<span class="iconfont arrow">&#xe733;</span>
			</li>
			<li>
				<a href="#"><span class="iconfont mr5 stroe">&#x3432;</span>收藏夹</a>
				<span class="iconfont arrow">&#xe733;</span>
			</li>
			<li>
				<a href="#">商品分类</a>
			</li>
			<li class="line">|</li>
			<li>
				<a href="#">千牛卖家中心</a>
				<span class="iconfont arrow">&#xe733;</span>
			</li>
			<li>
				<a href="#">联系客服</a>
				<span class="iconfont arrow">&#xe733;</span>
			</li>
			<li>
				<span class="iconfont c4 mr5">&#xe66d;</span>
				<a href="#">网站导航</a>
				<span class="iconfont arrow">&#xe733;</span>
			</li>
		</ul>
	</div>


	<!-- 头部广告 -->
	<div id="headAd">
		<div class="layer clearfix">
			<a href="#" class="fl go"><img src="images/go.png" alt=""></a>
			<ul class="fr">
				<li class="item1">
					<a href="#" class="fr">
						<img src="images/adimg_01.jpg" alt="">
					</a>
					<h3><a href="#">电视会场</a></h3>
					<p><a href="#">最高降2000</a></p>
				</li>
				<li class="item2">
					<a href="#" class="fr">
						<img src="images/adimg_02.jpg" alt="">
					</a>
					<h3><a href="#">电视会场</a></h3>
					<p><a href="#">最高降2000</a></p>
				</li>
				<li class="item3">
					<a href="#" class="fr">
						<img src="images/adimg_03.jpg" alt="">
					</a>
					<h3><a href="#">电视会场</a></h3>
					<p><a href="#">最高降2000</a></p>
				</li>
				<li class="item4">
					<a href="#" class="fr">
						<img src="images/adimg_04.jpg" alt="">
					</a>
					<h3><a href="#">电视会场</a></h3>
					<p><a href="#">最高降2000</a></p>
				</li>
				<li class="item5">
					<a href="#" class="fr">
						<img src="images/adimg_05.jpg" alt="">
					</a>
					<h3><a href="#">电视会场</a></h3>
					<p><a href="#">最高降2000</a></p>
				</li>
				<!-- <li>
					<a href="#" class="fr"><img src="images/adimg_01.jpg" alt=""></a>
					<h3><a href="#">电视会场</a></h3>
					<p><a href="#">最高降2000</a></p>
				</li> -->
			</ul>
		</div>
	</div>


	<!-- 头部搜索 -->
	<div id="headSearch">
		<div class="cleafix layer">
			<!-- <h1><a href="#"><img src="images/logo.png" alt="淘宝网"></a></h1> -->
			<h1 class="fl"><a href="#">淘宝网</a></h1>

			<div class="code fr">
				<span class="iconfont close">&#xe614;</span>
				<span class="c5">手机淘宝</span>
				<img src="images/code.png" alt="">
			</div>

			<div class="search">
				<ul class="searchTab clearfix">
					<li class="active">宝贝</li>
					<li>天猫</li>
					<li>店铺</li>
				</ul>

				<div class="searchContent clearfix">
					<form action="#">
						<div class="searchBox fl">
							<input type="text">
							<div class="placeholder">
								<i class="iconfont">&#xe615;</i>
								<span>网红裤腰带 洋气 国际范 9.9包邮</span>
							</div>
							<span class="iconfont imgSearch">&#xe6ba;</span>
						</div>
						<div class="btn fl">
							<button type="submit">搜索</button>
						</div>
					</form>
				</div>

				<div class="hotKey">
					<a href="#" class="c5">积木</a>
					<a href="#">网线</a>
					<a href="#" class="c5">爬行垫</a>
					<a href="#">时尚连衣裙</a>
					<a href="#">男士T恤</a>
					<a href="#" class="c5">时尚休闲裤</a>
					<a href="#">粽子</a>
					<a href="#">沙发</a>
					<a href="#">风扇</a>
					<a href="#">定制窗帘</a>
					<a href="#">男士内裤</a>
					<a href="#">凉席三件套</a>
					<a href="#">办公桌</a>
				</div>
			</div>
		</div>
	</div>

	<!-- 导航 -->
	<div id="nav" class="layer clearfix">
		<h2 class="fl">主题市场</h2>
		<ul>
			<li class="size"><a href="#">天猫</a></li>
			<li class="size"><a href="#">聚划算</a></li>
			<li class="size"><a href="#">天猫超市</a></li>
			<li class="line">|</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 class="line">|</li>
			<li><a href="#">飞猪旅行</a></li>
			<li><a href="#">智能生活</a></li>
			<li><a href="#">苏宁易购</a></li>
		</ul>
	</div>

	<!-- 首屏内容 -->
	<div id="firstScreen" class="layer clearfix">
		<!-- 左边的内容 -->
		<div class="firstLeft fl">
			<!-- 侧边导航 -->
			<div class="sideNav fl">
				<ul>
					<li>
						<a href="#">女装</a> / <a href="#">男装</a> / <a href="#">内衣</a><span
							class="iconfont fr">&#xe50c;</span>
					</li>
					<li>
						<a href="#">鞋靴</a> / <a href="#">箱包</a> / <a href="#">配件</a><span
							class="iconfont fr">&#xe50c;</span>
					</li>
					<li>
						<a href="#">童装玩具</a> / <a href="#">孕产</a> / <a href="#">用品</a><span
							class="iconfont fr">&#xe50c;</span>
					</li>
					<li>
						<a href="#">家电</a> / <a href="#">数码</a> / <a href="#">手机</a><span
							class="iconfont fr">&#xe50c;</span>
					</li>
					<li>
						<a href="#">美妆</a> / <a href="#">洗护</a> / <a href="#">保健品</a><span
							class="iconfont fr">&#xe50c;</span>
					</li>
					<li>
						<a href="#">珠宝</a> / <a href="#">眼镜</a> / <a href="#">手表</a><span
							class="iconfont fr">&#xe50c;</span>
					</li>
					<li>
						<a href="#">运动</a> / <a href="#">户外</a> / <a href="#">乐器</a><span
							class="iconfont fr">&#xe50c;</span>
					</li>
					<li>
						<a href="#">游戏</a> / <a href="#">动漫</a> / <a href="#">影视</a><span
							class="iconfont fr">&#xe50c;</span>
					</li>
					<li>
						<a href="#">美食</a> / <a href="#">生鲜</a> / <a href="#">零食</a><span
							class="iconfont fr">&#xe50c;</span>
					</li>
					<li>
						<a href="#">鲜花</a> / <a href="#">宠物</a> / <a href="#">农资</a><span
							class="iconfont fr">&#xe50c;</span>
					</li>
					<li>
						<a href="#">工具</a> / <a href="#">装修</a> / <a href="#">建材</a><span
							class="iconfont fr">&#xe50c;</span>
					</li>
					<li>
						<a href="#">家具</a> / <a href="#">家饰</a> / <a href="#">家纺</a><span
							class="iconfont fr">&#xe50c;</span>
					</li>
					<li>
						<a href="#">汽车</a> / <a href="#">二手车</a> / <a href="#">用品</a><span
							class="iconfont fr">&#xe50c;</span>
					</li>
					<li>
						<a href="#">办公</a> / <a href="#">DIY</a> / <a href="#">五金电子</a><span
							class="iconfont fr">&#xe50c;</span>
					</li>
					<li>
						<a href="#">百货</a> / <a href="#">餐厨</a> / <a href="#">家庭保健</a><span
							class="iconfont fr">&#xe50c;</span>
					</li>
					<li>
						<a href="#">学习</a> / <a href="#">卡券</a> / <a href="#">本地服务</a><span
							class="iconfont fr">&#xe50c;</span>
					</li>
				</ul>
			</div>

			<!-- 图片1容器 -->
			<div class="img1Box fr">
				<div class="pic fl">
					<div class="img">
						<a href="#"><img src="images/pic_01.jpg" alt=""></a>
					</div>

					<button class="iconfont leftBtn">&#xe50a;</button>
					<button class="iconfont rightBtn">&#xe50c;</button>

					<div class="circle">
						<span class="active"></span><span></span><span></span><span></span><span></span>
					</div>
				</div>
				<div class="ad fr">
					<a href="#"><img src="images/ad_02.jpg" alt=""></a>
				</div>
			</div>

			<!-- 图片2容器 -->
			<div class="img2Box fr">
				<div class="pic fl">
					<div class="picTitle">
						<div class="text clearfix">
							<span class="fl bg">理想生活上天猫</span>
							<span class="fr"><i>1</i>/6</span>
						</div>
						<div class="line">
							<span></span>
						</div>
					</div>
					<div class="img">
						<a href="#"><img src="images/pic_02.jpg" alt=""></a><a href="#"><img src="images/pic_03.jpg"
								alt=""></a>
					</div>

					<button class="iconfont leftBtn">&#xe50a;</button>
					<button class="iconfont rightBtn">&#xe50c;</button>
				</div>
				<div class="ad fr">
					<p class="title">今日热卖</p>
					<a href="#"><img src="images/ad_03.jpg" alt=""></a>
				</div>
			</div>

			<!-- 淘宝头条 -->
			<div class="news fl">
				<div class="hd fl">
					<h3>淘宝头条</h3>
					<p>让你的生活更有趣</p>
				</div>
				<div class="newList fr">
					<div class="imtem">
						<a href="#" class="fl img"><img src="images/news_img_01.jpg" alt=""></a>
						<h4><a href="#">微漫酱访谈第三期：超萌舞见弥音音！</a></h4>
						<p><a href="#">哈喽，大家好，我是你们可爱的微漫酱，今天我们请到了一位舞见小姐姐来做客我们的访谈事，她就是弥音音！</a></p>
						<a href="#" class="more">更多></a>
					</div>
				</div>
			</div>
		</div>


		<!-- 右边的内容 -->
		<div class="firstRight fr">
			<!-- 用户 -->
			<div class="user">
				<a href="#" class="avatar"><img src="images/avatar.jpg" alt=""></a>
				<p class="username">Hi! 你好</p>
				<p class="members">
					<a href="#" class="gold">领淘金币抵钱</a>
					<a href="#" class="club">会员俱乐部</a>
				</p>
				<div class="btn">
					<button class="login">登录</button>
					<button class="register">注册</button>
					<button class="shop">开店</button>
				</div>
			</div>

			<!-- 举报 -->
			<a href="#" class="tipOff">
				<span>网上有害信息举报专区</span><i class="iconfont">&#xe644;</i>
			</a>

			<!-- 公告区 -->
			<div class="notice">
				<ul class="title">
					<li class="active"><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="content clearfix">
					<li class="item1"><a href="#">天猫618进入热身 84个品牌在天猫共获粉丝4.3亿</a></li>
					<li><a href="#">天猫618五折卖车</a></li>
					<li><a href="#">天猫618直播间观看指南</a></li>
				</ul>
			</div>

			<!-- 图标区域 -->
			<table class="icon">
				<tr>
					<td class="item1">
						<a href="#">
							<span></span>
							<i>充话费</i>
						</a>
					</td>
					<td class="item2">
						<a href="#">
							<span></span>
							<i>旅行</i>
						</a>
					</td>
					<td class="item3">
						<a href="#">
							<span></span>
							<i>车险</i>
						</a>
					</td>
					<td class="item4">
						<a href="#">
							<span></span>
							<i>游戏</i>
						</a>
					</td>
				</tr>
				<tr>
					<td class="item5">
						<a href="#">
							<span></span>
							<i>彩票</i>
						</a>
					</td>
					<td class="item6">
						<a href="#">
							<span></span>
							<i>电影</i>
						</a>
					</td>
					<td class="item7">
						<a href="#">
							<span></span>
							<i>酒店</i>
						</a>
					</td>
					<td class="item8">
						<a href="#">
							<span></span>
							<i>理财</i>
						</a>
					</td>
				</tr>
				<tr>
					<td class="item9">
						<a href="#">
							<span></span>
							<i>找服务</i>
						</a>
					</td>
					<td class="item10">
						<a href="#">
							<span></span>
							<i>演出</i>
						</a>
					</td>
					<td class="item11">
						<a href="#">
							<span></span>
							<i>水电煤</i>
						</a>
					</td>
					<td class="item12">
						<a href="#">
							<span></span>
							<i>火车票</i>
						</a>
					</td>
				</tr>
			</table>

			<!-- APP -->
			<div class="app">
				<div class="title cleafix">
					<h3 class="fl">阿里APP</h3>
					<a href="#" class="fr">更多></a>
				</div>
				<ul class="appIcon">
					<li><a href="#"><img src="images/app_01.webp" alt=""></a></li>
					<li><a href="#"><img src="images/app_02.png" alt=""></a></li>
					<li><a href="#"><img src="images/app_03.png" alt=""></a></li>
					<li><a href="#"><img src="images/app_04.png" alt=""></a></li>
					<li><a href="#"><img src="images/app_05.png" alt=""></a></li>
					<li><a href="#"><img src="images/app_06.png" alt=""></a></li>
					<li><a href="#"><img src="images/app_07.jpg" alt=""></a></li>
					<li><a href="#"><img src="images/app_08.png" alt=""></a></li>
					<li><a href="#"><img src="images/app_09.png" alt=""></a></li>
					<li><a href="#"><img src="images/app_10.png" alt=""></a></li>
				</ul>
			</div>
		</div>
	</div>


	<!-- 有好货与爱逛街 -->
	<div class="layer cleafix mt10">
		<!-- 有好货 -->
		<div class="goods fl">
			<div class="head cleafix">
				<h3 class="fl">
					<img src="images/goods.png" alt="有好货">
					<span class="iconfont">&#xe628;</span>
					<i>与品质生活不期而遇</i>
				</h3>
				<a href="#" class="fr change">换一换</a>
			</div>
			<ul class="list">
				<li>
					<a href="#"><img src="images/shop_img_01.jpg" alt=""></a>
					<h4><a href="#">max破产都要买的口红</a></h4>
					<p class="text"><a href="#">《破产姐妹》max最爱Tarte哑光口红笔</a></p>
					<a href="#" class="comment">
						<span class="iconfont">&#xe7fa;</span><i>5950 人说好</i>
					</a>
				</li>
				<li>
					<a href="#"><img src="images/shop_img_02.jpg" alt=""></a>
					<h4><a href="#">max破产都要买的口红</a></h4>
					<p class="text"><a href="#">《破产姐妹》max最爱Tarte哑光口红笔</a></p>
					<a href="#" class="comment">
						<span class="iconfont">&#xe7fa;</span><i>5950 人说好</i>
					</a>
				</li>
				<li>
					<a href="#"><img src="images/shop_img_03.jpg" alt=""></a>
					<h4><a href="#">max破产都要买的口红</a></h4>
					<p class="text"><a href="#">《破产姐妹》max最爱Tarte哑光口红笔</a></p>
					<a href="#" class="comment">
						<span class="iconfont">&#xe7fa;</span><i>5950 人说好</i>
					</a>
				</li>
				<li>
					<a href="#"><img src="images/shop_img_04.jpg" alt=""></a>
					<h4><a href="#">max破产都要买的口红</a></h4>
					<p class="text"><a href="#">《破产姐妹》max最爱Tarte哑光口红笔</a></p>
					<a href="#" class="comment">
						<span class="iconfont">&#xe7fa;</span><i>5950 人说好</i>
					</a>
				</li>
				<li>
					<a href="#"><img src="images/shop_img_05.jpg" alt=""></a>
					<h4><a href="#">max破产都要买的口红</a></h4>
					<p class="text"><a href="#">《破产姐妹》max最爱Tarte哑光口红笔</a></p>
					<a href="#" class="comment">
						<span class="iconfont">&#xe7fa;</span><i>5950 人说好</i>
					</a>
				</li>
				<li>
					<a href="#"><img src="images/shop_img_06.jpg" alt=""></a>
					<h4><a href="#">max破产都要买的口红</a></h4>
					<p class="text"><a href="#">《破产姐妹》max最爱Tarte哑光口红笔</a></p>
					<a href="#" class="comment">
						<span class="iconfont">&#xe7fa;</span><i>5950 人说好</i>
					</a>
				</li>
			</ul>
		</div>

		<!-- 爱逛街 -->
		<div class="goods fr shooping">
			<div class="head cleafix">
				<h3 class="fl">
					<img src="images/shopping.png" alt="有好货">
					<span class="iconfont">&#xe628;</span>
					<i>献给聪明可爱的你</i>
				</h3>
				<a href="#" class="fr change">换一换</a>
			</div>
			<ul class="list">
				<li>
					<a href="#"><img src="images/shop_img_07.jpg" alt=""></a>
					<p class="text">
						<span class="iconfont">&#xe66b;</span>
						<a href="#">【饰悟】925纯银小花迷你耳钉女耳环女气质复古会动的耳钉小耳坠</a>
					</p>
					<a href="#" class="comment">
						<span><img src="images/small_avatar.png" alt=""></span><i>爱逛***01</i>
					</a>
				</li>
				<li>
					<a href="#"><img src="images/shop_img_08.jpg" alt=""></a>
					<p class="text">
						<span class="iconfont">&#xe66b;</span>
						<a href="#">【饰悟】925纯银小花迷你耳钉女耳环女气质复古会动的耳钉小耳坠</a>
					</p>
					<a href="#" class="comment">
						<span><img src="images/small_avatar.png" alt=""></span><i>爱逛***01</i>
					</a>
				</li>
				<li>
					<a href="#"><img src="images/shop_img_09.jpg" alt=""></a>
					<p class="text">
						<span class="iconfont">&#xe66b;</span>
						<a href="#">【饰悟】925纯银小花迷你耳钉女耳环女气质复古会动的耳钉小耳坠</a>
					</p>
					<a href="#" class="comment">
						<span><img src="images/small_avatar.png" alt=""></span><i>爱逛***01</i>
					</a>
				</li>
				<li>
					<a href="#"><img src="images/shop_img_01.jpg" alt=""></a>
					<p class="text">
						<span class="iconfont">&#xe66b;</span>
						<a href="#">【饰悟】925纯银小花迷你耳钉女耳环女气质复古会动的耳钉小耳坠</a>
					</p>
					<a href="#" class="comment">
						<span><img src="images/small_avatar.png" alt=""></span><i>爱逛***01</i>
					</a>
				</li>
				<li>
					<a href="#"><img src="images/shop_img_10.jpg" alt=""></a>
					<p class="text">
						<span class="iconfont">&#xe66b;</span>
						<a href="#">【饰悟】925纯银小花迷你耳钉女耳环女气质复古会动的耳钉小耳坠</a>
					</p>
					<a href="#" class="comment">
						<span><img src="images/small_avatar.png" alt=""></span><i>爱逛***01</i>
					</a>
				</li>
				<li>
					<a href="#"><img src="images/shop_img_11.jpg" alt=""></a>
					<p class="text">
						<span class="iconfont">&#xe66b;</span>
						<a href="#">【饰悟】925纯银小花迷你耳钉女耳环女气质复古会动的耳钉小耳坠</a>
					</p>
					<a href="#" class="comment">
						<span><img src="images/small_avatar.png" alt=""></span><i>爱逛***01</i>
					</a>
				</li>
			</ul>
		</div>
	</div>


	<!-- 右侧固定定位导航 -->
	<div id="tool">
		<span class="iconfont">&#xe605;</span>
		<div class="btn">
			<a href="#" class="c4 active">爱逛 好货</a>
			<a href="#" class="c5">好店 直播</a>
			<a href="#" class="c6">品质 特色</a>
			<a href="#" class="c7">实惠 热卖</a>
			<a href="#" class="c4">猜你 喜欢</a>
			<a href="#" class="item6">反馈</a>
			<a href="#" class="">暴恐 举报</a>
		</div>
	</div>
</body>

</html>

index.css:

/* 
    @规则
		@charset    设置样式表的编码 
		@import		导入其它样式文件
		@media		媒体查询
		@font-face	自定义字体
 */

@import 'reset.css';

@font-face {
	font-family: 'iconfont';
	src: url('../font/iconfont.eot');
	src: url('../font/iconfont.eot?#iefix') format('embedded-opentype'),
		url('../font/iconfont.woff2') format('woff2'),
		url('../font/iconfont.woff') format('woff'),
		url('../font/iconfont.ttf') format('truetype'),
		url('../font/iconfont.svg#iconfont') format('svg');
}
.iconfont {
	font-family: "iconfont" !important;
	font-size: 16px;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* 头部信息 */
#headMessage li{
	float: left;
	line-height: 35px;
	padding: 0 6px;
	font-size: 0;
}
#headMessage a{
	color: #6c6c6c;
	font-size: 12px;
}
#headMessage a:hover{
	color: #f40;
}
#headMessage a.login{
	color: #f22e00;
}
#headMessage span{
	font-size: 12px;
}
#headMessage span.arrow{
	margin-left: 7px;;
}
#headMessage li strong{
	font-size: 12px;
	color: #f22e00;
}
#headMessage li span.stroe{
	color: #9c9c9c;
}
#headMessage li.line{
	font-size: 12px;
	color: #ddd;
	padding: 0 5px;
}


/* 头部广告 */
#headAd{
	background-color: #f12f04;
}
#headAd .go{
	display: block;
	padding: 10px 10px 10px 15px;
}
#headAd .go img{
	width: 80px;
	height: 80px;
}
#headAd ul{
	padding-top: 13px;
}
#headAd li{
	float: left;
	width: 209px;
	height: 75px;
	margin-right: 10px;

	padding: 12px 15px 0 15px;
	box-sizing: border-box;

	/* 
		盒模型
			1、标准盒模型
				总宽度=border(左右)+width+padding(左右)
				总高度=border(上下)+height+padding(上下)
			2、IE盒模型(怪异盒模型)
				总宽度=width;
				总高度=height;
	 */
}
#headAd li h3{
	font-size: 20px;
	line-height: 28px;
}
#headAd li p{
	font-size: 14px;
	line-height: 20px;
}
#headAd li a{
	color: #fff;
	display: block;
}
#headAd li a img{
	width: 52px;
	height: 52px;
	border-radius: 5px;
}

#headAd li.item1{
	background: url(../images/adbg_01.png) no-repeat;
}
#headAd li.item2{
	background: url(../images/adbg_02.png) no-repeat;
}
#headAd li.item3{
	background: url(../images/adbg_03.png) no-repeat;
}
#headAd li.item4{
	background: url(../images/adbg_04.png) no-repeat;
}
#headAd li.item5{
	background: url(../images/adbg_05.png) no-repeat;
	margin-right: 0;
}


/* 头部搜索 */
#headSearch{
	background-color: #fff;
	padding: 24px 0 10px 0;
}
#headSearch h1 a{
	display: block;
	width: 190px;
	height: 58px;
	background: url(../images/logo.png) center no-repeat;
	text-indent: -9999px;
	overflow: hidden;
	margin-top: 8px;
}

#headSearch .code{
	width: 72px;
	height: 86px;
	border: 1px solid #eee;
	position: relative;
	margin-right: 110px;
	text-align: center;
}
#headSearch .code img{
	width: 62px;
	height: 62px;
}
#headSearch .close{
	position: absolute;
	left: -16px;
	top: -1px;

	width: 14px;
	height: 14px;
	line-height: 14px;
	font-size: 14px;
	border: 1px solid #eee;
	color: #ddd;
	cursor: pointer;
}

#headSearch .search{
	width: 630px;
	margin: 0 auto;
}
#headSearch .searchTab{
	height: 22px;
	padding-left: 17px;
}
#headSearch .searchTab li{
	float: left;
	width: 36px;
	line-height: 22px;
	margin-right: 4px;
	text-align: center;
	color: #f40;
	cursor: pointer;
}
#headSearch .searchTab li:hover{
	background-color: #ffeee5;
}
#headSearch .searchTab li.active{
	color: #fff;
	font-weight: bold;

	background-image: linear-gradient(to right,#ff9000,#ff5000);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff9000', endColorstr='#ffff5000', GradientType=1);
	border-radius: 6px 6px 0 0;
}
#headSearch .searchContent{
	height: 40px;
}
#headSearch .searchBox{
	width: 554px;
	height: 40px;
	box-sizing: border-box;
	border: 2px solid #ff5000;
	border-right: none;
	border-radius: 20px 0 0 20px;
	overflow: hidden;
	position: relative;
}
#headSearch .searchBox input{
	width: 490px;
	height: 36px;
	line-height: 36px;
	outline: none;
	border: none;
	text-indent: 10px;

	position: absolute;
	z-index: 2;
	background-color: transparent;	/* 透明，为了能够看到后面的文字 */
}
#headSearch .placeholder{
	position: absolute;
	top: 6px;
	left: 14px;
}
#headSearch .placeholder span{
	color: #9c9c9c;
	vertical-align: 1px;
}
#headSearch .imgSearch{
	font-size: 28px;
	color: #9c9c9c;
	position: absolute;
	right: 20px;
	top: -2px;
	cursor: pointer;
}
#headSearch .searchContent button{
	width: 74px;
	height: 40px;
	text-align: center;
	font-size: 18px;
	line-height: 40px;
	color: #fff;
	border: none;
	background-image: linear-gradient(to right,#ff9000,#ff5000);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff9000', endColorstr='#ffff5000', GradientType=1);

	border-radius: 0 20px 20px 0;
}
#headSearch .hotKey{
	height: 25px;
	line-height: 25px;
}
#headSearch .hotKey a:hover{
	color: #f50;
}


/* 导航 */
#nav h2{
	width: 190px;
	height: 30px;
	line-height: 30px;
	font-size: 16px;
	color: #fff;
	text-align: center;
	background-color: #f50;
}
#nav ul{
	margin-left: 190px;
	height: 30px;

	/* width: 1000px;
	width: calc(100% - 190px); */	/* 支持情况：IE9+ */

	background-image: linear-gradient(to right,#ff9000,#ff5000);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff9000', endColorstr='#ffff5000', GradientType=1);
}
#nav ul li{
	float: left;
	line-height: 30px;
	margin: 0 7px;
	font-size: 14px;
	color: #fff;
	padding: 0 5px;

	position: relative;
}
#nav ul li.size{
	font-size: 16px;
}
#nav ul li a{
	color: #fff;
	font-weight: bold;
}
#nav ul li.line{
	margin: 0;
	padding: 0;
}
#nav ul li:hover:before{
	content: '';
	position: absolute;
	width: 23px;
	height: 13px;
	background-image: url(../images/ico_01.gif);

	top: -13px;
	left: 50%;
	margin-left: -12px;
}

/* 首屏内容 */
.firstLeft{
	width: 890px;
}
/* 侧边导航 */
.firstLeft .sideNav{
	width: 190px;
	height: 522px;
	background: #fff;
	border: 1px solid #ff5000;
	box-sizing: border-box;
	border-top: none;
	padding-top: 5px;
}
.firstLeft .sideNav li{
	height: 32px;
	line-height: 32px;
	padding-left: 25px;
	color: #999;
	font-size: 14px;

	transition: background-color 0.3s;
}
.firstLeft .sideNav li a{
	font-size: 14px;
	color: #666;
}
.firstLeft .sideNav li span{
	font-size: 12px;
	margin-right: 5px;
}
.firstLeft .sideNav li:hover{
	background: #ffe4dc;
	color: #f50;
}
.firstLeft .sideNav li:hover a{
	color: #f50;
}
.firstLeft .sideNav a:hover{
	text-decoration: underline;
}
/* 图片1容器 */
.firstLeft .img1Box{
	width: 690px;
	height: 282px;
	margin-top: 10px;
}
.firstLeft .pic{
	width: 520px;
	position: relative;
}
.firstLeft .pic button{
	width: 20px;
	height: 30px;
	line-height: 30px;
	color: #fff;
	cursor: pointer;
	border: none;
	background-color: rgba(0,0,0,0.3);	/* 支持情况：IE9+ */

	/* background-color: #000\9;	IE9以下的浏览器认识 */
	/* filter:alpha(opacity=30);	透明 */

	position:absolute;
	top: 50%;
	margin-top:-15px;

	display: none;
}
.firstLeft .pic button.leftBtn{
	left: 0;
	border-radius: 0 15px 15px 0; 
}
.firstLeft .pic button.rightBtn{
	right: 0;
	border-radius: 15px 0 0 15px; 
}
.firstLeft .pic:hover button{
	display: block;
}
.firstLeft .pic .circle{
	position: absolute;
	bottom: 15px;
	left: 50%;
	margin-left: -35px;
	border-radius: 10px;
	padding: 3px 0;
	font-size: 0;

	background-color: rgba(255,255,255,0.3);
}
.firstLeft .pic .circle span{
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #fff;
	margin: 0 3px;
	cursor: pointer;
}
.firstLeft .pic .circle span.active{
	background-color: #ff5000;
}
.firstLeft .ad{
	width: 160px;
}
.firstLeft .ad img{
	width: 160px;
}
/* 图片2容器 */
.firstLeft .img2Box{
	width: 690px;
	height: 220px;
	margin-top: 10px;
}
.firstLeft .img2Box .picTitle{
	height: 20px;
}
.firstLeft .img2Box .picTitle .text{
	height: 17px;
	line-height: 17px;
}
.firstLeft .img2Box .picTitle .text .bg{
	background: url(../images/title_bg.png) no-repeat left;
	padding-left: 136px;
	columns: #666;
}
.firstLeft .img2Box .picTitle .text i{
	color: #ff1648;
}
.firstLeft .img2Box .picTitle .line{
	height: 3px;
	background-color: #ff1648;
	position: relative;
}
.firstLeft .img2Box .picTitle .line span{
	width: 87px;
	height: 3px;
	background-color: #000;
	position: absolute;
	left: 0;
}
.firstLeft .img2Box .img{
	width: 520px;
	height: 200px;
	background-color: #fff;
	position: relative;

	display: table-cell;
	vertical-align: middle;

	/* display: flex;
	justify-content: space-around;
	align-items: center; */
}
.firstLeft .img2Box .img img{
	margin: 0 10px;
}
.firstLeft .img2Box .ad .title{
	height: 20px;
	line-height: 20px;
}
/* 淘宝头条 */
.firstLeft .news{
	width: 890px;
	height: 100px;
	background: #fff;
	margin-top: 10px;
	box-sizing: border-box;
	padding: 13px 13px 13px 20px;
}
.firstLeft .news .hd{
	margin-top: 15px;
}
.firstLeft .news .hd h3{
	width: 129px;
	height: 26px;
	background: url(../images/news_logo.png) no-repeat;
	text-indent: -9999px;
	overflow: hidden;
}
.firstLeft .news .hd p{
	color: #999;
	line-height: 24px;
}
.firstLeft .news .newList{
	width: 680px;
	position: relative;
}
.firstLeft .news .newList .img{
	margin-right: 15px;
}
.firstLeft .news .newList .img img{
	width: 130px;
	height: 73px;
}
.firstLeft .news .newList h4{
	line-height: 28px;
	font-size: 16px;
	font-weight: normal;
}
.firstLeft .news .newList h4 a{
	color: #333;
}
.firstLeft .news .newList h4 a:hover,.firstLeft .news .newList .more:hover{
	color: #ff5000;
}
.firstLeft .news .newList p{
	line-height: 18px;
	font-size: 14px;
}
.firstLeft .news .newList p a{
	color: #999;
}
.firstLeft .news .newList .more{
	position: absolute;
	top: 0;
	right: 0;
	color: #999;
}


/* 右边的内容 */
.firstRight{
	width: 290px;
	margin-top: 10px;
}
/* 用户 */
.firstRight .user{
	height: 140px;
	padding-top: 5px;
	background-image: url(../images/user_bg.png);
}
.firstRight .user .avatar{
	display: block;
	width: 50px;
	height: 50px;
	margin: 0 auto;
	border-radius: 50%;
	overflow: hidden;
}
.firstRight .user .avatar img{
	width: 50px;
	height: 50px;
}
.firstRight .user .username{
	text-align: center;
	line-height: 16px;
}
.firstRight .user .members{
	text-align: center;
	font-size: 0;
}
.firstRight .user .members a{
	display: inline-block;
	font-size: 12px;
	border-radius: 9px;
	padding: 0 10px 0 20px;
	margin: 0 2px;

	/* background: #ffe4dc; */
}
.firstRight .user .members a.gold{
	background: #ffe4dc url(../images/ico.png) 0 -572px no-repeat;
}
.firstRight .user .members a.club{
	background: #ffe4dc url(../images/ico.png) 0 -528px no-repeat;
}
.firstRight .user .btn{
	text-align: center;
	
}
.firstRight .user .btn button{
	width: 75px;
	height: 25px;
	line-height: 25px;
	margin: 12px 2px 0 2px;
	color: #fff;
	font-weight: bold;
	border-radius: 4px;
	border: none;
	background-image: linear-gradient(to right,#ff9000,#ff5000);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff9000', endColorstr='#ffff5000', GradientType=1);
}
.firstRight .user .btn button.login{
	width: 92px;
}

/* 举报 */
.firstRight .tipOff{
	display: block;
	height: 26px;
	line-height: 26px;
	color: #f40;
	background: #ffe4dc;
	text-align: center;
}

.firstRight .tipOff i{
	font-size: 12px;
	vertical-align: 1px;
	position: relative;
	left: 30px;
}

/* 公告区 */
.firstRight .notice{
	height: 108px;
	background-color: #fff;
}
.firstRight .notice .title{
	text-align: center;
	font-size: 0;
	padding-top: 10px;
}
.firstRight .notice .title li{
	display: inline-block;
	font-size: 12px;
	line-height: 20px;
	padding: 0 4px;
	margin: 0 10px;
}
.firstRight .notice .title li.active{
	font-weight: bold;
	border-bottom: 2px solid #f40;
}
.firstRight .notice .title li a:hover{
	color: #f40;
}
.firstRight .notice .content{
	margin: 0 12px;
	padding-top: 10px;
}
.firstRight .notice .content li{
	height: 25px;
	line-height: 25px;
	overflow: hidden;
	float: left;
	width: 130px;
}
.firstRight .notice .content li a:hover,.firstRight .notice .content li.item1 a{
	color: #ff5000;
}
.firstRight .notice .content li.item1{
	width: 100%;
	color: #ff5000;
}
/* 图标区域 */
.firstRight .icon{
	width: 100%;
	height: 231px;
	background-color: #fff;
	table-layout: fixed;	/* 定义列宽的算法，fixed的计算方式为根据表格宽度自动计算列宽，每列的宽度为均分整个表格的宽度 */
}
.firstRight .icon td{
	border: 1px solid #f4f4f4;
	text-align: center;
}
.firstRight .icon td span{
	display: block;
	width: 24px;
	height: 24px;
	margin: 0 auto;
	background: url(../images/ico.png) no-repeat;
}
.firstRight .icon td i{
	line-height: 34px;
	color: #333;
}
.firstRight .icon .item1 span{
	background-position: 0 0; 
}
.firstRight .icon .item2 span{
	background-position: 0 -87px; 
}
.firstRight .icon .item3 span{
	background-position: 0 -44px; 
}
.firstRight .icon .item4 span{
	background-position: 0 -132px; 
}
.firstRight .icon .item5 span{
	background-position: 0 -176px; 
}
.firstRight .icon .item6 span{
	background-position: 0 -220px; 
}
.firstRight .icon .item7 span{
	background-position: 0 -264px; 
}
.firstRight .icon .item8 span{
	background-position: 0 -308px; 
}
.firstRight .icon .item9 span{
	background-position: 0 -352px; 
}
.firstRight .icon .item10 span{
	background-position: 0 -396px; 
}
.firstRight .icon .item11 span{
	background-position: 0 -440px; 
}
.firstRight .icon .item12 span{
	background-position: 0 -484px; 
}
/* APP */
.firstRight .app{
	height: 111px;
	background: #fff;
}
.firstRight .app .title{
	height: 30px;
	line-height: 30px;;
}
.firstRight .app h3{
	font-size: 14px;
	padding-left: 14px;
}
.firstRight .app a{
	margin-right: 10px;
}
.firstRight .app a:hover{
	color: #f40;
}
.firstRight .app .appIcon{
	text-align: center;
	font-size: 0;
}
.firstRight .app .appIcon li{
	width: 32px;
	height: 32px;
	display: inline-block;
	margin: 0 10px 8px 10px;
}
.firstRight .app .appIcon li img{
	width: 32px;
	height: 32px;
}

/* 有好货与爱逛街 */
/* 有好货 */
.goods{
	width: 590px;
	height: 658px;
	background-color: #fff;
	
	overflow: hidden;
}
.goods .head{
	height: 24px;
	line-height: 24px;
	margin: 20px 0;
	padding: 0 20px; 
}
.goods .head h3{
	font-size: 0;
	font-weight: normal;
}
.goods .head h3 img{
	height: 24px;
}
.goods .head h3 span{
	vertical-align: middle;
	color: #ccc;
	font-size: 20px;
	margin: 0 5px;
}
.goods .head h3 i{
	font-size: 12px;
	vertical-align: middle;
	color: #999;
}
.goods .head .change{
	color: #999;
}
.goods .list{
	font-size: 0;
	text-align: center;
}
.goods .list li{
	width: 180px;
	display: inline-block;
	margin: 0 2px 35px 2px;
	text-align: left;
}
.goods .list li img{
	width: 180px;
	height: 180px;
}
.goods .list li h4{
	font-size: 16px;
	height: 28px;
	line-height: 28px;
	font-weight: normal;
}
.goods .list li h4 a:hover{
	color: #f40;
}
.goods .list li .text{
	height: 24px;
	line-height: 24px;
	font-size: 14px;
	overflow: hidden;
}
.goods .list li .text a{
	color: #999;
}
.goods .list li .comment{
	display: block;
	height: 22px;
	line-height: 22px;
	font-size: 12px;
	color: #35b1ff;
	margin-top: 12px;
}
.goods .list li .comment span{
	font-size: 14px;
	margin-right: 4px;
}
/* 爱逛街 */
.shooping .list li .text{
	height: 44px;
	line-height: 22px;
	font-size: 14px;
	overflow: hidden;
	margin-top: 11px;;
}
.shooping .list li .text span{
	font-size: 14px;
	color: #ebebeb;
	position: relative;
	top: -5px;
}
.shooping .list li .text a:hover{
	color: #f40;
}
.shooping .list li .comment{
	color: #999;
}
.shooping .list li .comment img{
	width: 22px;
	height: 22px;
	border-radius: 50%;
}


/* 右侧固定定位导航 */
#tool{
	width: 50px;
	height: 350px;
	/* background-color: #f00; */

	position: fixed;
	top: 100px;
	right: 3%;
	/* border: 1px solid #f00; */
}
#tool span{
	font-size: 32px;
	color: #ff7f13;
	width: 50px;
	height: 36px;
	line-height: 36px;
	text-align: center;

	position: absolute;
	top: -28px;
}
#tool div{
	height: 350px;
	border-radius: 8px;
	overflow: hidden;
}
#tool a{
	display: block;
	width: 50px;
	height: 50px;
	text-align: center;
	background: #fff;
	word-break: keep-all;

	padding-top: 6px;
	box-sizing: border-box;
	position: relative;
}
#tool a:after{
	content: '';
	border-bottom: 1px solid #efefef;
	width: 34px;
	position: absolute;
	left: 8px;
	bottom: 0;
}
#tool a.item6{
	line-height: 40px;
}
#tool a:hover,#tool a.active{
	background-image: linear-gradient(135deg,#ff9000,#ff5000);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff9000', endColorstr='#ffff5000', GradientType=1);
	color: #fff;
	font-weight: bold;
}
#tool a:hover:after,#tool a.active:after{
	border: none;
}

reset.css:

body,p,h1,h2,h3,h4,ul{
    margin: 0;
}
ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
img{
    border: none;
    vertical-align: middle;
}
a{
    text-decoration: none;
    color: #3c3c3c;
}
i{
    font-style: normal; 
}
input,button{
    margin: 0;
    padding: 0;
}
button{
    outline: none;
}
table{
    border-collapse: collapse;  /* 边框模式，合并的模式 */
}
th,td{
    padding: 0;
}

body{
    font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
    /* font-family: '宋体';
    font-family: '\5b8b\4f53';
    font-family: SimSun;

    font-family: "微软雅黑";
    font-family: Miscrosoft YaHei; */

    color: #3c3c3c;
    background-color: #f4f4f4;
}

.clearfix:after{
    content: '';
    display: block;
    clear: both;
}
.fl{
    float: left;
}
.fr{
    float: right;
}

.layer{
    width: 1190px;
    margin: 0 auto;
}

.c4{
    color: #f40;
}
.c5{
    color: #f50;
}
.c6{
    color: #8d7afb;
}
.c7{
    color: #a8c001;
}
.mr7{
    margin-right: 7px;
}
.mr5{
    margin-right: 5px;
}
.mt10{
    margin-top: 10px;
}
.mr10{
    margin-right: 10px;
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1450505.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

[office] Excel CHITEST 函数 使用实例教程 #媒体#知识分享#其他

[office] Excel CHITEST 函数 使用实例教程 #媒体#知识分享#其他

Excel CHITEST 函数 使用实例教程 提示 此函数已由 CHISQ.TEST 函数替换&#xff0c;新函数可以提供更好的精确度&#xff0c;其名称更好地反映其用法。旧函数仍可用于与早期版本Excel 的兼容。但是&#xff0c;如果不需要向后兼容&#xff0c;那么应考虑直接使用新函数&…
阅读更多...
51单片机编程基础（C语言）：LED点阵屏

51单片机编程基础（C语言）：LED点阵屏

点阵屏介绍 类似于数码管&#xff0c;要用到肉眼视觉效应。扫描&#xff0c;才能把每一个LED都能选中&#xff0c;从而显示我们想要的图形&#xff0c;否则&#xff0c; 只能一次点亮一个LED&#xff0c; LED使用 51单片机点阵屏电路图&#xff1a; 实际连接顺序如下图&#…
阅读更多...
js示例1（图片轮播）

js示例1（图片轮播）

<!DOCTYPE html> <html><head><meta charset"utf-8"><title>图片轮播</title><style>#box{ /*给图片盒子创建样式*/ width : 400px;height : 400px; margin: 0 auto; position: rela…
阅读更多...
为自监督学习重构去噪扩散模型

为自监督学习重构去噪扩散模型

在这项研究中&#xff0c;作者检验了最初用于图像生成的去噪扩散模型&#xff08;DDM&#xff09;的表示学习能力。其理念是解构DDM&#xff0c;逐渐将其转化为经典的去噪自动编码器&#xff08;DAE&#xff09;。这一解构过程让大家能够探索现代DDM的各个组成部分如何影响自监…
阅读更多...
react 【七】各种hooks的使用/SPA的缺点

react 【七】各种hooks的使用/SPA的缺点

文章目录 1、Hook1.1 为什么会出现hook1.2 useState1.3 useEffect1.4 useContext1.5 useReducer1.6 useCallback1.7 useMemo1.8 useRef1.8.1 ref绑定dom1.8.2 ref解决闭包缺陷 1.9 useImperativeHandle1.10 useLayoutEffect1.11 自定义Hook1.11.1 什么是自定义Hook1.11.2 Conte…
阅读更多...
问题：从完整的问题解决过程来看，（ ）是首要环节。A．理解问题 B．提出假设C．发现问题 D．检验假设 #学习方法#学习方法

问题：从完整的问题解决过程来看，（ ）是首要环节。A．理解问题 B．提出假设C．发现问题 D．检验假设 #学习方法#学习方法

问题&#xff1a;从完整的问题解决过程来看&#xff0c;&#xff08; &#xff09;是首要环节。A&#xff0e;理解问题 B&#xff0e;提出假设C&#xff0e;发现问题 D&#xff0e;检验假设 A.理解问题 B.提出假设 C&#xff0e;发现问题 参考答案如图所示
阅读更多...
LabVIEW高效电磁阀性能测试

LabVIEW高效电磁阀性能测试

LabVIEW高效电磁阀性能测试 在核电站的安全运营中&#xff0c;电磁阀作为关键组件&#xff0c;其性能的可靠性至关重要。设计一套基于LabVIEW的电磁阀测试平台&#xff0c;既能精准测试电磁阀的多项性能指标&#xff0c;又能提高检修效率与准确性&#xff0c;进而保障核电站的…
阅读更多...
Word docx文件重命名为zip文件，解压后直接查看和编辑

Word docx文件重命名为zip文件，解压后直接查看和编辑

一个不知道算不算冷的知识[doge]&#xff1a; docx格式的文件本质上是一个ZIP文件 当把一个.docx文件重命名为.zip文件并解压后&#xff0c;你会发现里面包含了一些XML文件和媒体文件&#xff0c;它们共同构成了Word文档的内容和格式。 例如&#xff0c;word/document.xml文件…
阅读更多...
平时积累的FPGA知识点（8）

平时积累的FPGA知识点（8）

平时在FPGA群聊等积累的FPGA知识点&#xff0c;第八期&#xff1a; 21 FFT IP核 有遇到过FFT IP核测量频率不准确的问题吗&#xff1f;大部分情况下都是准的&#xff0c;偶尔偏差比较大&#xff0c;IP核输入的数据用matlab计算出的频率是对的。 解释&#xff1a;可能是采样点…
阅读更多...
扶贫|精准扶贫管理系统|基于Springboot的精准扶贫管理系统设计与实现(源码+数据库+文档)

扶贫|精准扶贫管理系统|基于Springboot的精准扶贫管理系统设计与实现(源码+数据库+文档)

精准扶贫管理系统目录 目录 基于Springboot的精准扶贫管理系统设计与实现 一、前言 二、系统功能设计 三、系统实现 1、管理员模块的实现 &#xff08;1&#xff09;用户信息管理 &#xff08;2&#xff09;贫困户信息管理 &#xff08;3&#xff09;新闻类型管理 &a…
阅读更多...
php基础学习之可变函数（web渗透测试关键字绕过rce于回调函数）

php基础学习之可变函数（web渗透测试关键字绕过rce于回调函数）

可变函数 看可变函数的知识点之前&#xff0c;蒟蒻博主建议你先去看看php的可变变量&#xff0c;会更加方便理解&#xff0c;在本篇博客中的第五块知识点->php基础学习之变量-CSDN博客 描述 当一个变量所保存的值刚好是一个函数的名字&#xff08;由函数命名规则可知该值必…
阅读更多...
2024年【T电梯修理】报名考试及T电梯修理考试报名

2024年【T电梯修理】报名考试及T电梯修理考试报名

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2024年【T电梯修理】报名考试及T电梯修理考试报名&#xff0c;包含T电梯修理报名考试答案和解析及T电梯修理考试报名练习。安全生产模拟考试一点通结合国家T电梯修理考试最新大纲及T电梯修理考试真题汇总&#xff0c;…
阅读更多...
书生浦语大模型实战营-课程笔记（3）

书生浦语大模型实战营-课程笔记（3）

本节课主要是跟着教程做的&#xff0c;操作的东西放到作业里记录了。 这里主要记录一些视频里讲的非操作性的东西。 RAG外挂知识库&#xff1f;优点是成本低&#xff0c;不用重新训练 RAG的一个整体流程。 涉及了文本相似度匹配&#xff0c;是不是和传统的问答系统&#xff0…
阅读更多...
SpringCloud之Nacos用法笔记

SpringCloud之Nacos用法笔记

SpringCloud之Nacos注册中心 Nacos注册中心nacos启动服务注册到Nacosnacos服务分级模型NacosRule负载均衡策略根据集群负载均衡加权负载均衡Nacos环境隔离-namespace Nacos与eureka的对比临时实例与非临时实例设置 Nacos配置管理统一配置管理微服务配置拉取配置自动刷新远端配置…
阅读更多...
【白话前端】扫盲贴：Svg动画和Canvas动画区别

【白话前端】扫盲贴：Svg动画和Canvas动画区别

SVG动画和Canvas动画是两种不同的Web动画技术&#xff0c;它们的实现方式、适用场景和优缺点有所不同。 SVG动画是基于矢量图形的动画技术&#xff0c;使用XML描述图形&#xff0c;并在浏览器中渲染出来。SVG动画可以通过JavaScript或CSS来控制SVG元素的属性值变化&#xff0c;…
阅读更多...
Activation of network connection failed(ubuntu连不上网)

Activation of network connection failed(ubuntu连不上网)

ubuntu连不上网&#xff0c;看了好几个方法找到个有用的记录一下 1. 还原默认设置 2. 更改适配器&#xff1a;加上vmware bridge protocol
阅读更多...
积分（二）——复化Simpson(C++)

积分（二）——复化Simpson(C++)

前言 前言 simpson积分 simpson积分公式 ∫ a b f ( x ) d x ≈ b − a 6 [ f ( a ) f ( b ) 4 f ( a b 2 ) ] \int_{a}^{b}f(x)dx \approx \frac{b-a}{6}[f(a)f(b)4f(\frac{ab}{2})] ∫ab​f(x)dx≈6b−a​[f(a)f(b)4f(2ab​)] 与梯形积分类似&#xff0c;当区间[a,b]较…
阅读更多...
文件上传漏洞：upload-labs靶场通关

文件上传漏洞：upload-labs靶场通关

目录 什么是文件上传漏洞&#xff1f; 第1关&#xff08;客户端验证-前端&#xff09; 第2关&#xff08;文件类型校验-MIME校验 &#xff09; 第3关&#xff08;文件名校验-黑名单绕过&#xff09; 第4关&#xff08;文件后缀校验-.htacess绕过&#xff09; 第5关&#…
阅读更多...
GPIO八种工作模式

GPIO八种工作模式

目录 一、推挽输出 二、开漏输出 三、复用推挽输出 四、复用开漏输出 五、浮空输入 六、上拉输入 七、下拉输入 八、模拟输入 GPIO八种配置模式&#xff0c;原理和使用场景&#xff0c;硬件原理如下图&#xff1a; 一、推挽输出 1、 原理 当控制栅极为低电平时&#x…
阅读更多...
随机过程及应用学习笔记（四） 马尔可夫过程

随机过程及应用学习笔记（四） 马尔可夫过程

马尔可夫过程是理论上和实际应用中都十分重要的一类随机过程。 目录 前言 一、马尔可夫过程的概念 二、离散参数马氏链 1 定义 2 齐次马尔可夫链 3 齐次马尔可夫链的性质 三、齐次马尔可夫链状态的分类 四、有限马尔可夫链 五、状态的周期性 六、极限定理 七、生灭过…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023