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链 ...
随机推荐
- 1)django-建立步骤和目录说明
一:前言 django是python最流行的WEB框架. 二:django安装 pip install django 三:django项目建立步骤 1.创建django工程 django-admin ...
- liux三剑客grep 正则匹配
001正则匹配(大部分需要转义) ‘^‘: 锚定行首 '$' : 锚定行尾 [0-9] 一个数字 [^0-9] 除去数字所有,^出现在[]这里表示取反 [a-z] [A-Z] [a-Z] \s 匹配空 ...
- python2.7报错Non-ASCII character '\xe5' in file knn.py on line 3, but no encoding declared; see http://python.org/dev/peps/pep-0263/ for details
Python默认是以ASCII作为编码方式的,如果在自己的Python源码中包含了中文(或者其他非英语系的语言),此时即使你把自己编写的Python源文件以UTF-8格式保存了,但实际上,这依然是不行 ...
- winform无需安装pdf阅读器打开pdf文件
控件来源:http://www.o2sol.com/pdfview4net/download.htm (使用版本:2016年8月31号更新版) 备份链接: https://pan.baidu.com/ ...
- Confluence 6 workbox 配置查询间隔
查询间隔在Confluence 服务器中的 workbox 被用来显示应用内通知和任务. 激活的查询间隔(Active polling interval) Confluence 将会等待多少时间(秒) ...
- Confluence 6 基于 Confluence 数据中心的 SAML 单点登录
安全申明标记语言(Security Assertion Markup Language (SAML))是一个基于 XML 的数据格式,允许各个软件平台通过identity provider (IdP) ...
- elementui上传图片到七牛云服务器
注册七牛云 首先,注册七牛云,并且完成实名认证,完成后会在个人中心->秘钥管理中看到两个秘钥AccessKey/SecretKey 创建存储空间(必须要实名认证) 生成上传凭证 为了实现上传,我 ...
- 1873: This offer（zzuli）
题目描述 话说WX入职已经有一个多月了,公司boss突然扔给他了一个问题,如果解决不了的话就会被开除掉 - -#,情急之下他只能来请教你了,boss给了他N个不大于100的数,现在wx需要将这N个数通 ...
- 获取checkbox勾选的id
需求描述:做批量删除或者批量修改的时候需要获得多个id,根据checkbox勾选来获取对应的d 两种方法: //html代码<table id="table1"> &l ...
- cf1110d 线性dp
很精练的一道题 /* dp[i][j][k]表示值i作为最大值结束的边剩k条,i-1剩下j条的情况的结果 dp[i][k][l]是由dp[i-1][j][k]的j决定的,因为k+l是被留下给后面用的, ...