CSS练习：仿小米官网

最新推荐文章于 2024-01-20 23:21:58 发布
最新推荐文章于 2024-01-20 23:21:58 发布
阅读量1.3k 收藏 6
点赞数
原文链接：http://www.cnblogs.com/believepd/p/10012214.html
版权

代码：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Zz...</title>
    <style>
        /*全局样式*/
        * {
            margin: 0 auto;
            padding: 0;
        }

        a {
            text-decoration: none;
        }

        ul {
            list-style-type: none;
        }

        a:hover {
            color: red !important;
        }

        .fl {
            float: left;
        }

        .fr {
            float: right;
        }

        .clearfix:before,
        .clearfix:after {
            content: "";
            display: block;
            clear: both;
        }

        /*顶部导航条样式*/
        #site-name {
            color: lightcoral;
        }

        .top-nav div a {
            color: white;
        }

        .top-nav {
            background-color: rgb(51, 51, 51);
            width: 100%;
            height: 40px;
        }

        .container {
            width: 1226px;
            margin-left: auto;
            margin-right: auto;
        }

        .top-nav .container {
            line-height: 40px;
            font-size: 12px;
        }

        .top-nav-left span,
        .top-nav-right span {
            padding-left: 6px;
            padding-right: 6px;
        }

        #shop-cart {
            margin-left: 12px;
            padding-left: 12px;
            padding-right: 12px;
            background-color: dimgray;
        }

        /*site-header 样式*/
        .site-header .container {
            height: 100px;
        }

        #header-logo {
            margin-top: 25px;
        }

        #header-nav {
            line-height: 100px;
            margin-left: 186px;
        }

        #header-nav ul li {
            padding-right: 12px;
        }

        #header-nav a {
            color: black;
        }

        #header-search form {
            height: 50px;
            width: 300px;
            margin-top: 25px;
        }

        #header-search form input {
            height: 48px;
            width: 244px;
        }

        #header-search form button {
            height: 52px;
            width: 52px;
            outline: 0;
        }

        /*侧栏导航样式*/
        .side-bar {
            width: 234px;
            height: 440px;
            background-color: #665E57;
            padding-top: 20px;
        }

        .side-bar ul li {
            width: 234px;
            line-height: 42px;
            padding-left: 30px;
            color: white;
        }

        .side-bar ul li a {
            color: white;
        }

        .side-bar ul li:hover {
            background-color: gray;
        }

        .second-ad {
            margin-top: 20px;
        }

        .second-ad-right {
            width: 978px;
        }

        .second-ad-right ul li {
            margin-left: 10px;
        }

        /*限时闪购样式*/
        .fp-head-box {
            margin-top: 30px;
        }

        .fp-body-box {
            margin-top: 15px;
        }

        .fp-body-box .fr {
            margin-left: 14px;
        }

        .fp-head-box h2 {
            color: #e57061;
        }

        /*横幅广告样式*/
        .banner-box {
            margin-top: 40px;
        }

        /*page-main样式*/
        .page-main {
            margin-top: 30px;
        }

        .page-main-head-box {
            margin-top: 30px;
        }

        .page-main .goods-box {
            margin-top: 15px;
            height: 614px;
        }

        .page-main .goods-box-left {
            width: 234px;
        }

        .page-main .goods-box-right {
            width: 992px;
        }

        .goods-item-box {
            width: 234px;
            height: 300px;
            background-color: #F5F5F5;
            margin-left: 14px;
            margin-bottom: 14px;
        }

        .goods-item-box .item-img {
            margin-top: 42px;
            margin-left: 42px;
            margin-right: 42px;
        }

        .goods-item-box .item-title,
        .goods-item-box .item-price {
            text-align: center;
            margin-top: 10px;
        }

        /*热评商品样式*/
        .comment-goods {
            margin-top: 40px;
        }

        .comment-title h2 {
            margin-top: 30px;
        }

        .comment-goods .comment-item {
            margin-top: 15px;
        }

        .comment-goods .comment-box-first,
        .comment-goods .comment-box {
            width: 296px;
            height: 415px;
            background-color: #F5F5F5;
        }

        .comment-goods .comment-box {
            margin-left: 14px;
        }

        .comment-item img {
            width: 296px;
            height: 220px;
        }

        .comment-goods .comment {
            height: 72px;
            margin: 0 28px 22px;
            font-size: 14px;
            line-height: 24px;
            font-weight: 400;
            overflow: hidden;
        }

        .comment-goods .author {
            position: relative;
            height: 18px;
            margin: 0 28px 8px;
            padding: 0 10px 0 0;
            font-size: 12px;
            color: #b0b0b0;
        }

        .comment-goods .info {
            margin: 0 30px;
            white-space: nowrap;
            overflow: hidden;
        }

        /*footer-service样式*/
        .footer-service {
            width: 100%;
            height: 80px;
            background-color: #F5F5F5;
            margin-top: 30px;

        }

        .footer-service .container {
            border-bottom: 1px solid salmon;
        }

        .footer-service ul li {
            margin-top: 30px;
            margin-bottom: 30px;
            width: 234px;
            text-align: center;
        }

        .footer-service .service-item-first {

        }

        .footer-service .service-item {
            margin-left: 13px;
        }

        .slogan p{
            text-align: center;
            color: #999999;
        }

        .slogan {
            margin-top: 30px;
            margin-bottom: 30px;
        }
    </style>
