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链 ...
随机推荐
- Python-爬虫-猫眼T100
目标站点需求分析 涉及的库 from multiprocessing import Poolfrom requests.exceptions import RequestExceptionimport ...
- Feign服务消费者
Feign的优点:面向接口,完全不用管实现,传入规定格式的数据就可以了 搭建消费者项目(FeignDemo) 1.创建pom.xml <project xmlns="http://ma ...
- Centos6.8部署jumpserver（完整版）
环境: 系统 Centos6.8 IP:192.168.66.131 关闭selinux和防火墙 # 修改字符集,否则可能报 input/output error的问题,因为日志里打印了中文 # lo ...
- mysql 简称
一:DTS(Data Transformation Service) 数据转换服务 大多数组织都使用多种格式和多个位置来存储数据. 为了支持决策.改善系统性能或对现有系统进行升级,经常必须将数据从一个 ...
- 改变input type="file" 文字、样式等
<div class="tac"> <input type="file" id="browsefile" class=&q ...
- 静态属性property
静态属性property(是通过对象去使用) property是一种特殊的属性,访问它时会执行一段功能(函数)然后返回值 1 . 通过@property修饰过的函数属性,调用的时候无需在加() cla ...
- MyBatis - 4.动态SQL
动态 SQL是MyBatis强大特性之一.极大的简化我们拼装SQL的操作. 动态 SQL 元素和使用 JSTL 或其他类似基于 XML 的文本处理器相似. MyBatis 采用功能强大的基于 OGNL ...
- Task任务的屏障机制
Barrier 是 .Net 提供的一直并发的机制,它允许多个任务同步他们不同阶段的并发工作. 这里的关键点是[多个任务]和[不同阶段]. 假设有4个相同的任务(Task),每个任务都有4个阶段(Ph ...
- 10本Java架构师必读书籍
1.大型网站系统与JAVA中间件实践 本书围绕大型网站和支撑大型网站架构的Java中间件的实践展开介绍. 从分布式系统的知识切入,让读者对分布式系统有基本的了解:然后介绍大型网站随着数据量.访问量增长 ...
- [转]PL/SQL Developer 导入导出csv文件
PL/SQL Developer 可以导入或者导出CSV文件. 导入CSV文件步骤: 1.选择tools->text importer.... 2.选择第二个Data to oracle选项卡, ...