小兔仙项目搭建

一、项目样式补充

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骨架结构标签-字符编码

<meta charset-"UTF-8">  规定网页的字符编码,万国码,收录了全球语言的文字。此外还有GB2312:6000+汉字、GBK:20000+汉字。

<meta http-eq等等 > 解决兼容问题。移动端网页用content=“width=device-width”/*宽度等于设备宽度*/

3.1seo三大标签

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

提升seo常见方法:

1.竞价排名

2.将网页制作成html后缀

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

4......

3.2标签语义化seo三大标签

1.title:网页标题标签

2.description:网页描述标签

3.keywords:网页关键词标签

4.1ico鼠标设置

<link rel="shortcut icon" href="ico图标路径" type="image/x/icon">

三、项目结构搭建’

文件结构 + 一个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&
  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
### 回答1: Vue小兔实战项目资源是指基于Vue.js框架开发的一个实战项目所需要的资源。这些资源包括前端开发所需的代码、组件、样式以及后端开发所需的API接口。 在Vue小兔实战项目中,前端开发人员可以根据规划的需求,维护项目的代码库。这些代码通常包含了Vue组件、路由、状态管理以及样式表等,用于实现项目的页面交互和展示效果。同时,开发人员还需要使用一些第三方库或插件来辅助开发工作,如axios进行网络请求、element-ui进行UI组件的使用等。 除了前端代码,后端开发人员还需要提供API接口来与前端进行数据交互。这些API接口通常包括用户登录注册、数据查询、数据修改等功能。后端开发人员可以使用各种技术栈来实现API接口,如Node.js、Java、Python等,具体选择根据项目需求和开发人员的技术栈来确定。 在实战项目中,还可能涉及到数据库的设计和维护。根据项目的需求,可以选择关系型数据库如MySQL或非关系型数据库如MongoDB等。 除了上述资源,还需要考虑项目开发和管理过程中所需的工具和环境。例如,版本控制工具Git用于代码的提交和管理,编辑器或开发环境如Visual Studio Code、WebStorm等用于编写代码,以及一些自动化构建工具如Webpack、Gulp等用于项目的打包和部署。 总之,Vue小兔实战项目资源包括前端代码、后端API接口、数据库、工具和环境等,这些资源的选择和使用需要根据项目的需求和开发人员的技术栈来确定。 ### 回答2: vue小兔是一个实战项目资源,它提供了一套完整的基于Vue框架的项目源码和相关文档,旨在帮助开发者学习和实践Vue技术。 该项目资源包含了项目的前端代码、后端代码以及数据库设计等相关内容,可以作为一个完整的项目示例进行学习和实践。项目代码中涵盖了常见的业务场景和功能,如用户登录、注册、商品管理、购物车、订单管理等。开发者可以通过阅读源码和文档,了解Vue的开发流程和各种常用技术,包括Vue组件、路由、状态管理等,从而提升自己的Vue开发能力。 除了项目源码外,项目资源中还有详细的文档和教程,包括项目的需求分析、系统设计、代码注释等,通过这些文档可以更加深入地了解项目的实现原理和技术细节。同时,还提供了一些常见问题的解答和一些实用的技巧,帮助开发者在实践项目时避免一些常见的错误和困惑。 总之,vue小兔实战项目资源是一个非常有价值的学习资料,它不仅可以帮助开发者快速入门Vue开发,还能够提供实战经验和项目开发的思路,对于想要提高自己Vue开发能力的开发者来说,是一个很好的学习和实践的资源。 ### 回答3: Vue小兔实战项目是一套基于Vue.js框架开发的项目资源,旨在帮助开发者更好地理解和应用Vue.js技术。 这个项目资源是由一系列实际项目案例组成的,每个案例都是由专业团队开发并经过实践验证的,因此具有很高的实战价值。在这些实战项目中,开发者可以学习到如何使用Vue.js进行项目开发,包括常用的组件、指令、过滤器等的使用,数据的处理与展示、路由的配置、状态管理的实现等等。 项目资源中会提供详细的项目文档和代码示例,开发者可以根据自身需要进行学习和实践。文档中将介绍项目的需求、设计思路、技术选择以及具体实现步骤等内容,让开发者可以更深入地了解项目的开发流程和注意事项。 通过学习这些实战项目,开发者可以提升自己的Vue.js开发能力,掌握更多的技术实践经验。同时,实战项目还能帮助开发者培养解决实际问题的能力,提升自己的开发思维和解决方案的设计能力。 总之,Vue小兔实战项目资源是一个能够有效提高开发者在Vue.js开发方面能力的宝贵资源,帮助开发者更好地理解和应用Vue.js技术,提升自己的开发水平。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值