李洪强和你一起学习前端之(9)规避脱标,CSS可见性,滑动门案例
1 复习昨天知识
1.1 浮动
特点:
>浮动的元素不占位置(脱标)
>可以将行内元素转化为行内块元素
>块级元素在一行上显示
>设置了浮动的元素,影响其后面的元素
作用:
>解决文字图片环绕问题
>制作网页导航栏
>网页布局
清除浮动:
清除浮动的影响
定位的分类:
1.2定位
静态定位(static)
绝对定位(absolute)看脸型
>绝对定位绝对脱标
>行内元素转化为行内块元素
>如果父盒子没有设置定位,以浏览器左上角为基准设置定位
>如果父盒子设置了定位,以父容器左上角为基准设置定位
相对定位(relative)自恋型
>看自己的位置设置定位
>相对定位没有脱标,占位置
>子绝父相(子元素设置绝对定位,父盒子设置相对定位)
一般情况下会使用子绝父相
固定定位(fixed)
>固定定位也脱标了,不占位置
>行内元素转化为行内块元素
2.新知识:
2.1 盒子居中
Margin: 0 auto 只能让标准流下的盒子居中显示
2.2 定位的盒子居中显示(重要)
先走父盒子宽度的一半: 50%
往回走自己宽度的一半
定位的盒子设置居中显示案例:
说明: 父盒子设置了相对定位,子盒子设置了相对定位如何让子盒子居中
.one{
height: 300px;
width: 577px;
border: 1px solid green;
margin: 0 auto;
/*相对定位*/
position: relative;
}
.two{
width: 100px;
height: 100px;
border: 1px solid yellowgreen;
/*设置绝对定位*/
position: absolute;
left: 50%;
margin-left: -50px;
/*bottom: 0;*/
}
2.3标签包含规范:
div可以包含任何标准流下的元素
p标签不能包含div 和标题标签以及列表标签
标题标签可以包含其他标签
行内元素最好不要包含其他标签
2.4规避脱标流
网页布局的过程中,能用标准流布局,就用标准流布局
标准流不能解决浮动
浮动不能解决用定位
使用margin-left/margin-right 取值为auto 可以自动将盒子冲到
另一边
2.5 图片与文字垂直对齐
每一种inline-block元素,都有一个默认的vertical-align: baseline
vertical-align:middle 垂直对齐
vertical-align与inline-block更搭配
图片与文字垂直对齐案例:
代码:
.one{
width: 300px;
height: 200px;
border: 1px solid red;
}
.one img{
margin-top: 10px;
vertical-align: middle;
}
说明: 给图片设置:vertical-align: middle;
案例: tab切换
效果图: 
说明: 点击每个链接切换不同的盒子
代码:
.box{
width: 300px;
height: 300px;
border: 1px solid red;
overflow: hidden;
}
#div1,#div2,#div3{
width: 300px;
height: 300px;
}
#div1{
background-color: palegreen;
}
#div2{
background-color: red;
}
#div3{
background-color: yellowgreen;
}
</style>
</head>
<body>
<a href="#div1">div1</a>
<a href="#div2">div2</a>
<a href="#div3">div3</a>
<div class="box">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</div>
2.6 CSS可见性
overflow:hidden 将超出的部分进行隐藏
display: none 直接将元素隐藏(将元素隐藏后不占位置)
display:block 将元素显示(与技术配合更搭)
visibility:hidden 将元素隐藏(将元素隐藏后占原来的位置)
2.7 内容移除文字(logo优化)
或者
a{
width: 200px;
height: 200px;
display: inline-block;
background-color: pink;
/*设置字的位置 为负值,目的不想让显示*/
text-indent:-60px ;
}
</style>
</head>
<body>
<a href="#">搜狐</a>
2.8 精灵图的使用
浏览器中的坐标系
CSS精灵是一种处理网页背景图像的方式,精灵图也是一种背景图片
精灵图的使用
>使用fw一定要用打开的方式打开精灵图
>使用精灵图作为背景图片的时候常与background-position配合使用
>测量精灵图中的元素的坐标使用矩形选择器
或者 使用快捷键 字母: k
精灵图的使用: 代码:
.box{
width: 85px;
height: 32px;
background-image: url(img/qq.png);
background-position: -601px -160px;
margin: 400px 300px;
}
</style>
</head>
<body>
<div class="box">
</div>
2.9制作精灵图步骤
选择透明文档
2.10 滑动门(次重点)
滑动门案例:
实现以下效果: 
代码:
div{
float: left;
}
.left{
width: 10px;
height: 100px;
background-image: url(img/l.png);
}
.middle{
height: 100px;
background-image: url(img/m.png);
/*设置文字垂直居中*/
line-height: 100px;
}
.right{
width: 10px;
height: 100px;
background-image: url(img/r.png);
}
</style>
</head>
<body>
<div class="left"></div>
<div class="middle">你好你好</div>
<div class="right"></div>
比较复杂一点的滑动门案例
代码:
li{
/*li的初始化*/
list-style: none;
float: left;
}
li a{
height: 35px;
background-image: url(img/bg_r1_c1.png);
background-repeat: no-repeat;
padding-left: 7px;
display: inline-block;
}
li span{
height: 35px;
background-image: url(img/bg_r1_c2.png);
background-repeat: no-repeat;
background-position: right;
display: inline-block;
padding-right: 22px;
/*padding-top: 10px;*/
}
</style>
</head>
<body>
<ul>
<li>
<a href="#">
<span id="">fghjkhg</span>
</a>
</li>
<li>
<a href="#">
<span id="">fghjkhg</span>
</a>
</li>
<li>
<a href="#">
<span id="">fghjkhg</span>
</a>
</li>
</ul>
</body>
李洪强和你一起学习前端之(9)规避脱标,CSS可见性,滑动门案例的更多相关文章
- 李洪强和你一起学习前端之(6)css行高,盒模型,外边距
李洪强和你一起学习前端之(6)css行高,盒模型,外边距 复习昨天的知识 1.1css书写位置: 内嵌式写法 外联式写法 <link href = "1.css" rel = ...
- 李洪强和你一起学习前端之(3)Css基础和选择器
大家好! 经过了前面的学习,是不是对前端的学习有了初步的了解.虽然我之前有iOS开发的经验,现在接触一门新的语言,对我来说 有一定的优势,但是一门技术对于谁来说都是公平的,我承认,我在接触新知识的时候 ...
- 李洪强和你一起学习前端之(1)Html基础
1 快捷键的认识(虽然我用的是MAC,但是这里以windows快捷键来讲,但是MAC电脑可以把Ctrl换成command试试) Ctrl + c 复制 Ctrl + v 粘贴 Ctrl + a ...
- 李洪强和你一起学习前端之(5)css书写位置 优先级和伪类
亲爱的,时间过得真快,不知不觉我们一起学习前端已经4天了,这4天的时间里,我们是不是收获很大呢,每当我们学习一个新的知识点的时候,每当我们做出一个新的东西来的时候,我们是不是欣喜若狂,世界从来否不会辜 ...
- 李洪强和你一起学习前端之(8)CSS复习
今天是2017年3月24日周五 每一天都是余生当中最好的一天,珍惜当下. CSS基础复习 1 复习 1.1Css第一天 css层叠样式表 基础选择器 标签选择器 p{属性: 值;} 类选择器 .自定义 ...
- 李洪强和你一起学习前端之(7)定位盒子 css可见性 滑动门案例
今天是2017年3月23日 1 复习昨天知识 1.1浮动 Float:left | right 特点: ->浮动的元素不占位置(脱标) ->可以将行内元素转化为行内块元素 ->块级元 ...
- 李洪强和你一起学习前端之(4)HTML5介绍
1.1认识HTML5 html的版本: html4 Xhtml1.0 目前: html5是最高的版本 再怎么变化,无非是多了一些标签而已,但是不单单是提供了一些标签 比如: 开发网页游戏 我们可以开发 ...
- 李洪强iOS经典面试题144-数据存储
李洪强iOS经典面试题144-数据存储 数据存储 sqlite中插入特殊字符的方法和接收到处理方法. 除'其他的都是在特殊字符前面加"/",而 ' -> '' .方法:k ...
- 李洪强iOS经典面试题142-第三方框架及其管理
李洪强iOS经典面试题142-第三方框架及其管理 第三方框架及其管理 使用过CocoaPods吗?它是什么?CocoaPods的原理? CocoaPod是一个第三方库的管理工具,用来管理项目中的第 ...
随机推荐
- ASP.NET MVC3-第02节-添加一个Controller (C#)
前言 ---------------------------- 第01节[翻译]01-ASP.NET MVC 3介绍 ---------------------------- MVC是“model-v ...
- Easyui入门视频教程 第07集---Accordion的使用
Accordion 是一个 收缩的组件 类似挂历的 百度了一下 意思是 accordion 英[əˈkɔ:diən] 美[əˈkɔrdiən] n. 手风琴 adj. 可折叠的 他就是 一个折叠的 很 ...
- iteye-Spring的缺点有哪些
http://www.iteye.com/topic/1126929 1. flounders -- 发表时间:2012-09-25 如题,希望大侠们指出,不能用Spring就觉得他什么都好, ...
- Nginx+FastCGI运行原理(二)
1.4 PHP与PHP-FPM的安装及优化(2) 标签rlimit_files用于设置PHP-FPM对打开文件描述符的限制,默认值为1024.这个标签的值必须和Linux内核打开文件数关联起来,例如, ...
- k8s之服务发现
一.概述 k8s中支持两种服务发现方法: 环境变量和DNS 二.环境变量 当Pod被创建的时候,k8s将为Pod设置每一个Service的相关环境变量,这些环境变量包括两种类型: k8s Servic ...
- 图片标注工具LabelImg使用教程
1.进入labelImg-master文件夹,在空白处使用 “Shift+鼠标右键” ,选择在此处打开命令窗口,依次输入下面语句即可打开软件. pyrcc4 -o resources.py resou ...
- 代码管理（五）git 删除分支
1.删除远程分支 在远程下面,选择需要删除的分支,右击,选择删除 2. 删除不存在远程对应分支的本地分支 在远程上建立了一个分支feature,后来leader觉得不合理,就把远程feature分支 ...
- 【Algorithm】自顶向下的归并排序
一. 算法描述 自顶向下的归并排序:采用分治法进行自顶向下的程序设计方式,分治法的核心思想就是分解.求解.合并. 先将长度为N的无序序列分割平均分割为两段 然后分别对前半段进行归并排序.后半段进行归并 ...
- SQL 中 Arg的使用
今天在写SQL脚本时用到了Arg这个函数,发现了一个问题就是如果取平均数的字段是int类型那么,无论你怎么平均都不会有小数位出来. 因为Arg默认将你取的平均值转换为了你的字段对应的类型int.那么如 ...
- 高并发分布式系统中生成全局唯一（订单号）Id js返回上一页并刷新、返回上一页、自动刷新页面 父页面操作嵌套iframe子页面的HTML标签元素 .net判断System.Data.DataRow中是否包含某列 .Net使用system.Security.Cryptography.RNGCryptoServiceProvider类与System.Random类生成随机数
高并发分布式系统中生成全局唯一(订单号)Id 1.GUID数据因毫无规律可言造成索引效率低下,影响了系统的性能,那么通过组合的方式,保留GUID的10个字节,用另6个字节表示GUID生成的时间(D ...