</head>
<body>
<!--顶部导航栏 开始-->
<div class="top-nav">
    <div class="container clearfix">
        <div class="top-nav-left fl">
            <span id="site-name">Zz商城</span>
            <span><a href="">链接A</a></span>
            <span><a href="">链接B</a></span>
            <span><a href="">链接C</a></span>
        </div>
        <div id="shop-cart" class="fr">
            <a href="">购物车(0)</a>
        </div>
        <div class="top-nav-right fr">
            <span><a href="">登录</a></span>
            <span><a href="">注册</a></span>
            <span><a href="">消息通知</a></span>
        </div>
    </div>
</div>
<!--顶部导航栏 结束-->
<!--site-header 开始-->
<div class="site-header">
    <div class="container">
        <div id="header-logo" class="fl">
            <img src="https://dummyimage.com/50x50/FF6400/?text=Zz" alt="">
        </div>
        <div id="header-nav" class="fl">
            <ul class="clearfix">
                <li class="fl"><a href="">Zz会员</a></li>
                <li class="fl"><a href="">秒杀</a></li>
                <li class="fl"><a href="">优惠券</a></li>
                <li class="fl"><a href="">手机</a></li>
                <li class="fl"><a href="">电视</a></li>
                <li class="fl"><a href="">空调</a></li>
            </ul>
        </div>
        <div id="header-search" class="fr">
            <form action="" class="clearfix">
                <input type="text" placeholder="搜索  商品/品牌/店铺">
                <button class="fr">搜索</button>
            </form>
        </div>
    </div>
</div>
<!--site-header 结束-->
<!--ui-viewport 开始-->
<div class="ui-viewport clearfix">
    <div class="container">
        <!--侧栏导航 开始-->
        <div class="side-bar fl">
            <ul>
                <li><a href="">家用电器</a></li>
                <li><a href="">手机</a>/<a href="">数码</a>/<a href="">电脑</a></li>
                <li><a href="">男鞋</a>/<a href="">女鞋</a>/<a href="">包包</a></li>
                <li><a href="">零食</a>/<a href="">水果</a></li>
                <li><a href="">图书</a>/<a href="">电子书</a></li>
                <li><a href="">户外</a>/<a href="">运动</a></li>
                <li><a href="">医药保健</a></li>
                <li><a href="">手表</a>/<a href="">眼镜</a>/<a href="">饰品</a></li>
                <li><a href="">儿童</a>/<a href="">玩具</a></li>
                <li><a href="">鲜花</a>/<a href="">家饰</a></li>
            </ul>
        </div>
        <!--侧栏导航 结束-->
        <!--主广告区 开始-->
        <div class="main-ad fr">
            <img src="https://dummyimage.com/992x460/FFA07A/?text=slideshow" alt="">
        </div>
        <!--主广告区 结束-->
    </div>
</div>
<!--ui-viewport 结束-->
<!--副广告区 开始-->
<div class="second-ad">
    <div class="container clearfix">
        <div class="second-ad-left fl">
            <img src="https://dummyimage.com/234x170/0A3650/" alt="">
        </div>
        <div class="second-ad-right fr">
            <ul>
                <li class="fr">
                    <a href=""><img src="https://dummyimage.com/316x170/90EE90/" alt=""></a>
                </li>
                <li class="fr">
                    <a href=""><img src="https://dummyimage.com/316x170/8B7D6B/" alt=""></a>
                </li>
                <li class="fr">
                    <a href=""><img src="https://dummyimage.com/316x170/EEB4B4/" alt=""></a>
                </li>
            </ul>
        </div>
    </div>
