【每日一练】小兔鲜项目-01

今天终于接触到了小兔鲜项目，之前在前端群里一直听到有人提起过。

下面开始分析一下小兔鲜：

首先，搭建框架，创建小兔鲜文件夹。

1.创建项目目录：

2.然后搭建index页面

<!DOCTYPE html>
<html lang="zh-CN"><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><meta name="description" content="小兔鲜儿官网，致力于打造全球最大的食品、生鲜电商购物平台。"><meta name="keyword" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物"><link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"><link rel="stylesheet" href="./css/base.css"><link rel="stylesheet" href="./css/common.css"><link rel="stylesheet" href="./css/index.css">
</head>

3.接下来是header模块

<header><!-- 快捷导航 xtx-shortcut --><div class="xtx-shortcut"></div><!-- xtx-main-nav --><div class="xtx-main-nav"></div></header>

样式：

.xtx-shortcut{height: 52px;background-color: #333;
}

4.头部快捷导航

代码结构：

<div class="xtx-shortcut"><div class="container"><ul class="fr"><li><a href="#">请先登录</a></li><li>|</li><li><a href="#">免费注册</a></li><li>|</li><li><a href="#">我的订单</a></li><li>|</li><li><a href="#">会员中心</a></li><li>|</li><li><a href="#">帮助中心</a></li><li>|</li><li><a href="#">在线客服</a></li><li>|</li><li><a href="#">手机版</a></li></ul></div></div>

样式：

/* xtx-shortcut */
.xtx-shortcut {height: 52px;line-height: 52px;background-color: #333;
}.xtx-shortcut li {float: left;color: #666666;
}.xtx-shortcut li:nth-child(even) {margin: 0 16px;
}.xtx-shortcut li a {display: block;height: 52px;color: #dcdcdc;font-size: 14px;
}

【每日一练】小兔鲜项目-01相关推荐

前端vue3.0小兔鲜项目
博主收集到了一个完整的项目前端vue3.0框架的小兔鲜项目,学习前端的小伙伴可以找我来领. 完整的教学视频+代码+笔记项目地址:http://erabbit.itheima.net/ 需要的联系q ...
小兔鲜项目-原生JS实现页面放大镜效果模块
目录 1. 项目搭建 1.1 在项目开始之前,先做好准备工作,创建这样的文件目录 1.1.1 css文件夹 1.1.2 images文件 1.1.3 uploads文件 1.2 HTML结构 1.2. ...
小兔鲜项目网站首页(动态网页）原生HTML+CSS+Javascript
目录 1. 项目搭建 1.1 在项目开始之前,先做好准备工作,创建这样的文件目录,git和vscode直接忽略. 1.1.1 css文件夹 1.1.2 images文件 1.1.3 js文件 1.1. ...
2、小兔鲜项目-文件+目录准备
新建项目文件夹 xtx-pc-client,在VScode中打开 • 在实际开发中,项目文件夹不建议使用中文 • 所有项目相关文件都保存在 xtx-pc-client 目录中复制 favicon.i ...
小兔鲜项目搭建-精灵图、背景图片大小、盒子阴影、过渡
1.1精灵图: 使用步骤: 1.创建一个盒子,设置盒子的尺寸和小图尺寸相同 2.将精灵图设置为盒子的背景图片 3.修改背景图位置精灵图的标签一般都用行内标签,如span,b,i: 背景图位置属性:b ...
移动端支付界面制作（小兔鲜项目）
代码 .html <!DOCTYPE html> <html lang="en"> <head><meta charset="U ...
vue3小兔鲜商城项目学习笔记+资料分享01
最近正在学习vue3小兔鲜,需要相关学习资料的可以点链接 https://docs.qq.com/doc/DUmhUVERtUHpLaG1a 下面试学习笔记项目起步项目预览地址小兔鲜儿商城:ht ...
小兔鲜儿项目pc客户端前端静态页面
小兔鲜儿项目pc客户端前端静态页面一.效果图二.文件和目录准备新建index.html在根目录新建css文件夹保存网站的样式,并新建以下css文件: base.css:基础公共样式 commo ...
hcj小兔鲜电商项目详解（一）
1项目目录 2项目代码准备 seo三大标签: title description keywords base.css /* 清除默认样式的代码 */ /* 去除常见标签默认的 margin 和 pad ...

【每日一练】小兔鲜项目-01

【每日一练】小兔鲜项目-01相关推荐

最新文章

热门文章