day41 css
内容回顾
1.定位:
相对定位:
参考点: 相对于自己原来的位置
特点: 标准文档流下的相对定位,
如果一个标准文档流的盒子,仅仅设置了相对定位, 与普通的盒子一样
设置相对定位之后, 如果调整位置, 会留一个坑在那里
作用:
1.做子绝父相的参考
2.微调元素
3.提升层级(不建议)
绝对定位
参考点:
父子盒子嵌套, 如果父盒子设置了相对定位, (绝对定位, 固定定位:这两没有实战意义), 那么子盒子都是以父盒子的左上角为参考点
单个盒子设置绝对定位, 如果以top描述,以页面的左上角为参考点
如果以bottom描述, 以浏览器的左下角为参考点
特征:
非标准文档流下的绝对定位
脱标
提升层级, css建议用这个
浮动和定位一起使用时:
浮动通常用做大模块实现并排
定位小模块调整位置
使用子绝父相
文本水平垂直居中:
text-align: center;
line-height = height;
标准文档流盒子居中:
margin: 0 auto;
浮动的盒子居中:
把浮动的盒子外面搞个隐藏的父盒子, 并设置属性
overflow: hidden;
margin: 0 auto;
今日内容
一.如何让一个绝对定位的盒子居中
left:50%;
margin-left: -(负)宽度的一半;
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/*先把系统中自认为不好用的都清理掉 none和0是一样的*/
*{
padding: 0;
margin: 0;
}
/*给整个页面设置个初始的字体大小*/
body{
font-size: 14px;
font-family: "华文行楷";
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
input{
border: 0;
outline: 0;
}
.box{
width: 100%;
height: 300px;
position: relative;
}
.box1{
width: 400px;
height: 100px;
position: absolute;
left: 50%;
margin-left: -200px;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">八戒</div>
</div>
</body>
</html>
二.固定定位
position: fixed;
非标准文档流下的固定定位:
脱标
固定在网页的某个位置
top: 0;
left: 0;
参考点: 以浏览器的左上角为参考点
作用: 固定导航栏, 返回顶部, 小广告
固定导航栏的设定:
body{padding-top: 和导航栏的高一致;}
导航栏盒子的设置:
position: fixed;
top: 0;
left: 0;
z-index: 99999; #这个值, 是你自己设置的, 页面中其他的z-index就不要超了这个值, 淘宝的是1001
三.z-index(只有定位的盒子才有这个属性, 用来表示层叠的优先级)
1.z-index 值表示谁压着谁, 数值大的压盖住数值小的
2.只有定了位的元素, 才有z-index, 也就是说, 不管相对,绝对,固定定位, 都可以使用z-index, 而浮动元素不能使用z-index
3.z-index的值没有单位, 是一个正整数,默认为0, 如果z-index的相同后写的厉害
4.从父现象: 当有嵌套时, 以父的z-index为准, 父相同时,再比较子的z-index
四.小技巧
占位的盒子, 替换想要的内容: 先缩进, 然后隐藏, 在之前的位置搞上你想要的东西
text-indent: -20em;
over-flow: hidden;
background: url() no-repeat;
五.写页面
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--清除默认样式-->
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./css/font.css">
</head>
<body>
<!--顶部广告栏-->
<div class="site-bar">
<a href="javascript:void(0)"></a>
</div>
<!--顶部topBar-->
<div class="topBar">
<div class="container clearfix">
<div class="topBar-l">
<a href="javascript:void(0)">小米商城</a>
<span class="seq">|</span>
<a href="javascript:void(0)">MIUI</a>
<span class="seq">|</span>
<a href="javascript:void(0)">loT</a>
<span class="seq">|</span>
<a href="javascript:void(0)">云服务</a>
<span class="seq">|</span>
<a href="javascript:void(0)">金融</a>
<span class="seq">|</span>
<a href="javascript:void(0)">有品</a>
<span class="seq">|</span>
<a href="javascript:void(0)">小爱开放平台</a>
<span class="seq">|</span>
<a href="javascript:void(0)">企业团购</a>
<span class="seq">|</span>
<a href="javascript:void(0)">资质证照</a>
<span class="seq">|</span>
<a href="javascript:void(0)">协议规则</a>
<span class="seq">|</span>
<a href="javascript:void(0)">下载app</a>
<span class="seq">|</span>
<a href="javascript:void(0)">SelectLocation</a>
</div>
<div class="topBar-shop">
<a href="javascript:void(0)">
<i class="iconfont"></i>
购物车(<span class="count">0</span>)
</a>
<div class="cart-shop">购物车商品展示区</div>
</div>
<div class="topBar-info">
<a href="javascript:void(0)">登录</a>
<span class="seq">|</span>
<a href="javascript:void(0)">注册</a>
<span class="seq">|</span>
<a href="javascript:void(0)">消息通知</a>
</div>
</div>
</div>
<!--站点导航栏-->
<div class="site-header">
<div class="container clearfix">
<div class="header-logo">
<a href="javascript:void(0)">
</a>
</div>
<div class="header-nav">
<ul>
<li class="nav-category">
<a href="javascript:void(0)" style="background:url(http://i1.mifile.cn/a4/cms_15373613641608_oBmfS.gif) no-repeat 50% 38%;"></a>
<div class="site-category">
<ol>
<li>手机 电话卡</li>
<li>电视 盒子</li>
<li>笔记本 平板</li>
<li>家电 插线板</li>
<li>出行 穿戴</li>
<li>智能 路由器</li>
<li>电源 配件</li>
<li>健康 儿童</li>
<li>耳机 音箱</li>
<li>生活 箱包</li>
</ol>
</div>
</li>
<li class="nav-item">
<a href="javascript:void(0)">小米手机</a>
</li>
<li class="nav-item">
<a href="javascript:void(0)">Redmi红米</a>
</li>
<li class="nav-item">
<a href="javascript:void(0)">电视</a>
</li>
<li class="nav-item">
<a href="javascript:void(0)">笔记本</a>
</li>
<li class="nav-item">
<a href="javascript:void(0)">家电</a>
</li>
<li class="nav-item">
<a href="javascript:void(0)">路由器</a>
</li>
<li class="nav-item">
<a href="javascript:void(0)">智能硬件</a>
</li>
<li class="nav-item">
<a href="javascript:void(0)">服务</a>
</li>
<li class="nav-item">
<a href="javascript:void(0)">社区</a>
</li>
</ul>
</div>
<div class="header-search">
<form action="">
<input type="text">
<input type="submit" class="iconfont" value="">
<div class="search-hot-word">
<a href="javascript:void(0);">小米26</a>
<a href="javascript:void(0);">Redmi Note10 5G</a>
</div>
</form>
</div>
</div>
</div>
<!--轮播图区域-->
<div class="slider">
<div class="container container-slider">
<a href="javascript:void(0);">
<img src="./images/slider.jpg" alt="lunbotu">
</a>
<a href="javascript:void(0)" class="prev"></a>
<a href="javascript:void(0)" class="next"></a>
<div class="circle-div">
<span class="circle"></span>
<span class="circle"></span>
<span class="circle"></span>
<span class="circle"></span>
<span class="circle"></span>
<span class="circle"></span>
</div>
</div>
</div>
</body>
</html>
index.css
/*顶部广告栏*/
body{
font: 14px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
color: #333;
}
.site-bar {
/*背景图片的选取, 图片大小要考虑盒子的大小: 背景图和盒子的关系不是自适应,而是截取*/
width: 100%;
height: 120px;
background: url("../images/guanggao.jpg") no-repeat center top;
}
.site-bar a{
display: block;
width: 100%;
height: 120px;
}
/*顶部栏:宽100%, 高固定,搞个背景色*/
.topBar{
width: 100%;
height: 40px;
line-height: 40px;
}
/*顶部栏内容区: 这个内容区是公共的,宽度都是一个固定的值, 高度不要写,让子盒子撑起来, 然后居中*/
/*使用伪元素清除法: 清除浮动带来的影响*/
.container{
width: 1226px;
margin: 0 auto;
}
/*.clearfix{*/
/*content: '.';*/
/*clear: both;*/
/*display: block;*/
/*visibility: hidden;*/
/*height: 0;*/
/*}*/
/*内容区下面的三个盒子: 并排显示; 都浮动起来*/
/*左面区域的盒子: 固定个高度撑起container, 让文本垂直居中(这个高度也可以不写,因为可以使用父的父盒子的高度,字体照样可以居中)*/
.topBar .topBar-l{
float: left;
}
/*topBar下面的a和span统一设置字体颜色,悬浮变色, span搞个0.5em的margin间距*/
.topBar a{
color: #B0B0B0;
font-size: 12px;
}
.topBar span.seq{
color: #424242;
margin: 0 3.6px;
}
.topBar a:hover{
color: #fff;
}
/*购物车的设置: 垂直方向的字体位置的微调: vertical-align: 0px(初始值) 或 使用相对定位的top微调位置*/
.topBar .topBar-shop {
float: right;
position: relative;
}
/*悬浮购物车时,整个区域变色: 单独给这个a转块,设宽高,字体垂直居中, 水平居中*/
.topBar .topBar-shop a{
display: block;
width: 120px;
height: 40px;
line-height: 40px;
text-align: center;
}
/*悬浮购物车时,区域变色: 设置a:hover, bgc, 和字体颜色改变*/
.topBar .topBar-shop a:hover{
color: #ff6700;
}
/*悬浮购物车时,下面出现一个小区域: 用"父相子绝"+"父hover子操作"实现*/
/*弹出的盒子: 设宽高,背景色,位置,开始的时候是隐藏*/
.topBar .cart-shop{
position: absolute;
width: 350px;
height: 100px;
line-height: 100px;
text-align: center;
top: 40px;
left: -230px;
display: none;
border: solid 1px rgba(66, 66, 66, 0.25);
}
.topBar-shop:hover .cart-shop{
display: block;
z-index: 6;
}
.topBar .topBar-info{
float: right;
padding: 0 10px;
}
/*站点导航栏*/
/*导航栏设置: 宽100%, 高100px,背景色为默认的白色*/
.site-header{
width: 100%;
height: 100px;
}
/*导航栏内容区,上面已经设置了统一的样式,这里不用重复设置,设个清除浮动*/
/*设置三个盒子:浮动,实现并排布局*/
/*logo盒子: 宽62px, 高用内容填充,margin: top 22px*/
.site-header .header-logo{
width: 62px;
float: left;
}
/*把logo图片搞出来: 转成块,改大小55*55px */
.site-header .header-logo a{
display: block;
width: 55px;
height: 55px;
margin-top: 22px;
background: url("../images/logo.jpg");
}
/*nav导航区域: 固定宽度850px*/
.site-header .header-nav{
float: left;
}
/*nav下的ul: 区域大小: 因为padding: 12 0 0 30, 所以ul: width 850-30, height 100-12*/
.site-header .header-nav ul{
width: 800px;
height: 88px;
padding: 12px 0 0 30px;
}
/*nav下面的li都浮动起来*/
.site-header .header-nav ul>li{
float: left;
}
/*nav下的ul下的特定li: width 165, height100 */
.site-header .header-nav li.nav-category{
width: 165px;
height: 88px;
position: relative;
}
/*下的a: 转成块, 宽高和父盒子一样*/
.site-header .header-nav li.nav-category a{
display: block;
width: 165px;
height: 88px;
}
/*nav下面的li*/
.site-header .header-nav li.nav-item{
padding: 26px 10px 38px;
}
/*下的a: 设padding 26 10 38,字体颜色#333*/
.site-header .header-nav li.nav-item a{
color: #333;
font-size: 16px;
}
.site-header .header-nav li.nav-item a:hover{
color: #ff6700;
}
/*搜索区: 固定宽度296, margin-top 25*/
.site-header .header-search{
float: right;
width: 296px;
margin-top: 25px;
}
/*form表单:固定宽度和父盒子一样, 高度固定50px*/
.site-header .header-search form{
width: 296px;
height: 50px;
position: relative;
}
/*分别设置两个input输入框:input公共属性干掉默认的边框和外线; 高度48, 自定义边框: solid 1px #e0e0e0 */
.site-header .header-search input{
border: 0;
outline: 0;
height: 48px;
position: absolute;
border: solid 1px #e0e0e0;
}
/*两个盒子中间有缝隙: 用父相子绝,定位微调*/
/*input文本框: 宽度固定223,padding 0 10*/
.site-header .header-search input[type="text"]{
width: 223px;
padding: 0 10px;
}
/*input提交框:宽度52*,把提交的属性value设置成iconfont图形,背景色搞成白色*/
.site-header .header-search input[type="submit"]{
width: 52px;
right: 0px;
height: 50px;
font-size: 22px;
}
.site-header .header-search input[type="submit"]:hover{
}
/*input文本输入框中的搜索热点*/
.site-header .header-search .search-hot-word{
position: absolute;
top: 16px;
right: 70px;
}
.site-header .header-search .search-hot-word a{
font-size: 12px;
padding: 0 5px;
color: #757575;
}
.site-header .header-search .search-hot-word a:hover{
}
/*-------------------*/
.site-header .header-nav .site-category{
position: absolute;
width: 234px;
height: 420px;
top: 88px;
left: -92px;
padding: 20px 0;
z-index: 9;
}
.site-header .header-nav .site-category ol>li{
width: 204px;
height: 42px;
color: #fff;
padding: 0 0 0 30px;
line-height: 42px;
}
.site-header .header-nav .site-category ol>li:hover{
}
/*小米轮播图: 就是一个标准的盒子*/
.slider{
width: 100%;
}
.slider .container-slider{
position: relative;
}
.slider .container-slider a{
display: block;
width: 100%;
}
.slider .container-slider a img{
/*图片设置了固定的宽高, 可以撑起以上的父盒子, 父盒子的高度都可以不写*/
width: 1226px;
height: 460px;
}
/*轮播图上的左右箭头用父相子绝实现*/
/*给轮播图的盒子设置相对定位*/
/*两个子盒子设置绝对定位*/
.slider .container-slider a.prev{
position: absolute;
width: 90px;
height: 60px;
background:url(../images/sliderjiantou.jpg) no-repeat -206px -304px;
z-index: 10;
top: 210px;
left: 234px;
}
.slider .container-slider a.prev:hover{
background:url(../images/sliderjiantou.jpg) no-repeat -102px -304px;
}
.slider .container-slider a.next{
position: absolute;
width: 90px;
height: 60px;
background:url(../images/sliderjiantou.jpg) no-repeat -206px -223px;
z-index: 10;
top: 210px;
right: 0px;
}
.slider .container-slider a.next:hover {
background: url(../images/sliderjiantou.jpg) no-repeat -311px -223px;
}
/*轮播图上的小圆点(circle 圆点)*/
.slider .circle-div{
width: 400px;
height: 20px;
position: absolute;
top: 420px;
right: 40px;
text-align: right;
}
.slider .circle{
display: inline-block;
width: 8px;
height: 8px;
border: 1px solid #aaa;
border-radius: 50%;
}
.slider .circle:hover{
}