前端-淘宝静态界面

已于 2024-03-14 11:43:59 修改
阅读量1.2k 收藏 10
点赞数 2
分类专栏： 前端 文章标签： 前端 css3 css html
于 2022-01-21 00:21:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Bala_lala/article/details/122385770
版权

前端学习——淘宝静态界面

使用渡一的前端入门课程进行学习，下面将学习笔记记录于此。希望自己的前端学习之路一帆风顺。
开发平台：sublime。
学习视频：渡一前端入门课。
参照内容：菜鸟教程。

文章目录

  • 前端学习——淘宝静态界面
  • 一、css升华
    • 1.1 文字溢出处理
      • 1.1.1 单行文本
      • 1.1.2 多行文本
    • 1.2 背景
    • 1.3 图片转换为文字
      • 1.3.1 使文字在仅展示css时隐藏
      • 1.3.2 给盒子加一个背景颜色
  • 二、 技巧
  • 三、 实战操作-淘宝静态界面
    • 3.1 效果展示
    • 3.2 index.html
    • 3.3 index.css
    • 3.4 reset.css
  • 四、总结

一、css升华

1.1 文字溢出处理

1.1.1 单行文本

首先使用 white-space:nowrap清除换行功能。
其次使用overflow: hidden清除溢出部分。
最后使用text-overflow:ellipsis使溢出部分用 “…” 展示。
尝试以下代码：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.ss{
				width: 300px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			p{
				width: 300px;
			}
		</style>
	</head>
	<body>
		<p class="ss">
			撒大大阿达阿达我去看望读取文件递交东京dadasdad
		</p>
		<p>
			撒大大阿达阿达我去看望读取文件递交东京dadasdad
		</p>
	</body>
</html>

1.1.2 多行文本

在处理多行文本溢出时，因为较为复杂，一般由后端工程师按感觉在一定文字后面用 “…” 展示，是手动的。

1.2 背景

CSS 背景属性用于定义HTML元素的背景。
比较常用的有：
背景颜色：background-color、
背景图片：background-image、
背景平铺方式：background-repeat、
背景是否固定：background-attachment、
背景定位：background-position。
尝试下列代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
body
{
	background-image:url('https://static.runoob.com/images/mix/img_tree.png');
	background-repeat:no-repeat;
	background-position:right top;
	margin-right:200px;
}
</style>

</head>

<body>
<h1>Hello World!</h1>
<p>背景图片不重复，设置 position 实例。</p>
<p>背景图片只显示一次，并与文本分开。</p>
<p>实例中还添加了 margin-right 属性用于让文本与图片间隔开。</p>
</body>

1.3 图片转换为文字

在网速较差时，浏览网页时经常会遇到只展示 html 不展示 css 的情况。为了实现只展示 html 时能看到文字形式的超链接，而展示css时能看到图片形式的超链接看不到文字形式的超链接，可以采用下面的方法。

1.3.1 使文字在仅展示css时隐藏

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			a{
				display: inline-block;
				text-decoration: none;
				color: #424242;
				width: 190px;
				height: 90px;
				border: 1px solid black;
				background-image: url(O1CN01uRz3de23mzWofmPYX_!!6000000007299-2-tps-143-59.png);
				background-size: 100% 100%;
				
				text-indent: 200px;
				white-space: nowrap;
				overflow: hidden;
			}
		</style>
	</head>
	<body>
		<a href="http://www.taobao.com" target="_blank">淘宝网</a>
	</body>
</html>

展示效果为：
展示css：
在这里插入图片描述
不展示css：
在这里插入图片描述

1.3.2 给盒子加一个背景颜色

利用padding可以展示背景图片和背景颜色但不能展示内容的原理，使容器的高度为零，padding-top为所需高度，这样文字内容会被挤出到容器外，再使用overflow: hidden使得溢出部分隐藏即可。
尝试下列代码：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			a{
				display: inline-block;
				text-decoration: none;
				color: #424242;
				width: 190px;
				height: 0px;
				padding-top: 90px;
				border: 1px solid black;
				background-image: url(O1CN01uRz3de23mzWofmPYX_!!6000000007299-2-tps-143-59.png);
				background-size: 100% 100%;
				overflow: hidden;
				

			}
		</style>
	</head>
	<body>
		<a href="http://www.taobao.com" target="_blank">淘宝网</a>
	</body>
</html>

二、 技巧

  1. 行级元素只能嵌套行级元素，块级元素可以嵌套任何元素。但是p标签不能嵌套div。

  2. a标签不能嵌套a标签。

  3. 使用margin : auto使得容器相对于展示界面水平居中。

  4. 使用position: absolute、float: left/right之后，会默认使用display: inline-block;，即消除行属性。

  5. 如果一个容器内有内容，则容器外的文本与容器内的内容顶对齐。

  6. 在body中修改line-height时，如果使用相对数字，则后续的子元素会继承这个相对数字。而如果使用百分比，则会继承百分比计算后的结果。如font-size:14px ; line-height: 1.5,则后续子元素在设置font-size后，会继承line-height: 1.5。但如果设置font-size:14px ; line-height: 150%，则会继承line-height: 21px。

  7. 在index中使用@import url("reset.css");导入重置css。

  8. 在index中可以强调如下规则

     @charset	设置样式表的编码
 @import 	导入其他样式文件 
 @meida  	媒体查询
 @font-face;	自定义字体

  9. 通常情况下 h1 标签是主标签，只能出现一次。 h2 是副标签，表示副标题。h3 经常用于板块标题。

  10. 盒模型可以分为标准盒模型，IE盒模型(怪异盒模型)。
    其中 标准盒模型的总高度=border+width+padding。
    怪异盒模型的总高度=width

  11. width: calc(100% - 190px); 可以使用calc函数计算宽度，记得带空格。

三、 实战操作-淘宝静态界面

跟着课程手敲了一遍静态界面，感觉收获特别特比特别多。现在把代码贴在这里，以后还能回顾一下。

3.1 效果展示

通过html与css完成了淘宝的静态界面，原界面有许多动态效果需要js，尚未学习，所以只实现静态界面的功能。（感觉内容量还是很大的，有很多细节）
这里只粘贴一下代码。
在这里插入图片描述

在这里插入图片描述

3.2 index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>淘宝网 - 淘！我喜欢</title>
		<link rel="stylesheet" type="text/css" href="css/index.css">
		
		<link rel="icon" href="favicon.ico">
		<!-- 放置头的logo -->
		
		<base  target="_blank">
		<!-- 设置基础路径 -->
		
	</head>
	<body>
		
		<!-- 头部信息 -->
		<div id="headMessage" class="clearfix layer">
			
			<ul class="fl">
				<li>
					<span >中国大陆</span>
					<span class="iconfont arrow">&#xe62e;</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">&#xe62e;</span>
				</li>
				<li>
					<span class="iconfont mr5 c4">&#xe73d;</span>
					<a href="#">购物车</a>
					<strong>0</strong>
					<span class="iconfont ">&#xe62e;</span>
				</li>
				<li>
					<a href="">
						<span class="iconfont mr5 store">&#xf0144;</span>收藏夹
					</a>
					<span class="iconfont arrow">&#xe62e;</span>
				</li>
				<li><a href="">商品分类</a></li>
				<li class="line">|</li>
				<li>
					<a href="">千牛卖家中心</a>
					<span class="iconfont arrow">&#xe62e;</span>
				</li>
				<li>
					<a href="">联系客服</a>
					<span class="iconfont arrow">&#xe62e;</span>
				</li>
				<li>
					<span class="iconfont c4 mr5" >&#xe62e;</span>
					<a href="">网站导航</a>
					<span class="iconfont arrow">&#xe62e;</span>
				</li>

			</ul>
		</div>
		
		<!-- 头部广告 -->
		<div id="headAd">
			<div class="layer clearfix">
				<a href=""><img src="images/go.png" ></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="">
							<a href="" class="fr"><img src="images/adimg_01.jpg" ></a>
							<h3><a href="">电视会场</a></h3>
							<p><a href="">最高降2000</a></p>
						</a>
					</li> -->
				</ul>
			</div>
		</div>
		
		
		
		<!-- 头部搜索 -->
		<div id="headSearch">
			<div class="clearfix 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">&#xe62e;</span>
					<span class="c5">手机淘宝</span>
					<img src="images/code.png" alt="" >
				</div>
				
				<div class="search">
					<ul class="searchTab cleafix">
						<li class="active">宝贝</li>
						<li>天猫</li>
						<li>店铺</li>	
					</ul>
					
					<div class="searchContent clearfix">
						<form action="" method="">
							<div class="searchBox fl">
								<input type="text" >
								<div class="placeholder">
									<i class="iconfont">&#xe62e;</i>
									<span>网红裤腰带 9.9包邮</span>
									
								</div>
								<span class="iconfont imgSearch">&#xe62e;</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="">爬行垫</a>
						<a href="" class="c5">时尚连衣裙</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 class="fl">
				<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="firstScreem" 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">&#xe62e;</span>
						</li>
						<li>
							<a href="#">鞋靴</a> / <a href="#">箱包</a> / <a href="#">配件</a><span
								class="iconfont fr">&#xe62e;</span>
						</li>
						<li>
							<a href="#">童装玩具</a> / <a href="#">孕产</a> / <a href="#">用品</a><span
								class="iconfont fr">&#xe62e;</span>
						</li>
						<li>
							<a href="#">家电</a> / <a href="#">数码</a> / <a href="#">手机</a><span
								class="iconfont fr">&#xe62e;</span>
						</li>
						<li>
							<a href="#">美妆</a> / <a href="#">洗护</a> / <a href="#">保健品</a><span
								class="iconfont fr">&#xe62e;</span>
						</li>
						<li>
							<a href="#">珠宝</a> / <a href="#">眼镜</a> / <a href="#">手表</a><span
								class="iconfont fr">&#xe62e;</span>
						</li>
						<li>
							<a href="#">运动</a> / <a href="#">户外</a> / <a href="#">乐器</a><span
								class="iconfont fr">&#xe62e;</span>
						</li>
						<li>
							<a href="#">游戏</a> / <a href="#">动漫</a> / <a href="#">影视</a><span
								class="iconfont fr">&#xe62e;</span>
						</li>
						<li>
							<a href="#">美食</a> / <a href="#">生鲜</a> / <a href="#">零食</a><span
								class="iconfont fr">&#xe62e;</span>
						</li>
						<li>
							<a href="#">鲜花</a> / <a href="#">宠物</a> / <a href="#">农资</a><span
								class="iconfont fr">&#xe62e;</span>
						</li>
						<li>
							<a href="#">工具</a> / <a href="#">装修</a> / <a href="#">建材</a><span
								class="iconfont fr">&#xe62e;</span>
						</li>
						<li>
							<a href="#">家具</a> / <a href="#">家饰</a> / <a href="#">家纺</a><span
								class="iconfont fr">&#xe62e;</span>
						</li>
						<li>
							<a href="#">汽车</a> / <a href="#">二手车</a> / <a href="#">用品</a><span
								class="iconfont fr">&#xe62e;</span>
						</li>
						<li>
							<a href="#">办公</a> / <a href="#">DIY</a> / <a href="#">五金电子</a><span
								class="iconfont fr">&#xe62e;</span>
						</li>
						<li>
							<a href="#">百货</a> / <a href="#">餐厨</a> / <a href="#">家庭保健</a><span
								class="iconfont fr">&#xe62e;</span>
						</li>
						<li>
							<a href="#">学习</a> / <a href="#">卡券</a> / <a href="#">本地服务</a><span
								class="iconfont fr">&#xe62e;</span>
						</li>
					</ul>
				</div>
				
				
				<!-- 图片1容器 -->
				<div class="img1Box fr">
					<div class="pic fl">
						<div class="img">
							<a href="#"><img src="images/pic_01.jpg" ></a>
						</div>
						
						<button class="iconfont leftBtn">&#xe62e;</button>
						<button class="iconfont rightBtn">&#xe62e;</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" ></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" ></a><a href="#"><img src="images/pic_03.jpg" ></a>
						</div>
						
						<button class="iconfont leftBtn">&#xe62e;</button>
						<button class="iconfont rightBtn">&#xe62e;</button>
								
					</div>
					<div class="ad fr">
						<p class="title">今日特卖</p>
						<a href="#"><img src="images/ad_03.jpg" ></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" ></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" ></a>
					<p class="username">Hi!你好</p>
					<p class="members">
						
						<a href="#" class="gold">领淘金币抵钱</a>
						<a href="#" class="culb">会员俱乐部</a>
					</p>
					<div class="btn">
						<button class="login">登录</button>
						<button class="">注册</button>
						<button class>开店</button>
					</div>
					
				</div>
				
				<!-- 举报 -->
				<a href="#" class="tipOff">
					<span>网上有害信息举报专区</span>
					<i class="iconfont">&#xe62e;</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 clearfix">
						<h3 class="fl">阿里APP</h3>
						<a href="#" class="fr">更多></a>
					</div>
					<ul class="appIcon">
						<li><a href="#"><img src="images/app_01.png" 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 clearfix mt10">
			<!-- 有好货 -->
			<div class="goods fl">
				<div class="head clearfix">
					<h3 class="fl">
						<img src="images/goods.png" alt="有好货">
						<span class="iconfont">&#xf0144;</span>
						<i>与品质生活不期而遇</i>
					</h3>
					<a href="#" class="fr change">换一换</a>
				</div>
				<ul class="list">
					<li>
						<a href="#"><input type="image" src="images/shop_img_01.jpg" /></a>
						<h4><a href="#">max破产都要买的口红</a></h4>
						<p class="text"> <a href="#">《破产姐妹》max最爱tart哑光口红笔</a></p>
						<a href="#" class="comment">
							<span class="iconfont">&#xf0144;</span><i>5950人说好</i>
						</a>
					</li>
					<li>
						<a href="#"><input type="image" src="images/shop_img_02.jpg" /></a>
						<h4><a href="#">max破产都要买的口红</a></h4>
						<p class="text"> <a href="#">《破产姐妹》max最爱tart哑光口红笔</a></p>
						<a href="#" class="comment">
							<span class="iconfont">&#xf0144;</span><i>5950人说好</i>
						</a>
					</li>
					<li>
						<a href="#"><input type="image" src="images/shop_img_03.jpg" /></a>
						<h4><a href="#">max破产都要买的口红</a></h4>
						<p class="text"> <a href="#">《破产姐妹》max最爱tart哑光口红笔</a></p>
						<a href="#" class="comment">
							<span class="iconfont">&#xf0144;</span><i>5950人说好</i>
						</a>
					</li>
					<li>
						<a href="#"><input type="image" src="images/shop_img_04.jpg" /></a>
						<h4><a href="#">max破产都要买的口红</a></h4>
						<p class="text"> <a href="#">《破产姐妹》max最爱tart哑光口红笔</a></p>
						<a href="#" class="comment">
							<span class="iconfont">&#xf0144;</span><i>5950人说好</i>
						</a>
					</li>
					<li>
						<a href="#"><input type="image" src="images/shop_img_05.jpg" /></a>
						<h4><a href="#">max破产都要买的口红</a></h4>
						<p class="text"> <a href="#">《破产姐妹》max最爱tart哑光口红笔</a></p>
						<a href="#" class="comment">
							<span class="iconfont">&#xf0144;</span><i>5950人说好</i>
						</a>
					</li>
					<li>
						<a href="#"><input type="image" src="images/shop_img_06.jpg" /></a>
						<h4><a href="#">max破产都要买的口红</a></h4>
						<p class="text"> <a href="#">《破产姐妹》max最爱tart哑光口红笔</a></p>
						<a href="#" class="comment">
							<span class="iconfont">&#xf0144;</span><i>5950人说好</i>
						</a>
					</li>
				
				</ul>
			</div>
			<!-- 爱逛街 -->
			<div class="goods fl shopping">
				<div class="head cleafix">
					<h3 class="fl">
						<img src="images/shopping.png" alt="有好货">
						<span class="iconfont">&#xf0144;</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">&#xf0144;</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">&#xf0144;</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">&#xf0144;</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">&#xf0144;</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">&#xf0144;</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">&#xf0144;</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"></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>
		</div>
		
	</body>
</html>

3.3 index.css

/* 
	@规则
		@charset	设置样式表的编码
		@import 	导入其他样式文件 
		@meida  	媒体查询
		@font-face;	自定义字体
 */
@import url("reset.css");

@font-face {
	font-family: 'iconfont';
	/* 定义字体的名称 */

	src: url('../font/iconfont.ttf') format('truetype');
	/* 引入字体文件 */
	
}
.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: 5px;
}
#headMessage li strong{
	font-size: 12px;
	color: #F22E00;
}
#headMessage li span.store{
	font-size: 12px;
	color: #9c9c9c;
}
#headMessage li.line{
	font-size: 12px;
	color: #ddd;
	padding: 0 5px;
}

