耗时10个小时用纯HTML和CSS写成的小兔鲜儿

我会把项目所需要的设计图和我自己所写的代码放在末尾的网盘中，有需要可以直接划至末尾下载。

这是我自己根据设计图写出来的小兔鲜儿首页

下面附上我写的代码：

这是首页，即index.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"><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"><link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</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><!-- header布局 --><div class="header wrapper"><div class="logo"><h1><a href="#">小兔鲜儿</a></h1></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><!-- banner图 --><div class="banner"><div class="wrapper"><ul><li><a href="#"><img src="./uploads/banner_1.png" alt=""></a></li></ul><!-- 侧导航 --><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><!-- 箭头 --><a href="#" class="prev"></a><a href="#" class="next"></a><!-- 圆点 --><ol><li></li><li></li><li class="current"></li><li></li><li></li></ol></div></div><!-- 新鲜好物 --><div class="goods wrapper"><div class="hd"><h2 class="left">新鲜好物<span>新鲜出炉 品质靠谱</span></h2><a href="#" class="right">查看全部</a></div><div class="bd clearfix"><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></div></div><!-- 生鲜 --><div class="shenxian 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 clearfix"><div class="left"><a href="#"><img src="./uploads/fresh_goods_cover.png" alt=""></a></div><div class="right"><ul><li><a href="#"><img src="./uploads/fresh_goods_1.jpg" alt=""><div><p>美威 智利原味三文鱼排</p><p>240g/袋 4片装</p><p>海鲜年货</p></div><div class="price">￥<span>59</span></div></a></li><li><a href="#"><img src="./uploads/fresh_goods_1.jpg" alt=""><div><p>美威 智利原味三文鱼排</p><p>240g/袋 4片装</p><p>海鲜年货</p></div><div class="price">￥<span>59</span></div></a></li><li><a href="#"><img src="./uploads/fresh_goods_1.jpg" alt=""><div><p>美威 智利原味三文鱼排</p><p>240g/袋 4片装</p><p>海鲜年货</p></div><div class="price">￥<span>59</span></div></a></li><li><a href="#"><img src="./uploads/fresh_goods_1.jpg" alt=""><div><p>美威 智利原味三文鱼排</p><p>240g/袋 4片装</p><p>海鲜年货</p></div><div class="price">￥<span>59</span></div></a></li><li><a href="#"><img src="./uploads/fresh_goods_1.jpg" alt=""><div><p>美威 智利原味三文鱼排</p><p>240g/袋 4片装</p><p>海鲜年货</p></div><div class="price">￥<span>59</span></div></a></li><li><a href="#"><img src="./uploads/fresh_goods_1.jpg" alt=""><div><p>美威 智利原味三文鱼排</p><p>240g/袋 4片装</p><p>海鲜年货</p></div><div class="price">￥<span>59</span></div></a></li><li><a href="#"><img src="./uploads/fresh_goods_1.jpg" alt=""><div><p>美威 智利原味三文鱼排</p><p>240g/袋 4片装</p><p>海鲜年货</p></div><div class="price">￥<span>59</span></div></a></li><li><a href="#"><img src="./uploads/fresh_goods_1.jpg" alt=""><div><p>美威 智利原味三文鱼排</p><p>240g/袋 4片装</p><p>海鲜年货</p></div><div class="price">￥<span>59</span></div></a></li></ul></div></div></div><!-- 版权区域 --><div class="footer"><div class="wrapper"><div class="top"><ul><li><span>价格亲民</span></li><li><span>价格亲民</span></li><li><span>价格亲民</span></li></ul></div><div class="bottom"><p><a href="#">关于我们</a> |<a href="#">关于我们</a> |<a href="#">关于我们</a> |<a href="#">关于我们</a> |<a href="#">关于我们</a> |<a href="#">关于我们</a> |<a href="#">关于我们</a></p><p>CopyRight @ 小兔鲜儿</p></div></div></div>
</body></html>

这是主页样式，即index.css：

/* 主页代码 */
.banner {height: 500px;background-color: #f5f5f5;
}.banner .wrapper {position: relative;height: 500px;background-color: pink;
}.banner .aside {position: absolute;left: 0;top: 0;width: 250px;height: 500px;background-color: rgba(0, 0, 0, 0.8);
}.banner .aside li {display: block;width: 250px;height: 50px;line-height: 50px;
}.banner .aside li a {position: relative;display: block;padding-left: 36px;padding-right: 19px;height: 50px;color: #fff;
}.banner .aside li a span {margin-left: 14px;font-size: 14px;
}.banner .aside a:hover {background-color: #27ba9b;
}.banner .aside a::after {position: absolute;top: 19px;right: 19px;content: "";width: 6px;height: 11px;background-image: url(../images/sprites.png);background-position: -80px -110px;
}/* 箭头 */
.prev,
.next {position: absolute;top: 228px;width: 45px;height: 45px;background-color: rgba(0, 0, 0, 0.2);background-image: url(../images/sprites.png);border-radius: 50%;
}.prev {left: 260px;background-position: 14px -60px;
}.next {right: 10px;background-position: -23px -62px;
}.banner ol  {position: absolute;left: 680px;bottom: 30px;height: 10px;
}.banner ol li {float: left;margin-right: 24px;width: 10px;height: 10px;background-color: rgba(255, 255, 255, 0.4);border-radius: 5px;cursor: pointer;
}.banner ol .current {background-color: #fff;
}

