小米商城主页展示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 ...
随机推荐
- python 每天一个知识点 对文件的操作
对文件的操作: 操作 功能 文件对象 = open(file,mode,encoding) 打开文件获取文件对象 文件对象.read(num) 读取指定长度字节,不指定num读取文件全部 文件对象.r ...
- MySQL增加多用户及数据库
登录MYSQL(有ROOT权限),这里以ROOT身份登录: @>mysql -u root -p @>密码 首先为用户创建一个数据库(yc): mysql>create databa ...
- 在winodws server r2上安装AD域
一.创建第一个域 服务器管理-管理--添加角色和功能 其他都是默认值,下一步 二.重启后,已域账号登录 三.检查AD域有没有安装成功 1.查看计算机名 更改计算机名 2.检查是否含有以下,AD管理中心 ...
- django 批量提交
https://www.cnblogs.com/lbzbky/articles/11792545.html
- Java日常
学习Java第3天的小总结 一.感受总结 Java是目前市场上的主流语言,相对于C和C++语言来说,竞争更为激烈,而这一大特点也在激励着我不断去探索,去学习: 在下载相应编译环境的过程中,由于IDEA ...
- wxml2canvas爬坑之路
效果图: 前提: 公司要求生成一分报告并转为图片并保存,之前用canvas画过,但这次是在不想用canvas一点点画了,再往上找了n久,爬了n多坑,终于搞出来了 插件: wxml2canvas 一:下 ...
- Goravel ORM 新增模型关联，用 Golang 写关联也可以跟 Laravel 一样简单
关于 Goravel Goravel 是一个功能完备.具有良好扩展能力的 Web 应用程序框架.作为一个起始脚手架帮助 Golang 开发者快速构建自己的应用.框架风格与 Laravel 保持一致,让 ...
- 使用EFCore的Code First和MySql数据库迁移
1. 感慨一下 随着.net core的持续更新和升级,至少对于从事.net开发的人员和即将踏入这个领域的人来说,我相信大家的热情还是持续高涨的.国内的.net开发生态相比于之前来说,还是大有所好转的 ...
- Lua基础语法学习笔记
Lua是一门语言,我们可以使用一个库,可以在运行时去编译执行Lua中的代码,从而实现自己的内存中的数据和逻辑: 准备学习环境: 新建一个Lua项目目录,用来写我们的Lua代码: 进入目录,右键使用vs ...
- 一个基于GPT模型实现的Git Commit信息自动生成工具
每次提交代码的时候,你是否有为如何写Commit Message而迟迟按不下提交的时刻呢?然后,死磨硬泡写了一些并提交后,又被review的小伙伴吐槽了呢?相信很多小伙伴有过这样的经历吧? 趁着最近C ...