网页制作 —— 小兔鲜儿

原创 已于 2024-02-27 15:05:26 修改 · 780 阅读 · 13 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#学习 #前端

于 2024-01-27 02:25:51 首次发布

一、项目目录搭建

  • xtx-pc
    • images 文件夹：存放固定使用的图片素材，例如：logo、样式修饰图等等
    • uploads 文件夹：存放非固定使用的图片素材，例如：商品图、宣传图需要上传的图片
    • iconfont 文件夹：字体图标素材
    • css 文件夹：存放 CSS 文件（link 标签引入）
      • base.css：基础公共样式
      • common.css：各个网页相同模块的重复样式，例如：头部、底部
      • index.css：首页 CSS 样式
    • index.html：首页 HTML 文件

base.css 样例：

/* 去除常见标签默认的 margin 和 padding */
* {
    
    
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* 设置网页统一的字体大小、行高、字体系列相关属性 */
body {
    
    
    font: 14px/1.5 "Microsoft Yahei", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
    color: #333;
}
/* 去除列表默认样式 */
ul,
ol {
    
    
    list-style: none;
}
/* 去除默认的倾斜效果 */
em,
i {
    
    
    font-style: none;
}
/* 去除a标签下划线，并设置默认字体颜色 */
a {
    
    
    color: #333;
    text-decoration: none;
}
/* 设置img的垂直对齐方式，去除img默认下间隙 */
img {
    
    
    width: 100%;
    height: 100%;
    vertical-align: middle;
}
/* 去除input默认样式 */
input {
    
    
    border: none;
    outline: none;
    color: #333;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    
    
    font-weight: 400;
}

index.html 示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>

</body>
</html>

二、SEO 三大标签

SEO：搜索引擎优化，提升网站百度搜索排名

提升SEO的常见方法：

  1. 竞价排名
  2. 将网页制作成 html 后缀
  3. 标签语义化（在合适的地方使用合适的标签）
  4. ……

网页头部 SEO 标签：

  • title：网页标题标签
  • description：网页描述
  • keyword：网页关键词

示例：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta name="description" content="小兔鲜儿官网，致力于打造全球最大的食品、生鲜电商购物平台。">
   <meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物">
   <title>小兔鲜儿-新鲜、惠民、快捷</title>
   <link rel="stylesheet" href="./css/base.css">
   <link rel="stylesheet" href="./css/common.css">
   <link rel="stylesheet" href="./css/index.css">
</head>
<body>

</body>
</html>

三、Favicon 图标与版心

1、Favicon 图标

Favicon 图标：网页图标，出现在–浏览器标题栏==，增加网站辨识度。

图标：favicon.ico，一半存放到网站的根目录里面

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

示例：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta name="description" content="小兔鲜儿官网，致力于打造全球最大的食品、生鲜电商购物平台。">
   <meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物">
   <title>小兔鲜儿-新鲜、惠民、快捷</title>
   <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>
<body>

</body>
</html>

效果：
在这里插入图片描述

2、版心

wrapper 版心宽度：1240px

css 样例：

/* 版心 */
.wrapper {
    
    
   margin: 0 auto;
   width: 1240px;
}

四、快捷导航

结构：通栏 > 版心 > 导航 ul

布局：flex-end

CSS 样例：

/* 快捷导航 */
.shortcut {
    
    
   height: 52px;
   background-color: #333;
}
.shortcut .wrapper {
    
    
   display: flex;
   justify-content: flex-end;
   height: 52px;
}
.shortcut ul {
    
    
   display: flex;
   line-height: 52px;
}
.shortcut li a {
    
    
   padding: 0 15px;
   border-right: 1px solid #999;
   font-size: 14px;
   color: #fff;
}
.shortcut li:last-child a {
    
    
   border-right: none;
}
.shortcut li .iconfont {
    
    
   margin-right: 4px;
   vertical-align: middle;
}
.shortcut li .login {
    
    
   color: #5eb69c;
}

示例：

<!-- 快捷导航 -->
   <div class="shortcut">
       <div class="wrapper">
           <ul>
               <li><a href="#" class="login">请先登录</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 class="iconfont icon-mobile-phone"></span>手机版</a></li>
           </ul>
       </div>
   </div>

效果：
在这里插入图片描述

五、头部

结构：.header > top + 导航（nav）+ 搜索（search）+ 购物车（cart）

CSS 样例：

/* 头部 */
.header {
    
    
   display: flex;
   margin-top: 22px;
   margin-bottom: 22px;
   height: 88px;
   background-color: pink;
}

示例：

<!-- 头部 -->
   <div class="header wrapper">
       <!-- logo -->
       <div class="logo">logo</div>
       <!-- 导航 -->
       <div class="nav">导航</div>
       <!-- 搜索 -->
       <div class="search">搜索</div>
       <!-- 购物车 -->
       <div class="cart">购物车</div>
   </div>

效果：
在这里插入图片描述

1、logo

CSS 样例：

   /* logo */
.logo {
    
    
   margin-right: 40px;
   width: 200px;
   height: 88px;
}
.logo a {
    
    
   display: block;
   width: 200px;
   height: 88px;
   background-image: url(../images/logo.png);
   font-size: 0;
}

示例：

<!-- logo -->
<div class="logo">
   <h1><a href="#">小兔鲜儿</a></h1>
</div>

效果：
在这里插入图片描述

2、导航

CSS 样例：

   /* 导航 */
.nav {
    
    
   margin-top: 33px;
   margin-right: 28px;
}
.nav ul {
    
    
   display: flex;
}
.nav li {
    
    
   margin-right: 47px;
}
.nav li a {
    
    
   padding-bottom: 10px;
}
.nav li a:hover {
    
    
   border-bottom: 2px solid #5eb69c;
   color: #5eb69c;
}

示例：

<!-- 导航 -->
<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>

效果：
在这里插入图片描述

3、搜索

CSS 样式：

   /* 搜索 */
.search {
    
    
   display: flex;
   margin-top: 33px;
   margin-right: 45px;
   width: 170px;
   height: 34px;
   border-bottom: 2px solid #F4F4F4;
}
.search .iconfont {
    
    
   margin-right: 8px;
   font-size: 18px;
   color: #ccc;
}
.search input {
    
    
   /* 浏览器优先生效 input 标签的默认宽度，所以 flex: 1 不生效 */
   /* 解决方法：重置 input 标签默认宽度 → width: 0; */
   flex: 1;
   width: 0;
}
.search input::placeholder {
    
    
   font-size: 16px;
   color: #ccc;
}

示例：

<!-- 搜索 -->
<div class="search">
   <span class="iconfont icon-search"></span>
   <input type="text" placeholder="搜一搜">
</div>

效果：
在这里插入图片描述

4、购物车

CSS 样式：

   /* 购物车 */
.cart {
    
    
   position: relative;
   margin-top: 32px;
}
.cart .iconfont {
    
    
   font-size: 24px;
}
.cart i {
    
    
   position: absolute;
   top: 1px;
       /* right 定位右对齐，如果文字多了，向左撑开，可能盖住其他的内容 */
   /* right: 1px; */
   left: 15px;
   padding: 0 6px;
   height: 15px;
   background-color: #e26237;
   border-radius: 8px;
   font-size: 14px;
   color: #fffefe;
   line-height: 15px;
}

示例：

<!-- 购物车 -->
<div class="cart">
   <span class="iconfont icon-cart-full"></span>
   <i>2</i>
</div>

效果：
在这里插入图片描述

六、底部

CSS 样例：

/* 底部 */
.footer {
    
    
   height: 580px;
   background-color: #f5f5f5;
}
   /* 服务 */
.service {
    
    
   height: 178px;
   border-bottom: 1px solid #e8e8e8;
}
   /* 帮助中心 */
.help {
    
    
   height: 300px;
   background-color: pink;
}

示例：

<!-- 底部 -->
   <div class="footer">
       <div class="wrapper">
           <!-- 服务 -->
           <div class="service">服务</div>
           <!-- 帮助中心 -->
           <div class="help">帮助中心</div>
           <!-- 版权 -->
           <div class="copyright">版权</div>
       </div>
   </div>

效果：
在这里插入图片描述

最低0.47元/天 解锁文章
小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记
2301_81242854的博客
08-02 2282
1. base.css：基础公共样式2. common.css：各个网页相同模块的重复样式，例如：头部、底部3.index.css：首页 CSS 样此项目比“学成在线”首页目录多了common.css和iconfont文件夹common.css：为了更加贴近企业的首页开发，因为一个大的项目开发肯定有多个页面并且在页面之间的跳转 所以创建这个css样式存储公共样式 如各个网页相同模块的重复样式，例如：头部、底部。
Web网页项目实战-----小兔鲜儿项目
m0_54851477的博客
12-11 1833
设置为contain的效果为当图片的宽度或者是高度等于了盒子的宽度和高度中最小的那个的时候，就停止缩放了。设置为cover的时候，显示效果为按比例缩放，直到填充到整个盒子，所以会显示不全。a.imgaes：存放网站固定使用的图片素材，如：logo、样式装饰图片…b.uploads：存放网站非固定使用的图片素材，如：商品图片、宣传图片…b.common.css：该网站中多个网页相同模块的重复样式，如：头部、底部。1）作用：让元素的样式慢慢的变化，长配合hover使用，增强网页交互体验。
HTML-CSS项目练习
最新发布
殊途的博客
10-21 853
本文摘要介绍了网页开发中的关键技术和设计思路，主要包括：1. SEO优化方法，包括三大标签（title、description、keywords）的设置；2. 网页布局技巧，如从整体到局部的设计流程、Flex布局应用、Banner区域实现等；3. 移动端适配方案，使用vw单位实现响应式设计；4. 具体示例项目（小兔鲜儿电商、学成在线教育平台、酷我音乐移动端）的代码实现；5. 常见UI组件开发，如轮播图、产品卡片、新闻列表等。
纯HTML+CSS小兔鲜儿网站首页（静态网页）
xxx857857857的博客
09-17 1万+
在项目开始之前，先做好准备工作，创建这样的文件目录，css文件夹包含三个css文件，分别是base.css、common.css、index.css,images放的是固定的照片，uploads放随时更新的照片。以上就是小兔鲜儿项目的展示，排版相似的地方就不写了，排版方法有很多，不止上面一种。小兔鲜儿首页的主体banner部分。共同样式html代码如下。banner css部分。小兔鲜儿首页新鲜好物板块。小兔鲜儿主体热门品牌部分。小兔鲜儿主体联系方式部分。小兔鲜儿主体生鲜部分。
小兔鲜网站
weixin_56871552的博客
03-14 4809
images文件夹:存放固定使用的图片素材，例如:logo、样式修饰图等等uploads文件夹:存放非固定使用的图片素材，例如:商品图、宣传图需要上传的图片iconfont文件夹:字体图标素材css 文件夹:存放 CSS 文件(link 标签引入)index.css:首页css样式bass.css:基础公共样式common.css:各个网页相同模块的重复样式，例如:头部、底部index.html:首页HTML文件引入html文件。
【HTML+CSS】小兔鲜儿网站首页（静态网页）
m0_63179877的博客
06-30 4497
小兔鲜儿网站首页是利用HTML+CSS进行开发，网站首页包括四部分内容，分别是快捷导航、banner图区域、新鲜好物、生鲜、尾部版权。
前端（HTML + CSS）小兔鲜儿项目（仿）
li3123537691的博客
08-09 2282
这是一个简单的商城网站，代码部分为HTML + CSS 和少量JS代码。
精选资源
小兔鲜儿网站-网页源代码.zip
11-17
这段源代码是一款非常实用的网页制作工具，它以小兔鲜儿的形象为设计灵感，界面清新可爱，操作简单易懂。无论你是专业的网页设计师，还是初学者，都能在这个平台上轻松制作出属于自己的个性化网页。小兔鲜儿网页源...
html5商城网页（小兔鲜）
05-30
HTML5商城网页，如"小兔鲜"，是利用HTML5技术构建的电子商务平台，旨在提供优质的在线购物体验。HTML5作为最新的超文本标记语言版本，引入了许多新特性，优化了网页性能，增强了用户体验，尤其在移动设备上的表现...
小兔鲜项目网站首页(动态网页）原生HTML+CSS+Javascript
热门推荐
Zhang_wang_yun的博客
04-02 1万+
在项目开始之前，先做好准备工作，创建这样的文件目录，git和vscode直接忽略。
html+css入门小兔鲜项目
12-05
html+css入门小兔鲜项目
小兔鲜（五个页面包含：登录，购物车等）
10-19
HTML期末大作业需要，做一个五个网页的网站，我就把之前在看黑马程序员的前端视频的时候写的小兔鲜儿网站改进了一下加了一点东西，然后增加了几个页面。
web前端综合案例——小兔鲜首页（html+css）
qq_54422936的博客
07-26 9978
web前端综合案例——小兔鲜首页（html+css）
手把手教你做小兔鲜网站(vue3实战)
cghhbvcgjb的博客
08-26 2301
1、路由配置：三级路由2、个人中心信息渲染（ 个人信息 部分直接使用Pinia中的数据， 猜你喜欢 部分走接口获取）3、tab切换获取状态数据并渲染4、分页逻辑实现然后就ok了终于写完了，这下可以好好玩黑神话悟空了。
小兔鲜首页制作css
qq_65046523的博客
08-21 585
项目名-客户端xtx-pc1.images：存放固定使用的图片，例如：logo、样式修饰图2.uploads:存放非固定图片，例如：商品图、宣传图等需要上传的图片3.iconfont:字体图标素材4.css文件：4.1base.css：基础的公共样式4.2common.css：各个网页相同模块的重复样式，例如头部、底部4.3index.css：首页css样式5.index.html：首页html文件。
小兔鲜静态页面（Html5+CSS3）
Concise200的博客
12-22 4507
小兔鲜静态页面1. 补充知识点精灵图背景图片大小盒子阴影过渡 1. 补充知识点 精灵图 介绍 使用步骤 例子 精灵图如下： 取第三个小图，代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vi
黑马程序员——html css基础——day10&day11&day12——小兔鲜儿
qq_56444564的博客
02-12 1279
先按 ctrl + k 接着 ctrl + 0。ctrl+ k 接着 ctrl+ j。
【黑马程序员】7、小兔鲜_2023新版前端Web开发HTML5+CSS3+移动Web视频教程_笔记
qq_37581764的博客
07-24 1008
iconfont文件夹：字体图标素材common.css: 各个网页相同模块的重复样式，例如：头部，底部。
小兔鲜儿网页代码
06-17
### 小兔鲜儿网页的代码实现 以下是基于提供的引用内容和前端开发基础知识，整理的小兔鲜儿网页的部分代码实现。代码结构包括HTML和CSS两部分，分别用于定义页面的结构和样式。 #### HTML 部分 HTML 是用来构建网页结构的语言。以下是一个简单的HTML代码示例，展示了小兔鲜儿网页的基本结构[^1]。 ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>小兔鲜儿</title> <link rel="stylesheet" href="styles.css"> </head> <body> <!-- logo --> <div class="logo"> <h1><a href="#">小兔鲜儿</a></h1> </div> <!-- 导航栏 --> <nav class="navbar"> <ul> <li><a href="#">首页</a></li> <li><a href="#">产品</a></li> <li><a href="#">关于我们</a></li> <li><a href="#">联系我们</a></li> </ul> </nav> <!-- 主体内容 --> <main> <section class="hero"> <h2>欢迎来到小兔鲜儿</h2> <p>这里提供新鲜、健康的食品选择。</p> </section> </main> <!-- 底部信息 --> <footer> <p>© 2023 小兔鲜儿. All rights reserved.</p> </footer> </body> </html> ``` #### CSS 部分 CSS 用于美化网页，使其更具吸引力。以下是一个简单的CSS代码示例，用于定义上述HTML结构的样式[^2]。 ```css /* 全局样式 */ body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f4f4f4; } /* Logo 样式 */ .logo { text-align: center; padding: 20px; background-color: #fff; } .logo h1 a { color: #333; text-decoration: none; font-size: 24px; font-weight: bold; } /* 导航栏样式 */ .navbar { background-color: #333; } .navbar ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; } .navbar ul li { padding: 15px 20px; } .navbar ul li a { color: white; text-decoration: none; font-size: 16px; } .navbar ul li:hover { background-color: #575757; } /* 主体内容样式 */ .hero { text-align: center; padding: 50px; background-color: #fff; } .hero h2 { color: #333; font-size: 28px; } .hero p { color: #666; font-size: 16px; } /* 底部样式 */ footer { text-align: center; padding: 10px; background-color: #333; color: white; } ``` 以上代码仅为一个基础实现示例，实际项目中可能包含更复杂的布局和交互功能。可以通过下载项目源码[^2]并结合PSD设计稿进一步学习和修改代码。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值