项目样式补充

精灵图（场景：项目中将多张小图片，合并成一张大图片，这张大图片称之为精灵图）

　　　（优点：减少服务器发送次数，减轻服务器的压力，提高页面加载速度）

精灵图的使用步骤：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;
行内标签  /* 绝对定位：盒子具备行内块特点 */

随机推荐

  1. 通过surging的后台托管服务编写任务调度并支持规则引擎自定义脚本

    简介 过去,如果在业务中需要处理任务调度的时候,大家都会使用第三方的任务调度组件,而第三方组件有一套自己的规则,在微服务的中显得那么格格不入,这样就会造成代码臃肿,耦合性高,如果有分布式还需要搭建新的 ...

  2. 远程登录到Linux服务器

    首先我们下载一个xshell,下载地址:https://www.xshell.com/zh/ 下载安装打开xshell 按快捷键alt + n进入新建窗口,输入自己的主机名,名称,说明等 双击点击左边 ...

  3. error: expected ‘)’ before ‘PRIx64’

    打印uint64时编译报错 printf("prefix:0x%"PRIx64"\n",ipv6Prefix); 解决办法:添加头文件 #include < ...

  4. 【转载】EXCEL VBA 选取非连续的单元格区域——Areas集合

    出处:http://www.360doc.com/content/21/1113/17/77710807_1004011085.shtml 前面我们讲的大多是**并操作单个的单元格,或者是连续的单元格 ...

  5. VMware搭建内网渗透环境

    网络结构: 攻击机:kali 192.168.1.103 DMZ区域:防火墙 WAN:192.168.1.104 LAN:192.168.10.10 winserver03 LAN:192.168.1 ...

  6. Excelize 2.7.0 发布, 2023 年首个更新

    Excelize 是 Go 语言编写的用于操作 Office Excel 文档基础库,基于 ECMA-376,ISO/IEC 29500 国际标准.可以使用它来读取.写入由 Microsoft Exc ...

  7. Java面试的一些面试题

    ​ 10<<2=? tip:10的二进制为1010,左移两位即:101000,换算为十进制为2的5次方加上2的三次方等于40 答:40 1.dr-xr-xr-r解释一下权限的含义 tip: ...

  8. 聊聊web漏洞挖掘第一期

    之前写2022年度总结的时候,有提到要给大家分享漏洞挖掘技巧.这里简单分享一些思路,更多的内容需要大家举一反三. 文章准备昨晚写的,昨天晚上出去唱歌,回来太晚了,耽搁了.昨天是我工作的last day ...

  9. TCP\ip 地址总结

    127.0.0.1 本地回环地址,一般用于测试网卡是否正常工作 192.168.1.0 代表网络地址一个网络段 192.168.1.1-254 可用网络地址 192.168.1.255 广播地址!  

  10. 【Java刷题】初始化List应该选择ArrayList还是LinkedList

    文章目录 前言 题目 解题思路 遇到的坑:ArrayList和LinkedList 未通过代码 通过代码 小结 ArrayList和LinkedList的区别 在刷题的时候应该如何选择 排序效率 测试 ...