CSS自学Day10- （项目案例）小兔鲜儿小主体部分

已于 2022-09-17 14:46:43 修改
阅读量491 收藏 3
点赞数 2
分类专栏： CSS 文章标签： css 前端 html
于 2022-09-17 14:44:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_64005381/article/details/126902467
版权

目录

新鲜好物-内容完成

新鲜好物-新品文字

生鲜标题-布局

生鲜区域

生鲜-内容-布局

效果图：

index.html:

    <!-- banner -->
    <div class="banner">
        <div class="wrapper">
            <!-- 有多少张图，就放多少个li -->
            <ul>
                <li><a href="#"><img src="./uploads/banner_1.png" alt=""></a></li>
            </ul>
        </div>
    </div>

index.css:

.banner{
    height: 500px;
    background-color: #f5f5f5;
}

.banner .wrapper{
    height: 500px;
    background-color: pink;
}

效果图：

index.html:

          <!-- 侧导航 -->
            <div class="aside">
                <ul>
                    <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
                    <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
                    <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
                    <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
                    <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
                    <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
                    <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
                    <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
                    <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
                    <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
                </ul>
            </div>

index.css:

/* 侧导航 */
.banner .aside{
    position: absolute;
    left: 0;
    top: 0;
    width: 250px;
    height: 500px;
    background-color: rgba(0,0,0,0.8);
}

.banner .aside li{
    height: 50px;
    line-height: 50px;
}

.banner .aside a{
    /* 宽度和父级一样 */
    display: block;
    padding-left: 36px;
    padding-right: 19px;
    width: 250px;
    height: 50px;
    background-color: pink;
}

效果图：

index.html:

     <!-- 侧导航 -->
            <div class="aside">
                <ul>
                    <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
                    <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
                    <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
                    <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
                    <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
                    <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
                    <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
                    <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
                    <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
                    <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
                </ul>
            </div>

index.css:

.banner .aside a{
    position: relative;
    /* 宽度和父级一样 */
    padding-left: 36px;
    padding-right: 19px;
    display: block;
    height: 50px;
    /* background-color: pink; */
    color: #fff;
}

.bannner .aside span{
    margin-left: 15px;
    font-size: 14px;
}

.banner .aside a:hover{
    color: #27ba9b;
}

/* 在a的里面的最后的位置添加箭头 */
.banner .aside a::after{
    position: absolute;
    right: 19px;
    top: 19px;
    content: '';
    width: 6px;
    height: 11px;
    background-image: url(../images/sprites.png);
    background-position: -80px -110px;
    background-color: green;
}

效果图：

html：

<!-- 箭头 -->
            <!-- prev:上一个 -->
            <a href="#" class="prev"></a>
            <!-- next:下一个 -->
            <a href="" class="next"></a>

css:


/* 箭头 */
.prev,
.next{
    position: absolute;
    top: 228px;
    width: 45px;
    height: 45px;
    background-color: rgba(0,0,0,.2);
    background-image: url(../images/sprites.png);
    border-radius: 50%;
}

/* 背景图位置负责两件事：改变箭头在盒子里的位置;改变精灵图的位置 */
/* 导致在精灵图中测量不准确 */
/* 解决方案：1.书写背景图位置属性，借助谷歌调试工具调试具体的位置数值
            2.书写标签的时候，a负责盒子，span负责图案
 */

.prev{
    left: 260px;
    background-position: 14px -60px;
}

.next{
    right: 10px;
    background-position: -24px -60px;
}

效果图：

html：


            <!-- 圆点:当前状态：current/active -->
            <!-- js找到用户当前的li 添加类名 li变成白色的 -->
            <ol>
                <li></li>
                <li></li>
                <li class="current"></li>
                <li></li>
                <li></li>
            </ol>

css：

/* 圆点 */
.banner ol{
    position: absolute;
    left: 680px;
    bottom: 30px;
    /* width: 200px; */
    height: 10px;
    /* background-color: pink; */
}

.banner ol li{
    float: left;
    margin-right: 24px;
    width: 10px;
    height: 10px;
    background-color: rgba(255,255,255,0.4);
    border-radius: 50%;
    cursor: pointer;
}

