html

<!-- 关于文本标记

<b>加粗

<strong>加粗(结构标签，加强)

<i>斜体

<em>倾斜(结构标签，加强)

<u>给字符加下划线

<s>字符上加横线，表删除

-->

<!--特殊字符标记

  占位符空格

< < > >

& & &quot "

® 注册商标 ?

× x

÷ '/. -->

<!-- 表格的作用：可以做网页布局

xhtml+css=结构+样式(美化)

<table--/被淘汰了：代码多，导致网页下载慢，不利于搜索引擎优化（seo)>

<table > 表格

<tr>行

</tr>

</table>

单元格，行都有属性。

--- 表格:border边框，width宽度，height高，cellspacing表格各单元格的距离，cellpadding单元格内部和文本的距离，align对齐方式，caption表格标题，bordercolor表格边框颜色，bordercolorlight表格亮面颜色

---bgcolor背景颜色

---background背景图++++平铺

div+css

<tr>

<td>单元格的文字</td>

<td>lianglie</td>

</tr>

<tr>

<td>第二个单元格文字</td>

</tr>

<tr>

<td>第三个单元格文字</td>

</tr>

</table>

<!----无序列表

type”类型“

1:disc实心黑色圆点

2：circle空心圆

3：square矩形

<ul>

</ul>

<!---嵌套

<ul>

<li>咖啡

<ul>

<li>蓝山

<ul>

</ul>

</li>

</ul>

</li>

</ul>

因为li是块级元素，默认占一行的，要想实现横向排列，一般通过以下两个方法：

一:float:left

这样设置有一个问题，li浮动以后则脱离了文本流，即不占位置，如果它的父级元素有具体的样式且没有固定宽高，建议父元素清除浮动，或者设置固定宽高

二：display:inline-block

即把li变为行内元素且可以设置宽高以及边距，这样也有一个问题，

低版本的Ie浏览器不兼容inline-block，建议在其后再加两个属性兼容低版本ie

display：block；比较常用于<a><span>这两个标签—

因为这两个标签非块元素，如果不用display：block定义一下，

那么定义width、height等和长宽相关的css属性时会发现完全不生

<!----有序列表

1：a

2:i

3:1

<ol>

</ol>

<!--自定义列表《页面排版》

<dl>定义列表

<dt>定义标题

<dd>定义内容-

<h2>自定义列表</h2>

<dl>

</dl>

------->

</head>

<!---border边框

bordercolor边框颜色

cellpadding单元格边距

cellspacing单元格内部和文本的距离-->

<body>

<!--<table>表格<tr>行<td>列<th>加粗+居中(加标题) <caption>表格标题

align（左，中，右） valign设置一行中单元格垂直对其（顶部top 底部bottom）方式-

先把背景设置一个颜色，再把单元格背景设置一个颜色，边框设置成0:实线（

rowapan设置单元格所占行数

colspan设置单元格所占的列数

合并单元格的行和列）

表格嵌套：

《table》《tr><td><table><tr><td>-->

!--表单

<select>选择域<option>选项

<textarea> clos行 rows高

《from>所有表单元素放在from里

<input>文本 type=""text"类型=文本

type="password"类型=密码

type="radio"单选按钮 checked="checked"默认选中状态

type="checkbox" 复选框

type="button" 按钮 value="提交" -->

<!--细线表格

bgcolor="#CCCCCC" cellpadding="10" cellspacing="1">

-->

<!--=align对齐方式排版

=bgcolor背景颜色(小的平铺 ) =background背景图片

=text非链接文字色彩-->

<!--pre预定格式标记

按照文档中预先拍好的板式-->

