页面布局之小米商城

最新推荐文章于 2024-05-10 18:56:31 发布
最新推荐文章于 2024-05-10 18:56:31 发布
阅读量4.2k 收藏 11
点赞数 5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36974981/article/details/79150351
版权

准备

  • CDN(http://www.bootcdn.cn/)中搜索normalize的网址（https://cdn.bootcss.com/normalize/7.0.0/normalize.css），保存成 .css文件（名字为：nomalize.css，）。这个文件用来：统一浏览器样式。
  • 下载并安装Sublime Text Build 3143 x64 Setup.exe。
  • 自定义安装Sublime Text的插件（我们必须用到 EMMET 智能插件，高效便捷），可以自行百度推荐插件。
  • iconfont 字体图标 (http://iconfont.cn)：
    进入网站后，选择需要的字体图标加入购物车，完成后点击网页右侧 购物车 ，选择 下载代码 下载；
    解压下载的压缩包，文件内容包含字体文件（.eot .svg .ttf .woff）、css样式文件（iconfont.css）、demo示例文件（一般使用demo_fontclass.html 其中每个图标下的代码就是图标对应的class名）。
  • 新建文件夹mi——>建三个子文件夹css，js，img，分别放置 .css，.js，图片。
  • 将准备好的小米图标.png放到img文件夹下，nomalize.css放在css文件夹下。
  • 新建 mi.html，mi.css（放在css文件夹中）。
  • 将 iconfont字体图标 中的各类型文件放到 文件夹mi 中的各子文件夹中。
    需要修改iconfont.css中的路径：
    这里写图片描述
    使用时给元素添加class（iconfont是必须的 ，另一个就是图标对应的class），例如
<span class="iconfont icon-caigou-xianxing"></span>

Sublime Text操作技巧

  • ！ + Tab 软件自动写出HTML基本框架
  • ctrl + / 添加/解除注释
  • 多窗口编辑：View——>Layout——>Columns：2 （快捷键 Alt+Shift+2）
  • Ctrl + 点击 多行编辑（编辑后按Esc退出多行编辑）
  • ul>li>a + Tab：写出
<ul><li><a href=""></a></li></ul>

过程

  • 在 mi.html 中引入.css文件，包括 mi.css 和 iconfont.class
  • 画出层级关系，明确分为几块，理清思路
  • 广告位
html中:
<a class="bd" href="#"></a>
css中:
.bd{
    display: block;
    height: 120px;
    background: url(../img/bd.png);
    background-size: cover;
 }
  • 通用 安全宽度的盒子
html中：
<div class="top-nav"><div class="container"></div></div>
css中：
.container{width: 1226px; margin: 0 auto;}
  • 预定义样式
/*左浮动*/
.fl{ float: left; }
/*右浮动*/
.fr{ float: right; }
/*清除浮动的class*/
.clearfix:after{
    content: '';
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}
  • 顶部导航栏
    • 左侧导航列表
<ul class="fl top-nav-left">
    <li class="fl"><a href="#">小米商城</a></li>
    <li class="fl"><a href="#">MIUI</a></li>
    <li class="fl"><a href="#">IoT</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="#">Selecrt Region</a></li>
</ul>
.top-nav{ backgroud-color: #333; }
.top-nav li{
    height: 40px;
    text-align: center;
    line-height: 40px;
}
.top-nav a{
    font-size: 12px;
    padding: 0 10px;
    border-right: 1px solid #3e3e3e;
    color: #999;
}
/*最后一个li中a 标签的边框去掉*/
.top-nav li:last-of-type a{ border: none; }
.top-nav a:hover{ color: #fff; }
  • 右侧导航列表
<div class="fr cart-box">
    <a href="#" class="cart-btn">
        <i class="iconfont icon-caigou-xianxing">购物车（0）</i>
    </a>
</div>
<ul class="fr">
    <li class="fr"><a href="#">登录</a></li>
    <li class="fr"><a href="#">注册</a></li>
    <li class="fr"><a href="#">消息通知</a></li>
</ul>

/*购物车按钮*/
.top-nav a.cart-btn{
    display: block;
    height: 40px;
    line-height: 40px;
    padding: 0 30px;
    border: none;
    background-color: rgba(255,255,255,.1);
}
.cart-box:hover .cart-btn{
   background-color: #fff;
   color: #ff6700;
}
.cart-box .icon-caigou-xianxing{
    font-size: 20px;
    vertical-align: -3px;
    font-weight: 600;
}
  • 购物车
<div class="fr cart-box">
    <a href="#" class="cart-btn"><i class="iconfont icon-caigou-xianxing"></i>购物车(0)</a>
    <div class="cart-lists">
        购物车中还没有商品，赶紧选购吧！
    </div>
</div>

/*购物车清单*/
.cart-btn{
    background: rgba(255,255,255,.1);
}
.cart-lists{
    display: none;
    z-index: 9;
    position: absolute;
    right: 0;
    top: 40px;
    width: 320px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    background-color: #fff;
    color: #333;
    font-size: 14px;
    box-shadow: 0 2px 10px #dddbdb;
}
.cart-box:hover .cart-lists{
    display: block;
}
  • logo
<h1 class="fl logo">
    <a href="#">小米科技</a>
</h1>
<div class="fl hot">
    <a href="#"></a>
</div>

.logo{
    margin: 3px 15px 0 0;
    width: 54px;
}
.logo a{
    display: block;
    height: 54px;
    text-indent: -9999px;
    background: url(../img/mi-logo.png) no-repeat center;
    background-size: 54px;
    background-color: #ff6700;
}
.hot a{
    display: block;
    width: 160px;
    height: 60px;
    background: url(../img/hot.gif) no-repeat center;
    background-size: auto 60px;
}
  • nav
<!--导航-->
<ul class="nav fl">
    <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>
    <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>

/*nav*/
.nav li{margin-left: 20px;}
.nav>li>a{
    display: block;
    height: 60px;
    line-height: 60px;
}
.nav>li>a:hover{color: #ff6700;}
  • search
<!--搜索-->
<div class="search-bar fr">
    <form class="fl">
        <input class="search" type="text">
            <div class="quick-link">
                <a href="#">红米5 Plus</a>
                <a href="#">小米Note 3</a>
            </div>
    </form>
    <a class="fl search-btn" href=""><i class="iconfont icon-sousuo"></i></a>
</div>

/*search*/
.search-bar{margin-top: 3px;}
.search-bar form{
    position: relative;
    widows: 260px;
}
.search{
    box-sizing: border-box;
    padding:0 10px;
    width: 260px;
    height: 54px;
    border: 1px solid #ccc;
}
.search:focus{
    outline: none;
    border: 1px solid #ff6700;
}
.search-btn{
    display: block;
    box-sizing: border-box;
    margin-left: -1px;
    width: 55px;
    height: 54px;
    text-align: center;
    line-height: 54px;
    border: 1px solid #ccc;
}
.search-btn .icon-sousuo{
    font-size: 20px;
}
.search-btn:hover{
    background-color: #ff6700;
    color: #fff;
}
.quick-link{
    position: absolute;
    right: 10px;
    top: 16px;
}
.quick-link a{
    font-size: 12px;
    background-color: #eee;
    padding:0 5px;
}
.quick-link a:hover{
    background-color: #ff6700;
    color: #fff;
}
  • banner
<div class="banner">
          <ul class="banner-imgs">
            <li class="active"><a href="#" ><img src="img/banner_01.jpg" alt="01"/></a></li>
            <li><a href="#"><img src="img/banner_02.jpg" alt="02"/></a></li>
            <li><a href="#"><img src="img/banner_03.jpg" alt="03"/></a></li>
            <li><a href="#"><img src="img/banner_04.jpg" alt="04"/></a></li>
            <li><a href="#"><img src="img/banner_05.jpg" alt="05"/></a></li>
            <li><a href="#"><img src="img/banner_06.jpg" alt="06"/></a></li>
          </ul>
          <a href="#" class="arrow arrow-left">
            <i class="iconfont icon-shangyiyehoutuifanhui"></i>
          </a>
          <a href="#" class="arrow arrow-right">
            <i class="iconfont icon-xiayiyeqianjinchakangengduo"></i>
          </a>
          <div class="indicator">
            <ul class="clearfix">
                <li class="fl active"><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>
                <li class="fl"><a href="#"></a></li>
            </ul>
          </div>
        </div>

/*banner*/
.banner-bar{position: relative;}
.banner-imgs li{
    display: none;
}
.banner-imgs li.active{
    display: block;
}
.banner-imgs img{
    display: block;
    width: 100%;
}
  • 树形导航
<div class="nav-pills">
    <ul>
        <li><a href="#">手机 电话卡<i class="iconfont icon-xiayiyeqianjinchakangengduo"></i></a></li>
        <li><a href="#">电视 盒子<i class="iconfont icon-xiayiyeqianjinchakangengduo"></i></a></li>
        <li><a href="#">笔记本<i class="iconfont icon-xiayiyeqianjinchakangengduo"></i></a></li>
        <li><a href="#">智能 家电<i class="iconfont icon-xiayiyeqianjinchakangengduo"></i></a></li>
        <li><a href="#">健康 家具<i class="iconfont icon-xiayiyeqianjinchakangengduo"></i></a></li>
        <li><a href="#">出行 儿童<i class="iconfont icon-xiayiyeqianjinchakangengduo"></i></a></li>
        <li><a href="#">路由器 手机配件<i class="iconfont icon-xiayiyeqianjinchakangengduo"></i></a></li>
        <li><a href="#">移动电源 插线板<i class="iconfont icon-xiayiyeqianjinchakangengduo"></i></a></li>
        <li><a href="#">耳机 音响<i class="iconfont icon-xiayiyeqianjinchakangengduo"></i></a></li>
        <li><a href="#">生活 米兔<i class="iconfont icon-xiayiyeqianjinchakangengduo"></i></a></li>
    </ul>
</div>

/*树形导航*/
.nav-pills{
    position: absolute;
    left: 0;
    top: 0;
    width: 234px;
    height:440px;
    padding-top: 20px;
    background-color: rgba(0,0,0,.5);
}
.nav-pills>ul>li>a{
    display: block;
    height: 42px;
    line-height: 42px;
    font-size: 14px;
    padding: 0 20px 0 26px;
    color: #fff;
}
.nav-pills>ul>li>a:hover{
    background-color: #ff6700;
}
.nav-pills .icon-xiayiyeqianjinchakangengduo{
    float: right;
    color: rgba(255,255,255,.7);
}
Lia------Li
关注
  • 5
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML+CSS实现小米官网顶部导航栏
重生之我是泰勒
07-01 3563
HTML+CSS实现小米官网顶部导航栏
【小米商城首页简单设计】
akisi的博客
12-10 2450
效果如图，但做一个官网首页还需要设置轮播图和鼠标悬停和图片隐藏。 首先是爬取素材 利用F12查看网页布局和源代码，找到要爬取的图片链接以新标签页打开再保存即可。 然后是搭建页面布局框架 从图片可以看出这个官网总体是有四个大块，每个大块又分成多个小块，例如中间所占面积最大的主体部分就可以分为一个大框中有两个中框，第一个中框里面又有10个小框，其他布局以此类推。 设置定位和偏移量 素材和总体框架搭好之后需要把素材放到合适的位置，因此需要设置图片图标的大小和位置。 前一篇已经讲过定位的基本方式，..
小米商城头部实例
m0_61159638的博客
02-08 1051
在用html+css写小米商城首页时，最繁琐的可谓是头部和导航栏，在这里对头部进行实现 可以看到头部有16个超链接形式，左边12个，右边4个，并且整个布局的内容是在中间宽度的，所以可以在头部标签嵌套一个宽度为1226px的标签wrap，为了实现内容，在wrap里面设置两个盒子 一个header-left，一个headder-right，区分左右盒子，如图 <div class="header"> <div class="wrap"> <ul c
【无标题】小米官网布局设计框架
最新发布
2302_79888558的博客
05-10 80
【代码】【无标题】小米官网布局设计框架。
从0到1搭建小米商城首页（二）
qq_45717819的博客
09-09 446
从0到1搭建小米商城首页（二）-- 顶部导航栏完成
小米商城网页设计
qq_44131349的博客
12-01 1918
在.header{ height: 120px; background-image: url(images/top.jpg); background-repeat: no-repeat; background-position: 50%; background-size: auto 120px; } .top{ background-color:
小米商城前端页面显示html设计
06-11
2. **页面布局**：在小米商城的设计中，HTML元素的布局至关重要。常见的布局方式有流式布局（使用div和float属性）、网格布局（利用CSS Grid）和Flexbox布局（使用display:flex）。这些布局技术有助于实现响应式设计...
小米商城页面
03-08
【小米商城页面】是一个基于HTML5和CSS3技术构建的电子商务网站前端页面。这个项目展示了如何运用现代Web技术来创建一个具有互动性和视觉吸引力的在线购物平台。在深入探讨这个项目之前，我们先来了解HTML5和CSS3的...
小米商城首页静态页面（CSS&HTML）
06-10
【标题】：“小米商城首页静态页面（CSS&HTML）”是指一个用于教学目的的项目，旨在帮助前端初学者理解和实践CSS（层叠样式表）与HTML（超文本标记语言）在构建网页，特别是类似小米商城首页这样的电商界面时的应用...
仿小米商城html网页源码
03-31
在仿小米商城的项目中，CSS被用来定制字体、颜色、布局、响应式设计等视觉元素。通过选择器如类选择器（`.class`）、ID选择器（`#id`）、元素选择器（`element`）等，可以精确地定位到HTML元素并应用样式。同时，...
小米官网布局完整代码jq特效加分析
05-26
小米官网完整布局html加分析，jq轮播特效，自动定时，左右切换，京东轮播，调试加笔记分析
小米商城微信小程序源码
05-26
1. 页面设计：采用微信小程序的WXML（WeChat Markup Language）和WXSS（WeChat Style Sheets）进行页面结构和样式布局，实现良好的用户体验。 2. 数据管理：使用JavaScript处理数据，通过小程序的API接口与后端...
HTML5+CSS3实现小米商城（课程设计版）
m0_63512120的博客
11-06 3710
这个小米商城用到了html+css+js，内容是今年6月份的。 结构相对简单，比较容易理解。 如果想要纯html+css实现的小米商城，可以看我的这个作品 HTML+CSS实现小米商城 如果需要其他网页作品了，可以看主页其他作品。 HTML+CSS实现华为商城 HTML+CSS实现华为官网 HTML+CSS实现哔哩哔哩首页 HTML+CSS实现小米官网 HTML+CSS实现QQ注册页面 下面先展示一个页面整体结构，然后再分析一下实现代码吧！ 文章末尾附项目源代码！！！ 2.广告块部分 3.右侧固定
HTML+CSS实现小米官网首页
道阻且长，行则将至。
12-28 3万+
一、HTML+CSS实现小米官网首页 仿写小米官网的页面，熬了两个晚上终于把这个页面做好了，原创不易，欢迎大家点赞和评论，需要源代码的评论区留言或者加我QQ（2997381395），大家记得关注我哦！我会不定期的跟大家分享文章。 二、页面结构如下： 三、效果图如下： 四、部分源代码如下（如需要全部的源代码请加我QQ或者评论区留言，原创不易，记得点赞和收藏哦）。 HTML部分源代码如下： <!DOCTYPE html> <html lang="en"> <head>
小米商城官网部分代码
qq_44986561的博客
02-29 6937
CSS部分 .top-bar-wrapper { width: 100%; height: 40px; line-height: 40px; background-color: #333333; } .tool-bar a { font-size: 14px; color: #b0b0b0; display: block; } .tool...
HTML、CSS制作小米商城网页首页源码解析
热门推荐
Etui۹(･༥･´)و的博客
01-29 3万+
简介： 这是我学习前端以来仿写的第一个项目，沿着尚硅谷李立超老师的教学视频学习。 在仿写这个项目的过程中即巩固了这两周以来的知识，也增加了一些小经验（主要是老师传授），同时也让自己更加有信心学习下去。相信自己一定会实现自己的小梦想！加油！ 小米官网效果： 效果图： 文件目录： HTML文件 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &
HTML+CSS 浮动布局练习：小米商城产品布局
睡觉对我来说很重要的博客
08-04 1849
小米商城产品布局 题目描述：使用CSS浮动布局完成如下效果。 思路：将整体看成一个大盒子，每个产品图片介绍看成一个小盒子，依次放进大盒子中，产品按照一定的间距隔开。可以使用无序列表来实现，将其设置成浮动布局就拥有行内块的特征了。需要值得注意的是：列表拥有默认的内外边距，需要将内外边距设置成0，li前面默认有项目符号，需去除。还需要注意权重问题。 实验代码： <!DOCTYPE html> <html lang="en"> <head> <meta char
小米官网首页简单实现及分析
dream_s_a的博客
03-30 5751
目录一、项目规划1、开发工具以及技术栈2、搭建前言1）创建文件夹2）字体图标使用3）网站TDK三大标签SEO优化4）LOGO SEO 优化二、具体实现1、头部1）头部顶栏site_topbar制作2)头部site_header制作2、主要部分1）菜单menu制作2）轮播图.focus制作3、推荐部分4、内容产品部分1）手机模块2）手表模块3）家电模块4）视频模块5、底部1）site_footer部分2)site_info部分6、侧边固定栏1）滚动至内容产品之前的侧边栏2）滚动至内容产品之后的侧边栏 一、项目
HTML设计 静态页面 小米商城
03-31
同时，页面布局要清晰，重点内容要突出。 2. 导航栏设计：小米商城的导航栏设计简洁明了，包括首页、手机、电视、笔记本等主要分类，同时还有购物车、登录注册等功能。建议在设计导航栏时，要考虑到用户使用习惯和...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值