</div>
<!--副广告区 结束-->
<!--限时闪购 开始-->
<div class="flash-purchase">
    <div class="container clearfix">
        <div class="fp-head-box">
            <h2>限时闪购</h2>
        </div>
        <div class="fp-body-box clearfix">
            <ul>
                <li class="fl">
                    <a href=""><img src="https://dummyimage.com/234x340/5c9ee0/" alt=""></a>
                </li>
                <li class="fr">
                    <a href=""><img src="https://dummyimage.com/234x340/b2e561/" alt=""></a>
                </li>
                <li class="fr">
                    <a href=""><img src="https://dummyimage.com/234x340/e561ce/" alt=""></a>
                </li>
                <li class="fr">
                    <a href=""><img src="https://dummyimage.com/234x340/e5da61/" alt=""></a>
                </li>
                <li class="fr">
                    <a href=""><img src="https://dummyimage.com/234x340/6167e5/" alt=""></a>
                </li>
            </ul>
        </div>
    </div>
</div>
<!--限时闪购 结束-->
<!--横幅广告1 开始-->
<div class="banner-box">
    <div class="container">
        <a href=""><img src="https://dummyimage.com/1226x140/151515/" alt=""></a>
    </div>
</div>
<!--横幅广告1 结束-->
<!--page-main 开始-->
<div class="page-main">
    <div class="container clearfix">
        <div class="page-main-head-box">
            <h2>商品</h2>
        </div>
        <div class="goods-box clearfix">
            <div class="goods-box-left fl clearfix">
                <a href=""><img src="https://dummyimage.com/234x614/D2B082/" alt=""></a>
            </div>
            <div class="goods-box-right fr">
                <div class="goods-item-box fr">
                    <div class="item-img">
                        <a href=""><img src="https://dummyimage.com/150x150/9ea79a/" alt=""></a>
                        <p class="item-title"><a href="">商品名称</a></p>
                        <p class="item-price">998元</p>
                    </div>
                </div>
                <div class="goods-item-box fr">
                    <div class="item-img">
                        <a href=""><img src="https://dummyimage.com/150x150/F55D57/" alt=""></a>
                        <p class="item-title"><a href="">商品名称</a></p>
                        <p class="item-price">998元</p>
                    </div>
                </div>
                <div class="goods-item-box fr">
                    <div class="item-img">
                        <a href=""><img src="https://dummyimage.com/150x150/6a3d29/" alt=""></a>
                        <p class="item-title"><a href="">商品名称</a></p>
                        <p class="item-price">998元</p>
                    </div>
                </div>
                <div class="goods-item-box fr">
                    <div class="item-img">
                        <a href=""><img src="https://dummyimage.com/150x150/62a40a/" alt=""></a>
                        <p class="item-title"><a href="">商品名称</a></p>
                        <p class="item-price">998元</p>
                    </div>
                </div>
                <div class="goods-item-box fr">
                    <div class="item-img">
                        <a href=""><img src="https://dummyimage.com/150x150/0aa466/" alt=""></a>
                        <p class="item-title"><a href="">商品名称</a></p>
                        <p class="item-price">998元</p>
                    </div>
                </div>
                <div class="goods-item-box fr">
                    <div class="item-img">
                        <a href=""><img src="https://dummyimage.com/150x150/7961cc/" alt=""></a>
                        <p class="item-title"><a href="">商品名称</a></p>
                        <p class="item-price">998元</p>
                    </div>
                </div>
                <div class="goods-item-box fr">
                    <div class="item-img">
                        <a href=""><img src="https://dummyimage.com/150x150/38ccb8/" alt=""></a>
                        <p class="item-title"><a href="">商品名称</a></p>
                        <p class="item-price">998元</p>
                    </div>
                </div>
                <div class="goods-item-box fr">
                    <div class="item-img">
                        <a href=""><img src="https://dummyimage.com/150x150/f3d990/" alt=""></a>
                        <p class="item-title"><a href="">商品名称</a></p>
                        <p class="item-price">998元</p>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
