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可见性,滑动门案例的更多相关文章

  1. 李洪强和你一起学习前端之(6)css行高,盒模型,外边距

    李洪强和你一起学习前端之(6)css行高,盒模型,外边距 复习昨天的知识 1.1css书写位置: 内嵌式写法 外联式写法 <link href = "1.css" rel = ...

  2. 李洪强和你一起学习前端之(3)Css基础和选择器

    大家好! 经过了前面的学习,是不是对前端的学习有了初步的了解.虽然我之前有iOS开发的经验,现在接触一门新的语言,对我来说 有一定的优势,但是一门技术对于谁来说都是公平的,我承认,我在接触新知识的时候 ...

  3. 李洪强和你一起学习前端之(1)Html基础

     1 快捷键的认识(虽然我用的是MAC,但是这里以windows快捷键来讲,但是MAC电脑可以把Ctrl换成command试试)   Ctrl + c 复制 Ctrl + v 粘贴 Ctrl + a ...

  4. 李洪强和你一起学习前端之(5)css书写位置 优先级和伪类

    亲爱的,时间过得真快,不知不觉我们一起学习前端已经4天了,这4天的时间里,我们是不是收获很大呢,每当我们学习一个新的知识点的时候,每当我们做出一个新的东西来的时候,我们是不是欣喜若狂,世界从来否不会辜 ...

  5. 李洪强和你一起学习前端之(8)CSS复习

    今天是2017年3月24日周五 每一天都是余生当中最好的一天,珍惜当下. CSS基础复习 1 复习 1.1Css第一天 css层叠样式表 基础选择器 标签选择器 p{属性: 值;} 类选择器 .自定义 ...

  6. 李洪强和你一起学习前端之(7)定位盒子 css可见性 滑动门案例

    今天是2017年3月23日 1 复习昨天知识 1.1浮动 Float:left | right 特点: ->浮动的元素不占位置(脱标) ->可以将行内元素转化为行内块元素 ->块级元 ...

  7. 李洪强和你一起学习前端之(4)HTML5介绍

    1.1认识HTML5 html的版本: html4 Xhtml1.0 目前: html5是最高的版本 再怎么变化,无非是多了一些标签而已,但是不单单是提供了一些标签 比如: 开发网页游戏 我们可以开发 ...

  8. 李洪强iOS经典面试题144-数据存储

    李洪强iOS经典面试题144-数据存储   数据存储 sqlite中插入特殊字符的方法和接收到处理方法. 除'其他的都是在特殊字符前面加"/",而 ' -> '' .方法:k ...

  9. 李洪强iOS经典面试题142-第三方框架及其管理

    李洪强iOS经典面试题142-第三方框架及其管理   第三方框架及其管理 使用过CocoaPods吗?它是什么?CocoaPods的原理? CocoaPod是一个第三方库的管理工具,用来管理项目中的第 ...

随机推荐

  1. QQ登录整合/oauth2.0认证-04-调整到QQ互联进行QQ登录

    ---------------------------------目录------------------------------------- QQ登录整合/oauth2.0认证-03-对第二节的代 ...

  2. ios中NSObject分类

    #import <Foundation/Foundation.h> #define BUNDLE_PATH_IMAGENAME(c) [[NSBundle mainBundle] path ...

  3. JavaScript概念梳理

    一.JavaScript 的奇葩命名史 1995 年,网景浏览器(Netscape Navigator)首次发布了一种运行于浏览器端的脚本语言,网景给这个新语言命名为 LiveScript.一年后,为 ...

  4. keras中的模型保存和加载

    tensorflow中的模型常常是protobuf格式,这种格式既可以是二进制也可以是文本.keras模型保存和加载与tensorflow不同,keras中的模型保存和加载往往是保存成hdf5格式. ...

  5. linux下常用文件传输命令(转)

    因为工作原因,需要经常在不同的服务器见进行文件传输,特别是大文件的传输,因此对linux下不同服务器间数据传输命令和工具进行了研究和总结.主要是rcp,scp,rsync,ftp,sftp,lftp, ...

  6. SQL SERVER 2008自动发送邮件（完整版）

    这两天都在搞这个东西,从开始的一点不懂,到现在自己可以独立的完成这个功能!在这个过程中,CSDN的好多牛人都给了我很大的帮助,在此表示十二分的感谢!写这篇文章,一是为了巩固一下,二嘛我也很希望我写的这 ...

  7. ELK 5.X版本遇到的坑

    一.Kafka ->logstash ->elasticsearch    logstash 5.X以上版本不兼容5.x以下版本,因此在升级logstash时会遇到很多坑.首先是配置的变化 ...

  8. Android登录client，验证码的获取，网页数据抓取与解析，HttpWatch基本使用

    大家好,我是M1ko.在互联网时代的今天,假设一个App不接入互联网.那么这个App一定不会有长时间的生命周期,因此Android网络编程是每个Android开发人员必备的技能.博主是在校大学生,自学 ...

  9. Java 垃圾回收思维导图

    文 by / 林本托 Tips 做一个终身学习的人. Java 的垃圾回收,不像 C和 C++语言,内存的分配和释放都是靠程序员来控制的.而 Java 的内存回收,程序员是不能也是无法干预,具体什么时 ...

  10. Linux中SFTP命令

    sftp和ftp是两种协议是不同的,sftp是ssh内含的协议,只要sshd服务器启动了,它就可用,它本身不需要ftp服务器启动. 1.常用登陆方式: 格式:sftp <user>@< ...