.banner ol .current{
    background-color: #fff;
}

新鲜好物-标题

效果图：

html：

   <!-- 新鲜好物 -->
    <div class="goods wrapper">
        <!-- hd header,头部 -->
        <div class="hd">
            <h2>新鲜好物<span>新鲜出炉 品质靠谱</span></h2>
            <a href="#">查看全部</a>
        </div>
        <!--body 身体，内容 -->
        <div class="bd"></div>
    </div>

css： 

/* 新鲜好物 */
.goods .hd{
    height: 114px;
    /* background-color: pink; */
    line-height: 114px;
}

.goods .hd h2{
    float: left;
    font-size: 29px;
    font-weight: 400;
    height: 114px;
}

.goods .hd h2 span{
    margin-left: 34px;
    font-size: 16px;
    color:#999;
}
.goods .hd a{
    float: right;
    color: #999;
}

.goods .hd a::after{
    display: inline-block;
    margin-left: 13px;
    content: '';
    width: 7px;
    height: 13px;
    /* background-color: green; */
    background-image: url(../images/sprites.png);
    background-position: 0 -110px;
}

新鲜好物-内容-布局

效果图：

html：

     <!--body 身体，内容 -->
        <div class="bd clearfix">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
        </ul>
        </div>

css：

/* 新鲜好物 */
.goods .hd{
    height: 114px;
    /* background-color: pink; */
    line-height: 114px;
}

.goods .hd h2{
    float: left;
    font-size: 29px;
    font-weight: 400;
    height: 114px;
}

.goods .hd h2 span{
    margin-left: 34px;
    font-size: 16px;
    color:#999;
}
.goods .hd a{
    float: right;
    color: #999;
}

.goods .hd a::after{
    display: inline-block;
    margin-left: 13px;
    content: '';
    width: 7px;
    height: 13px;
    /* background-color: green; */
    background-image: url(../images/sprites.png);
    background-position: 0 -110px;
}

.goods .bd li{
    margin-right: 8px;
    float: left;
    width: 304px;
    height: 405px;
    background-color: #f0f9f4;
}

.goods .bd li:last-child{
    margin-right: 0;
}

新鲜好物-内容完成

效果图：

html：

        <!--body 身体，内容 -->
        <div class="bd clearfix">
            <ul>
                <li>
                    <img src="./uploads/new_goods_1.jpg" alt="">
                    <h3>睿米无线吸尘器F8</h3>
                    <div>￥ <span>899</span></div>
                </li>
                <li>
                    <img src="./uploads/new_goods_1.jpg" alt="">
                    <h3>睿米无线吸尘器F8</h3>
                    <div>￥ <span>899</span></div>
                </li>
                <li>
                    <img src="./uploads/new_goods_1.jpg" alt="">
                    <h3>睿米无线吸尘器F8</h3>
                    <div>￥ <span>899</span></div>
                </li>
                <li>
                    <img src="./uploads/new_goods_1.jpg" alt="">
                    <h3>睿米无线吸尘器F8</h3>
                    <div>￥ <span>899</span></div>
                </li>
        </ul>
        </div>

css:

.goods .bd li img{
    width: 304px;
}

.goods .bd li h3{
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 20px;
    font-weight: 400;
}

.goods .bd li div{
    color: #9a2e1f;
    font-size: 17px;

}

.goods .bd li span{
    font-size: 23px;
}

新鲜好物-新品文字

效果图：

html：

    <ul>
                <li>
                    <img src="./uploads/new_goods_1.jpg" alt="">
                    <h3>睿米无线吸尘器F8</h3>
                    <div>￥ <span>899</span></div>
                    <b>新品</b>
                </li>
                <li>
                    <img src="./uploads/new_goods_1.jpg" alt="">
                    <h3>睿米无线吸尘器F8</h3>
                    <div>￥ <span>899</span></div>
                    <b>新品</b>
                </li>
                <li>
                    <img src="./uploads/new_goods_1.jpg" alt="">
                    <h3>睿米无线吸尘器F8</h3>
                    <div>￥ <span>899</span></div>
                    <b>新品</b>
                </li>
                <li>
                    <img src="./uploads/new_goods_1.jpg" alt="">
                    <h3>睿米无线吸尘器F8</h3>
                    <div>￥ <span>899</span></div>
                    <b>新品</b>
                </li>
        </ul>

