小米商城主页展示HTML+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="#">小米手机 </a>
<a href="#">红米手机 </a>
<a href="#">电视 </a>
<a href="#">笔记本 </a>
<a href="#">空调 </a>
<a href="#">新品 </a>
<a href="#">路由器 </a>
<a href="#">智能硬件 </a>
<a href="#">服务 </a>
<a href="#">社区 </a>
</div>
</div>
<div class="search">
<input type="text" name="goods" value="请输入商品名:  " 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>手机电话卡   ></li><br>
<li>电视   盒子   ></li><br>
<li>笔记本平板   ></li><br>
<li>家电插线板   ></li><br>
<li>出行   穿戴   ></li><br>
<li>智能路由器   ></li><br>
<li>电源   配件    ></li><br>
<li>健康   儿童    ></li><br>
<li>耳机   箱包    ></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
图片什么的就别在意了，就是网图，王者联盟的英雄人物图片，重要的是框架结构和样式结构
图片一换，这不就是个正经网站首页了吗，哈哈
运行效果如下图：
完毕。
小米商城主页展示HTML+CSS的更多相关文章
- python 全栈开发，Day80(博客系统分析,博客主页展示)
一.博客系统分析 数据库的构建 首先,我们分析一个博客系统的功能: 一个博客可以有多个标签(多对多) 一个博客可以有多条评论(一对多) 一个博客只可以有一个类别(多对一) 接下来,我们分析关系的属性: ...
- echarts 地图 动态 展示 结合css+js
echarts地图展示功能非常强大,官网上静态展示的样例非常多了,动态的资料少.研究了下.我眼下实现的通过ajax从server获取数据动态展示地图. 另外,我们有时候希望在地图之上做些自己定义的东西 ...
- CSS+HTML实现移动端div左右滑动展示
由于手机屏幕的宽度有限,内容太多移动设备一行装不下的,所以很多移动端网站的导航栏都有左右滑动效果,下面我就用CSS+HTML实现移动端div左右滑动展示. CSS:box设置文本不换行,子元素box1 ...
- 利用HTML和CSS设计一个静态的“小米商城官网首页”
一.小项目说明 这是个例行的小项目练习,主要利用html和css的基础知识,复刻一个缩减版的小米商城网页.包括[导航栏].[头部logo区,快捷键.搜索框].[网页主体].[网页尾部]几个部分.目前只 ...
- [css]【转载张鑫旭】我是如何对网站CSS进行架构的
一.写在前面的 都是自己积累形成的一些东西,可能带有明显的个人印记.不是专业内容,不是权威指南,只是展示一点自己的观点,借此希望能与各位优秀的同行交流看法,见解.以得到进步与提高. 二.我所知的一些过 ...
- 我是如何对网站CSS进行架构的
by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=944 一.写在前面的 ...
- Web 建站技术中，HTML、HTML5、XHTML、CSS、SQL、JavaScript、PHP、ASP.NET、Web Services 是什么（转）
Web 建站技术中,HTML.HTML5.XHTML.CSS.SQL.JavaScript.PHP.ASP.NET.Web Services 是什么?修改 建站有很多技术,如 HTML.HTML5.X ...
- HTML、PHP、CSS、JS之间的关系
23:02:06 2019-08-05 自己要搭建网站 虽然可以下载大佬的界面 但至少要懂一点web开发的知识 我现在感觉像个憨憨 啥都不明白 转载自:知乎 https://www.zhihu.com ...
- 购书网站前端实现（HTML+CSS+JavaScript）
购书+阅读静态网页设计与实现 一.主页设计HTML 1.效果展示及实现 2.完整代码 二.主页样式布局CSS 三.空间功能实现Javascript 主要功能 Javascript完整代码: 总结 购书 ...
- HTML表格CSS美化
效果展示 style.css html{ width: 100%; height: 100%; overflow: hidden;}body{ width: 100%; height: 100%; f ...
随机推荐
- mybatis-plus自动填充踩坑
学习使用mybatis-plus的自动填充功能,对create_time和update_time做一个自动填充,期间碰到了一些问题,记录一下问题和相关代码 在实体类字段上增加注解@TableField ...
- 一、ptthon安装
1.在 Window 平台上安装 Python 的简单步骤,打开 WEB 浏览器访问:www.python.org,选择Downloads 2.然后在该页面选择需要下载的版本, 3.下载完成后直接双击 ...
- 使用 netstat 命令监视网络状态
在linux 系统网络出现问题时可以使用netstat -s 来分析问题 使用 netstat 命令监视网络状态 netstat 命令生成包含网络状态和协议统计信息的显示内容.可以通过表格形式显示 T ...
- 后端008_配置Security登录授权过滤器
------------恢复内容开始------------ 现在我们就可以去进行springscurity的配置了.首先我们新建一个配置类.然后该类需要添加@Configuration注解,然后还要 ...
- 1 关于win10原生系统下 OCRmyPDF安装使用
win10原生系统下 OCRmyPDF安装使用长期以来一直在代替freepic2pdf的工具,因为在图片转化PDF时,如果没有勾选该软件 添加OCR层 选项,印象中事后无法挂OCR层上去.福昕风腾,A ...
- ICSFUZZ:操纵I/O、二进制代码重用以及插桩，来Fuzzing工业控制应用程序
本文系原创,转载请说明出处 Please Subscribe Wechat Official Account:信安科研人,获取更多的原创安全资讯 源码:GitHub - momalab/ICSFu ...
- 网络基础-OSI七层模型
什么是OSI模型 OSI模型(或 Open Systems Interconnection Model开放系统互连模型)是网络中使用的绝对基础模型.这个关键模型提供了一个框架,规定所有联网设备将如何发 ...
- 说一下在写Android APP时遇到的具体问题
问题一:总是显示出no such table错误 不要担心这个问题(该担心还是得担心一下的哈),以我出错多次的经验来看,只需要在运行APP之后,回到虚拟机的主界面,然后找到相应的APP虚拟软件,将他删 ...
- 【读书笔记】组合计数中的行列式方法 专题4 Routings: the Lindstrm–Gessel–Viennot lemma
书用的是Handbook of Enumerative Combinatorics (Miklos Bona) 目录 专题4-Routings: the Lindstrm–Gessel–Viennot ...
- LockSupport 详解
更多内容,前往IT-BLOG LockSupport 用来创建锁和其他同步类的基本线程阻塞原语.简而言之,当调用 LockSupport.park时,表示当前线程将会等待,直至获得许可,当调用 Loc ...