ToB企服应用市场:ToB评测及商务社交产业平台

标题: Web网页项目实战-----小兔鲜儿项目 [打印本页]

作者: 大号在练葵花宝典 时间: 2025-1-1 00:21
标题: Web网页项目实战-----小兔鲜儿项目
本网站是一个电商网站，重要由Html、CSS、JS来完成，实现的功能重要是可以购买产品，展示产品，查看订单等功能，结果如下，如有需要项目代码的可以私信我，或者文章底下批评，我给分享原项目和资源文件

一、项目样式补充

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

学习路径：

1.精灵图

1）精灵图的介绍
a.场景：项目中将多张小图片，归并成一张大图片，这张大图片称之为精灵图
b.优点：减少服务器发送次数，减少服务器的压力，提高页面加载速率
2）精灵图的利用步调
a.创建一个盒子，设置盒子的尺寸和小图尺寸雷同
b.将精灵图设置为盒子的背景图片
c.修改背景图位置
通过PxCook测量小图片左上角坐标，分别取负值设置给盒子的background-position:x y

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span {
display: inline-block;
width: 18px;
height: 24px;
background-color: pink;
background-image: url(images/taobao.png);
/* 背景图位置属性，改变背景图的位置 */
/* 水平方向位置垂直方向的位置 */
/* 想要左侧移动图片，位置取负数 */
background-position: -3px 0px;
}
</style>
</head>
<body>
<span></span>
</body>

复制代码

2.背景图片大小

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

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
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; */
/* 工作中，图的比例和盒子的比例是相同的 */
}
</style>
</head>
<body>
<div class="box"></div>
</body>

复制代码

设置为contain的结果为当图片的宽度或者是高度等于了盒子的宽度和高度中最小的那个的时候，就停止缩放了

设置为cover的时候，显示结果为按比例缩放，直到填充到整个盒子，所以会显示不全

4）background连写拓展
a.完备连写：background:color image repeat position/size;
b.注意点：background-size和background连写同时设置时，需要注意覆盖问题
c.解决：
要么单独的样式写连写的下面
要么单独的样式写在连写的内里
3.文字阴影

4.盒子阴影

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: pink;
/* box-shadow: 5px 10px 20px 10px green inset; */
box-shadow: 5px 10px 20px 10px green;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

复制代码

5.过渡

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

4）注意点：
a.过渡需要：默认状态和hover状态样式不同，才能有过渡结果
b.transition属性给需要过渡的元素本身加
c.transition属性设置在不同的状态中，结果是不同的
给默认状态设置，鼠标移入移出都有过渡结果
给hover状态设置，鼠标移入有过渡结果，移出没有过渡结果

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.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:green;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

复制代码

二、项目前置认知

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

学习路径：

1.网页和网站的关系

网站是由多个网页构成的
2.骨架布局标签

1）DOCTYPE文档说明

<!DOCTYPE html>

复制代码

文档范例声明，告诉浏览器该网页的HTML版本，上面的说明是H5版本
2）网页语言

<html lang="en">

复制代码

a.标识网页利用的语言
b.作用：搜索引擎归类+浏览器翻译
c.常见语言：zh-CN中文简体/en英文
3）字符编码（UTF-8）

<meta charset="UTF-8">

复制代码

a.标识网页利用的字符编码
b.作用：生存和打开的字符编码需要同一设置，否则可能会出现乱码
c.常见字符编码：
UTF-8:万国码，国际化的字符编码，收录了全国语言的文字
GB2312:6000+汉字
GBK:200000+汉字
注意点：开发中同一利用UTF-8字符编码即可
3.SEO三大标签

1）SEO（Search Engine Optimization）：搜索引擎优化
2）作用：让网站在搜索引擎上的排名靠前
3）提拔SEO的常见方法：
a.竞价排名
b.将网页制作成html后缀
c.标签语义化（在符合的地方利用符合的标签）
4）SEO三大标签

<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>京东-正品低价</title> <meta name="description" content="京东JD.COM-专业的综合网上购物商城,为您提供正品低价的购物选择、优质便捷的服务体验。商品来自环球数十万品牌商家,席卷家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类"> <meta name="keywords" content="网上购物，手机，家电，服装，居家"></head><body> </body></html>

复制代码

4.ico图标设置

1）场景：显示在标签页标题左侧的小图标，风俗利用.ico格式的图标
2）常见代码：

<link rel="shortcut icon" href="favicon.ico">

复制代码

需要注意的是rel内里必须是shortcut icon，不能是从前引入css的

5.版心

三、项目布局搭建

目标：能够利用专业方式完成项目布局搭建和基础公共样式

学习路径：

1.文件和目录预备

1）新建项目文件夹xtx-pc-client，在VSCode中打开
a.在实际开发中，项目文件夹不建议利用中文
b.全部项目相关文件都生存在xtx-pc-client目录中
2）复制favicon.ico到xtx-pc-client目录中
a.一样平常风俗将ico图标放在项目根目录
3）复制images和uploads目录到xtx-pc-client目录中
a.imgaes：存放网站固定利用的图片素材，如：logo、样式装饰图片…等
b.uploads：存放网站非固定利用的图片素材，如：商品图片、宣传图片…等
4）新建index.html在根目录
5）新建css文件夹生存网站的样式，并且新建以下CSS文件
a.base.css：基础公共样式
b.common.css：该网站中多个网页雷同模块的重复样式，如：头部、底部
c.index.css首页样式