首页 > 其他分享 >小米商城主页展示HTML+CSS

小米商城主页展示HTML+CSS

时间：2023-05-07 17:11:05浏览次数：34  
标签：主页 color float height width HTML nbsp margin CSS

大佬们呀，花了好几天的时间总算是看着页面展示可以了，求赐教！

小米商城主页，对大佬来说肯定简单爆了，我抄写了好久呀，总是有一点点的小问题，还搞不明白

主要是一个静态的小米商城页面，HTML前端代码不复杂，一堆的div和ul、li就没问题了，主要是css代码搞不懂导致显示不正常

话不多说，直接上代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>小米商城首页</title>
        <link rel="icon" href="img/favicon.ico">
        <link rel="stylesheet" href="./css/topBar.css">
        <link rel="stylesheet" href="./css/head.css">
        <link rel="stylesheet" href="./css/body.css">
        <link rel="stylesheet" href="./css/foot.css">
    </head>

    <body>
        <!-- 顶部导航栏 -->
        <div class="topBar">
            <div class="container1">
                <div class="topBar-nav">
                    <a href="#">MIUI</a>
                    <span class="sep">|</span>
                    <a href="#">loT</a>
                    <span class="sep">|</span>
                    <a href="#">云服务</a>
                    <span class="sep">|</span>
                    <a href="#">金融</a>
                    <span class="sep">|</span>
                    <a href="#">有品</a>
                    <span class="sep">|</span>
                    <a href="#">小爱开放平台</a>
                    <span class="sep">|</span>
                    <a href="#">政企服务</a>
                    <span class="sep">|</span>
                    <a href="#">下载app</a>
                    <span class="sep">|</span>
                    <a href="#">select Region</a>
                    <span class="sep">|</span>
                </div>

                <div class="topBar-cart">
                    <a href="#" target="_self">
                        <img src="img/cart.png" alt="购物车" id="t-cart">购物车
                    </a>
                </div>

                <div class="user-info">
                    <a href="#">登录</a>
                    <span class="sep">|</span>
                    <a href="#">注册</a>
                    <span class="sep">|</span>
                    <a href="#">消息通知</a>
                    <span class="sep">|</span>
                </div>
            </div>
        </div>

        <!-- 头部logo导航 和商品搜索部分 -->
        <div class="header">
            <div class="container2">
                <!-- logo的盒子 -->
                <div class="logo">
                    <img src="img/logo.png" alt="LOGO">
                </div>
                <!-- 下面是导航的盒子 -->
                <div class="nav">
                    <div class="sub-nav">
                        <a href="#">小米手机&nbsp</a>
                        <a href="#">红米手机&nbsp</a>
                        <a href="#">电视&nbsp</a>
                        <a href="#">笔记本&nbsp</a>
                        <a href="#">空调&nbsp</a>
                        <a href="#">新品&nbsp</a>
                        <a href="#">路由器&nbsp</a>
                        <a href="#">智能硬件&nbsp</a>
                        <a href="#">服务&nbsp</a>
                        <a href="#">社区&nbsp</a>
                    </div>
                </div>
                <div class="search">
                    <input type="text" name="goods" value="请输入商品名:&nbsp&nbsp" id="s1">
                    <input type="submit" name="submit" value="搜索" id="s2">
                </div>
            </div>
        </div>

        <!-- 内容主题部分 -->
        <div class="content">
            <!-- 内容选择样表 -->
            <div class="content-list">
                <div class="sub-content">
                    <ul>
                        <li>手机电话卡&nbsp&nbsp&nbsp></li><br>
                        <li>电视&nbsp&nbsp&nbsp盒子&nbsp&nbsp&nbsp></li><br>
                        <li>笔记本平板&nbsp&nbsp&nbsp></li><br>
                        <li>家电插线板&nbsp&nbsp&nbsp></li><br>
                        <li>出行&nbsp&nbsp&nbsp穿戴&nbsp&nbsp&nbsp></li><br>
                        <li>智能路由器&nbsp&nbsp&nbsp></li><br>
                        <li>电源&nbsp&nbsp&nbsp配件  &nbsp&nbsp&nbsp></li><br>
                        <li>健康&nbsp&nbsp&nbsp儿童  &nbsp&nbsp&nbsp></li><br>
                        <li>耳机&nbsp&nbsp&nbsp箱包  &nbsp&nbsp&nbsp></li><br>
                    </ul>
                </div>
            </div>

            <!-- 轮播图 -->
            <div class="viewpager">
                <a href="#">
                    <img src="img/lunbo.jpg" alt="轮播图" width="992px" height="460px">
                </a>
            </div>
        </div>
        
        <div class="shop">
            <!-- 选购引导 -->
            <div class="channel">
                <ul>
                    <li><a href="#">选购手机</a></li>
                    <li><a href="#">企业团购</a></li>
                    <li><a href="#">F码通道</a></li>
                    <li><a href="#">米粉卡</a></li>
                    <li><a href="#">以旧换新</a></li>
                    <li><a href="#">话费充值</a></li>
                </ul>
            </div>

            <div class="advertise">
                <ul>
                    <li>
                        <a href="#">
                            <img src="img/ad1.jpg" alt="广告1" width="316px" height="170px">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/ad2.jpg" alt="广告1" width="316px" height="170px">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/ad3.jpg" alt="广告1" width="316px" height="170px">
                        </a>
                    </li>
                </ul>
            </div>
        </div>

        <!-- 内容主体 闪购部分 -->
        <div class="tag">
            <div class="letter">小米闪购</div>
            <div class="form">查看更多</div>
        </div>

        <div class="limit-shop">
            <div class="shangou">
            </div>
            <div class="shangpin">
                <ul>
                    <li>
                        <a href="#">
                            <img src="img/ad4.png" alt="广告" width="233px" height="388px">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/ad5.png" alt="广告" width="233px" height="388px">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/ad6.png" alt="广告" width="233px" height="388px">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/ad7.png" alt="广告" width="233px" height="388px">
                        </a>
                    </li>
                </ul>
            </div>
        </div>

        <!-- 页末 售后部分 -->
        <div class="foot">
            <div class="f-cont">
                <div class="f1">
                    <ul>
                        <li><div class="f11"><a href="#">预约维修服务</a></div></li>
                        <li><div class="f11"><a href="#">7天无理由退换货</a></div></li>
                        <li><div class="f11"><a href="#">15天免费换货</a></div></li>
                        <li><div class="f11"><a href="#">满150元包邮</a></div></li>
                        <li><div class="f12"><a href="#">520家售后网点</a></div></li>
                    </ul>
                </div>
                <div class="f2">
                    <div class="f21">
                        <div class="f22">帮助中心</div>
                        <ul>
                            <li><a href="#">账户管理</a></li>
                            <li><a href="#">购物指南</a></li>
                            <li><a href="#">订单操作</a></li>
                        </ul>
                    </div>
                    <div class="f21">
                        <div class="f22">服务支持</div>
                        <ul>
                            <li><a href="#">售后政策</a></li>
                            <li><a href="#">自助服务</a></li>
                            <li><a href="#">相关下载</a></li>
                        </ul>
                    </div>
                    <div class="f21">
                        <div class="f22">线下门店</div>
                        <ul>
                            <li><a href="#">小米之家</a></li>
                            <li><a href="#">服务网点</a></li>
                            <li><a href="#">授权体验店</a></li>
                        </ul>
                    </div>
                    <div class="f21">
                        <div class="f22">关于小米</div>
                        <ul>
                            <li><a href="#">了解小米</a></li>
                            <li><a href="#">加入小米</a></li>
                            <li><a href="#">投资者关系</a></li>
                        </ul>
                    </div>
                    <div class="f21">
                        <div class="f22">关注我们</div>
                        <ul>
                            <li><a href="#">新浪微博</a></li>
                            <li><a href="#">官方微信</a></li>
                            <li><a href="#">联系我们</a></li>
                        </ul>
                    </div>
                    <div class="f21">
                        <div class="f22">特色服务</div>
                        <ul>
                            <li><a href="#">F码通道</a></li>
                            <li><a href="#">礼物码</a></li>
                            <li><a href="#">防伪查询</a></li>
                        </ul>
                    </div>
                    <div class="f21" id="f21">
                        <span class="spf21">400-100-5678</span><br>周一至周日8:00-18:00
                        <div class="f212"><a href="#">联系客服</a></div>
                    </div>
                </div>
            </div>

            <div class="f3">
                探索黑科技，小米为发烧而生
            </div>

        </div>
    </body>
