怎么在html里面设置左浮,html入门

[TOC]

HTML_2.png

html结构

div布局，css控制。htm是一种标记语言。

查看网页的时候，选择审查元素、查看背景图像。

保存图片——>source->img->在新的tab打开，另存为。

div#test1 div的id为test1

ul#art>li*4>a>{文章$} ul下嵌套4个li，里面装着a标签，文章$符号代表

div布局

画一个田字格

#lside{

float: left;

background: gray;

}

.two{

float: left;

width: 200px;

height: 200px;

margin: 10px;

background: pink;

}

#clr{

clear: both;

width: 0px;

height: 0px;

}

.sec{

float: left;

width: 200px;

height: 200px;

margin: 10px;

background: pink;

}

画一颗圣诞树

.a,.b{

width: 0px;

height: 0px;

border-top: 80px solid transparent;

/*边框透明 */

border-right: 80px solid transparent;

border-bottom: 80px solid pink;

border-left: 80px solid transparent;

}

.b{

margin-top: -100px;

/*margin可以是负数，让两个div有重叠*/

}

盒子模型：上右下左，没有就取对边

padding 注意事项：padding不能解决的用blockquote来解决

css控制效果####css的引入方式

链接到一个外部样式表：link

内部样式表：style

内联样式：在标签中使用样式属性

颜色的写法

16进制，color:#234566

10进制，color:rgb(240,23,45)

html提供常用颜色的名称 color:orange

简写：EEEEEE->EEE

注意事项

浮动的时候，不设置浮动那么默认换行。在进行此操作的时候把格局内的每个元素都要创建出来。

浮动的上面一层是飘的，父布局不会因此被撑大。所以需要给父布局一个宽高。

利用行高来实现文字竖直居中：line-height 上下居中，这个值和高度一样。和16px/36px是一样的，不过这个兼容性更好。

css代码，布局都居中

margin: 300px auto; text-align: center;

html标签

-

独占一行

能设宽高

竖直方向的margin，padding

块状元素

是

是

有，可以设置

内联元素

否

否

没有，也不可以设置

内联元素与块状有关，可以通过display相互转换。

display:block;display:inline;

a标签 href属性表示超链接的地址，#默认的地址。

div标签 id属性

d07fe94b-69a7-4703-ad74-01aa9fd95b52.png

里面的controls属性提供播放、暂停和音量控件

Your browser does not support the audio tag.

表单

874d8b85-2aea-49af-9d1e-6f65e57e665f.jpg

表单的开头，post表示密文传输

checked selected 表示默认添加

框架

IE bug及兼容测试

有些布局、样式要明确的声明，不然就很大可能出现兼容的问题。例如谷歌字体默认最小是10px，火狐默认是12px。

IE问题下bug的几种常见原因：

错误

原因

解决方法

————

doctype代表了不同的模式

正确声明doctype

在不同浏览器下css效果不同

各浏览器对不同标签的初始化不同

css初始化

——

浏览器标签bug引起

css hack

盒模型bug

使用严格doctype声明

IE下 左浮元素，左margin是定义的两倍。

双倍margin bug

把display：inline

IE下

a相对于a:link

3像素margin bug

规范浮动与清除浮动

定义特别小的元素的时候，老式浏览器可能会画出比较大

IE的最小限制

overflow:hidden