/* 头部广告 */
#headAd{
	background-color: #f12f04;
}

#headAd li{
	float: left;
}
#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;
	/* 使用怪异盒模型 */
}
#headAd li h3{
	font-size: 20px;
	line-height: 28px;
}
#headAd li p{
	font-size: 14px;
	line-height: 20px;
}
#headAd li a{
	color: white;
	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;
}

#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;
	background: pink;
	margin-right: 4px;
	text-align: center;
	color: #f40;
	cursor: pointer;
	
}
#headSearch .searchTab li.active{
	color: #fff;
	font-weight: bold;
	background-image: linear-gradient(to right,#ff9000,#ff5000);

	/* 滤镜
	 	filter
	 */
	border-radius: 6px 6px 0 0;
}
#headSearch .searchTab li:hover{
	background-color: #ffeee5;
}

#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 .searchBox .placeholder{
	position: absolute;
	top: 6px;
	left: 14px;
}
#headSearch .searchBox .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);
	
	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{
	/* width: 1900px; */
	width: calc(100% - 190px);
	/* 使用calc函数计算 */
	background-image: linear-gradient(to right,#ff9000,#ff5000);
}
#nav ul li{
	float: left;
	line-height: 30px;
	margin: 0 7px;
	font-size: 14px;
	color: #FFFFFF;
	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;
	padding-top: 5px;
	
	/* 盒模型 */
	border-top: none;
}
.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:hover{
	background: #ffe4dc;
	color: #f50;
}
.firstLeft .sideNav li:hover a{
	color: #f50;
}
.firstLeft .sideNav a:hover {
	text-decoration: underline;
}