</html>
HTML

CSS代码主要有四个部分，分别是topBar、head、body、foot，用来编辑页面的样式，代码如下：

/* 清除默认样式 */
* {
    padding: 0;
    margin: 0;
}
ul {
    list-style: none;
}
/* 顶部广告栏 */
.sep {
    width: 3.22px;
    font: 16px/40px "Microsoft YaHei";
    color:#424242;
    margin: auto 6px;
}
/* 导航栏 */
.topBar {
    height: 40px;
    background-color: #333;
}
.container1 {
    width: 1226px;
    height: 40px;
    margin: 0 auto;
}
.topBar-nav {
    width: 750px;
    height: 40px;
    float: left;
    text-align: center;
}
.topBar-nav a {
    font-size: 14px;
    font-weight: bolder;
    color: #b0b0b0;
    text-decoration: none;
}
.topBar-nav a:hover {
    color: #fff;
}
.topBar-cart {
    width: 120px;
    height: 40px;
    background-color: gray;
    float: right;
    text-align: center;
}
.topBar-cart a {
    font-size: 14px;
    font-weight: border;
    color: #b0b0b0;
    text-decoration: none;
    margin: 5px auto;
}
.topBar-cart a:hover {
    color: #fff;
}
.topBar-cart #t-cart{
    width: 22px;
    height: 22px;
    position: relative;
    top: 8px;
}
.user-info{
    width: 200px;
    height: 40px;
    float: right;
    margin-right: 15px;
}
.user-info a {
    font-size: 14px;
    font-weight: border;
    color: #b0b0b0;
    text-decoration: none;
}
.user-info a:hover {
    color: #fff;
}
topBar 
.head {
    width: 100%;
    height: 110px;
}
.container2 {
    width: 1226px;
    height: 110px;
    margin: 0 auto;
}
.header .container2 .logo {
    margin-top: 24px;
    margin-right: 24px;
    width: 55px;
    height: 55px;
    float: left;
}
.header .container2 .logo img {
    display: block;
    width: 100%;
    height: 100%;
}
.nav {
    width: 820px;
    height: 110px;
    float: left;
}
.nav .sub-nav {
    width: 580px;
    height: 30px;
    margin: 40px auto 40px;
}
.nav .sub-nav a {
    font-size: 17px;
    font-weight: border;
    color: black;
    text-decoration: none;
    text-align: center;
}
.nav .sub-nav a:hover {
    color: #ff6700;
}
.search {
    margin-top: 25px;
    width: 300px;
    height: 50px;
    float: right;
}
.search #s1 {
    width: 240px;
    height: 50px;
    text-align: right;
    font-weight: border;
}
.search #s2 {
    width: 50px;
    height: 50px;
}
head 
.content {
    width: 1226px;
    height: 460px;
    margin: 0 auto 20px;
}
.content-list {
    float: left;
    width: 234px;
    height: 460px;
    background-color: #355;
}
.content-list .sub-content {
    width: 200px;
    height: 380px;
    margin: 50px auto;
    color: white;
}
.viewpager {
    float: left;
    width: 992px;
    height: 460px;
}
.shop {
    width: 1226px;
    height: 170px;
    margin: 0 auto 30px;
}
.channel {
    width: 225px;
    height: 170px;
    float: left;
}
.channel ul li {
    background-color: #5f5750;
    width: 75px;
    height: 85px;
    font: 12px/85px "Microsoft YaHei";
    text-align: center;
    float: left;
}
.channel ul li a {
    display: block;
    width: 75px;
    height: 85px;
    color: whitesmoke;
}
.channel ul li a:hover {
    display: block;
    width: 75px;
    height: 85px;
    color: white;
}
.shop .advertise {
    float: left;
    width: 992px;
    height: 170px;
}
.shop .advertise ul li {
    width: 316px;
    height: 170px;
    float: right;
    margin-left: 14px;
}
.tag {
    width: 1226px;
    height: 40px;
    margin: 0 auto;
}
.tag .letter {
    width: 90px;
    height: 25px;
    float: left;
    font-size: 15px;
    margin-top: 15px;
}
.tag .form {
    width: 70px;
    height: 25px;
    float: right;
    font-size: 15px;
    margin-top: 15px;
}
.limit-shop {
    width: 1226px;
    height: 340px;
    margin: 0 auto;
}
.limit-shop .shangou {
    width: 234px;
    height: 388px;
    float: left;
    background-image: url(../img/bd.png);
    background-size: 234px 388px;
}
.limit-shop .shangpin {
    width: 992px;
    height: 340px;
    float: left;
}
.limit-shop .shangpin ul li {
    width: 233px;
    height: 340px;
    float: right;
    margin-left: 15px;
}
body 
.foot {
    margin-top: 20px;
}
.foot .f-cont {
    padding: 60px;
}
.foot a {
    text-decoration: none;
}
.foot .f1 {
    height: 50px;
    border-bottom: 1px solid #dddddd;
    margin: 0 auto;
}
.foot .f1 .f11 {
    width: 245.2px;
    height: 25px;
    border-right: 1px solid #dddddd;
}
.foot .f1 .f12 {
    width: 245.2px;
    height: 25px;
}
.foot ul li {
    width: 243.5px;
    float: left;
    text-align: center;
}
.foot ul li a {
    font: 16px/25px "Microsoft YaHei";
    color: black; 
}
.foot ul li a:hover {
    color: #FF6700;
}
.foot .f2 {
    height: 112px;
    padding: 40px 0;
}
.foot .f2 .f21 {
    width: 160px;
    height: 112px;
    float: left;
}
.foot .f2 .f22 {
    width: 150px;
    height: 17px;
    text-align: right;
    margin-bottom: 20px;
}
.f21 ul li a {
    color: #666666;
}
#f21 {
    width: 250px;
    height: 112px;
    margin-left: 20px;
    border-left: 1px solid #dddddd;
    text-align: center;
}
.spf21 {
    color: #ff6700;
    font-size: 20px;
}
.f212 {
    width: 120px;
    height: 30px;
    border: 1px solid #ff6700;
    margin: 20px 70px;
}
.f212 a {
    display: block;
    width: 120px;
    height: 30px;
    font: 12px/30px "Microsoft YaHei";
    color: #ff6700;
}
.f212 a:hover {
    display: block;
    width: 120px;
    height: 30px;
    font: 16px/30px "Microsoft YaHei";
    color: #fff;
    background-color: #ff6700;
}
.f3 {
    height: 73px;
    color: #bebebe;
    text-align: center;
    background-color: #fafafa;
    font: 20px/73px "Microsoft YaHei";
}
foot

