新手入门html,Html/Css(新手入门第三篇)

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

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;同时要加方向属性。

*****相对定位与绝对定位。

绝对定位是父元素为基准点进行定位---会脱离文档流。(注意,脱离文档流之后子元素不会继承父元素的宽)

相对定位是根据自身为基准点,进行定位---离开原位置,但还占着原来的空间。

JavaMail入门第三篇 发送邮件

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

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

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

Java线程入门第三篇

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

Visualforce入门第三篇_2017.3.2

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

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

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

JavaMail入门第四篇 接收邮件

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

JavaMail入门第五篇 解析邮件

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

jQuery入门第三

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

Kotlin入门第三课:数据类型

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

随机推荐

vim修改文字编码

在Vim中查看文件编码 :set fileencoding 即可显示文件编码格式.如果你只是想查看其它编码格式的文件或者想解决 用Vim查看文件乱码的问题,那么在~/.vimrc 文件中添加以下内容: ...

性能优化方法(Z)

关于C#程序优化的五十种方法 作者: 字体:[增加 减小] 类型:转载 时间:2013-09-12我要评论 这篇文章主要介绍了C#程序优化的五十个需要注意的地方,使用c#开发的朋友可以看下 一.用属性 ...

tweenmax.js 文档

TweenMax 参考http://bbs.9ria.com/thread-214959-1-1.html TweenMax 可能是很多人都用的,包括我 但 是最近发现大量的运用就总会产生这样或那样的 ...

涵涵和爸爸习惯养成进度表(二)(May 30 - )

规则说明 22天内,没有哭脸,不超过三个无表情脸,可以给一个奖励(动画书等) 涵涵违反规则,在爸爸和妈妈都同意的情况下,可以给无表情脸 爸爸违反规则,在妈妈和涵涵都同意的情况下,可以给无表情脸 获奖记 ...

Java学习第三天160818 表单 框架 下拉列表等

rect 矩形  src 引用 width宽  height  高  iframe  网页内嵌式小窗口(成对出现) auto  自动的  frameborder  边线  scrolling  滚动条 ...

低功耗蓝牙4.0BLE编程-nrf51822开发(7)-SDP服务发现协议

SDP的全称是Service Discovery Protocol,中文是服务发现协议.SDP(服务发现协议)是蓝牙协议体系中的核心协议,是蓝牙系统重要组成部分,是所有用户模式的基础.在蓝牙系统中.客 ...

python 练习 19

#!/usr/bin/python # -*- coding: UTF-8 -*- for n in range(100,1000): i = n / 100 j = n / 10 % 10 k = ...

php文本操作方法集合比较第2页

fgets和fputs.fread和fwrite.fscanf和fprintf 格式化读写函数fscanf和fprintf fscanf函数,fprintf函数与前面使用的scanf和printf 函 ...

OpenCV+VS2013 属性表配置

简介 计算机视觉任务越来越多的依赖著名的开源计算机视觉库OpenCV.OpenCV 2.0 包含了一系列精心设计数据结构和经过优化的视觉算法,大家可以短时间内开发一个不错的视觉应用.OpenCV支持多 ...

EntityFramework用法探索(八)事务处理

使用 前文中描述的Retail示例 ,在Customer对象的Mapping中设置Name属性:我们构造一个有效的Customer对象,再构造一个无效的Name属性为空的对象. DomainModel ...

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值