一、学习心得---参考优秀的网页来学习。

1我们只做的静态网页主要用的技术?html+css 只要网上看到的,他的源代码公开的。
【1】、先去分析,他们页面是如何布局(结构化)
【2】、再试着去做一下,---模仿过程。
【3】、最后我们可以自己尝试创新---通向高手的过程。

css精灵技巧,优化网页的http请求次数,提高网页的效率。
*****css精灵的核心思想,就是将多张图片,合成一张图片,然后通过背景属性中的定位来控制到底显示图片中的哪些部分。
*****如果网页中能选中的图片,那肯定就是插入的图片,选不中,就是背景图片
【css3中常用字体图标来替代传统的小图标(未来趋势)】

二、css布局的方式:
1、默认的,就是按文档流的顺序。按html的结构顺序。
2、浮动方式
3、定位方式

三、浮动
浮动是将块元素的霸道属性,独占一行的行为取消,允许别人和他一行。
浮动其实是这个块从原来的文档流模式中分离出来,他后面的对象就视它不存在。
常用的布局效果,例如:一行并列式,就是在一行中显示几个块元素。

css把网页元素分成两类,一种是块一种是内联元素。
body,div,p,h1,ul与li默认情况下是块元素。是要想让他们在一行中显示,就要用到浮动。

我们在制作时,你多使用不同的浏览器查看你的结果,这样你就知道各种浏览的差别。
*****总结出,当IE6父元素中的子元素的高度超过了父元素的高度,IE6默认会把父元素的高度自动增加。
*****如果想让多个块显示在同一行中,可以讲这些块都设置成浮动,并且浮动方向相同。
*****浮动浮动,先浮后动,浮动的对象会先漂浮起来,离开原来的位置。后动,就是它后面的对象。会向它原来的位置上动起来。

四、清除浮动:就是可以去掉前面对象的浮动对后面对象的影响。
为什么原来在一行中的两个块会因为浏览器窗口的大小改变而改变原来的位置。(可另外添加一个盒子把他们包裹起来)
*****设置一个块为水平居中时,都会给这个块设置一个宽度值。
*****当父元素没有指定高度时,并且它的子元素有浮动,这时这个父元素的高度不会自动增加。
1、第一种方法:增加一个空标签,就是没有内容的标签。会增加代码。
2、第二种方法:给父元素,加overflow:hidden
3、利用伪对象after方法。
网上最流行的清除浮动代码:

.clearFix:after{
clear:both;
display:block;
visibility:hidden;
height:;
line-height:;
content:“.”;
}

*****定位布局,就是可以通过元素的position属性控制元素的位置。
*****当我们要想使用绝对布局时必须要有两个条件
【1】、必须要给父元素增加定位属性,一般建议使用position:relative;
【2】、给子元素加对对定位position:absolute;同时要加方向属性。

*****相对定位与绝对定位。
绝对定位是父元素为基准点进行定位---会脱离文档流。(注意,脱离文档流之后子元素不会继承父元素的宽)
相对定位是根据自身为基准点,进行定位---离开原位置,但还占着原来的空间。