<!--page-main 结束-->
<!--横幅广告2 开始-->
<div class="banner-box">
    <div class="container">
        <a href=""><img src="https://dummyimage.com/1226x140/c3b8c7/" alt=""></a>
    </div>
</div>
<!--横幅广告2 结束-->
<!--热评商品 开始-->
<div class="comment-goods">
    <div class="container clearfix">
        <div class="comment-title">
            <h2>热评商品</h2>
        </div>
        <div class="comment-item">
            <div class="comment-box-first fl">
                <a href=""><img src="https://www.cnblogs.com/images/cnblogs_com/believepd/1348456/o_shop-site-1.jpg"
                                alt=""></a>
                <p class="comment">超级喜欢！小巧玲珑！音质完美！</p>
                <p class="author">来自于 佩奇 的评价</p>
                <div class="info">
                    <span><a href="">Zz随身蓝牙音箱</a></span> | <span class="price">99元</span>
                </div>
            </div>
            <div class="comment-box fr">
                <a href=""><img src="https://www.cnblogs.com/images/cnblogs_com/believepd/1348456/t_shop-site-2.jpg"
                                alt=""></a>
                <p class="comment">非常可爱，小宝宝喜欢极了！</p>
                <p class="author">来自于 佩奇 的评价</p>
                <div class="info">
                    <span><a href="">Zz智能故事机</a></span> | <span class="price">199元</span>
                </div>
            </div>
            <div class="comment-box fr">
                <a href=""><img src="https://www.cnblogs.com/images/cnblogs_com/believepd/1348456/t_shop-site-3.jpg"
                                alt=""></a>
                <p class="comment">样式真可爱！做出的饭全家人都爱吃！</p>
                <p class="author">来自于 佩奇 的评价</p>
                <div class="info">
                    <span><a href="">Zz压力电饭煲</a></span> | <span class="price">299元</span>
                </div>
            </div>
            <div class="comment-box fr">
                <a href=""><img src="https://www.cnblogs.com/images/cnblogs_com/believepd/1348456/t_shop-site-4.jpg"
                                alt=""></a>
                <p class="comment">外形简洁大方，大爱Zz！真心不错，最主要是性价比高。</p>
                <p class="author">来自于 佩奇 的评价</p>
                <div class="info">
                    <span><a href="">Zz空气净化器</a></span> | <span class="price">399元</span>
                </div>
            </div>
        </div>
    </div>
</div>
<!--热评商品 结束-->
<!--footer-service 开始-->
<div class="footer-service">
    <div class="container clearfix">
        <ul>
            <li class="service-item-first fl"><a href="">预约维修服务</a></li>
            <li class="service-item fr"><a href="">520余家售后网点</a></li>
            <li class="service-item fr"><a href="">满150元包邮</a></li>
            <li class="service-item fr"><a href="">15天免费换货</a>
            <li class="service-item fr"><a href="">7天无理由退换货</a></li>
        </ul>
    </div>
    <div class="slogan"><p>Copyright&nbsp;&copy;&nbsp;2008&nbsp;-&nbsp;2018&nbsp;Zz.com版权所有</p></div>
</div>
<!--footer-service 结束-->
</body>
</html>
View Code

效果：

转载于:https://www.cnblogs.com/believepd/p/10012214.html