css：

.goods .bd li b{
    position: absolute;
    left: 17px;
    top: 18px;
    width: 28px;
    height: 51px;
    border: 1px solid #27ba9b;
    border-radius: 2px;
    font-size: 18px;
    color: #27ba9b;
    font-weight: 400;
    line-height: 24px;
}

生鲜标题-布局

效果图：

html：

    <!-- 生鲜 -->
    <div class="shengxian wrapper">
        <div class="hd">
            <h2>生鲜</h2>
            <a href="#" class="more">查看全部</a>
            <ul>
                <li><a href="#">水果</a></li>
            </ul>
        </div>
        <div class="bd"></div>
    </div>

css：

/* 生鲜 */
.shengxian .hd{
    height: 96px;
    background-color: pink;
    line-height: 96px;
}

.shengxian .hd h2{
    float: left;
}

.shengxian .hd .more{
   float: right;
}

.shengxian .hd ul{
    float: right;
}

生鲜区域

生鲜图：

html：

    <!-- 生鲜 -->
    <div class="shengxian wrapper">
        <div class="hd">
            <h2>生鲜</h2>
            <a href="#" class="more">查看全部</a>
            <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>
            </ul>
        </div>
        <div class="bd"></div>
    </div>

css：

.goods .hd a,
.shengxian .hd .more{
    float: right;
    color: #999;
}

.goods .hd a::after,
.shengxian .hd .more::after{
    display: inline-block;
    margin-left: 13px;
    content: '';
    width: 7px;
    height: 13px;
    /* background-color: green; */
    background-image: url(../images/sprites.png);
    background-position: 0 -110px;
}
.shengxian .hd ul{
    float: right;
    margin-right: 65px;
}
.shengxian .hd ul li{
    float: left;
}

.shengxian .hd li a{
    padding: 2px 7px;
    margin-left: 6px;
}

.shengxian .hd li a:hover{
    background-color:#27ba9b;
    color: #fff;
}

生鲜-内容-布局

效果图：

 html：       

   <div class="bd clearfix">
            <div class="left">
                <a href="#"><img src="./uploads/fresh_goods_cover.png" alt=""></a>
            </div>
            <div class="right"></div>
        </div>

css：

.shengxian .bd .left{
    float: left;
    width: 240px;
    height: 610px;
    background-color: pink;
}

.shengxian .bd .right{
    float: right;
    width: 1000px;
    height: 610px;
    background-color: skyblue;
}

