利用HTML和CSS设计一个静态的“小米商城官网首页”
一、小项目说明
这是个例行的小项目练习，主要利用html和css的基础知识，复刻一个缩减版的小米商城网页。包括【导航栏】、【头部logo区，快捷键、搜索框】、【网页主体】、【网页尾部】几个部分。目前只实现静态的网页显示。最终效果图如下：
二、程序框架
按照开发规范，先在sublime text3中创建【小米商城首页】文件夹，在此文件夹下创建【css】文件夹（放css文件）和【img】文件夹（放图片）和主要的html文件，如下图：
三、小米商城首页.html
<!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="">小米商城</a>
<span class="sep">|</span>
<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> </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>
</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="" width="316px" height="170px">
</a>
</li>
<li>
<a href="">
<img src="img/ad2.jpg" alt="" width="316px" height="170px">
</a>
</li>
<li>
<a href="">
<img src="img/ad3.jpg" alt="" 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="340px">
</a>
</li>
<li>
<a href="">
<img src="img/ad5.png" alt="" width="233px" height="340px">
</a>
</li>
<li>
<a href="">
<img src="img/ad6.png" alt="" width="233px" height="340px">
</a>
</li>
<li>
<a href="">
<img src="img/ad7.png" alt="" width="233px" height="340px">
</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文件夹
/*清除默认样式*/
*{
padding:;
margin:;
}
ul{
list-style: none;
}
/*顶部广告栏*/
.sep {
width: 3.22px;
font: 16px/40px "Microsoft YaHei";
color: #424242;
margin: auto 6px;
}
/*导航栏*/
.topBar{
height: 40px;
background: #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: border;
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.css
.head{
width:100%;
height: 110px;
}
.container2{
width: 1226px;
height: 110px;
margin: 0 auto;
}
.logo{
margin-top: 24px;
margin-right: 24px;
width: 55px;
height: 55px;
float: left;
}
.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.css
.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: 20px;
margin-top: 15px;
}
.tag .form{
width: 70px;
height: 25px;
background-color: red;
float: right;
margin-top: 15px;
}
.limit-shop{
width: 1226px;
height: 340px;
margin: 0 auto;
}
.limit-shop .shangou{
width: 234px;
height: 340px;
float: left;
background-image: url(../img/bd.png);
background-size: 234px 340px;
}
.limit-shop .shangpin{
width: 992px;
height: 340px;
float: left;
}
.limit-shop .shangpin ul li{
width: 233px;
height: 340px;
float: right;
margin-left: 15px;
}
body.css
.foot {
margin-top: 20px;
}
.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.css
五、img文件夹
小米官网的图片直接另存为在这个文件夹中，然后重命名成自己需要的就行。如有需要，也可以评论中告知。
利用HTML和CSS设计一个静态的“小米商城官网首页”的更多相关文章
- 利用git+hugo+markdown 搭建一个静态网站
利用git+hugo+markdown 搭建一个静态网站 一直想要有一个自己的文档管理系统: 可以很方便书写,而且相应的文档很容易被分享 很方便的存储.管理.历史记录 比较方面的浏览和查询 第一点用M ...
- CSS设计一个三列布局的页面
探讨这种布局是因为最近对话框组件以及信息系统B/S界面布局的需要.无论是什么,我们在写CSS之前首先引入reset.css,我使用的是淘宝的reset. 01 /* 02 KISSY CSS Rese ...
- 用html，CSS 写一个静态的博客网页
<!doctype html> <html> <br/><br/><br/> <head> <meta http-equi ...
- 【记录一个问题】opencv官网的opencv android sdk使用opencl并未用到GPU
UMat u_mat;mat.copyTo(u_mat);cv::cvtColor(u_mat, cv::BGR2GARY);这样的代码反复执行,并未发现GPU占用提升.执行时间与不使用UMat相当. ...
- Css打造一个简单的静态七巧板
偶然在微博上看到用css写一个七巧板,正好也有一些源代码,于是就试着敲了敲. 主要是利用了css3的transform,实现平移,旋转,变形,直接用看到的代码敲出来之后有些问题,因为宽度上下面绿色的三 ...
- 利用JAVA反射机制设计通用的DAO
利用JAVA反射机制设计一个通用的DAO 反射机制 反射机制指的是程序在运行时能够获取自身的信息.在java中,只要给定类的名字, 那么就可以通过反射机制来获得类的所有信息. 反射机制创建类对象 ...
- 开源项目 PM 浅谈如何设计官网
有用户反馈进入官网首页光秃秃的一片,大家忙着做产品,忽略了官网的建设,惭愧惭愧. 确实,极简风格和极其简单还是有很大区别的. 旧的 Web 端 除了极其简单之外,它还有一个小问题, ...
- 你真的了解字典(Dictionary)吗? C# Memory Cache 踩坑记录 .net 泛型 结构化CSS设计思维 WinForm POST上传与后台接收 高效实用的.NET开源项目 .net 笔试面试总结(3) .net 笔试面试总结(2) 依赖注入 C# RSA 加密 C#与Java AES 加密解密
你真的了解字典(Dictionary)吗? 从一道亲身经历的面试题说起 半年前,我参加我现在所在公司的面试,面试官给了一道题,说有一个Y形的链表,知道起始节点,找出交叉节点.为了便于描述,我把上面 ...
- 《CSS 设计指南》学习笔记 一
本篇文章是对这几天看完 Charles Wyke-Smit 的 <CSS 设计指南> 后的一些学习笔记与心得,笔者好像是大一的时候开始接触网页设计,由于并不是计算机专业的,所以所有都是自己 ...
随机推荐
- 查看MacOS中的Swift版本和SDK版本
查看MacOS中的Swift版本和SDK版本 来源 https://juejin.im/post/5cde5a62f265da1bc55230e5 # 查看Swift版本 xcrun swift -v ...
- Jenkins 构建方式有几种
jenkins三种部署方式: 一.jenkins触发式构建:用于开发环境部署,开发人员push代码或者合并代码到gitlab项目的master分支,jenkins就部署代码到对应服务器. 二.jenk ...
- C# Microsoft.Office 操作Excel总结
1.导入命名空间: using Microsoft.Office.Interop.Excel; 2.如何打开已有excel文档,或者创建一个新的excel文档 Application app = ...
- FreeRTOS优先级翻转
举例 //高优先级任务的任务函数 void high_task(void *pvParameters) { while(1) { vTaskDelay(500); //延时500ms,也就是500个时 ...
- UCOSIII优先级反转
反转现象 任务优先级:H>M>L 绿色部分:任务占用共享资源 理想状态:7释放信号量后,最高优先级H任务抢占CPU 反转原因:H和L等待同一个信号量,H的任务优先级被降至和L相同优先级,此 ...
- Centos7安装Openresty和orange
1.说明 以下全部操作均已root用户执行 2.安装 2.1 安装依赖 yum install readline-devel pcre-devel openssl-devel gcc 2.2 下载op ...
- 学习python的日常3
python的一些高级特性: 切片(跟名字一样,把一个完整的东西选取一部分自己想要的去切下来):通过切片可以快速的去除一些元素,只要确定好索引位置,避免的循环导致的多写代码 数组,元组,字符串都可以用 ...
- css详解4
1.固定定位 固定定位,页面内容多,页面滚动起来,才能看到固定定位效果. 比如下面这个,随之滚动条滚动它一直在右边.比如固定导航栏,小广告,回到顶部,应用在这些地方.一直固定位置不变的. 首先让页面能 ...
- 《你说对就队》第八次团队作业：Alpha冲刺 第三天
<你说对就队>第八次团队作业:Alpha冲刺 第三天 项目 内容 这个作业属于哪个课程 [教师博客主页链接] 这个作业的要求在哪里 [作业链接地址] 团队名称 <你说对就队> ...
- python制作的翻译器基于爬取百度翻译【笔记思路】
#!/usr/bin/python # -*- coding: cp936 -*- ################################################### #基于百度翻 ...