这是通用样式，即common.css:

/* 页面通用样式 */
.wrapper {width: 1240px;margin: 0 auto;
}/* 顶部导航 */
.shortcut {height: 52px;background-color: #333;
}.shortcut .wrapper {height: 52px;
}.shortcut .wrapper ul {float: right;
}.shortcut .wrapper ul li {float: left;line-height: 52px;
}.shortcut .wrapper ul li a {padding: 0 16px;border-right: 1px solid #666;color: #dcdcdc;font-size: 14px;
}.shortcut .wrapper ul li:last-child a {border-right: none;
}.shortcut .wrapper ul li a span {display: inline-block;width: 11px;height: 16px;background-image: url(../images/sprites.png);background-position: -160px  -70px;vertical-align: middle;margin-right: 8px;
}/* header布局 */
.header {margin: 30px auto;height: 70px;
}.header .logo {float: left;width: 207px;height: 70px;
}.header .logo h1 {width: 207px;height: 70px;
}.header .logo h1 a {display: block;width: 207px;height: 70px;background-image: url(../images/logo.png);background-size: contain;font-size: 0;
}.header .nav {float: left;margin-left: 40px;height: 70px;
}.header .nav ul li {float: left;margin-right: 48px;line-height: 70px;
}.header .nav ul li a {padding-bottom: 7px;
}.header .nav ul li a:hover {color: #27ba9b;border-bottom: 1px solid #27ba9b;
}.header .search {position: relative;float: left;margin-top: 24px;margin-left: 34px;width: 172px;height: 30px;border-bottom: 2px solid black;
}.header .search input {padding-left: 30px;width: 172px;height: 28px;
}.header .search input::placeholder {font-size: 14px;color: #ccc;
}.header .search span {position: absolute;left: 2px;top: 0;display: inline-block;width: 18px;height: 18px;background-image: url(../images/sprites.png);background-position: -79px -69px;
}.header .car {position: relative;float: left;margin-left: 15px;margin-top: 28px;width: 23px;height: 23px;background-image: url(../images/sprites.png);background-position: -119px -69px;
}.header .car span {position: absolute;top: -6px;left: 15px;width: 20px;height: 15px;background-color: #e26237;border-radius: 8px;line-height: 15px;text-align: center;color: #fff;
}/* 版权区域 */
.footer {height: 342px;background-color: #333;
}.footer .wrapper {width: 1393px;
}.footer .top {padding-top: 59px;padding-left: 135px;height: 175px;border-bottom: 3px solid #434343;
}.footer .top li {position: relative;float: left;margin-right: 300px;width: 195px;height: 58px;line-height: 58px;
}.footer .top li:last-child {margin-right: 0;
}.footer .top li::before {position: absolute;top: 0;left: 0;display: inline-block;content: '';width: 58px;height: 58px;background-image: url(../images/sprites.png);vertical-align: middle;
}.footer .top li span {margin-left: 77px;font-size: 28px;color: #fff;
}.footer .top li:nth-child(2)::before {background-position: -62px 0;
}.footer .top li:nth-child(3)::before {background-position: -128px 0;
}.footer .bottom {padding-top: 40px;font-size: 14px;text-align: center;color: #999;
}
.footer .bottom a {color: #999;
}
.footer .bottom p {margin-bottom: 15px;
}/* 新鲜好物 */
.goods .hd {height: 114px;line-height: 114px;
}.goods .hd h2 {float: left;font-size: 29px;font-weight: normal;height: 114px;
}.goods .hd h2 span {font-size: 16px;margin-left: 34px;color: #999999;
}.goods .hd a {float: right;color: #999;
}.goods .hd a::after {content: "";display: inline-block;margin-left: 13px;width: 7px;height: 13px;background-image: url(../images/sprites.png);background-position: 0 -110px;vertical-align: middle;
}.goods .bd  li {position: relative;float: left;margin-right: 8px;width: 304px;height: 405px;background-color: #f0f9f4;
}.goods .bd  li:last-child {margin-right: 0;
}.goods .bd  li img {width: 304px;
}.goods .bd  li h3 {margin-top: 22px;text-align: center;font-size: 20px;font-weight: normal;color: #333;
}.goods .bd  li div {margin-top: 10px;text-align: center;font-size: 23px;color: #9a2e1f;
}.goods .bd  li b {position: absolute;top: 18px;left: 17px;width: 28px;height: 51px;border-radius: 2px;border: 1px solid #27ba9b;color: #27ba9b;font-size: 18px;font-weight: normal;text-align: center;line-height: 24px;
}/* 生鲜 */
.shenxian .hd {height: 96px;line-height: 96px;
}.shenxian .hd  h2 {float: left;font-size: 29px;font-weight: 400;
}.shengxian .hd .more {float: right;
}.shenxian .hd  ul {float: right;margin-right: 65px;
}.shenxian .hd ul li {float: left;
}.shenxian .hd  li a {padding: 2px 7px;margin-left: 6px;
}.shenxian .hd li a:hover {background-color: #27ba9b;color: #fff;
}.shenxian .more::after {content: "";display: inline-block;margin-left: 13px;width: 7px;height: 13px;background-image: url(../images/sprites.png);background-position: 0 -110px;vertical-align: middle;
}.shenxian .bd .left {float: left;width: 240px;height: 610px;background-color: pink;
}.shenxian .bd .right {float: right;width: 1000px;}.shenxian .bd .right ul li {float: left;margin-left: 8px;margin-bottom: 3px;width: 242px;height: 304px;text-align: center;
}.shenxian .bd .right ul li img {width: 184px;height: 184px;
}.shenxian .bd .right ul li div {margin-left: 30px;text-align: left;
}
.shenxian .bd .right ul li .price {color: #9a2e1f;
}