.firstLeft .sideNav li span{
	font-size: 12px;
	margin-right: 5px;

}
/* 图片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;
	
	/* 整体透明 */
	
	/* 支持情况：IE9+ */
	background-color: rgba(0,0,0,0.3);
	
	/* 针对：IE9以下的浏览器 */
	background-color: #000\9;
	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{
	color: #FF5000;
}

.firstLeft .ad{
	width: 160px;
}
.firstLeft .ad img{
	width: 160px;
}

.firstLeft .img2Box{
	width: 690px;
	height: 220px;
	margin-top: 10px;
	
}

.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;
	color: #666;
}
.firstLeft .img2Box .picTitle .text i{
	color: #ff1648;
}

.firstLeft .img2Box .picTitle .line{
	height: 3px;
	background-color: #ff1648;
	position: relative;
}
.firstLeft .img2Box .picTitle .line span{
	position: absolute;
	left: 0;
	width: 87px;
	height: 3px;
	background-color: #000;
}
.firstLeft .img2Box .img{
	height: 200px;
	background-color: #fff;
	position: relative;
	width: 520px;
	
	/* 使用单元格的形式居中 */
	display: table-cell;
	vertical-align: middle;
	
	
	/* 使用css3弹性盒模型
	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 13px;
	
}
.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;
	text-align: center;
	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-color: #ffe4dc; */
}
.firstRight .user .members a.gold{
	/* 使用图片精灵的方法 */
	background: #ffe4dc url(../images/ico.png) 0 -572px no-repeat;
}
.firstRight .user .members a.culb{
	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;
	font-weight: bold;
	border-radius: 4px;
	color: #fff;
	border: none;
	background-image: linear-gradient(to right,#ff9000,#ff5000);
}
.firstRight .user .btn button.login{
	width: 92px;
	
}

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

.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;
	
	/* 定义列宽算法，fixed的计算方式为根据表格宽度自动计算列宽，每列的宽度为均分整个表格的宽度 */
	table-layout: 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-color: #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;
	
	
	
}
.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;
}
/* 爱逛街 */
.shopping .list li .text{
	height: 44px;
	line-height: 22px;
	font-size: 14px;
	overflow: hidden;
	margin-top: 11px;
}
.shopping .list li .text span{
	font-size: 14px;
	color: #ebebeb;
	position: relative;
	top: -5px;
}
.shopping .list li .text a:hover{
	color: #f40;
}
.shopping .list li .comment img{
	width: 22px;
	height: 22px;
	border-radius: 50%;
}
.shopping .list li .comment{
	color: #999;
}