图片什么的就别在意了，就是网图，王者联盟的英雄人物图片，重要的是框架结构和样式结构

图片一换，这不就是个正经网站首页了吗，哈哈

运行效果如下图：

 

 

 完毕。

标签：主页,color,float,height,width,HTML,nbsp,margin,CSS
From： https://www.cnblogs.com/Mickeybo101/p/17379595.html

相关文章

  • css3 flex弹性布局详解
    一、flexbox弹性盒子2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。二、基本概念Flex是FlexibleBox的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性......
  • CSS绘制虚线的方案
    一、实现效果......
  • 在 iframe 中继承父窗口 css/js 的方法
    问题缘由iframe属于一个单独的文档（单独的网页窗口）不能直接使用父页面的资源，如css和js。如果iframe和父页面同域则可以在iframe中使用parent对象来使用父页的js对象继承css因为iframe是单独的网页窗口，所以页面一般都有head标签的。在iframe子页面的head......
  • Module build failed (from ./node_modules/css-loader/dist/cjs.js): TypeError: thi
    Modulebuildfailed(from./node_modules/css-loader/dist/cjs.js):TypeError:this.getOptionsisnotafunctionModulebuildfailed(from./node_modules/css-loader/dist/cjs.js):TypeError:this.getOptionsisnotafunction 用了各种办法，没有解决问题，直接把node_m......
  • Html类支持的HTML标签
    Html类位于Android.text.Html中，该类主要用来格式html格式的文本，像浏览器一样对html标签进行解析并渲染输出，但并不是所有的标签都被支持；不过我们可以实现Html.TagHandler这个接口来自我解析；内部类：interface   Html.ImageGetter用于检索HTML中的<img>标签，如果实现了这个接口，当解......
  • FreeCodeCamp-通过创作罗斯科绘画学习 CSS 盒子模型
    index.html<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>RothkoPainting</title><linkhref="./styles.css"rel="stylesheet"></hea......
  • 【Apache POI】Word文档转换HTML，多级列表自定义处理
    本文使用poi和xdocreport组件，在其基础自定义实现某些功能最近有个需求，文档的转换，需要把Word文档转换为编辑器可识别支持的HTML格式类型，Apache的开源组件poi可以解析docx和doc类型的文档，于是使用该组件实现需求关于Word文档的俩种格式，docx格式是一种压缩文件，由xml格......
  • css随着浏览器窗口width度变化展示数据
    这是需求这是通过css写法实现的@mediascreenand(min-width:1900px){//>=1900的设备.boxWidth{width:25%;}}@mediascreenand(min-width:1440px)and(max-width:1899px){.boxWidth{width:33%;}}@mediascreen......
  • uniapp使用scss定义全局css
    1.新建scss文件，定义各种全局css样式$orange:#ee5313!default;//主题色：橙色$darkOrange:#d43a11;//深橙色$color:#333;$gray:#999;//灰色$lightGray:#bbb;//浅灰$grayBg:#f3f3f3!important;//body灰色背景$white:#fff;//白色$blue:#1a......
  • web网页在手机端打开后左右可以滑动的css bug怎么解决
    web网页在手机端打开后左右可以滑动的cssbug怎么解决这个问题通常是由于在移动设备上使用了固定宽度的元素或容器而导致的。解决这个问题的一种方法是使用CSS媒体查询来检测移动设备，并将容器的宽度设置为100%。具体操作如下：@mediaonlyscreenand(max-width:768px){.cont......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99