小米商城首页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin:0; /*两边没间隔*/
}
img{
width:100%;
height:100%;
} /*设置图片是父类的百分百,就按照父类尺寸走*/
.left{
float:left;
}
.header{
background-color:#333; /*背景颜色*/
}
.container{
width: 1226px; /*高度*/
margin: 0 auto; /* 内容居中*/
}
.header .menu{
float:left; /*浮动左边*/
color:white; /*颜色*/
}
.header .account{
float: right; /*浮动到右边*/
color:white;
text-decoration:none;
}
.header account:hover{
color:white;
}
.header a{
color:#b8b8b8;
line-height:40px; /*行高度*/
display:inline-block; /*块级转行内*/
font-size: 12px; /*字体大小*/
margin-right:10px; /*距离左边10边距*/
text-decoration:none;
}
.header a:hover{
color:white;
}
.sub-header{
height:100px;
}
.sub-header .ht{
height: 100px;
}
.sub-header .logo{
width: 234px;
float: left;
}
.sub-header .logo a{
margin-top:22px;
display:inline-block;
}
.sub-header .logo a img{
height:56px;
width:56px;
}
.sub-header .menu-list{
float:left;
line-height:100px;
}
.sub-header .menu-list a{
display: inline-block;
padding: 10px;
font-color:#333;
font-size:16px;
text-decoration: none; /*去掉超链接下的下划线*/
}
.sub-header .menu-list a:hover{ /* :hover: 鼠标放上是什么颜色*/
color:#ff6788;
}
.sub-header .search{
float:right;
}
.slider .sd-img{
width:1226px;
height: 460px;
}
.news{
margin-top: 14px;
}
.news .channel{
width:228px;
height:164px;
background-color:#5f5750;
padding:3px;
}
.news .channel .item{
height: 82px;
width: 76px;
float:left;
text-align:center;
}
.news .channel .item a{
display: inline-block;
font-size: 12px;
padding-top: 18px;
color:#fff;
text-decoration: none;
opacity: 0.7; /*背景透明度*/
}
.news .channel .item a:hover{
opacity: 1;
}
.news .channel .item img{
height: 24px;
width: 24px;
display: block;
margin: 0 auto 4px; /*顶部0px,左右auto,下方4px*/
}
.news .list-item{
width:316px;
height:170px;
}
.back{
position: fixed;
height: 60px;
width:60px;
border:1px solid red;
right: 10px;
bottom:50px;
}
.app{
position:relative;
}
.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://blog.csdn.net/">小米商城</a>
<a href="https://blog.csdn.net/">MIUI</a>
<a href="https://blog.csdn.net/">优品</a>
<a href="https://blog.csdn.net/">开放平台</a>
<a href="https://blog.csdn.net/" class="app">下载APP
<div class="download">
<img src="../imgs/c1.png" alt="">
</div>
</a>
<a href="https://blog.csdn.net/">云服务</a>
<a href="https://blog.csdn.net/">油品</a>
<a href="https://blog.csdn.net/">开放平台</a>
</div>
<div class="account">
<a href="https://blog.csdn.net/">登陆</a>
<a href="https://blog.csdn.net/">注册</a>
<a href="https://blog.csdn.net/">消息通知</a>
</div>
<div style="clear:both"></div>
</div>
</div>
<div class="sub-header">
<div class="container">
<div class="ht logo">
<a href="https://blog.csdn.net/">
<img src="../imgs/1.png">
</a>
</div>
<div class="ht menu-list">
<a href="https://blog.csdn.net/">小米手机</a>
<a href="https://blog.csdn.net/">红米手机</a>
<a href="https://blog.csdn.net/">电视</a>
<a href="https://blog.csdn.net/">笔记本</a>
<a href="https://blog.csdn.net/">平板</a>
</div>
<div class="ht search">3</div>
<div class="clear:both"></div>
</div>
</div>
<div class="slider">
<div class="container">
<div class="sd-img">
<img src="../imgs/b.png" alt="">
</div>
</div>
</div>
<div class="news">
<div class="container">
<div class="channel left">
<div class="item">
<a href="https://home.firefoxchina.cn/">
<img src="../imgs/c1.png" alt="">
<span>保障服务</span>
</a>
</div>
<div class="item">
<a href="https://home.firefoxchina.cn/">
<img src="../imgs/c1.png" alt="">
<span>保障服务</span>
</a>
</div>
<div class="item">
<a href="https://home.firefoxchina.cn/">
<img src="../imgs/c1.png" alt="">
<span>保障服务</span>
</a>
</div>
<div class="item">
<a href="https://home.firefoxchina.cn/">
<img src="../imgs/c1.png" alt="">
<span>保障服务</span>
</a>
</div>
<div class="item">
<a href="https://home.firefoxchina.cn/">
<img src="../imgs/c1.png" alt="">
<span>保障服务</span>
</a>
</div>
<div class="item">
<a href="https://home.firefoxchina.cn/">
<img src="../imgs/c1.png" alt="">
<span>保障服务</span>
</a>
</div>
<div class="clear:both"></div>
</div>
<div class="list-item left">
<img src="../imgs/1.png" alt="">
</div>
<div class="list-item left">
<img src="../imgs/1.png" alt="">
</div>
<div class="list-item left">
<img src="../imgs/1.png" alt="">
</div>
<div class="clear:both"></div>
</div>
</div>
<div class="back"></div>
</body>
</html>
登录框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin:0;
}
.dialog{
position: fixed;
height:300px;
width:500px;
background-color:white;
left:0;
right:0;
margin:0 auto;
top: 200px;
z-index:1000 /*设置优先级,那个达大就放在最上面*/
}
.mask{
background-color:black;
position:fixed;
left:0;
right:0;
top:0;
bottom:0;
opacity:0.7;
z-index:999
}
</style>
</head>
<body>
<!--内容-->
<div style="height: 1000px">12312312</div>
<!--幕布-->
<div class="mask"></div>
<!--弹窗-->
<div class="dialog"></div>
</body>
</html>
原文地址:http://www.cnblogs.com/kh-1314/p/16699993.html
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,请务用于商业用途!
3. 如果你也有好源码或者教程,可以到用户中心发布,分享有积分奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"gltf",如遇到无法解压的请联系管理员!
8. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载
声明:如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性