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链 ...
随机推荐
- 【进阶3-1期】JavaScript深入之史上最全--5种this绑定全面解析（转）
这是我在公众号(高级前端进阶)看到的文章,现在做笔记 https://github.com/yygmind/blog/issues/20 this的绑定规则总共有下面5种. 1.默认绑定(严格/非严 ...
- iOS 去除高德地图下方的 logo 图标
[self.mapView.subviews enumerateObjectsUsingBlock:^(__kindof UIView * _Nonnull obj, NSUInteger idx, ...
- Spring如何使用JdbcTemplate调用存储过程的三种情况
注:原文 <Spring如何使用JdbcTemplate调用存储过程的三种情况 > Spring的SimpleJdbcTemplate将存储过程的调用进行了良好的封装,下面列出使用Jdbc ...
- Confluence 6 安装补丁类文件
Atlassian 支持或者 Atlassian 缺陷修复小组可能针对有一些关键问题会提供补丁来解决这些问题,但是这些问题还没有放到下一个更新版本中.这些问题将会使用 Class 类文件同时在官方 J ...
- 【kafka】生产者速度测试
非常有用的参考博客:http://blog.csdn.net/qq_33160722/article/details/52903380 pykafka文档:http://pykafka.readthe ...
- 【python】ftp连接，主被动，调试等级
示例代码如下: #!/usr/bin/env python # -*- coding: utf-8 -*- import os from ftplib import FTP def ftp_down( ...
- 闭包&装饰器
闭包 1.函数引用 def test(): print('--test--') # 调用函数 test() # 引用函数 ret = test print(id(ret)) print(id(test ...
- Little Red Riding Hood
问题 : Little Red Riding Hood 时间限制: 1 Sec 内存限制: 1280 MB 题目描述 Once upon a time, there was a little gir ...
- C++ Primer 笔记——函数
1.函数内的局部静态对象在程序的执行路径第一次经过对象定义语句的时候初始化,并且直到程序终止才被销毁,在此期间即使对象所在的函数结束执行也不会对它有影响. size_t get_count() { ; ...
- JS脚本计算从某日凌晨开始,经过了多长时间
var a = new Date();//获取现在的时间 var d = Date.parse("Mar 25, 2019");//设定网站建立的时间 var t = a.getT ...