8、综合项目小兔鲜项目

作者: 奶油裙子 | 来源:发表于2023-04-26 10:54 被阅读0次

一、项目样式补充

目标：能够使用精灵图，能够给元素添加阴影效果，能够让元素完成过渡效果

1、精灵图的介绍

（1）场景：项目中将多张小图片，合并成一张大图片，这张大图片称之为精灵图
（2）优点：减少服务器发送次数，减轻服务器的压力，提高页面加载速度
（3）例如：需要在网页中展示8张小图片
• 8张小图片分别发送 → 发送8次
• 合成一张精灵图发送 → 发送1

2、精灵图的使用步骤

创建一个盒子，设置盒子的尺寸和小图尺寸相同
将精灵图设置为盒子的背景图片
3.修改背景图位置
通过PxCook测量小图片左上角坐标，分别取负值设置给盒子的background-position：x y

<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>
    <!-- 精灵图的标签都用行内标签 span,b,i -->
    <span></span>

    <b></b>
</body>

运行结果：

3、背景图片大小

（1）作用：设置背景图片的大小，
（2）语法：background-size：宽度高度；
（3）取值：

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

    <style>
        div{
            width: 400px;
            height: 300px;
            background-color: pink;
            background-image: url(./images/1.jpg);
            background-repeat: no-repeat;
            /* background-size: 300px; */
            /* background-size: 50%; */
            /* 如果图的宽或高与盒子尺寸相同了，另一个方向停止缩放--导致盒子可以有留白 */
            /* background-size: contain; */
            /* 保证宽或高和盒子尺寸完全相同，导致图片显示不完全 */
            background-size: cover;

            /* 工作中，图的比例和盒子的比例都是相同的，contain和cover效果完全相同 */
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>

运行结果：

4、background连写拓展

（1）完整连写：background：color image repeat position/size
(一般background-size喜欢单独写)
（2）注意点：
• background-size和background连写同时设置时，需要注意覆盖问题
（3）解决：

要么单独的样式写连写的下面
要么单独的样式写在连写的里面

5、文字阴影

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

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

拓展：
• 阴影可以叠加设置，每组阴影取值之间以逗号隔开

6、盒子阴影

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

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

注意：外阴影，不能添加outset，添加了会导致属性报错，如果是外阴影，就不写inset就好。任何可选属性不设置，就写0。

<style>
        .box{
            width: 200px;
            height: 200px;
            background-color: pink;

            box-shadow: 5px 10px 20px 10px green inset;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>

7、过渡

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

参数	取值
过渡的属性	all:所有能过渡的属性过渡、具体属性名如：width：只有width有过渡
过渡的时长	数字+s(秒)

（4）注意点：

过渡需要：默认状态和 hover状态样式不同，才能有过渡效果
transition属性给需要过渡的元素本身加
transition属性设置在不同状态中，效果不同的
① 给默认状态设置，鼠标移入移出都有过渡效果
② 给hover状态设置，鼠标移入有过渡效果，移出没有过渡效果

    .box{
            /* 过渡配合hover使用 谁变化谁加过渡属性*/
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 宽度200，宽度600，花费1秒钟 */
            /* transition: width 1s , background-color 2s; */
            transition: all 1s;

            /* 如果变化的属性多，直接写all,表示所有 */
        }
        .box:hover{
            width: 600px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>

二、项目前置认知

目标：能够知道SEO三大标签，能够设置网页的ico图标 ，能够书写版心公共类代码

1、生活中的例子

（1）网页：相当于是每页纸
（2）网站：相当于一本书籍
• 用户翻阅的时候，看的是每页纸上的内容
• 由多页纸整合在一起，就是完整的一本书籍了

2、网页与网站的关系

在互联网中，网站类似于是一本书，网页就是这本书的每一页
• 比如：淘宝、京东、黑马程序员等就是一个网站，类似于是一本书
• 这些网站中的每一个网页，如：主页、登录页面、商品页面就是每一个单独的页面，类似于每一页纸
• 多个同主题网页整合在一起，就称之为网站

3、网页与网站的概念

（1）网页：网站中的每一“页” 。例如：淘宝的主页、淘宝的登录页、淘宝的商品页等。
（2）网站：提供特定服务的一组网页集合。例如：百度、淘宝、京东、黑马程序员等；

4、DOCTYPE文档说明

（1）<!DOCTYPE html>文档类型声明，告诉浏览器该网页的 HTML版本

（2）注意点：DOCTYPE需要写在页面的第一行，不属于HTML标签

5、网页语言

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

6、字符编码（了解）

<!DOCTYPE html>
<!-- 中文网站 -->
<html lang="zh-CN">
<head>
    <!-- charset-set="UTF-8" 规定网页的字符编码 -->
    <meta charset="UTF-8">
    <!-- 解决ie浏览器兼容性  ie(兼容性差)/edge -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 宽度 = 设备宽度 ：移动端网页的时候要用 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

7、SEO简介

（1）SEO（Search Engine Optimization）：搜索引擎优化
（2）作用：让网站在搜索引擎上的排名靠前
（3）提升SEO的常见方法：
<1>竞价排名
<2>将网页制作成html后缀
<3>标签语义化（在合适的地方使用合适的标签）
<4>……

8、SEO三大标签

（1）title：网页标题标签
（2）description：网页描述标签

（3）keywords：网页关键词标签

<!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="京东JD.COM-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。">
    <meta name="keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东">
    <title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title>
</head>
<body>
    
</body>
</html>

9、（拓展补充）有语义的布局标

10、ico图标设置

 <title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title>
    <!-- link:favicon -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

11、版心的介绍

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

（3）代码：

（4）注意点：
• 版心类名常用：container、wrapper、w 等

12、（拓展补充） CSS书写顺序

（1）衡量程序员的能力，除了要看实现业务需求的能力，还要看平时书写代码的规范（专业性）

（2）不同的CSS书写顺序会影响浏览器的渲染性能，推荐前端工程师使用专业的书写顺序习惯

（3）注意点：

• 开发中推荐多用类 + 后代，但不是层级越多越好，一个选择器中的类选择器的个数推荐不要超过 3 个

三、项目结构搭建

目标：能够使用专业方式完成项目结构搭建和基础公共样式

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、基础公共样式

（1）场景：一般项目开始前，首先会去除掉浏览器默认样式，设置为当前项目需要的初始化样式
（2）作用：防止不同浏览器中标签默认样式不同的影响，统一不同浏览器的默认显示效果，方便后续项目开发
（3）要求：
• 已经准备好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;
}

4、index页面骨架

按顺序引入：外链式样式表后写的生效

    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">

8、综合项目小兔鲜项目

一、项目样式补充

1、精灵图的介绍

2、精灵图的使用步骤

3、背景图片大小

4、background连写拓展

5、文字阴影

6、盒子阴影

7、过渡

二、项目前置认知

1、生活中的例子

2、网页与网站的关系

3、网页与网站的概念

4、DOCTYPE文档说明

5、网页语言

6、字符编码（了解）

7、SEO简介

8、SEO三大标签

9、（拓展补充）有语义的布局标

10、ico图标设置

11、版心的介绍

12、（拓展补充） CSS书写顺序

三、项目结构搭建

1、文件和目录准备

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

3、基础公共样式

4、index页面骨架

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

8、综合项目 小兔鲜项目

一、项目样式补充

1、精灵图的介绍

2、精灵图的使用步骤

3、背景图片大小

4、background连写拓展

5、文字阴影

6、盒子阴影

7、过渡

二、项目前置认知

1、生活中的例子

2、网页与网站的关系

3、网页与网站的概念

4、DOCTYPE文档说明

5、网页语言

6、字符编码（了解）

7、SEO简介

8、SEO三大标签

9、（拓展补充） 有语义的布局标

10、ico图标设置

11、版心的介绍

12、（拓展补充） CSS书写顺序

三、项目结构搭建

1、文件和目录准备

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

3、基础公共样式

4、index页面骨架

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

8、综合项目小兔鲜项目

9、（拓展补充）有语义的布局标