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链 ...
随机推荐
- Golang的优雅重启
更新(2015年4月):Florian von Bock已将本文中描述的内容转换为一个名为endless的优秀Go包 . 如果您有Golang HTTP服务,可能需要重新启动它以升级二进制文件或更改某 ...
- FileStorage
1. 函数说明 功能 函数声明 参数 FileStorage构造函数 cv::FileStorage:: FileStorage(const String& ...
- ios 调整 label 的字体行间距
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 100, self.view.frame.size.width, 200) ...
- Confluence 6 安全相关问题提交链接
找到和报告安全漏洞 Atlassian 有关安全漏洞的报告细节,请参考如何报告一个安全问题(How to Report a Security Issue)链接. 发布 Confluence 安全公共 ...
- Confluence 6 发送 Confluence 通知到其他 Confluence 服务器
你可以配置 Confluence 服务器向其他的 Confluence 服务器发送消息.在这种情况下,Confluence 服务器将不会显示 workbox. 希望发送消息到其他 Confluence ...
- Java语法基础常见疑惑解答
1. 类是java的最小单位,java的程序必须在类中才能运行 2. java函数加不加static有何不同 java中声明为static的方法称为静态方法或类方法.静态方法可以直接调用静态方法,访问 ...
- CF767C Garland--树形dp
今天无聊的我又来切树形dp了,貌似我与树形dp有仇似的. n个节点的树 第i个节点权值为 n<=10^6 −100<=ai<=100 问是否能够删除掉两条边,使得该树分成三个不为空 ...
- 饮冰三年-人工智能-linux-05 Linux进程
1:top 命令,查看cpu使用情况.(由于top是实时刷新,占用内存比较大) P:按照cpu使用率降序排列 M:按照内存使用率降序排列 2:free 命令,查看内存使用情况 free -m 以M为单 ...
- 51 Nod 1240 莫比乌斯函数
1240 莫比乌斯函数 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题 收藏 关注 莫比乌斯函数,由德国数学家和天文学家莫比乌斯提出.梅滕斯(Mertens)首先使 ...
- PAT Basic 1071. 小赌怡情(15)
题目内容 常言道"小赌怡情".这是一个很简单的小游戏:首先由计算机给出第一个整数:然后玩家下注赌第二个整数将会比第一个数大还是小:玩家下注t个筹码后,计算机给出第二个数.若玩家猜对 ...