<!--相对路径：网页和图像在同一个文件夹里(站点）

绝度路径：从一个站点到另一个站点时，（网址如;百度）-->

<!--插入图像<img />

src 来源= 可以选中，可以可以做链接，但插入图像不能在加其他内容

width 宽度 height 高

网站里使用的图像名不能是中文（数字，拼音，英文）

===关于图像比例缩放====

大图像可以缩小（正比例）

小图像放大会迷糊

模糊于变形的图像不要放在网站上，会影响视觉效果-->

<!--背景图像和背景颜色在一起先显示图像

=有特别情况全部显示

背景图像不能选中，可以平铺，背景图像上可出现其他内容，

度

==1.gif 256中颜色，支持文件背景透明，支持动画效果

文件小，下载快

==2.jpg 数百万种以上的颜色不支持文件背景透明，不支持动画效果，单图像品质高，一般用于数码照片【位图一个一个相熟点组成】

==3.png foreworks软件的源文件格式，支持文件背景透明

一般的图像，导出文件选png8，透明就可以了

png24 写css

==4.TIFF 印刷格式

==5.psd photoshop源文件格式可以编辑

-->

<!--font字体设置 size 大小 face 字体 color 颜色 weight加粗:normal不加粗

网页中常用的字体宋体常用字号 12PX（规范）微软雅黑，黑体，宋体

特殊字体表现形式通常图片

如果有何相同的字体，先死的页面和本地浏览一样，如果没有 1 换成浏览器用默认的宋体 2 直接显示乱码

-->

<!--一个页面到另一个页面- 友情链接，有利于网站推广

绝对路径：

背景图像 body background="图像路径" 《img src="图像路径">

链接完文字默认是蓝色，访问后是紫色

< 让链接网页在新窗口打开 target="_blank"->

假链接 href="#"

--->

<!--关于颜色值简写#ffffff=#fff

#ffcc00=#fc0

html+css分开独立-->

<!--html和css添加属性不同

<table width="800">和 <h1 style="widtn:800px;"

valign垂直居中和line-height:100px;一行文字垂直居中>

/*样式注释*/--->

<!--css(样式）

1:行内式：在标记中直接加样式 <h1 style="属性：值；">内容</h1>

2；嵌入式：讲对页面中个元素的设置写在<head></head> 例如：<style type="text/css">样式</style>

3:导入式：<style type="text/css">@import"mystyle.css";</style>

独立样式文件里固定格式：@charset"utf-8";!!<@charset"utf-8";> !!

4:链接式：<link(链接) href="mystyle.css" rel="stylesheet" type="text/css"（类型）

【导入式和链接式不同：导入式，先看见HTML结构在看样式网速慢时。不美观；

链接式：样式结构同时出现】-->

<!--css选择器

1:标记选择器h1{属性：值；}(所有下面什么标签)

2:类别选择器。.class{属性：值；}里面的class=样式名将来写成你定义选择器类别的名称（不能中文）

3:ID选择器。。#id{属性：值；}id=样式名

5:复合选择器：

（1）‘交集’选择器。标记/ID.类别。h3.cla类别ss{属性：值；}

(2):'并集'选择器。所有标签{} .类别，标记 class,h3

（3）：’后代‘选择器

p strong{}。。类别标记.。.class h3{属性：值；}-->

<title>css选择器</title>

<!--嵌入式

h1{background-color:blue;color:#fff;}

p{width:500px;height:100px;background-color:yellow;color:red;text-align:center;line-height;center;}

</style>-->

<!--导入式--

@import"mystyle.css";</style>-->

<!--链接式

<!--类别选择器

.red{font-size:25; color:red;}

.blue{font-size:35; color:

blue;}

.bg{background:red;-->

<!--ID选择器

#red{font-size:25; color:red;}

#blue{font-size:35; color:

blue;}

#bg{background:red;}-->

<!--’交集‘选择器

p#red{color:red;}

p.blue{color:blue;}

h2.green{color:green;}-->

<!--’并集‘选择器 <style type="text/css">

p,h2,h3{color:red;}

</style>-->

p strong{color:red;}

h3 strong{color:blue;}

h2.green{color:green;}

</style>

</head>

<body>

<!--行内式-

<h2 style="background-color:blue;color:#fff;text-align:center;">我要有高薪</h2>

<p >style="width:500px;height:100px;background-color:yellow;color:red;text-align:center;line-height:100px;">学xi强大</p>-->

<!---嵌入式导入式——链接式-

<!--类别选择器 --ID选择器

<h2 class="green">温温叫我乖宝宝</h2>

<h3 class="green"><strong>温温</strong>叫我乖宝宝</h3>

<!--全局声明

*{}

font-style:italic;倾斜

font-style:normal;没有样式

font-family:"字体"；-->3

<!--css层叠性

行内样式》ID》类别》标记

如果给同一个标签定义相同属性时，在样式文件中，底下会覆盖上面文件---->

<!--链接四种状态

a:link链接

a:visited访问后

a:hover鼠标经过

a:active鼠标点击

text-decoration:控制链接文字要不要下划线none;没有下划线 underline;有

font-weight:normal;不加粗

font-weight:bold;加粗

企业关于链接文字状态：：：：

1；文字默认无下划线，鼠标经过有下划线，访问后没下划线

2；都没有下划线，默认链接一种颜色，鼠标经过变一个颜色

3；默认有下划线，鼠标经过有下划线并变颜色

注意；通常，链接和访问的状态相同-->

<body>

</body>

</html>

<!---书写孙旭上有下左

margin 外边距

margin-top顶部外边距

margin-right右侧外边距

margin-bottom底部外边距

margin-left左侧外边距

margin:20px;全20边距

margin：20px 30px 40px;第一个顶，第二个左右，第三个底；

margin:20px 30px;第一个顶底，第二个左右

margin：0；

margin: 20px 40px 60px 80px;（上；右；下；左。）

margin:0 auto;块级

padding内边距

padding-top;

padding-right右侧内边距

padding-bottom

padding-left;

body,h1,p,ul,li,dl,dt,dd{margin:0;padding:0;}

*{}-->

<!---首行缩进

<p> text-indent:2em;首行缩进2汉字---->

<!--盒子模式

<!--border 边框属性

border:1px solid #fc0- 虚线：dashed

none : 　无边框。与任何指定的border-width值无关

hidden : 　隐藏边框。solid : 　实线边框（常用）

double : 　双线边框。

border-style类型

border-color颜色

border-left 设置左边框，一般单独设置左边框样式使用

border-right 设置右边框，一般单独设置右边框样式使用

border-top 设置上边框，一般单独设置上边框样式使用

border-bottom 设置下边框，

border-top:10px groove skyblue；groove上颜色skyblue下颜色

borser---->

div{width:980px;height:300px;border:1px solid #09F;line-height:300px;text-align:center;margin:0 auto;}

</style>

</head>

<<!---div 区分块

水平居中：margin:0 auto;

div-width:980px,border:1px;总宽度982px

大盒子总宽度=第一个盒子宽度+间距（第一个到第二个的距离）+第二个盒子的宽度+间距+第三个盒子宽度+左右边框980px

大盒子总高度=第一个盒子高度+间距+第二个盒子高度+间距+第三个盒子高度+上下的边框300px

div{width:360px;height:310px;border:1px solid #9颜色

div{width:358px;height:308px;border:1px solid #ccc;padding-top:20px;padding-left:20px;}/*382*332宽度的盒子*/

<!---书写孙旭上有下左

margin 外边距

margin-top顶部外边距

margin-right右侧外边距

margin-bottom底部外边距

margin-left左侧外边距

margin:20px;全20边距

margin：20px 30px 40px;第一个顶，第二个左右，第三个底；

margin:20px 30px;第一个顶底，第二个左右

margin：0 auto 居中；

padding内边距

padding-top;

padding-right右侧内边距

padding-bottom

padding-left;

body,h1,p,ul,li,dl,dt,dd{margin:0;padding:0;}

*{粗细、样式和颜色(边框三个属性)}

如下面代码为div来设置边框粗细为2px、样式为实心的、颜色为红色的边框：

div{

border:2px solid red;

}

上面是border代码的缩写形式，可以分开写：

div{

border-width:2px;

border-style:solid;

border-color:red;-->

<!---首行缩进

<p> text-indent:2em;首行缩进2汉字-

！！！！！！！！！！！！！！！！！！！！！-list-style:none;什么样式都没有-->

<!--盒子模式

标准文档流

1：块级元素{（block)

<div>标题，段落，img

2;行内元素（inline）

<span>行内元素 em i a strong

margin计算规则：

1：·如果两个对象在一行，第一个对象添加了右边距，第二个对象添加左边距，margin取和

2：如果两个对象在两行，上面对象家里下边框。下面对象加了上边框，margin去最大值。

dispaly:block;显示为块（可以将行内元素转化为快级元素）

display:none；隐藏

display:inline;显示为行内（可以将块级元素转成行内元素）

display:inlne-blok：显示为行内块（可以将行内元素换成行内块，增加宽和高）

background:url(图片路径)3*3 no-repeat：不平铺repeat-x水平方向平铺repeat-y垂直

left top左侧顶 right top右顶

background:background-color ||background-image || background-repeat || background-attachment || background-position

background-image:url("图片的网址"); 背景图

background: url(" 图片的网址 "); 背景

background-color:#色码; 背景色彩

scroll 拉动卷轴时，背景图片会跟着移动（缺省值）(滚动条所在位置)

fixed 拉动卷轴时，背景图片不会跟着移动

repeat 背景图片并排

repeat-x 背景图片以X方向并排

repeat-y 背景图片以Y方向并排

　no-repeat 背景图片不以并排的方式处理

（center bottom ）

微件：--->

<!--盒子的浮动和定

位

float:left左浮动；

float:right右浮动；

clear:booth清除浮动

父元素使用overflow方法设置hidden是最简单清除浮动的方法

但是子元素使用了定位布局，会很难实现

　overflow:hidden：隐藏溢出

定位 position

static默认；

relative相对定位

absolute绝对定位-left,right,top,bottom

[1]必须先给父类加定位：position:relative

[2]给子元素加绝对定位，同时要加方向属性

fixed固定定位

position:relative;left:50ox;top;50px;小盒子对大盒子左边50，顶部50（右下角）

position：absolute；right：30

； bottom：30；对于浏览器来说。（右下角）

position：relative——>position：absolute：right：20px；bottom：20：px；

，使用了dt dd最外层就必须使用dl包裹，此组合标签我们也又叫表格标签，与table表格类似组合标签，故名我们也叫dl表格 <dl>

</dl>-->

background:rgba(0,0,0,.3)css3背景半透明

border-radius: 小圆角（原件半径）

cursor:pointer;小手---cursor:default;小白-----cursor:text;输入光标

clear="left"可能的值值描述 left 在左侧不允许浮动元素。

right 在右侧不允许浮动元素。 both 在左右两侧均不允许浮动元素。

em 相对长度单位，相当于当前对象内文本的字体尺寸

filter:alpha(opacity=50) 整个透明（火狐[opacity:0.5] 起作用）

<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

box-shadow：<length><length><length><length>|| <color>

<length><length><length>?<length>? || <color>：阴影水平偏移值（可取正负值）；阴影垂直偏移值（可取正负值）；阴影边框；阴影模糊值；阴影颜色

=======<span>=======

text-overflow: clip|ellipsis|string;

值描述

clip 修剪文本。

ellipsis 显示省略符号来代表被修剪的文本

string 使用给定的字符串来代表被修剪的文本。

css-DOM操作

。获取和设置元素的样式属性：css();

。获取和设置元素透明度:opacity():0.1

。获取和设置元素高和宽

。获取元素在当前视窗中的相对位移：oddset(). ---top---left

来自为知笔记(Wiz)

posted @ 2016-03-03 17:53 半夏来福阅读(508) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

芒果mik

html

公告