链接：https://pan.baidu.com/s/1L8EsumEMFrSlB3ZoGBGxVA

提取码：TTXS

耗时10个小时用纯HTML和CSS写成的小兔鲜儿相关推荐

纯HTML+CSS小兔鲜儿网站首页（静态网页）
在项目开始之前,先做好准备工作,创建这样的文件目录,css文件夹包含三个css文件,分别是base.css.common.css.index.css,images放的是固定的照片,uploads放随时 ...
纯css写出来的小彩虹
文章目录下面是效果图下面是源代码学到的知识点今天在CodePen上看见一个用纯css写出来的动画,所以就自己敲了一下源代码链接下面是效果图下面是源代码 <head><m ...
纯HTML、CSS写一个简单的水滴特效，水滴里面可加图标
CSS写水滴特效,里面可加图标代码如下(示例): HTML部分 <!DOCTYPE html> <html lang="en"> <head> ...
Laravel 5.6 中文文档翻译完成，译者 60 人，耗时 10 天
图片来自 laravel-news.com Laravel 5.6 的文档地址: Laravel 5.6 文档页面总结 Laravel 5.6 文档翻译完成,总共耗时 10 天,参与用户 60 人. ...
10元/小时？大涨价后，共享充电宝行业迎来“大地震”！
最近,共享充电宝因涨价而频频登上热搜,商圈和医院等场所每小时充个电要3~4元,酒吧夜店等地方则高达10元/小时,一天的封顶价格最高甚至达到了99元,直接赶上买一个充电宝的价格. 而昨天,共享充电宝迎来 ...
html图片动态案例,10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式.CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互.本文分享了1 ...
如何使用10个小时搭建出个人域名而又Geek的独立博客？
摘要:我在这里写下长篇大论,只希望小白们能跟快速入门.坚持10个小时坚持10个小时坚持10个小时(重要的事情说三遍!!!)搭建出属于自己的个人独立博客,我将会通过安装流程主线+优质文章作为参考 ...
dnf服务器维护时间表2015,DNF深渊频道259期-11.22下午：服务器维护10个小时，史诗掉率极高...
原标题:DNF深渊频道259期-11.22下午:服务器维护10个小时,史诗掉率极高氪不改非,玄可改命,欢迎收看第259期<每日欧皇频道推荐>! 兄弟们,大树之前给大家说过很多次,想要深渊 ...
10个小时、120个项目，AI创业者的行业淘汰赛已经开始
过去一年 AI 风口过境,人才.资金.市场头部效应显现,留给创业者突围的时间不多了. 「面向国内低成本智能音箱市场,我们推出的 69 元方案已经进入到国内一线品牌,将会是 BATX(BAT 和小米)中 ...
css3d动画案例,10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式.CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互.本文分享了1 ...

耗时10个小时用纯HTML和CSS写成的小兔鲜儿

我会把项目所需要的设计图和我自己所写的代码放在末尾的网盘中，有需要可以直接划至末尾下载。

这是我自己根据设计图写出来的小兔鲜儿首页

下面附上我写的代码：

这是首页，即index.html：

这是主页样式，即index.css：

这是通用样式，即common.css:

链接：https://pan.baidu.com/s/1L8EsumEMFrSlB3ZoGBGxVA

提取码：TTXS

耗时10个小时用纯HTML和CSS写成的小兔鲜儿相关推荐

最新文章

热门文章