小兔仙项目搭建

牧之瑞001

已于 2022-02-28 10:05:57 修改

阅读量1.4k

点赞数 2

文章标签： css css3 html

于 2022-02-14 15:59:23 首次发布

本文链接：https://blog.csdn.net/csdnlirui/article/details/122899626

版权

本文介绍了如何使用精灵图进行前端性能优化，包括精灵图的使用步骤和优势。同时，探讨了项目的基础认知，如DOCTYPE声明、字符编码、SEO优化策略，以及如何设置网页图标。并提到了项目结构的搭建和代码组织。

摘要由CSDN通过智能技术生成

一、项目样式补充

1.1精灵图

场景：多张小图合并成为一张大图，这张大图片称为精灵图。

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

1.2精灵图使用步骤

1.创建一个盒子，设置盒子的尺寸和小图尺寸相同。

2.将精灵图设置为盒子的背景图片。

3.修改背景图位置。 /*background-image：px px；*/

精灵图一般用行内标签-span-b-i 然后再修改css为块元素display：

2.1设置背景图片大小

background-size：宽度高度；

/*取值*/
数字+px         
百分比         当前盒子自身宽高比
contain       包含，将背景图片等比例缩放，不会超出盒子的最大尺寸
cover         覆盖，将背景图片等比例缩放，直到刚好填满整个盒子，没有空白

2.3background连写

background:color image repeat position/size;

4.1盒子阴影 box-shadow

h-shadow    /*必须，水平偏移，可以负值     px    */    
y-shadow    /*必须，垂直偏移，可以负值     px    */
blur        /*可选，模糊度                px    */
spread      /*可选，阴影扩大              px    */
color       /*可选，颜色*/
inset       /*可选，将阴影改为内部阴影*/

5.1过渡transition

配合hover使用，增强网页的交互体验。

过渡的属性    /*all：所有能过渡的属性都可过渡、ps：width：只有宽可以过渡*/
过渡的时长    /*数字+s（秒）*/
.box｛
    width：200px；
    height：300px；
    background：pink；
    transition：width 1s，background-color 2s；     /*变化少用具体属性，二选一*/
    transition:all 2s;                             /*变化多用all，工作中常用，二选一*/
｝
.box：hover｛
    width：700px；
    background-color:red;
    
｝

二、项目的前置认知

2.1骨架结构标签-DOCTYPE文档说明

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

2.2骨架结构标签-网页语言

<html lang="en"> 默认为英文常见zh-CN简体中文/en英文

2.3骨架结构标签-字符编码

3.1seo三大标签

seo（Search Engine Optimization）搜索引擎优化/*让网站在搜索引擎上排名靠前*/

提升seo常见方法：

1.竞价排名

2.将网页制作成html后缀

3.标签语义化（在核实的地方使用合适的标签）

4......

3.2标签语义化seo三大标签

1.title：网页标题标签

2.description：网页描述标签

3.keywords：网页关键词标签

4.1ico鼠标设置

三、项目结构搭建’

文件结构 + 一个lib文件夹，用来存框架，字体图标包等。

四、项目代码成品

html

<!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>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <!-- 快捷导航 -->
    <div class="shortcut">
        <div class="wrapper">
            <ul>
                <li><a href="#">请先登录</a></li>
                <li><a href="#">免费注册</a></li>
                <li><a href="#">我的订单</a></li>
                <li><a href="#">会员中心</a></li>
                <li><a href="#">帮助中心</a></li>
                <li><a href="#">在线客服</a></li>
                <li><a href="#"><span></span>手机版</a></li>
            </ul>
        </div>
    </div>
    <!-- 头部 -->
    <div class="header">
        <div class="wrapper">
            <div class="logo"><img src="./images/logo.png" alt=""></div>
            <div class="nav">
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">生鲜</a></li>
                    <li><a href="#">美食</a></li>
                    <li><a href="#">餐厨</a></li>
                    <li><a href="#">电器</a></li>
                    <li><a href="#">居家</a></li>
                    <li><a href="#">洗护</a></li>
                    <li><a href="#">孕婴</a></li>
                    <li><a href="#">服装</a></li>
                </ul>
            </div>
            <div class="search">
                <input type="text" placeholder="搜一搜">
                <span></span>
            </div>
            <div class="car">
                <span>2</span>
            </div>
        </div>
    </div>
    <!-- 轮播图 -->
    <div class="banner">
        <div class="wrapper">
            <div class="asaide">
                <ul>
                    <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
                    <li><a href="#">美食<span