样式补充（精灵图、背景图片、阴影），项目前置认知、结构搭建

最新推荐文章于 2024-10-06 15:01:40 发布

自动花钱机

最新推荐文章于 2024-10-06 15:01:40 发布

阅读量477

点赞数

分类专栏：前端入门CSS3 文章标签： css css3 html 前端 visual studio code

本文链接：https://blog.csdn.net/hs_2017112123/article/details/127879329

版权

前端入门CSS3 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

一、网页制作

根目录

图片文件夹：images
样式文件夹：CSS
首页：index.html
<link rel="stylesheet" href="./CSS/index.css">

二、项目样式补充

1. 精灵图

场景：项目中将多张小图片，合并成一张大图片，这张大图片称之为精灵图
优点：减少服务器发送次数，减轻服务器的压力，提高页面加载速度

精灵图的使用步骤

创建一个盒子，设置盒子的尺寸和小图尺寸相同
将精灵图设置为盒子的背景图片

修改背景图位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS精灵图</title>
    <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>
</html>

2. 背景图片大小

作用：设置背景图片的大小
语法：background-size:宽度高度;

取值

取值	场景
数字+px	简单方便，常用
百分比	相对于当前盒子自身的宽高百分比
contain	包含，将背景图片等比例缩放，直到不会超出盒子的最大
cover	覆盖，将背景图片等比例缩放，直到刚好填满整个盒子没有空白

background连写拓展
- 完整连写：background:color image repeat position/size;
- 注意点：background-size和background连写同时设置时，需要注意覆盖问题
- 解决：
  1. 要么单独的样式写在连写的下面
  2. 要么单独的样式写在连写的里面

3. 文字阴影

作用：给文字添加阴影效果，吸引用户注意
属性名：text-shadow
取值

参数作用
h-shadow 必须，水平偏移量。允许负值
v-shadow 必须，垂直偏移量。允许负值
blur 可选，模糊度
color 可选，阴影颜色

4. 盒子阴影

作用：给盒子添加阴影效果，吸引用户注意，体现页面的制作细节
属性名：box-shadow

取值

参数	作用
`h-shadow`	必须，水平偏移量。允许负值
`v-shadow`	必须，垂直偏移量。允许负值
`blur`	可选，模糊度
`spread`	可选，阴影扩大
`color`	可选，阴影颜色
`inset`	可选，将阴影改为内部阴影

5. 过渡

作用：让元素的样式慢慢的变化，常配合hover使用，增强网页交互体验
属性名：transition
常见取值

参数取值
过渡的属性 all:所有能过渡的属性都过渡，具体属性名如：width：只有width有过渡
过渡的时长数字+s（秒）
注意点：
1. 过渡需要：默认状态和 hover状态样式不同，才能有过渡效果
2. transition属性给需要过渡的元素本身加
3. transition属性设置在不同状态中，效果不同的
  
  ① 给默认状态设置，鼠标移入移出都有过渡效果
  
  ② 给hover状态设置，鼠标移入有过渡效果，移出没有过渡效果

参数	取值
过渡的属性	`all`:所有能过渡的属性都过渡，具体属性名如：width：只有width有过渡
过渡的时长	数字+s（秒）

三、项目前置认知

1. 网站与网站的关系

2. 骨架结构标签

1）DOCTYPE文档说明

<!DOCTYPE html>文档类型声明，告诉浏览器该网页的HTML版本
注意点：DOCTYPE需要写在页面的第一行，不属于HTML标签

2）网页语言

<html lang="en">识网页使用的语言
作用：搜索引擎归类+浏览器翻译
常见语言：zh-CN 简体中文 / en 英文

3）字符编码（了解）

<meta charset="UTF-8">识网页使用的字符编码
作用：保存和打开的字符编码需要统一设置，否则可能会出现乱码
常见字符编码：
1. UTF-8：万国码，国际化的字符编码，收录了全球语言的文字
2. GB2312：6000+汉字
3. GBK：20000+汉字
注意点：开发中统一使用UTF-8字符编码即可

3. SEO三大标签

SEO（Search Engine Optimization）：搜索引擎优化
作用：让网站在搜索引擎上的排名靠前
提升SEO的常见方法：
1. 竞价排名
2. 将网页制作成html后缀
3. 标签语义化（在合适的地方使用合适的标签）
4. ……
SEO三大标签
- title：网页标题标签
- description：网页描述标签
- keywords：网页关键词标签

4. ico图标设置

场景：显示在标签页标题左侧的小图标，习惯使用.ico格式的图标
常见代码：<link rel="shortcut icon" href="ico图标路径" type="image/x-icon">

5. 版心

场景：把页面的主题内容约束在网页中间
作用：让不同大小的屏幕都能看到页面的主体内容

代码：

/* 版心 */
.container {
	width: 1240px;
	margin: 0 auto;
}

注意点：版心类名常用container、wrapper、w等

6. CSS书写顺序

顺序	类别	属性
1	布局属性	`display`、`position`、`float`、`clear`、`visibility`、`overflow`
2	盒子模型+背景	`width`、`height`、`margin`、`padding`、`border`、`background`
3	文本内容属性	`color`、`font`、`text-decoration`、`text-align`、`line-height`
4	点缀属性	`cursor`、`border-radius`、`text-shadow`、`box-shadow`

四、项目结构搭建

1. 文件和目录准备

新建项目文件夹xtx-pc-client，在VScode中打开
- 在实际开发中，项目文件夹不建议使用中文
- 所有项目相关文件都保存在xtx-pc-client目录中
复制favicon.ico到xtx-pc-client目录
- 一般习惯将ico图标放在项目根目录
复制images和uploads目录到xtx-pc-client目录中
- images：存放网站固定使用的图片素材，如：logo、样式修饰图片…等
- uploads：存放网站非固定使用的图片素材，如：商品图片、宣传图片…等
新建index.html在根目录
新建CSS文件夹保存网站的样式，并新建以下CSS文件：
- base.css：基础公共样式
- common.css：该网站中多个网页相同模块的重复样式，如：头部、底部
- index.css：首页样式

2. 完成后的目录及文件结构

3. 基础公共样式

场景：一般项目开始前，首先会去除掉浏览器默认样式，设置为当前项目需要的初始化样式
作用：防止不同浏览器中标签默认样式不同的影响，统一不同浏览器的默认显示效果，方便后续项目开发

4. index页面骨架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="小兔鲜儿官网，致力于打造全球最大的食品、生鲜电商购物平台。">
    <meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物">
    <title>小兔鲜儿-新鲜、惠民、快捷！</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <!-- 按顺序进入：外链式样式表后写的生效 -->
    <link rel="stylesheet" href="./CSS/base.css">
    <link rel="stylesheet" href="./CSS/common.css">
    <link rel="stylesheet" href="./CSS/index.css">
</head>