实训案例淘宝案例

最新推荐文章于 2024-01-27 14:26:22 发布

YUZ1223

最新推荐文章于 2024-01-27 14:26:22 发布

阅读量822

点赞数

分类专栏：实训案例文章标签： css html

本文链接：https://blog.csdn.net/YUZ1223/article/details/104227738

版权

实训案例专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文是关于淘宝首页的实训案例，涵盖了Div选择、样式重置、Unicode码、预定义样式、@规则等内容。讲解了如何设置字体、清除浮动、浮动布局、标题图标、Base标签的使用以及广告部分的H标签策略等，旨在提升前端开发技能。

摘要由CSDN通过智能技术生成

在这里插入图片描述

实训案例:淘宝首页

1. Div的独立选择

如果是独立的层最好添加id
通用的层使用上class

<!-- 头部信息 -->
<div id="headMessage">
</div>
<!-- 头部广告 -->
<div id="headAd">
</div>
<!-- 头部搜索框 -->
<div id="search">
</div>
<!-- 首屏内容 -->
<div id="firstScreen">
</div>
<!-- 有好货于爱逛街 -->
<div id="layer">
</div>
<!-- 右侧固定定位导航 -->
<div id="tool">
</div>

2. 样式重置和样式模块化

几乎是每一个网站都会使用样式重置
去除一些标签默认的样式

body,p,h1,h2,h2,h3,h4{
	/*去除以上标签的margin值*/
	margin: 0;
}

Tip:这里注意如果标签原本没有带样式,就不重置,重新设置新的标签重置
例如这里的ul标签才有padding/list-style,所以这里用分别重置

ul{
	/*重置ul标签*/
	margin: 0;
	padding: 0;
	/*去除style黑点*/
	list-style: none;
}
img{
	/*去除图片边框,ie可显示*/
	border: none;
	/*去除图片留白*/
	vertical-align: middle;
}
a{
	/*去除下划线*/
	text-decoration: none;
	/*设置淘宝颜色灰*/
	color: #3c3c3c;
}
i{
	/*去除i标签斜体*/
	font-style: normal;
}
input{
	/*去除input标签原带有的margin和padding*/
	margin: 0;
	padding: 0;
}
button{
	/*去除button标签原带有的margin和padding*/
	margin: 0;
	padding: 0;
	/*去除获取焦点过程中蓝色的框*/
	outline: none;/*比较特殊获取焦点html默认的会提示蓝色框,这里去除效果*/
}

3. 添加样式

很多网站在默认的时候都会通用设置字体,通常是一条

字体大小+行高+字体样式1+字体样式2+字体1+字体2

font:12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif

行高上可以设置五个样式

Line-height:normal;
Line-height:1.5;
Line-height:200%;
Line-height:50px;
Line-height:5em;

但是,由于

微软雅黑默认的行高大概在1.32 宋体默认的行高大概在 1.41

所以在项目过程中重置字体行高的很重要,
一般设置字体大小px的值,因为px是绝对值不计算,较为统一
一般设置字体行高使用数字的值,因为父子级继承结果不一样,所以在body中会设置行高固定值,
其他单位是相对值等于:

计算方法:原有标签像素*值,

Tip:如果是百分比样式行高,子级是不会继承计算,而是直接使用父级计算出来的值
如果是设置数字,子级也会参与计算,这样不会导致字体重叠,所以优先选择:

Line-height:1.5;

i. Unicode码(字符集)

Unicode码为任何一个语言和任何一个值使用了独立的二维码
一般在设计中,中文文字样式会转化为Unicode码
例如:

宋体
\5b8b\4f53(去u)
微软雅黑
\u5fae\u8f6f\u96c5\u9ed1(不去u)

使用原因:

因为在js交互的过程中不能使用中文,需要转化为Code,不会发生bug

4. 预定义样式

1) 预定义清除浮动

.clearfix:after{
	content: '';
	display:  block;
	clear: both;
}

2) 预定义左右浮动

.fl{
	float: :left;/*(标签左浮动,直接调用class=fl即可)*/
}
.fr{
	float: :right; /*(标签右浮动,直接调用class=fr即可)*/
}

3) 预定义设置整体标签宽度和居中

.leayer{
	width: 1190px;
	margin: 0 auto;
}
/*(预定义class= leayer 元素标签都是居中对齐,宽位1190px)*/

4) 预定义常用颜色预定义

.c4{
	color: #f40;

}
/*预定义class= c.4 元素标签都是color: #f40;*/
.c5{
	color: #f50;
}
/*预定义class= c.5 元素标签都是color: #f50;*/

5) 预定义常用margin值

.mt10{
	margin-top: 10px;
}
/*(预定义class=mt10 元素标签都是top: 10px;)*/
.mr10{
	margin-right: 10px;
}
/*(预定义class=mr10 元素标签都是right: 10px;)*/

5. @规则

@charset  		设置样式表的编码
@import			导入其他样式文件
@media			媒体查询(查询用户手机适配)
@font-face		自定义字体

@规则好处在于公司统一使用,模块化开发的优点

6. 开始项目—标题

Title图标:

