10-项目前置样式+项目搭建

biank trrrry

已于 2022-07-29 19:33:39 修改

阅读量220

点赞数

分类专栏： HTML+CSS学习笔记文章标签： html css 前端

于 2022-07-29 19:32:05 首次发布

本文链接：https://blog.csdn.net/weixin_69705761/article/details/126017089

版权

HTML+CSS学习笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一、项目样式补充

1.精灵图

(将项目中的多张小图片合成一张大图片,称这张大突破为精灵图)

优点:减少服务器发送次数,减轻服务器压力了,提高页面加载速度
- 8张小图片分别发送——发送8次
- 合成一张精灵图发生——发送1次
使用步骤：
- 创建一个盒子，设置盒子的尺寸和小图尺寸相同
- 将精灵图设置为盒子的背景图片
- 修改背景图位置。通过pxcook测量小图左上角图标，分别取负值设置给盒子的background-position:xy
一般精灵图的标签:行内标签

<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>
        span{

            display: inline-block;
            width: 18px;
            height: 24px;
            /* background-color: pink; */
            background-image: url(./images/taobao.png);
            /* 背景图位置属性 */
            background-position: -3px 0;
        }

    </style>
</head>
<body>
    <!-- <img src="./images/taobao.png" alt=""> -->
    <!-- 一般精灵图的标签:行内标签 -->
    <span></span>
</body>

(移动效果)

2.背景图片大小

（背景图小于盒子，往往会平铺复制多张背景图铺满盒子。而我们需要一张背景图铺满）

设置背景图片大小

background-size:宽度高度

数字+px	简单方便常用
百分比	相对于当前盒子自身的宽高百分比
contain	包含将背景图片等比例缩放直到不会超出盒子的最大
cover	覆盖将背景图片等比例缩放，直到刚好填满整个盒子没有空白

3.文字阴影

text-shadow

h-shadow	必须水平偏移量允许负值
v-shadow	必须垂直偏移量允许负值
blur	可选模糊度
inset	可选将阴影改为内部阴影

4.盒子阴影

（给盒子添加阴影效果，吸引用户注意，体现页面的制作细节）

box-shadow

h-shadow	必须水平偏移量允许负值
v-shadow	必须垂直偏移量允许负值
blur	可选模糊度
spread	可选阴影扩大
color	可选阴影颜色
inset	可选将阴影改为内部阴影

5.过渡

（让元素的样式慢慢的变化，常配合hover使用，增强网页交互体验）

transition

过渡的属性

all：所有能过渡的属性都过渡

（具体属性名如：width：只有width过渡）

过渡的时长

数字+ s（秒）

注意：

过渡需要：默认状态和 hover状态样式不同，才能有过渡效果
transition属性给需要过渡的元素本身加
transition属性设置在不同状态中，效果不同
- 给默认状态设置，鼠标移入移出都有过渡效果
- 给hover状态设置，鼠标移入有过渡效果，移出没有过渡效果

    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: pink;

            /* transition: width 1s,background-color 2s; */
            transition: all 2s;
            /* 如果变化的属性多,all表示所有 */
        }
        .box:hover{
            width: 600px;
            background-color: red;
        }

    </style>

二、项目前置认知

1.网页与网站的关系

网页：相当于是每页纸
网站：相当于一本书籍

2.骨架结构标签

1）DOCTYPE文档说明

<!DOCTYPE html>文档类型声明，告诉浏览器该网页的 HTML版本
注意点：DOCTYPE需要写在页面的第一行，不属于HTML标签

2）网页语言

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

3）字符编码（了解）

标识网页使用的字符编码
作用：保存和打开的字符编码需要统一设置，否则可能会出现乱码
常见字符编码：
- UTF-8：万国码，国际化的字符编码，收录了全球语言的文字
- GB2312：6000+ 汉字
- GBK：20000+ 汉字
注意点：开发中 统一使用 UTF-8 字符编码 即可

<!-- html版本 -->
<!DOCTYPE html>
<!-- 标识 网页 使用的 语言 -->
<html lang="en">
<head>
    <!-- charset="UTF-8"规定网页的字符编码 -->
    <meta charset="UTF-8">

    <!-- ie(兼容性差) / edge -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- 宽度=设备宽度 : 移动端网页的时候要用 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>