HTML与CSS学习第8天

HTML与CSS学习第八天

在这里插入图片描述

1. 项目样式补充（精灵图，阴影效果，过渡效果）

1.1.1 精灵图

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

在这里插入图片描述

1.1.2 精灵图的使用

步骤：
1. 创建一个盒子
2. 通过pxcook量取小图片大小，设置盒子大小为小图片大小
3. 设置精灵图为盒子的背景图片
4. 通过pxcook量取小图片左上角坐标，分别取负值设置给盒子的background-position：x，y

示例

 <!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>
        /* 清除默认边距 */
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            /* 设置宽高为小图片大小 */
            width: 24px;
            height: 24px;
            /* 设置背景图片为精灵图 */
            background-image: url("images/taobao.png");
            /* 设置位置为精灵图左上角坐标的负值 */
            background-position: 0 -264px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</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>
        /* 清除默认边距 */
        *{
            padding: 0;
            margin: 0;
        }
 
        div{
            width: 400px;
            height: 300px;
            /* 填充背景图片 */
            background-image: url("images/1.jpg");
            /* 不平铺 */
            background-repeat: no-repeat;
            /* 边框 */
            border: 1px solid #000;
            /* overflow: visible; */
            margin: 100px auto;
        }
 
        /* background-size */
        /* 1.宽度，高度 */
 
        
        div:nth-child(2){
            background-size: 400px 300px;
        }
 
        div:nth-child(3){
            /* 2.百分比，相对于div盒子宽高百分比 
            设置一个相对于宽高相同的百分比*/
            background-size: 100% 100%;
        }
 
        div:nth-child(4){
            /* contain 等比例缩放，放大到不超出盒子 */
            background-size: contain;
        }
 
        div:nth-child(5){
            /* 等比例缩放，填满整个盒子 */
            background-size: cover;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

效果图

在这里插入图片描述

1.3 背景图片连写扩展

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

示例

 <!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>
        /* 清除默认边距 */
        *{
            margin: 0;
            padding: 0;
        }
 
        .box{
            width: 400px;
            height: 300px;
            border: 1px solid #000;
            /* background属性连写形式 */
            background: url('images/1.jpg') no-repeat center center/400px 400px;
        }
    </style>
</head>
<body>
    <div class="box">
 
    </div>
</body>
</html>

效果图

在这里插入图片描述

1.4 文字阴影

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

参数作用
h-shadow 必须，水平偏移量，允许负值
v-shadow 必须，垂直偏移量，允许负值
blur 可选，模糊度
color 可选，阴影颜色
拓展
- 阴影可以叠加设置，每组阴影之间以逗号隔开

示例

 <!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>
        /* 清除默认边距 */
        *{
            padding: 0;
            margin: 0;
        }
 
        .box{
            font-size: 100px;
            font-weight: 700;
            text-align: center;
            line-height: 300px;
            /* 设置阴影 */
            text-shadow: 10px 10px 6px green, 20px 20px 6px red;
        }
    </style>
</head>
<body>
    <div class="box">
        我是大傻逼
    </div>
</body>
</html>

效果图

在这里插入图片描述

注意点

可以使用调试工具调节阴影的各项数值，调好后在写入代码中

1.5 盒子阴影

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

属性值

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

示例

 <!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>
        /* 清除默认边距 */
        *{
            margin: 0;
            padding: 0;
        }
 
        .box{
            width: 400px;
            height: 400px;
            background-color: pink;
            /* border: 100px solid #000; */
            /* 盒子阴影，自然包括盒子边框 */
            /* 设置盒子阴影属性 */
            box-shadow: 10px 10px 4px 100px green inset;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

效果图

在这里插入图片描述

1.6 过渡

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

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

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

注意点

过渡需要：默认状态和hover状态的样式不同，才有过渡效果
transition需要给要过渡的元素添加
transition属性设置在不同状态中，效果不同
1. 给默认状态设置，鼠标移入移出都有过渡
2. 给hover状态设置，鼠标移入有过渡，移出无过渡

示例

 <!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>
        /* 清除默认边距 */
        *{
            margin: 0;
            padding: 0;
        }
 
        .box{
            width: 400px;
            height: 400px;
            background-color: pink;
            /* 设置过渡，可以多重设置 */
            transition: width 1s ,background-color 1s;
        }
 
        .box:hover{
            width: 600px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="box">
 
    </div>
</body>
</html>

效果图

在这里插入图片描述

2. 项目前置认知

2.1 网页和网站

网站：提供特定服务的一组网页集合
网页：网站中的每一页

2.2 骨架结构标签

2.2.1 DOCTYPE文档说明

```
 <!DOCTYPE html>
```
文档类型说明，告诉浏览器该网页的HTML版本

注意点

DOCTYPE需要写在页面的第一行，不属于HTML标签

2.2.2 网页语言

 <html lang="en">         识别网页使用的语言

作用：搜索引擎归类+浏览器翻译
常见语言：zh-CN简体中文/en英文

2.2.3 字符编码

 <meta charset="UTF-8">     识别网页使用的字符编码

作用：保存和打开的字符编码需要统一设置，否则可能会出现乱码
常见的字符编码：
1. UTF-8：万国码，国际化的字符编码，收录了全球语言的文字
2. GB2312：6000+汉字
3. GBK：20000+汉字

注意点

开发中统一使用UTF-8编码即可

2.3 SEO简介

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

2.3.1 SEO三大标签

title：网页标题标签
description：网页描述标签
keywords：网页关键词标签

在这里插入图片描述

2.4 ico图标设置

场景：显示在标签页标题左侧的小图标，习惯用.ico格式的图标

代码：

     <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">

效果图

在这里插入图片描述

2.5 版心的介绍

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

代码：

 .container{
            width: 1240px;
            margin: 0 auto;
        }

版心的常用类名：container，wrapper，w

2.6 CSS属性书写顺序

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

顺序	类别	属性
1	布局属性	display，position，float，clear，visiblity，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

注意点

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

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文件
1. base.css:基础公共样式
2. common.css:该网站中多个网页相同模块的重复样式，如头部，尾部
3. index.css：首页样式

结构图

在这里插入图片描述

3.2 基础公共样式

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

 /* 去除常见标签默认的margin和padding */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
dl,
dt,
dd,
input{
    margin: 0;
    padding: 0;
}
 
/* 设置网页统一的字体大小，行高，字体系列相关属性 */
body{
    font:16px/1.5 "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei",
    "Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;
}
 
/* 去除列表默认样式 */
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;
}

3.3 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">
    <title>小兔鲜儿-新鲜、惠民、快捷！</title>
    <meta name="description" content="小兔鲜儿官网，致力于打造全球最大的食品、生鲜电商购物平台。">
    <meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物">
    <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>
<body>
    
</body>
</html>

posted @ 2022-02-08 14:03 凌歆阅读(10) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· HTML与CSS学习第9天

· HTML与CSS学习第10天

· No.1.9

· CSS补充样式

· css样式补充，项目前置认知，精灵图，背景图片大小，阴影，过渡，SEO简介

公告

昵称：凌歆
园龄： 2年1个月
粉丝： 0
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

	<!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>
	/* 清除默认边距 */
	*{
	margin: 0;
	padding: 0;
	}
	.box{
	/* 设置宽高为小图片大小 */
	width: 24px;
	height: 24px;
	/* 设置背景图片为精灵图 */
	background-image: url("images/taobao.png");
	/* 设置位置为精灵图左上角坐标的负值 */
	background-position: 0 -264px;
	}
	</style>
	</head>
	<body>
	<div class="box"></div>
	</body>
	</html>

	<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">

	/* 去除常见标签默认的margin和padding */
	body,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	p,
	ul,
	ol,
	li,
	dl,
	dt,
	dd,
	input{
	margin: 0;
	padding: 0;
	}

	/* 设置网页统一的字体大小，行高，字体系列相关属性 */
	body{
	font:16px/1.5 "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei",
	"Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;
	}

	/* 去除列表默认样式 */
	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;
	}

HTML与CSS学习第8天

HTML与CSS学习第八天

目录

1. 项目样式补充（精灵图，阴影效果，过渡效果）

1.1.1 精灵图

1.1.2 精灵图的使用

示例

1.2 背景图片大小

示例

1.3 背景图片连写扩展

示例

1.4 文字阴影

示例

注意点

1.5 盒子阴影

示例

1.6 过渡

注意点

示例

2. 项目前置认知

2.1 网页和网站

2.2 骨架结构标签

2.2.1 DOCTYPE文档说明

注意点

2.2.2 网页语言

2.2.3 字符编码

注意点

2.3 SEO简介

2.3.1 SEO三大标签

2.4 ico图标设置

2.5 版心的介绍

2.6 CSS属性书写顺序

注意点

3. 项目结构搭建

3.1 文件和目录准备

步骤

3.2 基础公共样式

3.3 index页面骨架

公告

搜索

常用链接

我的标签

随笔分类 (68)

随笔档案 (142)

阅读排行榜