本文详细介绍了CSS中的精灵图技术，包括其原理、优点及使用步骤，并展示了背景图片大小调整、文字阴影和盒子阴影的实现。此外，还探讨了网页加载速度优化和SEO策略，包括网页标题、描述和关键词的设置。同时，讲解了如何创建过渡效果以提升用户体验，以及在实际项目中文件和目录的组织结构。最后，文章提供了版心样式、快捷菜单和主导航的CSS实现示例。
一、CSS样式补充
1.1 精灵图
1、什么是精灵图
项目中将多张小图片，合并成一张大图片，这张大图片称之为精灵图。
2、优点：
减少服务器发送次数，减轻服务器的压力，提高页面加载速度。
举例子：
需要在网页中展示8张小图片；
• 8张小图片分别发送 → 发送8次
• 合成一张精灵图发送 → 发送1次
3、使用步骤
首先，创建一个盒子；
再，通过PxCook量取小图片大小，将小图片的宽高设置给盒子；
然后，将精灵图设置为盒子的背景图片；
最后，通过PxCook测量小图片左上角坐标，分别取负值设置给盒子的background-position：xy
精灵图的标签都用行内标签，比如span、b、i；
<style>
span {
display: inline-block;
width: 18px;
height: 24px;
background-color: pink;
background-image: url(./images/taobao.png);
/* 背景图位置属性: 改变背景图的位置 */
/* 水平方向位置 垂直方向的位置 */
/* 想要向左侧移动图片, 位置取负数; */
background-position: -3px 0;
}
b {
display: block;
width: 25px;
height: 21px;
background-color: green;
background-image: url(./images/taobao.png);
background-position: 0 -90px;
}
</style>
</head>
<body>
<!-- <img src="./images/taobao.png" alt=""> -->
<!-- 精灵图的标签都用行内标签 span, b, i -->
<span></span>
<b></b>
</body>1.2 背景图片大小
设置背景图片的大小可以用background-size：宽度 高度；
对于contain属性，如果图的宽或高与盒子的尺寸相同了, 另一个方向停止缩放，导致盒子可能有留白；
对于cover属性，保证宽或高和盒子尺寸完全相同 , 导致图片显示不全；
但在工作中，图的比例和盒子的比例都是相同的, contain 和cover效果完全相同。
1.3 文字阴影
给文字添加阴影效果，吸引用户注意；
属性名：text-shadow
1.4 盒子阴影
给盒子添加阴影效果，吸引用户注意，体现页面的制作细节
属性名：box-shadow
这六个属性用空格隔开，分别按顺序书写，没写必须的就是不用必须写；
h-shadow水平位置，v-shadow垂直位置；
blur模糊程度；
spread阴影的尺寸，也就是说这个阴影是多少像素的；
没写内外阴影，默认外阴影；如果是外阴影不可以添加outset，就不写这个属性，就用默认；
像这种装饰性的，比如阴影啥的，就写在最后。定位、浮动、display写在最前面，然后写盒子模型相关的，再写文字样式相关的，最后写阴影这种装饰性的内容。
1.5 过渡
让元素的样式慢慢的变化，常配合hover使用，增强网页交互体验；
属性名：transition
谁变化，就在谁身上写transition；千万别在hover上写！
<style>
/* 过渡配合hover使用, 谁变化谁加过渡属性 */
.box {
width: 200px;
height: 200px;
background-color: pink;
/* 宽度200, 悬停的时候宽度600, 花费1秒钟 */
/* transition: width 1s, background-color 2s; */
/* 如果变化的属性多, 直接写all,表示所有 */
transition: all 1s;
}
.box:hover {
width: 600px;
background-color: red;
}
</style>
</head>
<body>
<div class="box"></div>
</body>二、项目前置认知
2.1 网页和网站
在互联网中，网站类似于是一本书，网页就是这本书的每一页
• 比如：淘宝、京东、黑马程序员等就是一个网站，类似于是一本书；
• 这些网站中的每一个网页，如：主页、登录页面、商品页面就是每一个单独的页面，类似于每一页纸；
• 多个同主题网页整合在一起，就称之为网站。
2.2 骨架结构标签
就是感叹号+tab，可以生成的那一大段代码就叫做骨架；
1、文档类型声明，告诉浏览器该网页的 HTML版本，默认都是5；
注意点：DOCTYPE需要写在页面的第一行，不属于HTML标签
2、
lang就是语言，language,en就是English，zh-CN是中文；
作用：搜索引擎归类 + 浏览器翻
3、
这个就是编码，一般都用utf-8；
4、下面这个是用于兼容的代码
<meta http-equiv="X-UA-Compatible" content="IE=edge">5、宽度 = 设备宽度 : 移动端网页的时候要用
<meta name="viewport" content="width=device-width, initial-scale=1.0">2.3 SEO三大标签
1、什么是SEO?
搜索引擎优化,Search Engine Optimization;让网站在搜索引擎上的排名靠前.
提升SEO的常见方法： 1. 竞价排名
2. 将网页制作成html后缀
3. 标签语义化（在合适的地方使用合适的标签）
4. ……
2、SEO的三大标签
title：网页标题标签
description：网页描述标签
keywords：网页关键词标签
<!-- meta:desc -->
<meta name="description" content="京东JD.COM-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。">
<!-- meta:kw -->
<meta name="keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东">
<title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title>3、有语义的标签有：
2.4 ico图标
显示在网页title的字的前面的小图标，使用.ico格式的图标；
在title下面写link标签，.ico图片放在根目录！
插播：
1、版心类名常用：container、wrapper、w；
2、开发中推荐多用类 + 后代，但不是层级越多越好，一个选择器中的类选择器的个数推荐 不要超
三、项目结构搭建
3.1 文件和目录准备
1. 新建项目文件夹 xtx-pc-client，在VScode中打开；这样命名的含义：pc表示的意思是这个网页是电脑端，不是手机端，client意思是这个网页给客户端使用；
• 在实际开发中，项目文件夹不建议使用中文
• 所有项目相关文件都保存在 xtx-pc-client 目录中
2. 复制 favicon.ico 到 xtx-pc-client 目录；
• 一般习惯将ico图标放在项目根目录
3. 复制 images 和 uploads 目录到 xtx-pc-client 目录中；
• images ：存放网站 固定使用 的图片素材，如：logo、样式修饰图片… 等
• uploads：存放网站 非固定使用 的图片素材，如：商品图片、宣传图片…等
4. 新建 index.html 在根目录；
5. 新建 css 文件夹保存网站的样式，并新建以下CSS文件：
• base.css：基础公共样式（把默认样式清除的代码放到这个文件夹）
• common.css：该网站中多个网页相同模块的重复样式，如：头部、底部
• index.css：首页样式
3.2 基础公共样式
1、在html中引入css，采用link标签引入，引入的顺序必须是base，common，index（对于首页是index，如果是其他的页面就写其他的名字）。因为如果前后都写了同一个样式，写在后面的外链式样式表生效；
<link rel="stylesheet" href="./css/base.css">
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./css/index.css">2、SEO三大标签要放进去；
<meta name="description" content="小兔鲜儿官网，致力于打造全球最大的食品、生鲜电商购物平台。">
<meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物">
<title>小兔鲜儿-新鲜、惠民、快捷！</title>3、加ico图标
在title下面写link;
把.ico文件放在根目录，输入link自然就会提示.ico的名字，然后选中他就可以了；
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">4、在base.css中写清除默认样式的代码
/* 清除默认样式的代码 */
/* 去除常见标签默认的 margin 和 padding */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
dl,
dt,
dd,
input {
margin: 0;
padding: 0;
}
/* 內减模式 */
* {
box-sizing: border-box;
}
/* 设置网页统一的字体大小、行高、字体系列相关属性 */
body {
font: 16px/1.5 "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei",
"Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
color: #333;
}
/* 去除列表默认样式 */
ul,
ol {
list-style: none;
}
/* 去除默认的倾斜效果 */
em,
i {
font-style: normal;
}
/* 去除a标签默认下划线，并设置默认文字颜色 */
a {
text-decoration: none;
color: #333;
}
/* 设置img的垂直对齐方式为居中对齐，去除img默认下间隙 */
img {
vertical-align: middle;
}
/* 去除input默认样式 */
input {
border: none;
outline: none;
color: #333;
}
/* 左浮动 */
.fl {
float: left;
}
/* 右浮动 */
.fr {
float: right;
}
/* 双伪元素清除法 */
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
5、在common.css中写版心；
/* 版心 */
.wrapper {
width: 1240px;
margin: 0 auto;
}下图中，红色圈起来的叫快捷菜单（取类名的时候叫shortcut）；蓝色圈起来的叫主导航；
/* 清除a的边框线: 最后一个li里面的a */
.shortcut .wrapper li:last-child a {
border: 0;
}对于header中的logo:
之前学的是使用h1>a>img，现在用一种可以增加浏览器搜索优化的方法；
使用h1>a>文字，a标签中放入文字，这个文字的font-size设置为0，把logo图当作背景图放入a标签。（注意，a 的大小设置为h1的大小，为了便于区分，在h1前面再加一个名为logo的父级）
<div class="logo">
<h1><a href="#">小兔鲜儿</a></h1>
</div>.header {
height: 70px;
margin : 30px auto;
}
.header .logo {
float: left;
width: 207px;
height: 70px;
}
.header h1 {
width: 207px;
height: 70px;
}
.header h1 a {
/* 这里不可以写inline-block */
display: block;
width: 207px;
height: 70px;
background-image: url(../images/logo.png);
background-size: contain;
font-size: 0;
}在common.css中，写快捷菜单、header，footer。
3.3 做banner图
做banner中的图，用ul>li>a，做图下面的圆点，用ol>li，加精灵图可以配合伪元素。
扫一扫
1006
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
