一、CSS样式补充
1.1 精灵图
多张小图片合并成一张大图片,这张大图片称之为精灵图
优点:减少服务器的发送次数,减轻服务器压力
步骤:
创建一个盒子,设置盒子尺寸和小图尺寸一致
将精灵图设置为盒子的背景图片
修改背景图的位置(background-position)
<!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>Document</title>
<style>
.phone{
display: inline-block;
width: 18px;
height: 24px;
background-color: pink;
background-image: url(./taobao.png);
background-position: -3px 0;
}
.pig{
display: inline-block;
margin-left: 5px;
width: 24px;
height: 21px;
background-color: pink;
background-image: url(./taobao.png);
background-position: 0 -89px;
}
</style>
</head>
<body>
<span class="phone"></span>
<span class="pig"></span>
</body>
</html>
1.2 背景图片大小
属性名:background-size
属性值:
数字+px | 规定长款 |
百分比 | 相对于当前盒子自身的宽高百分比 |
contain | 包含,将图片等比例缩放,直到不超出盒子的最大 |
cover | 将图片等比例缩放直到填满整个盒子没有空白 |
<!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>Document</title>
<style>
.box{
width: 400px;
height: 300px;
background-color: pink;
background-image: url(./1.jpg);
background-repeat: no-repeat;
/* background-size: 300px; */
/* background-size: 50%; */
/* 盒子的宽和高较小的那个可以适应图片的尺寸 */
/* 此例中背景图变成300*300 */
/* background-size: contain; */
/* 盒子宽和高较大的 那个可以适应图片的尺寸 */
/* 现在背景图变成400*400 */
background-size: cover;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
1.3 background属性连写
background: color image repeat position/size;
position和size只能写一个,另一个如果要写就单列出来再写
1.4 文字阴影
属性名:text-shadow
属性值:水平偏移值 垂直偏移值 模糊半径 阴影颜色
1.5 盒子阴影
属性值:box-shadow
属性值:
1.6 过渡
让元素样式慢慢变化,提升交互体验,一般配合hover使用
属性名:transition
属性值:
<!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>Document</title>
<style>
.box{
height: 100px;
width: 200px;
color: skyblue;
margin: 50px auto;
border: 1px solid skyblue;
line-height: 100px;
text-align: center;
transition: all 1s;
}
.box:hover{
background-color: skyblue;
color:white;
border-radius: 50px;
}
</style>
</head>
<body>
<div class="box">开始</div>
</body>
</html>
二、项目前置认知
2.1 骨架结构标签
<!-- 文档类型说明,告诉浏览器该网页的HTML版本 下面就是HTML5 -->
<!DOCTYPE html>
<!-- 标识网页使用的语言 zh-CN/en 中/英 -->
<html lang="en">
<head>
<!-- 规定网页的字符编码 -->
<!-- UTF-8 万国码 GB2312 6000+汉字 GBK 20000+汉字 -->
<meta charset="UTF-8">
<!-- 解决IE浏览器兼容 IE已经无了 -->
<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>
2.2 SEO搜索引擎优化
作用: 让网页在在搜索引擎的排名更靠前
提升SEO方法:
- 竞价排名
- 将网页制作成.html后缀
- 标签语义化
SEO三大标签
- title 网页标题
- description 网页描述
- keywords 网页关键词
2.3 图标设置
写在标签页标题左侧的小图标
三、项目结构搭建
1.1 文件和目录准备
1. 新建项目文件夹 xtx-pc-client,在VScode中打开
- 在实际开发中,项目文件夹不建议使用中文
- 所有项目相关文件都保存在 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:首页样式