项目样式补充
精灵图（场景：项目中将多张小图片，合并成一张大图片，这张大图片称之为精灵图）
（优点：减少服务器发送次数，减轻服务器的压力，提高页面加载速度）
精灵图的使用步骤：1.创建一个盒子，设置盒子的尺寸和小图片尺寸相同
2.将精灵图设置为盒子的背景图片
3.修改背景图位置（通过PxCook测量小图片左上角坐标，分别取负值设置给盒子的background-position: x y）
背景图片大小（作用：设置背景图的大小）（background-size: 宽度 高度）
取值 场景
数字+px 简单方便，常用
百分比 相当于当前盒子自身的宽高百分比
contain 包含，将背景图片等比例缩放，直到不会超出盒子的最大
cover 覆盖，将背景图片等比例缩放，直到刚好填满整个盒子没有空白
/* background-size: 300px; */
/* background-size: 50%; */
/* 如果图的宽或高与盒子尺寸相同了，另一个方向停止缩放 -- 导致盒子可能留白 */
background-size: contain;
/* 如果宽或高和盒子尺寸完全相同，导致图片显示不全 */
/* background-size: cover; */
/* 工作中，图的比例和盒子的比例都是相同的 contain cover效果完全相同 */
background连写拓展（background: color image repeat position/size）
background-size和background连写同时设置时，需要注意覆盖问题
解决： 1.要么单独的样式写连写的下面 2.要么单独的样式写在连写的里面
盒子阴影：作用：给盒子添加阴影效果，吸引用户注意，体现页面的制作细节（box-shadow）
取值 参数 作用
h-shadow 必须，水平偏移量。允许负值
v-shadow 必须，垂直偏移量。允许负值
blur 可选，模糊度
spread 可选，阴影扩大
color 可选，阴影颜色
inset 可选，将阴影改为内部阴影
/* box-shadow: 5px 10px 20px 10px green inset; */
/* 注意：如果是外阴影不能添加outset 添加类会报错 */
过渡作用：让元素的样式慢慢的变化，常配合hover使用，增强网页交互体验（属性名：transition）
常见取值 参数 取值
过渡的属性 all: 所有能过渡的属性都过渡、具体属性名：width：只有width有过渡
过渡的时长 数字+s（秒）
注意： 1.过渡需要：默认状态和hover状态样式不同，才能有过渡效果
2.transition属性给需要过渡的元素本身加
3.transition属性设置在不同状态下、效果不同的（给默认状态设置，鼠标移入移出都有过渡效果，给hover状态设置，鼠标移入有过渡效果，移出没有过渡效果）
/* 过渡配合hover使用 ,谁变化给谁加过渡属性*/
骨架结构标签
（1）DOCTYPE文档说明
<!DOCTYPE html>文档类型说明，告诉浏览器该网页的HTML版本（HTML5）
（2）网页语言
<html lang="en"> 标识网页使用的语言（作用：搜索引擎归类+浏览器翻译）（常见语言：zh-CN简体中文/en中文）
（3）字符编码
<meta charset="UTF-8">标识网页使用的字符编码
作用：保存和打开的字符编码需要统一设置，否则可能会出现乱码
常见字符编码： 1.UTF-8：万国码，国际化字符编码，收录了全球语言的文字
2.GB2312：6000+汉字
3.GBK：20000+汉字
注意：开发中统一使用UTF-8字符编码即可
SEO（Search Engine Optimization）：搜索引擎化
作用：让网站在搜索引擎上的排名靠前
提升SEO的常见方法：1.竞价排名2.将网页制作成html后缀3.标签语义化（在合适的地方使用合适的标签）4........
SEO三大标签：1.title：网页标题标签
2.description：网页描述标签
3.Keywords：网页关键词标签
ico图标设置（场景：显示在标签页标题左侧的小图标，习惯使用.ico格式的图标）
浏览器标题栏图标
<link rel="shortcut icon" href="ico图片路径" type="image/x-icon">
项目结构搭建
1.文件和目录准备
（1）新建项目文件夹（实际开发中，项目文件夹不建议使用中文，所有相关文件都放在项目目录中）
（2）复制favicon.ico到项目文件夹中（根目录）
（3）新建images和upload目录到项目文件夹中（images：存放网站固定使用的图片素材，如：logo、样式修饰图片...等）（uploads：存放网站非固定使用的图片素材，如：商品图片、宣传图片...等）
（4）新建index.html在根目录
（5）新建css文件夹保存网站的样式，并新建以下CSS文件：（base.css：基础公共样式）（common.css：该网站中多个网页相同模块的重复样式，如：头部、底部）（index.css：首页样式）
2.基础公共样式
3.index页面骨架
优化搜索引擎的做法：
logo：
<div class="logo">
<h1><a href="#">小兔鲜儿</a></h1>
</div>
/* 目的让h1里面的文字看不见 */
font-size: 0;
行内标签 /* 绝对定位：盒子具备行内块特点 */
随机推荐
- Java基于内存的消息队列实现
Java基于内存的消息队列实现 有需要源码的同学可以去Gitee上下载: https://gitee.com/hyxl-520/memory_message_queue 先看测试情况 需求背景 需求来 ...
- P8622 [蓝桥杯 2014 国 B] 生物芯片
简要题意 有 \(N\) 个二进制数,编号为 \(1\sim N\),初始时都是 \(0\).博士进行了 \(N-1\) 次操作,在第 \(i\) 次操作时,会将 \(1\sim N\) 中所有编号为 ...
- 题解CF893C Rumor
思路 竟然朋友之间可以传递故事,那么,我们设两两有间接或直接的朋友关系的为一个友好集合,那么我们只要每一个友好集合买一次就好了. 那应该怎么买呢?由于题面让我们求的是[最少的价钱],那我们可以考虑每一 ...
- P7960 [NOIP2021] 报数
简要题意 小Z在玩报数游戏,这个游戏有一个规则,就是对于一个正整数 \(x\),如果满足 \(7 \mid x\) 或 \(x\) 的十进制写法中含有 \(7\) 或是十进制写法含有 \(7\) 的倍 ...
- 如何理解scanf（“%d %d”，a，b）==2和scanf（“%d”，a）=1【摘抄笔记ψ(._. )>】
scanf 函数有一个返回值,0表示接受输入失败,1表示接受输入成功. while(scanf("%d",&x)==1) 的意思就是: 当接收输入变量x的值成功的时候,继续 ...
- 合并JSON文件
下面是一段简单地代码 用来减少工作量合并代码 <!DOCTYPE html> <html lang="en"> <head> <meta ...
- 实操记录之-----Ant Design of Vue 增强版动态合并单元格，自动根据数据进行合并，可自定义横纵向合并
前几天搞了个简易版的动态合并单元格 但是需求有变化,就只能稍微改改了~~ 欢迎路过的各位大佬指出我代码的问题~~~~ 另: 代码执行效率不是很高,如果需要大量渲染更多数据建议可以直接使用原生 < ...
- Python 内置界面开发框架 Tkinter入门篇 乙
本文大概 1685 个字,阅读需花 6 分钟内容不多, 但也花了一些精力如要交流, 欢迎关注我然后评论区留言 谢谢你的点赞收藏分享 这篇文章属于系列文章<Python 内置界面开发框架 Tkin ...
- 练习_请使用日期时间相关的API
练习_请使用日期时间相关的API 练习:请使用日期时间相关的APi,计算出一个人已经出生了多少天.分析:1.使用scanner类中的方法next,获取出生日期2.使用DateFormat类中的方法pa ...
- MySQL 合并查询join 查询出的不同列合并到一个表中
为了求解问题时思路清晰,建议先分列查询,再将列合并到一个表中,这样相当于将复杂问题拆解为简单问题,一一解决.优点是避免所有问题混在一起,代码逻辑清晰,可迁移性强,下次遇到类似的查询问题能快速求解,缺点 ...
