flask_小米商城
小米商城
- 1、小米顶部
- 2、二级菜单
- 3、推荐区域
- 小米商城
1、小米顶部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小米商城</title>
<style>
body{
margin: 0;
}
<!-- -->
.c1{
width:980px;
background-color:pink;
height:100px;
margin: 0 auto; <!-- 居中对齐 auto：左右自动居中 -->
}
<!-- -->
.container{
width:1226px;
margin: 0 auto;<!-- 0:上下居中对齐 auto：左右自动居中 -->
}
<!-- -->
.header{
color: #b0b0b0;
background: #333;
}
.header .menu{
float:left;
color: white;
}
.header .account{
float:right;
color: white;
height:38px;
line-height:38px;
}
.header a {
color: #b0b0b0;
line-height: 40px;
display: inline-block;
font-size: 12px;
margin-right:10px;
}
</style>
</head>
<body>
<div class="header">
<div class="container">
<div class="menu">
<a>小米商城</a>
<a>MIUI</a>
<a>云服务</a>
<a>有品</a>
<a>开放平台</a>
</div>
<div class="account">
<a>登录</a>
<a>注册</a>
<a>消息通知</a>
</div>
<div style="clear:both"></div>
</div>
</div>
<div class="c1">左边</div>
</body>
</html>
2、二级菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;
}
.sub-header{
z-index: 20;
height: 100px;
background-color: #b0b0b0;
}
.sub-header .logo{
width: 234px;
height: 90px;
float: left;
}
.sub-header .logo a{
margin-top: 22px;
display: inline-block;
}
.sub-header .logo a img{
hright: 56px;
width: 56px;
}
.sub-header .menu-list{
line-height:100px;
float: left;
}
.sub-header .menu-list a{
display: inline-block;
padding: 0 10px;
color: #333;
font-size: 16px;
text-decoration: none;
}
.sub-header .menu-list a:hover{
color: #ff6700;
}
.sub-header .search{
width: 234px;
height: 90px;
float: right;
border: 1px solid red;
}
.container{
width:1128px;
height: 100px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="sub-header">
<div class="container">
<div class="logo">
<a href="https://www.mi.com/">
<img src="../static/logo-mi2.png">
</a>
</div>
<div class="menu-list">
<a href="https://www.mi.com/">小米手机</a>
<a href="https://www.mi.com/">红米手机</a>
<a href="https://www.mi.com/">电视</a>
<a href="https://www.mi.com/">笔记本</a>
<a href="https://www.mi.com/">平板</a>
</div>
<div class="search">3</div>
<div class="clear:both"></div>
</div>
</div>
</body>
</html>
1、a标签是行内标签：高度、内外边距默认无效。
2、垂直方向居中。
文本+line-height
图片+边距
3、a标签默认有下划线。去除
text-decoration: none;
4、某个标签的hover（鼠标放上去后的颜色）
.c:hover{
}
a:hover{
}
3、推荐区域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.item {
height: 82px;
width: 76px;
text-align: center;
}
.item a{
display: inline-block;
text-decoration: none;
font-size: 15px;
padding-top: 18px;
color:#fff
}
.item img{
height: 24px;
width: 24px;
display: block;
margin: 0 auto; <!-- 居中对齐 auto：左右自动居中 -->
}
.sd-img img {
width: 1226px;
height: 460px;
display: block;
margin: auto;
}
.channel {
width: 234px;
height: 170px;
background-color: #5f5750;
padding: 3px
}
.list-item img {
width: 316px;
height: 170px;
display: block;
margin: auto;
}
.left{
float:left;
}
</style>
</head>
<body>
<div calss="slider">
<div calss="container">
<div class="sd-img">
<img src="../static/b.jpg">
</div>
</div>
</div>
<div calss="news" style="margin-left:118px">
<div calss="c1">
<div class="channel left">
<div class="item left ">
<a href="https://www.mi.com/">
<img src="../static/d1.png">
<span>保障服务</span>
</a>
</div>
<div class="item left">
<a href="https://www.mi.com/">
<img src="../static/d1.png">
<span>企业团购</span>
</a>
</div>
<div class="item left">
<a href="https://www.mi.com/">
<img src="../static/d1.png">
<span>F码通道</span>
</a>
</div>
<div class="item left">
<a href="https://www.mi.com/">
<img src="../static/d1.png">
<span>米粉卡</span>
</a>
</div>
<div class="item left">
<a href="https://www.mi.com/">
<img src="../static/d1.png">
<span>以旧换新</span>
</a>
</div>
<div class="item left">
<a href="https://www.mi.com/">
<img src="../static/d1.png">
<span>话费充值</span>
</a>
</div>
<div class="clear:both"></div>
</div>
<div class="list-item left" style="margin-left:15px"><img src="../static/c1.jpg"></div>
<div class="list-item left" style="margin-left:15px"><img src="../static/c2.jpg"></div>
<div class="list-item left" style="margin-left:15px"><img src="../static/c3.jpg"></div>
<div class="clear:both"></div>
</div>
</div>
</div>
</body>
</html>
小米商城
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小米商城</title>
<style>
body{
margin: 0;
}
.container{
width:1226px;
margin: 0 auto;<!-- 0:上下居中对齐 auto：左右自动居中 -->
}
.c1{
width:980px;
background-color:pink;
height:100px;
margin: 0 auto; <!-- 居中对齐 auto：左右自动居中 -->
}
<!-- -->
.header{
color: #b0b0b0;
background: #333;
}
.header .menu{
float:left;
color: white;
}
.header .account{
float:right;
color: white;
height:38px;
line-height:38px;
}
.header a {
color: #b0b0b0;
line-height: 40px;
display: inline-block;
font-size: 12px;
margin-right:10px;
text-decoration: none;
}
.header a:hover{
color: #ff6700;
}
<!-- 2、二级菜单 -->
.sub-header{
z-index: 20;
height: 100px;
}
.sub-header .logo{
width: 234px;
height: 90px;
float: left;
}
.sub-header .logo a{
margin-top: 22px;
display: inline-block;
}
.sub-header .logo a img{
hright: 56px;
width: 56px;
}
.sub-header .menu-list{
line-height:100px;
float: left;
}
.sub-header .menu-list a{
display: inline-block;
padding: 0 10px;
color: #333;
font-size: 16px;
text-decoration: none;
}
.sub-header .menu-list a:hover{
color: #ff6700;
}
.sub-header .search{
width: 234px;
height: 90px;
float: right;
border: 1px solid red;
}
.item {
height: 82px;
width: 76px;
text-align: center;
}
.item a{
display: inline-block;
text-decoration: none;
font-size: 15px;
padding-top: 18px;
color:#fff
}
.item a:hover{
color: #ff6700;
}
.item img{
height: 24px;
width: 24px;
display: block;
margin: 0 auto; <!-- 居中对齐 auto：左右自动居中 -->
}
.sd-img img {
width: 1226px;
height: 460px;
display: block;
margin: auto;
}
.channel {
width: 234px;
height: 170px;
background-color: #5f5750;
padding: 3px
}
.list-item img {
width: 316px;
height: 170px;
display: block;
margin: auto;
}
.left{
float:left;
}
.back{
position: fixed;
width: 60px;
height: 60px;
border: 1px solid red;
right: 0;
bottom: 0;
}
.app{}
.app .download{
position: absolute;
height: 100px;
width: 100px;
display:none;
}
.app:hover .download{
display:block;
}
</style>
</head>
<body>
<div class="header">
<div class="container">
<div class="menu">
<a href="https://www.mi.com/">小米商城</a>
<a href="https://www.mi.com/">MIUI</a>
<a href="https://www.mi.com/" class="app">下载APP
<div class="download">
<img src="../static/rwm.png">
</div>
</a>
<a href="https://www.mi.com/">云服务</a>
<a href="https://www.mi.com/">有品</a>
<a href="https://www.mi.com/">开放平台</a>
</div>
<div class="account">
<a href="https://www.mi.com/">登录</a>
<a href="https://www.mi.com/">注册</a>
<a href="https://www.mi.com/">消息通知</a>
</div>
<div style="clear:both"></div>
</div>
</div>
<div class="sub-header">
<div class="container">
<div class="logo">
<a href="https://www.mi.com/">
<img src="../static/logo-mi2.png">
</a>
</div>
<div class="menu-list">
<a href="https://www.mi.com/">小米手机</a>
<a href="https://www.mi.com/">红米手机</a>
<a href="https://www.mi.com/">电视</a>
<a href="https://www.mi.com/">笔记本</a>
<a href="https://www.mi.com/">平板</a>
</div>
<div class="clear:both"></div>
</div>
</div>
<div calss="slider">
<div calss="container">
<div class="sd-img">
<img src="../static/b.jpg">
</div>
</div>
</div>
<div calss="news" style="margin-left:118px">
<div calss="c1">
<div class="channel left">
<div class="item left ">
<a href="https://www.mi.com/">
<img src="../static/d1.png">
<span>保障服务</span>
</a>
</div>
<div class="item left">
<a href="https://www.mi.com/">
<img src="../static/d1.png">
<span>企业团购</span>
</a>
</div>
<div class="item left">
<a href="https://www.mi.com/">
<img src="../static/d1.png">
<span>F码通道</span>
</a>
</div>
<div class="item left">
<a href="https://www.mi.com/">
<img src="../static/d1.png">
<span>米粉卡</span>
</a>
</div>
<div class="item left">
<a href="https://www.mi.com/">
<img src="../static/d1.png">
<span>以旧换新</span>
</a>
</div>
<div class="item left">
<a href="https://www.mi.com/">
<img src="../static/d1.png">
<span>话费充值</span>
</a>
</div>
<div class="clear:both"></div>
</div>
<div class="list-item left" style="margin-left:15px"><img src="../static/c1.jpg"></div>
<div class="list-item left" style="margin-left:15px"><img src="../static/c2.jpg"></div>
<div class="list-item left" style="margin-left:15px"><img src="../static/c3.jpg"></div>
<div class="clear:both"></div>
</div>
</div>
</div>
<div style="height: 1000px;background-color: white"></div>
<div class="back"></div>
</body>
</html>