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. 【TP3.2】详解_initialize() 和 __construct() 的区别和联系

    1.假设 一个AdminController.class.php 集成至 \Think\Controller 类, 我们来看看Controller.class.php的构造方法源码: /** * 架构 ...

  2. linux下淘宝安全控件问题

    2009-09-21  我的环境:ubuntu9.04 firefox3.0.14   下载压缩包http://blog.alipay.com/wp-content/2008/10/aliedit.t ...

  3. Golang 如何从socket读出所有数据

    第一种: func read(conn *net.Conn) error { defer conn.Close() buf := make([]byte, 0, 4096) len := 0 for ...

  4. MATLAB 的数据导入与导出

    1 数据导入: %% 高层次读取数据. importdata 函数是一个高层次的函数 filename = 'weeklydata.txt'; delimiterIn =' '; %delimiter ...

  5. 寻找自己的道路——与技术同胞共勉 一种划分为七个阶段的道路：自信=>意志=>布局=>切入点=>团队=>渠道=>产品

    寻找自己的道路——与技术同胞共勉 每个人的幸福都是不一样的.我喜欢田园式的生活,在人多的地方总是不舒服. 对我来说,最幸福莫过于在工作中做着自己喜欢的事情.闲暇时,在能够眺望江边的地方,端着一杯红酒, ...

  6. JAVA删除文件及文件夹

    JAVA在删除文件或文件夹时,在java.io.File类下有个delete的方法,并且可以返回true or false, 用这个方法来删除单个文件时,很好使,但在删除文件夹时,如果文件夹下面有文件 ...

  7. ubuntu 51单片机环境搭建方法

    首先下载个sdcc 1: sudo apt-get install sdcc 2: sudo apt-get install libvte-dev3: 安装 gSTC-ISP 下载地址:http:// ...

  8. 雷军：重刷ROM的“自我格式化”

    本文来源于:百度百家 作者:金错刀 2014-03-14 10:33:06 最近,跟一个前金山高管聊起雷军,特别是雷军的变化,她的感觉是:雷总岂止是变化,简直是格式化,甚至是把自己重刷了一遍ROM. ...

  9. Python读文本文件中文乱问题

    file_object = open('thefile.txt')try: all_the_text = file_object.read().decode("gb2312")fi ...

  10. dbms_monitor开启/关闭会话跟踪

    从10g开始,可以使用dbms_monitor开启/关闭会话跟踪. sql> desc dbms_monitor procedure client_id_stat_disable argumen ...