/* 右侧固定定位导航 */
#tool{
	width: 50px;
	height: 350px;
	/* background-color: #f00; */
	position: fixed;
	top: 200px;
	right: 5%;
	
/* 	border: 1px solid ; */
}

#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;
}

3.4 reset.css

body,p,h1,h2,h3,h4{
	margin: 0;
}
ul{
	padding: 0;
	margin: 0;
	list-style: none;
}

img{
	border: none;
	vertical-align: middle;
}

a{
	text-decoration: none;
	color: #3c3c3c;
}
table{
	border-collapse: collapse;
	/* 边框模式 */
}
th,td{
	padding: 0;
}
i{
	font-style: normal;
}

input{
	margin: 0;
	padding: 0;
}

button{
	outline: none;
}

body{
	font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
	color: #3c3c3c;
	background-color: #f4f4f4;
} 
/* 设置默认字体的格式。\5b8b\4f53是万国码中的宋体表示 */

.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;
}

.mt10{
	margin-top: 10px;
}

.mr10{
	margin-right: 10px;
}

.mr7{
	margin-right: 7px;
}

.mr5{
	margin-right: 5px;
}

.c6{
    color: #8d7afb;
}
.c7{
    color: #a8c001;
}

四、总结

前端好难！

至尊皇堡
关注
  • 2
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Web前端静态页面.zip
05-11
《Web前端静态页面详解——构建仿淘宝网站》 在当今互联网世界中，Web前端开发扮演着至关重要的角色，它负责用户在浏览器端看到的界面和交互。本篇将深入探讨一个名为“Web前端静态页面.zip”的压缩包，该包包含了...
html+css仿静态淘宝页面
11-02
本资源为广大html初学者提供源码，经vscode测试可正常运行。刚学前端，错误在所难免，还望广大网友斧正。
网页设计作业基于HTML+CSS实现淘宝页面首屏静态网页源码.zip
07-07
网页设计作业基于HTML+CSS实现淘宝页面首屏静态网页源码.zip网页设计作业基于HTML+CSS实现淘宝页面首屏静态网页源码.zip网页设计作业基于HTML+CSS实现淘宝页面首屏静态网页源码.zip网页设计作业基于HTML+CSS实现淘宝页面首屏静态网页源码.zip网页设计作业基于HTML+CSS实现淘宝页面首屏静态网页源码.zip网页设计作业基于HTML+CSS实现淘宝页面首屏静态网页源码.zip网页设计作业基于HTML+CSS实现淘宝页面首屏静态网页源码.zip 【备注】 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！有问题请及时沟通交流。 2、适用人群：计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。 3、用途：项目具有较高的学习借鉴价值，不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 4、如果基础还行，或热爱钻研，亦可在此项目代码基础上进行修改添加，实现其他不同功能。 欢迎下载，沟通交流，互相学习，共同进步！
使用html+css实现一个静态页面（含源码）
最新发布
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
05-21 404
1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑
超详细实现淘宝静态页面(附全部代码)
x1037490413的博客
09-12 2万+
文章目录一:基本结构与样式 一:基本结构与样式 1.划分结构的顺序是自上而下,从左往右,保证内容在一行内能显示 2.考虑的因素有内容,颜色块,间距
淘宝网首页仿写(html+css+js）
weixin_46811890的博客
08-10 2万+
【代码】淘宝网首页仿写(html+css+js）
html + css 实现淘宝首页（静态页面）
王大傻的博客
05-16 1万+
html + css 实现淘宝首页（静态页面） 待续。。。 效果图： html代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>淘宝网 - 淘！我喜欢</title> <link rel="s
淘宝静态页面（HTML + CSS）
08-22
此项目是课余事件练习pc端页面编写能力的，仿淘宝页面，还原度十分逼真，大家可以利用起来里面有很多有用的练习内容大家可以尝试做成活得，省得自己写页面了！！
前端入门 HTML+css实现静态淘宝
12-23
在IT行业中，前端开发是构建互联网应用不可或缺的一部分，它涉及到用户与网站交互的界面设计和实现。本教程将带你入门前端开发，通过HTML和CSS来实现一个静态的淘宝页面，帮助你理解这两种语言的基本概念和实际应用...
仿淘宝静态页面
11-23
"仿淘宝静态页面"项目提供了一个让前端新手实践和理解复杂电商网页布局的好机会。这个项目包含了完整的HTML和CSS代码，以及所有必要的资源图片，为初学者提供了实际操作的素材。 首先，我们要了解HTML（HyperText ...
淘宝—静态网页.zip
01-06
适合一些刚学习完html和css的新手
仿淘宝电商网站管理系统前端静态页面(html+jquery+css)(含毕业设计论文及源码)
05-03
整套电子商城静态模板，包含登录、注册、商城主页、商品详情、购物车、订单信息等等...非常精美的一整套静态网站模板 摘要·······································································Ⅰ 1 绪论····································································3 1.1 项目开发背景·····················································3 1.2 开发的研究目的和意义············································4 1.2.1 开发的研究目的············································4 1.2.2 开发的研究意义············································4 2 项目介绍·············································
html静态网页（淘宝网）
09-16
html静态网页（taobao网首页及附页）
淘宝静态页面源码.7z
05-18
前端入门学习项目的源码，可以下载仿造学习使用。完成这个项目最后在一周的时间内可以完成。完成的此项目需求技术：html css 基本语法即可。但是建议先自己安装自己的思路做一遍，在来看源码进行学习，效果会更好。
仿淘宝网html网页模板_学写静态网页模板参考
01-28
仿淘宝网html网页模板_学写静态网页模板参考
淘宝部分静态网页
01-19
在淘宝静态网页中，CSS文件可能包含淘宝特有的品牌色彩、字体选择、按钮样式以及网格系统等元素。通过学习这些CSS代码，开发者可以了解到如何创建一个美观且功能丰富的电商界面。 "images"目录则保存了网页中使用的...
仿淘宝电商官网静态页面（HTML+CSS+JS）+ 常见布局解析，学会如果做是关键！
热门推荐
余光的博客
09-20 2万+
作为一个前端开发，基础页面布局和样式是必备，我们拿电商具体（模块、丰富度）都足够 第一版本 这一无论从布局到样式到UI都较老（因为是自己入门时写的） 如果大家感兴趣可以下载下来看看。。。献丑了最近会抽时间改几版 代码下载 github仓库下载 或加我QQ565017805 第二版本（未完待续） 190921最近会抽时间重构一版电商网站的静态布局，布局思路会贴近仅了解HTML+CSS的朋友们...
HTML+CSS 仿淘宝静态首页
小柒的前端之旅
03-19 1万+
学完HTML和CSS需要有一个好的练习，仿淘宝等首页都是一个不错的练习方法，目前处于学习原生js阶段，学html+css时没有做一个像样的项目，现在边学js边将前面的基础部分打牢。 里面很多地方可以用js写，轮播图这一块以及有些ul里面的li需要动态创建 之后都会进行修改。 html部分 <!DOCTYPE html> <html lang="en"> <head&g...
x-xss-protection 静态资源
09-08
x-xss-protection是一个HTTP头部字段，用于告知浏览器是否启用内置的跨站脚本攻击（XSS）策略保护机制。它主要用于保护用户浏览器免受恶意脚本的攻击。 当设置为0时，表示不启用任何XSS保护机制，浏览器会直接接受并执行潜在的恶意脚本。当设置为1时，表示启用浏览器的内置XSS保护机制，即使检测到潜在的XSS攻击也会阻止执行恶意脚本。如果设置为1; mode=block，则表示在检测到潜在的XSS攻击时，浏览器会终止加载当前页面并阻止执行任何脚本，从而全面保护用户的安全。 对于静态资源，如图片、样式表、脚本文件等，设置x-xss-protection可以加强对这些资源的XSS防护。当浏览器在加载静态资源时，如果x-xss-protection被设置为1或1; mode=block, 则浏览器不仅会对页面执行XSS保护机制，还会对这些静态资源进行同样的保护。这可以减少恶意脚本注入静态资源的风险，从而提高用户的安全性。 总之，对于静态资源，使用x-xss-protection可以加强浏览器的XSS保护机制，保护用户浏览器免受恶意脚本攻击的威胁。建议在网站开发中使用x-xss-protection头部字段并设置为1或1; mode=block，以提高用户的安全性。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值