什么时候养猫猫
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
小兔鲜（五个页面包含：登录，购物车等）
10-19
HTML期末大作业需要，做一个五个网页的网站，我就把之前在看黑马程序员的前端视频的时候写的小兔鲜儿网站改进了一下加了一点东西，然后增加了几个页面。
小兔鲜儿-商城APP（静态网页）
m0_61044901的博客
01-06 5373
小兔鲜儿-商城APP（静态网页）
前端Vue小兔鲜儿电商项目实战Day04
最新发布
ltt159264的博客
05-31 1269
1. 封装复杂交互组件的通用思路2. 图片预览组件的封装逻辑。
小兔鲜儿如何制作？
qq_65168354的博客
10-12 2172
​最近在成都找工作太难了，技术不好没人要，学历不高没人看，十个工作就有九个是销售，另一个你们猜猜是什么呢？哈哈哈哈哈哈当然是客服了，这些压榨员工的工作，呜呜呜真的太难了，这几年受疫情的影响，找工作都成了最大的难题，所以我毅然选择了回去培训，学好技术明年再去找工作，这段时间也做了几个简单的前端页面，下面就是最简单的小兔鲜儿的首页面啦，大家凑合着看看，欢迎大家指点 common.css代码. 例如下面产生的一个序列图： base.css代码如下: index.css代码如下
小兔鲜项目 uniapp （1）
每天都要努力学习哦~~
08-08 3874
2.事件绑定bindtap="eventName"升级成@tap="eventName"，支持（）传参。生命周期分为三部分：应用生命周期(小程序)，页面生命周期(小程序)，组件生命周期(Vue)温馨提示：调用接口能力，建议前缀wx替换为uni，养成好习惯，这样支持多端开发。3.支持Vue常用指令v-for、v-if、v-show、v-model等。1.2通过HbuilderX创建uni-app vue3项目。实现持久化，小程序端不兼容，需要替换持久化 API。项目模板包含：目录结构，项目素材，代码风格。
小兔鲜儿项目讲解【图文完整】
2301_80864686的博客
11-03 4231
小兔鲜儿项目讲解 目录小兔鲜儿项目讲解一、项目实现结果二、前期准备工作三、页面详细制作四、完整代码 一、项目实现结果 该项目共分为七大部分：快捷导航栏、header头部模块、banner图、新鲜好物模块、人气推荐模块、生鲜模块、footer版权模块 如图所示： 二、前期准备工作 1、准备素材和工具 （1）学成在线PSD源文件 （2）开发工具（VsCode）+测试工具（Chrome）+切图（PxCook） 2、新建项目文件夹 （1）创建项目文件夹xtx-pc-client，所有项目相关文件都保存在xtx-
html+css入门小兔鲜项目
12-05
HTML+CSS入门小兔鲜项目 本项目旨在使用 HTML 和 CSS 来构建一个小兔鲜项目，学习目标是能够在网页中使用精灵图，使用背景大小属性，设置背景图片的大小，认识 CSS 写作顺序，提高代码专业性和浏览器渲染性能，以及...
web前端+css+html基础阶段小兔鲜项目+psd文件设计稿及项目源码
12-01
在"小兔鲜儿项目源码"中，CSS文件（可能是.css扩展名）将与HTML文件配合工作，定义各个元素的样式。通过选择器（如类选择器、ID选择器或元素选择器），我们可以定位到特定的HTML元素，并应用样式规则。例如，`.title...
小兔鲜儿 项目实现HTML+CSS
04-30
在“小兔鲜儿 项目实现HTML+CSS”这个项目中，我们主要关注的是使用HTML（超文本标记语言）和CSS（层叠样式表）这两种核心技术来构建网页和设计其外观。HTML是网页内容的基础结构，而CSS则负责定义这些内容的视觉...
uni-app 开发的微信小程序-小兔鲜儿电商项目-uniapp-shop-vue3-ts.zip
11-04
【标题】"uni-app开发的微信小程序-小兔鲜儿电商项目-uniapp-shop-vue3-ts" 是一个基于uni-app框架构建的电商应用实例，主要用于展示如何利用uni-app技术栈来开发微信小程序。uni-app是一个多端开发框架，允许开发者...
前端基础之小兔鲜儿项目（头部和底部）
qq_65697178的博客
06-29 810
通过一天的学习，接触到小兔鲜儿的项目，并进行实战，完成其头部和底部的代码书写提示：以下是本篇文章正文内容，下面案例可供参考1.先对其进行盒子的划分和取类名，能够帮助自己书写结构不会出错，能更快更好的书写代码2.头部这个部分运用到了定位、flex布局、input表单等知识点，帮助自己回顾之前记忆的知识点，加深影响3.知道了网页logo的固定写法h1标签里面包裹a标签，在a标签里面插入背景图，来完成网页logo1.运用了精灵图、自定义列表、flex布局的知识点，帮助自己巩固了之前快遗忘的知识。
小兔鲜网站
weixin_56871552的博客
03-14 1803
images文件夹:存放固定使用的图片素材，例如:logo、样式修饰图等等uploads文件夹:存放非固定使用的图片素材，例如:商品图、宣传图需要上传的图片iconfont文件夹:字体图标素材css 文件夹:存放 CSS 文件(link 标签引入)index.css:首页css样式bass.css:基础公共样式common.css:各个网页相同模块的重复样式，例如:头部、底部index.html:首页HTML文件引入html文件。
纯HTML+CSS小兔鲜儿网站首页（静态网页）
xxx857857857的博客
09-17 1万+
在项目开始之前，先做好准备工作，创建这样的文件目录，css文件夹包含三个css文件，分别是base.css、common.css、index.css,images放的是固定的照片，uploads放随时更新的照片。以上就是小兔鲜儿项目的展示，排版相似的地方就不写了，排版方法有很多，不止上面一种。小兔鲜儿首页的主体banner部分。共同样式html代码如下。banner css部分。小兔鲜儿首页新鲜好物板块。小兔鲜儿主体热门品牌部分。小兔鲜儿主体联系方式部分。小兔鲜儿主体生鲜部分。
html(10-小鲜兔儿项目)
缘友一世的博客
03-12 1万+
文章目录综合项目小兔鲜项目一 分析1 Header 部分开发2Footer 部分开发3 网站入口 xtx-entry 部分开发4 新鲜好物面板 xtx-new-goods 部分开发5 生鲜商品面板 xtx-fresh-goods 部分开发二 项目结构三 代码实现3.1 index.html 代码3.2 base.css 代码3.3 common.css 代码3.4 index.css 代码四 效果 综合项目小兔鲜项目 一 分析 1 Header 部分开发 2Footer 部分开发
分类模块丨前端uniapp微信小程序项目
黑马程序员官方博客
08-22 463
用户点击左菜单的一级分类，切换右侧对应的二级分类和商品。
小兔鲜儿 uniapp - 项目打包
每天都要努力学习哦~~
01-04 1242
条件编译支持: 支持 .vue, .ts, .js, .scss, .css, pages.json 等文件。Q：按照 uni-app 规范开发可保证多平台兼容，但每个平台有自己的一些特性，该如何处理？把当前 uni-app 项目打包成网页(H5)端，并配置路由基础路径。把当前 uni-app 项目打包成微信小程序端，并发布上线。根路径，部分网站并不是部署到根路径，需要按运维要求调整。项目打包上线需要使用到多个工具，注意工具之间的职责。的打包，预览、测试、发行，使用。，让代码按条件编译到指定平台。
小兔鲜儿Vue3.0前端电商项目实战
热门推荐
IT大神帅杰的博客
10-07 1万+
小兔鲜儿Vue3.0实现了电商平台主线业务功能，电商首页、一级分类、二级分类、商品详情、购物车、结算、支付、个人中心、订单管理、订单详情。 项目采用前后端分离模式，前台使用了VUE3.0技术栈构建，自己封装的UI组件库，接入了QQ登录，支付宝支付业务，以及前端SKU解决方案，本地线上购物车解决方案 后台接口基本完毕，但是数据缺乏（分类，商品），所以会有一些本地mock数据。 采用vuex来管理购物车和用户数据，vuex的使用会淋漓尽致。 使用vue3.0来开发，所以小兔鲜儿项目，会很 鲜嫩 酸爽 。 但是会
从0到1学前端：day10-小兔鲜儿项目完结
黑马程序员官方博客
05-10 1456
CSS样式 02-banner-侧导航 HTML结构 CSS样式 03-banner-圆点指示器 HTML结构 CSS样式 04-新鲜好物-标题 CSS样式 05-新鲜好物-内容 HTML结构 CSS样式 06-人气推荐 CSS样式 07-热门品牌-布局 CSS样式 08-热门品牌-内容 HTML结构 CSS样式 09-生鲜-标题 CSS样式 10-生鲜-内容布局 HTML结构 CSS样式 11-生鲜-产品内容 HTML结构 CSS样式 12-生鲜-过渡效果 HTM
01-小兔鲜儿
qq_45585640的博客
03-21 1377
01-小兔鲜儿
HTML+CSS入门：小兔鲜项目实战技巧
"html+css入门小兔鲜项目" 在HTML和CSS的学习旅程中，"小兔鲜项目"是一个理想的入门实践，旨在帮助初学者掌握基本的网页布局和样式设计技能。这个项目涵盖了多个关键知识点，包括CSS样式的补充、项目前置认知以及...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

什么时候养猫猫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值