Html/Css(新手入门第三篇)的更多相关文章

  1. JavaMail入门第三篇 发送邮件

    JavaMail API中定义了一个java.mail.Transport类,它专门用于执行邮件发送任务,这个类的实例对象封装了某种邮件发送协议的底层实施细节,应用程序调用这个类中的方法就可以把Mes ...

  2. Android JNI入门第三篇——jni头文件分析

    一. 首先写了java文件: public class HeaderFile { private native void  doVoid(); native int doShort(); native ...

  3. Java线程入门第三篇

    Java内存模型(jmm) Why:保证多线程正确协同工作 看图说明: 文字解释:线程a和线程b通信过程,首先线程a把本地内存的共享变量更新到主内存中,然后线程b去读取主内存的共享变量,最后更新到自己 ...

  4. Visualforce入门第三篇_2017.3.2

    Visualforce实现显示Record List(列表) 详细见链接:https://trailhead.salesforce.com/modules/visualforce_fundamenta ...

  5. Hadoop入门第三篇-MapReduce试手以及MR工作机制

    MapReduce几个小应用 上篇文章已经介绍了怎么去写一个简单的MR并且将其跑起来,学习一个东西动手还是很有必要的,接下来我们就举几个小demo来体验一下跑起来的快感. demo链接请参照附件:ht ...

  6. JavaMail入门第四篇 接收邮件

    上一篇JavaMail入门第三篇 发送邮件中,我们学会了如何用JavaMail API提供的Transport类发送邮件,同样,JavaMail API中也提供了一些专门的类来对邮件的接收进行相关的操 ...

  7. JavaMail入门第五篇 解析邮件

    上一篇JavaMail入门第四篇 接收邮件中,控制台打印出的内容,我们无法阅读,其实,让我们自己来解析一封复杂的邮件是很不容易的,邮件里面格式.规范复杂得很.不过,我们所用的浏览器内置了解析各种数据类 ...

  8. jQuery入门第三

    jQuery入门第三 1.HTML 2.CSS 衣服 3.javascript 可以动的人 4.DOM 编程 对html文档的节点操作 5.jQuery 对 javascript的封装 简练的语法 复 ...

  9. Kotlin入门第三课:数据类型

    前文链接: Kotlin学习第一课:从对比Java开始 Kotlin入门第二课:集合操作 初次尝试用Kotlin实现Android项目 Kotlin的数据类型与Java类似,因此这篇文章主要看Kotl ...

随机推荐

  1. seaJS循环依赖的解决原理

    seajs模块的六个状态. var STATUS = {  'FETCHING': 1, // The module file is fetching now. 模块正在下载中  'FETCHED': ...

  2. Parallel线程使用

    Parallel的静态For,ForEach和Invoke方法       在一些常见的编程情形中,使用任务也许会提升性能.为了简化编程,静态类System.Threading.Tasks.Paral ...

  3. DIOCP之编写第一个应用程序(二)

    构建client界面: 构建界面要比写代码更难爱,不是专业UI设计太丑,先有个界面,好写代码,客户端代码与界面设计思想:界面与数据之间分离处理,不能要接收数据的地方写代码,不然以后修改程序会死人的.

  4. auth用户认证库

    关于auth库,建议如下:1. ion_auth,基于Redux重写而成,非常不错的认证库,国外用的很多,几个最新的ci2.0.2基础上的开源系统(如doveforum)都用它,支持ci 2.0和以上 ...

  5. 总结A*,Dijkstra,广度优先搜索,深度优先搜索的复杂度比较

    广度优先搜索(BFS) 1.将头结点放入队列Q中 2.while Q!=空 u出队 遍历u的邻接表中的每个节点v 将v插入队列中 当使用无向图的邻接表时,复杂度为O(V^2) 当使用有向图的邻接表时, ...

  6. Zookeeper-Zookeeper可以干什么

    在Zookeeper的官网上有这么一句话:ZooKeeper is a centralized service for maintaining configuration information, n ...

  7. 04-JAVA中的类和对象

    1. Foo对构造函数进行了重载,那么默认的构造函数就不会被使用,在主类中,定义对象的时候,引用构造函数,却没有参数,自然无法通过编译. 2. 当设定字段初始值在初始化块前面的时候, 很明显使用了前者 ...

  8. python学习之——pip的安装与使用

    安装步骤: 前提:已经安装python 1.下载安装包并解压: easy_install 地址:https://pypi.python.org/pypi/setuptools#downloads pi ...

  9. python学习之——django环境搭建

    Django是一个基于MVC构造的框架,用于web开发,主要目的是简便.快速的开发数据库驱动的网站. 前提:已经安装python 搭建步骤: 1.https://www.djangoproject.c ...

  10. HTML5实现摇一摇

    一.原理: 利用devicemotion获取移动速度,得到device移动时相对之前某个时间的差值比 二.效果图: 三.源码: //先判断设备是否支持HTML5摇一摇功能 if (window.Dev ...