前端css小米导航栏设置及盒子定位居中问题
1.小米最上部导航栏设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
/*取消前面的点*/
ul{
list-style: none;
}
.nav{
width: 960px;
overflow: hidden;
margin: 50px auto;
background-color: purple;
/*设置圆角*/
border-radius: 5px;
}
.nav ul li{
float: left;
width: 160px;
height: 40px;
line-height: 40px;
text-align: center; }
.nav ul li a{
width: 160px;
height: 40px;
display: block;
color: white;
font-size: 14px;
text-decoration: none; }
.nav ul li a:hover{
background: yellow;
color: green;
text-decoration: underline;
} </style>
</head>
<body>
<div class="nav">
<ul>
<li>
<a href="#">网站导航</a>
</li>
<li>
<a href="#">网站导航</a>
</li>
<li>
<a href="#">网站导航</a>
</li>
<li>
<a href="#">网站导航</a>
</li>
<li>
<a href="#">网站导航</a>
</li>
<li>
<a href="#">网站导航</a>
</li>
</ul>
</div> </body>
</html>
2.导航栏定位问题（position）
有3种方式：
相对定位
固定定位
绝对定位
2.1相对定位（relative）
相对自己原来的位置进行定位，自己原来的位置作为参考点
使用relative下的top,left进行定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
border: 1px solid green;
}
div{
width: 200px;
height: 200px;
background-color: red;
position: relative;
top: 30px;
left: 30px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
使用相对定位可以来进行后续表单位置设计
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.t{
font-size: 30px;
}
.xiaoming{
position: relative;
top: 4px;
}
</style>
</head>
<body> <div>
<input type="text" class="t">
<input type="text" class="xiaoming"> </div> </body>
</html>
2.2绝对定位（absolute）
一般情况下：
1.当我使用top属性描述的时候 是以页面的左上角（跟浏览器的左上角区分）为参考点来调整位置
2.当我使用bottom属性描述的时候。是以首屏页面左下角为参考点来调整位置。
以父辈盒子作为参考点：
1.父辈元素设置相对定位，子元素设置绝对定位，那么会以父辈元素左上角为参考点（父相子绝）
2.如果父亲设置了定位，那么以父亲为参考点。
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style> .wrap{
width: 400px;
height: 400px;
padding: 100px;
background-color: yellow;
position: relative; } .container{
width: 500px;
height: 500px;
background-color: green;
position: relative;
padding: 20px; }
.box1{
width: 200px;
height: 200px;
background-color: red;
position: absolute;
top: 100px;
left: 50px; }
</style>
</head>
<body style='height: 2000px;'>
<div class="wrap">
<div class="container">
<div class="box1"> </div>
</div>
</div>
</body>
</html>
绝对定位下盒子居中问题：
设置绝对定位之后，margin:0 auto;不起任何作用，如果想让绝对定位的盒子居中
父元素相对定位，子元素绝对定位，然后left:50%; margin-left等于元素宽度的一半，实现绝对定位盒子居中（父相子绝）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
.nav{
width: 960px;
height: 49px;
background-color: purple;
position: absolute;
left: 50%;
margin-left: -480px; }
</style>
</head>
<body> <div class="nav"> </div>
</body>
</html>
2.3固定定位（fixed）
设置固定定位，用top描述，那么是以浏览器的左上角为参考点
如果用bottom描述，那么是以浏览器的左下角为参考点(做小广告用的)
固定定位，点击后返回顶部：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{
width: 100px;
height: 100px;
background-color: red;
position: fixed;
bottom: 0;
right: 50px;
line-height: 100px;
text-align: center;
color: white;
}
</style>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body> <div class="wrap">
<p>
<a href="#">回到顶部</a> </p>
<img src="./timg.jpg" alt="">
<img src="./timg.jpg" alt="">
<img src="./timg.jpg" alt="">
<img src="./timg.jpg" alt="">
<img src="./timg.jpg" alt="">
<img src="./timg.jpg" alt="">
<img src="./timg.jpg" alt="">
<img src="./timg.jpg" alt="">
<img src="./timg.jpg" alt="">
<img src="./timg.jpg" alt="">
<img src="./timg.jpg" alt="">
<img src="./timg.jpg" alt="">
<img src="./timg.jpg" alt="">
<img src="./timg.jpg" alt="">
<img src="./timg.jpg" alt="">
<img src="./timg.jpg" alt="">
<img src="./timg.jpg" alt="">
<img src="./timg.jpg" alt=""> </div> <script> $(function(){
$('p').click(function(){
$('html').animate({
"scrollTop":0
},1000)
})
})
</script>
</body>
</html>
2.4关于盒子之间的垂直居中解决思路：
基础版：
.parent {
width:800px;
height:500px;
border:2px solid #000;
position:relative;
}
.child {
width:200px;
height:200px;
/*(500-200)/2*/
margin-top:150px;
margin-left: 300px;
position: absolute;
background-color: red;
}
第一种：
.parent {
width:800px;
height:500px;
border:2px solid #000;
position:relative;
}
.child {
width:200px;
height:200px;
margin: auto;
/*必须是auto*/
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
background-color: red;
}
第二种：
.parent {
width:800px;
height:500px;
border:2px solid #000;
display:table-cell;
vertical-align:middle;
text-align: center;
}
.child {
width:200px;
height:200px;
display:inline-block;
background-color: red;
}
第三种：
.parent {
width:800px;
height:500px;
border:2px solid #000;
display:flex;
justify-content:center;
align-items:center;
}
.child {
width:200px;
height:200px;
background-color: red;
}
第四种：
.parent {
width:800px;
height:500px;
border:2px solid #000;
position:relative;
}
.child {
width:300px;
height:200px;
margin:auto;
position:absolute;/*设定水平和垂直偏移父元素的50%，
再根据实际长度将子元素上左挪回一半大小*/
left:50%;
top:50%;
margin-left: -150px;
margin-top:-100px;
background-color: red;
}
3.z-index（用于涂层之间的遮盖） 注意这里是用于涂层之间啊，没有涂层何谈遮盖
z-index 值表示谁压着谁，数值大的压盖住数值小的
只有定位了的元素，才能有z-index（浮动元素无法使用）
index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素
也具有从父现象
z-index只决定同一父级下的子元素之间的堆叠顺序。用这个必须得留心一下，否则盖不住
例1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style> .box1{
width: 200px;
height: 200px;
background-color: red; }
.box2{
width: 200px;
height: 200px;
background-color: green;
position: relative;
top: 50px;
z-index: 10; }
.box3{
width: 200px;
height: 200px;
background-color: yellow;
position: relative;
z-index: 8; } </style>
</head>
<body>
<div class="box1"> </div>
<div class="box2"> </div>
<div class="box3"> </div> </body>
</html>
z-index的应用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
/*设置图片与固定栏间的距离*/
body{
padding-top: 40px;
}
.nav{
width: 100%;
height: 40px;
background-color: black;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
/*数值最大，谁也无法压盖住固定栏*/
}
.wrap{
width: 960px;
overflow: hidden;
margin: 0px auto;
background-color: purple;
border-radius: 5px; }
.wrap ul li{
float: left;
width: 160px;
height: 40px;
line-height: 40px;
text-align: center; }
.wrap ul li a{
width: 160px;
height: 40px;
display: block;
color: white;
font-size: 14px;
text-decoration: none; }
.wrap ul li a:hover{
background: yellow;
color: green;
text-decoration: underline;
} p{
position: relative;
} </style>
</head>
<body style="height: 3000px">
<div class="nav">
<div class="wrap">
<ul>
<li>
<a href="#">网站导航</a>
</li>
<li>
<a href="#">网站导航</a>
</li>
<li>
<a href="#">网站导航</a>
</li>
<li>
<a href="#">网站导航</a>
</li>
<li>
<a href="#">网站导航</a>
</li>
<li>
<a href="#">网站导航</a>
</li>
</ul>
</div>
</div> <img src="./timg.jpg" alt="">
<img src="./timg.jpg" alt="">
<img src="./timg.jpg" alt="">
<img src="./timg.jpg" alt="">
<p>哈哈哈哈哈哈哈哈</p>
<img src="./timg.jpg" alt="">
<img src="./timg.jpg" alt="">
<img src="./timg.jpg" alt=""> </body>
</html>
前端css小米导航栏设置及盒子定位居中问题的更多相关文章
- 谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- HTML/CSS：导航栏水平和垂直
1.垂直导航栏 导航栏 = 链接列表导航栏基本上是一个链接列表,因此使用 <ul> 和 <li> 元素是非常合适的.如需构建垂直导航栏,我们只需要定义 <a> 元素 ...
- ABP(现代ASP.NET样板开发框架)系列之22、ABP展现层——导航栏设置
点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之22.ABP展现层——导航栏设置 ABP是“ASP.NET Boilerplate Project (ASP.NE ...
- 转：ios导航栏设置
原帖:http://www.cocoachina.com/industry/20131104/7287.html 本文提供的代码需要用Xcode 5来执行.如果你还在使用老版本的Xcode,那么在运行 ...
- 滑动门出现的背景---实例微信导航栏（a盒子里面包span盒子，文字写在span里）
需求: 制作网页时,为了美观,常常需要为网页元素设置特殊形状的背景,比如微信导航栏,有凸起和凹下去的感觉,其中最大的问题是字数不同,如何做? 解决: 用一个a包含span来制作,字数放在span里面. ...
- 第8天：CSS制作导航栏
今天主要学习了网页导航栏的制作.注意:引入外部CSS样式时,如果使用background:url(../images/1.png),一定记得用..跳出当前文件夹,回到上级目录. 一.导航栏实现步骤: ...
- Css之导航栏学习
Css: ul { list-style-type:none; margin:; padding:; overflow:hidden; background-color:blue; /*固定在顶部*/ ...
- CSS 笔记——导航栏、下拉菜单、提示工具
8. 导航栏.下拉菜单.提示工具 (1)导航栏 垂直导航栏 <!DOCTYPE html> <html lang="en"> <head> &l ...
- HTML+CSS实现导航栏二级下拉菜单完整代码
工具是vs code 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
随机推荐
- BZOJP1096[ZJOI2007]仓库建设——solution
Description L公司有N个工厂,由高到底分布在一座山上.如图所示,工厂1在山顶,工厂N在山脚.由于这座山处于高原内陆地区(干燥少雨),L公司一般把产品直接堆放在露天,以节省费用.突然有一天, ...
- 如何在FineReport中解析数据库内XML文件
在数据库表中,其中字段XML所存的为xml格式数据在表xmltest中.那么在使用该表进行报表制作时,需要将存于xml字段中的值读取出来作为报表数据源. XML每条记录数据格式如下: <Fiel ...
- 安卓app开发-04- app运行的运行和调试
app 运行的运行和调试 本篇介绍在 Android Studio 开发工具,运行调试设备:真机和虚拟机. 真机调试(USB 连接手机) 尽量使用真机进行调试,无论是调试效果和速度都比模拟器要好.使用 ...
- Python学习---面向对象的学习[基础]
面向对象 面向对象的三大特性是指:封装.继承和多态. 说明: Python可以函数式编程,也可以面向对象编程 l 面向过程:根据业务逻辑从上到下写垒代码 l 函数式 :将某功能代码封装到函数中,日后便 ...
- Kinaba 简单画图
此片文章简单介绍如何在kinaba 上画图. 如果你,还没有搭建ELK 请参考:ELK日志分析平台搭建全过程 本文参考:http://www.cnblogs.com/hanyifeng/p/58607 ...
- linux gcc 区分32位或64位编译 && 请问arm存储，是以小端格式还是以大端格式？
linux gcc 区分32位或64位编译 Linux系统下程序如何区分是64位系统还是32位系统 经过对include的翻查,最后确定gcc以__i386__来 进行32位编码,而以__x86_ ...
- java中形参的可变参数的定义(如String... args) .
如果有下面的一个笔试题: 已知我们有如下的调用关系 logIt(”log message 1 “); logIt(”log message2”, " log message3”); logI ...
- 当有多个相同的DIV时,我怎么判断我点击的是哪个嘞
链接:https://segmentfault.com/a/1190000003480973?utm_source=tuicool&utm_medium=referral 序言 这是我曾经面试 ...
- [T-ARA][괜찮아요][没关系]
歌词来源: 没关系:http://music.163.com/#/song?id=22704448 没关系(Remix Ver.):http://music.163.com/#/song?id=258 ...
- Git commit comment 汇总标准
参考汇总互联网其它文章建议,结合PEP 257 Docstring Conventions的描述,总结的Git 注释风格,作为个人执行的标准.内容如下: 遵循标准: 1,所有注释尽量坚持使用英文,如果 ...