小米商城主页展示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 ...
随机推荐
- 第3章---数据探索（python数据挖掘）
1.缺失值分析及箱型图 数据:catering_sale.xls(餐饮日销额数) 缺失值使用函数:describe()函数,能算出数据集的八个统计量 import pandas as pd cater ...
- 算法学习01—Java底层的正整数与负整数
算法学习01 - Java 底层的正整数与负整数 本节课学到的知识 编写一个方法,打印出 int 类型数字的二进制长什么样 为什么 int 类型的最大值是 2^32 - 1,最小值是 -2^32 负整 ...
- kafka-集群搭建及启动脚本
集群搭建: [root@localhost kafka_2.11-0.10.2.1]# cat config/server.properties | grep -v ^$ | grep -v ^# b ...
- vue路由重复跳转导致控制台报错
重复跳转了同一个页面,导致空值台报错了! 解决思路: 方案1:在路由跳转时捕获错误. 1.1 全局捕获处理 //index.js import VueRouter from 'vue-router' ...
- 快速部署LAMP黄金架构，搭建disuz论坛
快速部署LAMP架构 [root@zhanghuan ~]# iptables -F[root@zhanghuan ~]# systemctl stop firewalld[root@zhanghua ...
- LeetCode 周赛 336，多少人直接 CV？
本文已收录到 AndroidFamily,技术和职场问题,请关注公众号 [彭旭锐] 提问. 大家好,我是小彭. 今天早上是 LeetCode 第 336 场周赛,你参加了吗?这场周赛整体质量比较高,但 ...
- Android笔记--Application
Application生命周期 在APP运行过程中有且仅有一个Application对象贯穿整个生命周期 Application全局变量 实例化: 声明全局变量:
- MySQL学习（四）锁机制
分类 读锁(共享锁):对同一个数据,多个读操作可以同时进行,互不干扰 写锁(互斥锁):如果当前写操作没有完毕,则无法进行其他的读操作.写操作 操作范围 表锁:一次性对一张表整体加锁.如myisam存储 ...
- P7213 [JOISC2020] 最古の遺跡 3 乱写
不想写题解了,把写在草稿纸上的东西整理了一下 感谢 crashed 大佬的题解与对本人问题的回答,没有他我就不会搞懂这道神仙计数题.
- SpringBoot——MVC原理
更多内容,前往 IT-BLOG 一.SpringMVC自动配置 SpringMVC auto-configuration:SpringBoot 自动配置好了SpringMVC.以下是 SpringBo ...