weixin_34198797
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css加html仿小米官网
BDJW15877908413的博客
12-09 82
<html> <body> <h1>我的第一个标题</h1> <p>我的第一个段落。</p> </body> </html>
仿小米商城wed练习HTML+css
05-15
在本项目中，"仿小米商城web练习HTML+css"是一个学习Web开发的实践案例，主要涉及HTML和CSS这两种前端核心技术。这个项目旨在帮助初学者理解网页布局、元素设计以及如何构建一个类似小米商城的电商网站界面。接下来...
8个边玩游戏边学习CSS的网站，赶紧收藏！
quxuetrip的博客
02-17 525
玩与学习两不误！
对于html和css初学者，你有什么值得推荐的简单的网页适合练习？
SiKi学院的博客
09-06 388
html和css方面个人认为主要是在于css的学习，变化最多的也在于css，下面主要是介绍一些css相关的练习网站及一些项目，希望对你有帮助~
6个学习CSS的免费在线游戏网站
weixin_43550766的博客
07-21 953
CSS在线学习网站
前端学习笔记：HTML+CSS练习案例
最新发布
m0_52289398的博客
01-20 448
链接：https://pan.baidu.com/s/1Wv7b8Ku28n_GW_AKX964dA?整理自b站课程《前端实战训练：2个网站+1个APP》
仿小米官网(html+js+css)
11-09
【描述】在“学习前端知识时写的一个仿小米官网的一些页面”这一描述中，我们可以了解到这个项目主要是针对前端开发的学习和练习。开发者可能模仿了小米官网的部分界面，比如首页、产品展示、购物车等功能，以增强对...
仿小米官网首页的一个html+css练习demo.zip
12-14
基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于...
纯css仿小米商城首页
02-23
【纯CSS仿小米商城首页】是一项网页布局的实践练习，主要涉及HTML和CSS两种核心技术，旨在通过模仿知名电商网站——小米商城的首页设计，提升网页开发者对于页面布局、响应式设计以及视觉效果的理解与实现能力。...
模仿小米商城官网网页html+css
07-17
小米官网html+css
仿小米MIUIlaucher
10-31
仿小米MIUIlaucher，学习使用
仿小米商城模板
03-10
仿小米商城模板 ecshop模板 直接使用。 ECSHOP模板堂最新仿小米手机免费模板是一款非常简洁模板，基本用默认的功能来实现整体布局，非常适合ecshop初学者使用。
仿小米官网(html+js+css)，html5+jq+css 做的小米官网首页，实现le小米官网所有特效，有需要的小伙伴赶紧下载吧
12-21
学习前端知识时写的一个仿小米官网的一些页面+css样式+js验证代码 学习前端知识时写的一个仿小米官网的一些页面+css样式+js验证代码
仿小米手机官网-html页面实现
02-18
仿小米手机商城的全套页面。包含首页,订单页,列表页,商品详情页,个人中心,购物车,等等几十个页面。 有轮播的实现，demo 基于html css 实现小米官网部分内容搭建。基本功能都实现了
html+css+js前端界面仿小米闪购
07-03
【标题】：“html+css+js前端界面仿小米闪购”项目详解 在网页开发领域，HTML、CSS和JavaScript是构建动态用户界面的基础技术。这个“html+css+js前端界面仿小米闪购”项目旨在为初学者提供一个实践平台，帮助他们...
CSS 陈列馆收集
格瑞--和你一起学习生活!
04-26 138
目前网页标准已是大势所趋。正如原始的品网站点，下面的这些站点将一如既往地显示群聚的力量。 凝视世界顶尖WEB设计师的标准制作，感受标准的气氛，掀起学习标准的浪潮。 CSS设计师们，+U吧。 CSS ZenGarden: http://www.csszengarden.com/ CSS禅意花园是最富盛名的CSS设计陈列馆，DaveShea在创办之初是为了让网页设计师通过CSS样式表针对...
20个学习CSS的绝佳网站——让你从入门到精通
小秋博客
09-30 1348
<br />CSS（层叠样式表）是一种简单的设计语言，能够将页面变漂亮这回事儿变的简单化。在HTML和XHTML中设定页面的样式，这是最常用的应用。但也可以应用于 XML类的文档，包括SVG和XUL。他负责管理网页的设计和外观。使用CSS，你可以控制文字的颜色、字体、段落间距、分栏的数目大小布局、背景图片颜色，以及其他很多种的效果。接下来才是要说的是学习并掌握CSS的20个绝佳站点。这里收集到的CSS站点能使你从初学者到高级人员。这些能协助你开发和改进网站。恩，随便看看吧。<br />Csstutorial
超酷的13个CSS有趣学习网站
hkw20的博客
12-22 6125
13个CSS有趣学习网站 今天来给大家推荐13个辅助你学习巩固知识的网站，让你边玩边学边记！ 因为这些网站大多都是国外的大佬们做的，所以网页大多都是英文，为了更好地使用，给你们推荐两个翻译的方式： 使用Chrome浏览器自带的翻译功能，可以中英随意切换 chrome浏览器自带的翻译功能 下一个"Google 翻译"插件，遇到不懂的英文直接选中点击翻译即可 插件划词翻译 好了，希望英文的存在不要成为你学习的障碍（更重要的还是要私底下多背单词，提升自己的英语水平，毕竟程序员免不了看英文文档） 一、CSS

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值