html-模仿小米首页定位案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
li{
list-style: none;
}
div{
width: 1226px;
height: 460px;
border: 1px solid red;
margin: 50px auto;
position: relative;
}
div .tab{
overflow: hidden;
border: 1px solid red;
width: 120px;
border-radius: 20px;
position: absolute;
bottom: 20px;
right: 50px;
}
div .tab li{
width: 10px;
height: 10px;
background: #b864ff;
float: left;
border-radius: 50%;
margin: 5px;
}
div .btn li{
width: 50px;
height: 100px;
text-align: center;
line-height: 100px;
background: #ddd;
font-size: 25px;
font-weight: bold;
position: absolute;
top: 50%;
margin-top: -50px;
}
div .btn li.left{
left: 234px;
}
div .btn li.right{
right: 0;
}
div .list{
position: absolute;
top: 0;
left: 0;
width: 234px;
/*height: 460px;*/
background: #333;
padding: 20px 0;
font-size: 14px;
}
div .list li{
padding-left: 30px;
line-height: 42px;
height: 42px;
}
div .list li:hover{
background: #ffa31e;
cursor: pointer;
}
div .list li a{
text-decoration: none;
color: white;
}
div .list li a span{
position: absolute;
left: 200px;
}
div .list li.item1 div{
width: 800px;
height: 460px;
background: #b864ff;
position: absolute;
top: -50px;
left: 234px;
z-index: 2;
display: none;
}
div .list li.item1:hover div{
display: block;
}
</style>
</head>
<body>
<div>
<img src="http://i1.mifile.cn/a4/xmad_15277566791601_pEzCs.jpg" width="1226" height="460">
<ul class="list">
<li class="item1"><a href="#">手机 电话卡 <span>></span></a>
<div>
</div>
</li>
<li><a href="#">手机 电话卡 <span>></span></a></li>
<li><a href="#">手机 电话卡 <span>></span></a></li>
<li><a href="#">手机 电话卡 <span>></span></a></li>
<li><a href="#">手机 电话卡 <span>></span></a></li>
<li><a href="#">手机 电话卡 <span>></span></a></li>
<li><a href="#">手机 电话卡 <span>></span></a></li>
<li><a href="#">手机 电话卡 <span>></span></a></li>
<li><a href="#">手机 电话卡 <span>></span></a></li>
<li><a href="#">手机 电话卡 <span>></span></a></li>
</ul>
<ul class="tab">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="btn">
<li class="left"><</li>
<li class="right">></li>
</ul>
</div>
</body>
html-模仿小米首页定位案例的更多相关文章
- 模仿百度首页“元宵节汤圆”动图（js的定时任务：setInterval）
模仿百度首页“元宵节汤圆”动图:(js的定时任务:setInterval) 原理:需要一张切图,通过不断定位使得图片就像一帧一帧的图片在播放从而形成了动画 效果图: 切图地址: https://ss1 ...
- 模仿东京首页banner轮播，京东新闻上下滚动动画实现（动画实现）
接着上篇 微信小程序-阅读小程序demo写:http://www.cnblogs.com/muyixiaoguang/p/5917986.html 首页banner动画实现 京东新闻上下动画实现 想着 ...
- 海盗船长小米首页小船来回摆动CSS3.0效果
海盗船长小米首页小船来回摆动CSS3.0效果,偶然之间看到的,就写了一个. <!DOCTYPE html> <html lang="en"> <hea ...
- 模仿百度首页“元宵节汤圆”动图，并实现360°不停旋转（CSS3的animation动画效果）
模仿百度首页“元宵节汤圆”动图,并实现360°不停旋转(CSS3的animation动画效果) 效果图: 切图地址: https://ss1.bdstatic.com/5eN1bjq8AAUYm2zg ...
- js模仿京东首页的倒计时功能
模仿京东首页的倒计时 我们学习了定时器,可以用定时器做一个倒计时,于是我模仿了京东首页倒计时. 先看看京东首页的倒计时. 思路: 如何倒计时? 给一个未来的时间.然后计算未来时间到现在的时间戳. 用定 ...
- 网络错误定位案例 ICMP host *** unreachable - admin prohibited
1. 环境 一台物理服务器 9.115.251.86,上面创建两个虚机,每个虚机两个网卡: vm1:eth0 - 9.*.*.232 eth1:10.0.0.14 vm2: eth0 - 9.8.*. ...
- 入门html第一次copy小米首页布局
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- 模仿NetFlix首页效果
之前写过UWP 带左右滚动按钮的横向ListView———仿NetFlix首页河的设计,讲述了如何设计一个带有左右滚动按钮横向的ListView. 不过我在半年之前挖了一个坑,由于工作关系,没时间来填 ...
- 如何用微信小程序模仿豆瓣首页
程序思路: 用微信自带组件swiper来实现轮播图 用豆瓣提供的api(这里使用的电影api)来获取最近的电影数据[豆瓣api地址] 获取数据用微信的request方法,只需要提供豆瓣api的url链 ...
随机推荐
- 28)django-form+ajax实现验证
form+ajax实现验证 #obj.errors返回的是ErrorDict,不是字典(虽然继承字典) #obj.errors.as_json() 返回的字符串(前端要连续反解两次) #obj.err ...
- ionic3 隐藏子页面tabs
看了几天ionic3 问题还挺多的,今天想把所有子页面tabs 给去掉,整了半天,发现app.Module 是可以配置的 修改 IonicModule.forRoot(MyApp) imports: ...
- 基于ajax实现的登录
一.需要知道的新知识点 1.刷新验证码.给src属性加一个?号.加个?会重新去请求 //#给验证码刷新 $(".vialdCode_img").click(function () ...
- SpringBoot图片上传(二)
需求简介:做新增的时候,需要上传图片.(⊙o⊙)…这需求描述也太简单了吧,限制文件大小60*60 512kb ,第一次做,记录一下嗷,废话就不啰嗦了 上代码 代码: //html代码<div c ...
- 调皮的HR
如图:笔试题 # -*- coding: utf- -*- """ Created on Thu Apr :: @author: weilong "" ...
- poj3662 二分+最短路
/* 给定一张无向图,要求找到1-n的路径,该路径上第k+1大的边是所有路径上最小的 如果没有1-n的路,那么输出-1 二分答案mid,遍历一次所有边,如果边权小于mid,则设为0,大于mid,则设为 ...
- 把tomcat服务器配置为windows服务的方法
转自:http://ykyfendou.iteye.com/blog/2032916 使用tomcat开发的项目,我们把项目交付给客户的时候,客户都不希望在每次开机的时候都要启动一下tomcat服务器 ...
- C++ Primer 笔记——迭代器
iostream迭代器 1.虽然iostream类不是容器,但是标准库定义了可以用于IO的迭代器.创建一个流迭代器的时候必须指定要读写的类型.我们可以对任何具有输入运算符(>>)的类型定义 ...
- 学习REST
REST:Representational State Transfer,资源的表现状态转换.可以理解为对资源的操作. 1. 资源 资源就是业务对象,如图片.文本.歌曲或者客户.交易等.这些是用户 ...
- springboot 集成mongodb
环境依赖 在pom文件引入spring-boot-starter-data-mongodb依赖: <dependency> <groupId>org.springframewo ...