<link rel="icon" href="favicon.ico"><!--固定模式,图标最好放在根目录-->
	<div id="headMessage" class="clearfix">
		<ul class="fl">
			<li>
				<span>中国大陆</span>
				<span></span><!--预留位下拉图标-->
			</li>
			<li>
			<a href="#">亲,请登陆</a>
			<a href="#">免费注册</a>
			</li>
			<li>
			<a href="#">手机逛淘宝</a>
			</li>
		</ul>
		<ul class="fr">
			<a href="#">我的淘宝</a>
			<span></span><!--预留位下拉图标-->
			<li>
				<span></span><!--预留位购物车图标-->
				<a href="#">购物车</a>
				<strong>0</strong>
				<span></span><!--预留位下拉图标-->
			</li>
			<li>
				<a href="">
					<span></span><!--预留位收藏图标-->收藏夹
				</a>
				<span></span><!--预留位下拉图标-->
			</li>
			<li>
				<a href="#">商品分类</a>
			</li>
			<li>|</li>
			<li>
				<a href="#">千牛卖家中心</a>
				<span></span>
			</li>
			<li>
				<a href="#">联系客服</a>
				<span></span><!--预留位下拉图标-->
			</li>
			<li>
				<span></span><!--预留位导航图标-->
				<a href="#">网站导航</a>
				<span></span><!--预留位下拉图标-->
			</li>
		</ul>
		</div>

Tips:Font-face(通过自定义字体设置自定义图标)例如♥★
通过https://www.iconfont.cn/制作下载
@ Font-face调用字体库
Woff2/woff
网页字体 Eot IE
私有格式 TTF 常见系统格式(字体文件比较大)
Svg 图形技术,根据图片转化文字 Format固定网页特殊文字格式让浏览器加载

7. Base标签

用于定义文档包含所有url的根目录,定义url的根目录,
一个页面只能出现一个

<base href="/img" target="_blank">
<!--新页面打开-->

8. 头部信息与个人习惯有关系

有些选择id有些选择class
/*一般设计就只有三种颜色/字体大小/行号*/
不需要重复定义,清除默认li标签中的font-size,然后再后面的子标签中单独设定font-size,这样可以做到独立调控

9. 广告部分

能不嵌套就不嵌套原则,为了速度和爬虫效率

为什么在广告中选择H3标签:h标签和SEO有关系,爬虫是有选择性的索引数据中,标签的有权重关系,当用户搜

一个关键字的时候,和title匹配程度,title的权重最高,接下来H1>H2>H3>H4>H5>H6 标题使用延伸

H1:标题一般使用H1标签,而且会使用logo带名称的做法,
H1标签一个页面只出现一次
H2:H2标签一般作为副标题,主题市场,
H3:H3标签多用于板块标题
H4:板块标题多使用H4
H5/6:使用频率较少,板块中嵌套小板块的标签和副标题

<a>标签中不能再嵌套<a>标签 W3C标准规定,客户体验差
<!--Tip:移动端较为特殊,会使用-->
<a>标签嵌套,因为手指接触面积比较大

盒模型拓展

标准盒模型总宽度=border(左右)+width+padding(左右) 总高度= border(上下)+height+padding(上下)
IE 盒模型(怪异盒模型) 总宽度= width 总高度= height

box-sizing: border-box;

用于适配盒子模型,不用再次计算适配

10. 头部搜索

布局技巧,先写需要浮动的左右标签,这样他们就脱离的文档流, 再写搜索框这样搜索框会自动的居中在左右标签中

1) 以图换字技巧

text-indent: -9999px;
	overflow: hidden;

2) CSS渐变

background-image: linear-gradient(to right,#ff9000,#ff5000);
/* 支持方向:IE10+ */

3) 输入框透明色

background-color: transparent;

11. 导航内容

双导航栏设计:计算函数

width: calc(100%-190px);

任意的单位都可以计算,单位不需要统一,支持加减乘除运算,运算过程中必须要有空格支持范围:IE9+

Hover显示图标通过伪类选择器

#nav ul li:hover::before{
	content: '';
	position: absolute;
	width: 23px;
	height: 13px;
	background-image: url(../img/ico_01.gif);
	top: -13px;
	left: 50%;
	margin-left: -12px;
}

12. 首屏内容

导航内容知识点

过渡效果

transition: background-color 0.5s;

颜色部分透明效果

background-color: rgba(0,0,0,0.3)

rgb设置颜色,a设置透明度 IE9+支持

单元格居中办法

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

弹性盒模型

justify-content: space-around;/*水平*/
align-items: center;/*垂直*/
/*弹性盒模型 IE 10+ */

雪碧图CSS sprite(能减少图片大小和请求次数)

.firstRight .user .members a.gold{
	background: #ffe4dc  url(../img/ico.png) 0 -572px no-repeat;
}
.firstRight .user .members a.club{
	background: #ffe4dc  url(../img/ico.png) 0 -528px no-repeat;
}

0 -572px 0 -528px用位置选择图片

表格制图

.firstRight .icon td span{
	display: block;
	width: 24px;
	height: 34px;
	margin: 0 auto;
	background:url(../img/ico.png) no-repeat;
}
.firstRight .icon td i{
	line-height: 34px;
	color: #333;
}
.firstRight .icon .item1 span{
	background-position: 0 0; 
}