HTML和CSS

常用标签

HTML页面是由标签组成，不同的标签浏览器对其进行不同样式和内容的渲染，我们需要记忆常用的标签即可。

大致可分为如下几类:标题、水平线、段落、换行、图片、表格、超链接、列表、表单、下
拉列表、div 和span等。

标题

h1- h6标签可定义标题，标题依次递减，由于h元素拥有确切的语义，因此请慎重地选择恰当的标签层级来构建文档的结构。请不要利用标题标签来改变同一行中的字体大小。相反，我们应当使用层叠样式表定义来达到漂亮的显示效果。

<h1></h1>

水平线

hr标签在HTML页面中创建-条水平线(horizontal rule)可以在视觉上将文档分隔成各个部分。在HTML中，hr 标签没有结束标签。

<hr />

属性	值	描述
align	center left right	规定hr元素的对齐方式，以后可以用样式取代它
size	pixels	规定hr元素的高度(厚度) ，后可以用样式取代它
width	pixels %	规定hr元素的宽度,后可以用样式取代它

段落和换行

段落

p标签定义段落。p 元素会⾃动在其前后创建⼀些空⽩。浏览器会⾃动添加这些空间，您也可以在样式表中规定。
理解：语文课本中各个段落之间会有⼤的空隙。

<p></p>

属性	值	描述
align	left、right、 center、 justify	规定段落中文本的对齐方式，以后可以用样式取代它

换行

br标签为换行符号
注意: br 标签只是简单地开始新的一-行，而当浏览器遇到p标签时，通常会在相邻的段落之间插入一些垂直的间距。请使用br来输入空行，而不是分割段落。

<br/>

列表

无序列表

由ul和li标签组成。

<ul><li></li><li></li>
</ul><ul> <li>好好学习</li><li>天天向上</li>
</ul>

属性	值	描述
type	disc circle square	规定列表的项目符号类型。可以使用样式取代。 dise:实心圆(默认) circle:空心圆 square:方块

有序列表

由ol和li标签组成。

<ol ><li></li><li></li >
</ol><ol><li>好好学习</li><li>天天向上</li>
</ol>

属性	值	描述
type	1 a A i I	规定在列表中使用的标记类型。 1:用数字形式表示序号(默认) a:用小写字母表示序号 A:用大写字母表示序号 i:用小写罗马数字表示序号 (大写i) :用大写罗马数字表示序号

div和span

div

div是一个块级元素，通常与css配合使用，用于布局。
div标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
div是一个块级元素。这意味着它的内容自动地开始一个新行。实际上,换行是div固有的唯一格式表现。可以通过div的class或id应用额外的样式。

<div>content</div>

属性	值	描述
align	left、right、 center	规定div元素中的内容的对齐方式，以后可以用样式取代它

span

span标签被用来组合文档中的行内元素，span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。

<span>content</span>

格式化标签

font

规定文本的字体、字体尺寸、字体颜色

pre

定义预格式化的文本。被包围在pre元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体

文本标签

b (粗文本)、i (斜体文本)、u (下划线文本)、del (中划线文本) 、sub (下标文本)、 sup (上标文本)

a标签

a标签定义超链接，用于从一-张页面链接到另一张页面。
a元素最重要的属性是href 属性，它指示要链接的目标位置，同时没有href属性a标签内的内容与普通文本没有区别，也就失去了超链接的功能。
若是想要跳转到当前页面，那么href的值为#。被链接页面通常显示在当前浏览器窗口中，除非您规定，了另一个目标(target 属性)。

<a href="http://www.baidu.com">百度</a>

属性	值	描述
href	URL	连接所要跳转的位置，可能是其他或当前页面。
target	blank parent self top Framename作为锚点的a标签	规定在何处打开链接文档。 blank:开启新页面显示页面; self:当前页面显示跳转到页面，默认值。 _top: 用于有frameset布局的页面，想要覆盖整个页面显示。 Framename:这里framename与上边的值不同，具体以为frame起了什么样的名字为准，该值指示要连接的页面跳转后将在相应名称的的name值框架中显示。

锚点的实现

利用a标签的name属性:

<a name="top"></a>

一般标签的id属性: divid="、 a id=""等:

<div id="top"></div>、 <a id="top"></a>

锚点定位

<a href=" #top" >返回首部</a>

图片

img元素向网页中嵌入- -幅图像。
注意:从技术上讲，img 标签并不会在网页中插入图像，而是从网页上链接图像。img 标签创建的是被引用图像的占位空间。

<img src="" alt="" >

必须属性

属性	值	描述
alt	text	规定图像的替代文本，-般在图片无法正常显示占位的文字。
src	URL	规定显示图像的URL。

常用属性

属性	值	描述
align	top、bottom、 middle、 left、 right	规定如何根据周围的文本来排列图像
border	pixels	定义图像周围的边框
height	pixels、%	定义图像的高度。
width	pixels、%	定义图像的宽度。
title	文本	当鼠标在图片上时显示的文字

表格

table标签定义HTML表格。
tr标签定义表格的行。tr元素包含一个或多个th或td元素，td标签定义HTML表格中的标准单元格。

th定义表格内的表头:单元格。th元素内部的文本通常会呈现为居中的粗体文本，而td元素内的
文本通常是左对齐的普通文本。
简单的HTML表格由table元素以及一个或多个tr. th、或td元素组成。

理解: table相当于一个表格的外框，tr为行， td为- 一个一个单元格, th为有标题作用的单元格,
th中的内容同时有加粗的效果。

常用属性.

属性	值	描述
align	right、center、left	表格对⻬⽅式
border	px	规定表格边框的宽度
width	% 、px	规定表格的宽度

tr常⽤属性

属性	值	描述
align	right、left、center	定义表格⾏的内容对⻬⽅式。
bgcolor	rgb(x,x,x)、#xxxxxx、colorname	规定表格⾏的背景颜⾊，以后可以⽤样式取代它
valign	top、middle、bottom	规定表格⾏中内容的垂直对⻬⽅式，以后可以⽤样式取代它

td 的colspan和rowspan分别规定单元格横跨的列数和行数

表单

form

form标签用于为用户输入创建HTML表单。

表单能够包含input元素，比如文本字段、复选框、单选框、提交按钮等等。还可以包含textarea等元素。

表单用于向服务器传输数据。form 元素是块级元素,其前后会产生折行。常用属性

属性	值	描述
action	URL	规定当提交表单时向何处发送表单数据
method	get、post	规定⽤于发送 form-data 的 HTTP ⽅法
name	Form_name	规定表单的名称
target	_blank _self _ parent _top framename	规定在何处打开 action URL

method：表单提交方式：get、post

get：(默认，主动的获取⽅式) 数据放在url上,安全性差，数据的容量有限，有缓存
post：数据放在请求实体中，相对安全，数据量理论上没有限制，没有缓存

注意：如果要上传文件需要把请求改为post，给表单添加enctype=“multipart/form-data”
二进制表单：enctype=“multipart/form-data”
普通表单：enctype=“application/x-www-form-urlencoded”

input

input标签用于搜集用户信息。
根据不同的type属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、单选按钮、按钮等等。

常用属性

属性	值	描述
alt	text	定义图像输⼊的替代⽂本。
checked	checked	规定此 input 元素⾸次加载时应当被选中。
disabled	disabled	当 input 元素加载时禁⽤此元素。
readonly	readonly	规定输⼊字段为只读。
maxlength	number	规定输⼊字段中的字符的最⼤⻓度。
value	value	规定 input 元素的值。
type	button checkbox file hidden image password radio reset submit text	规定 input 元素的类型。按钮复选框⽂件隐藏域图像形按钮密码单选框重置按钮提交按钮⽂本

<!-- 普通按钮没有任何效果 -->
<input type="button" value="普通按钮" /><input type="submit" value="提交按钮" />
<input type="reset" value="重置按钮" /><!-- 图片按钮 效果和提交一样 -->
<input type="image" src="img/lbw.jpg" width="50px" value="图片按钮" />
----------------------------------------------------------------------------
<!-- 普通按钮没有任何效果 -->
<button type="button">普通按钮</button><button type="submit">提交按钮</button>
<button type="reset">重置按钮</button><!-- 什么都不写 效果和提交一样 -->
<button>普通按钮</button>

注意:

没有name属性的属性是无法提交到后台的！！！！
Radio单选按钮以name相同为⼀组。
Checkbox复选按钮以name相同为⼀组。

textarea

该标签定义多行的文本输入控件。文本区中可容纳无限数量的文本，可以通过cols和
rows属性来规定textarea的尺寸。

cols规定文本区内的可见宽度。rows规定文本区内的可见行数。

<textarea>content</textarea>

label

label 标签为input元素定义标注(标记) 。label元素不会呈现任何的特殊效果。
label标签的for属性应当与相关元素的id属性相同，此时点击labe|标签会自动为元素聚焦

<label for="username">用户名: </label>
<input type-="text" id="username" name="username"/>

button

<button>按钮</button>

常用属性

属性	值	描述
disabled	disabled	禁⽤该按钮。
type	button、submit、reset	规定按钮的类型。
value	text	规定按钮的初始值。
name	button_name	规定按钮的名称。

select

select用于定义下拉列表

<select name="color" >
<option value="red">红色</option>
<option value="green">绿色</option>
<option value="blue">蓝色</option>
</select>

select常用属性

属性	值	描述
disabled	disabled	禁⽤该下拉框。
multiple	multiple	规定可选择多个选项。
name	name	规定下拉列表的名称。
size	number	规定下拉列表中可⻅选项的数⽬。

option常用属性

属性	值	描述
disabled	disabled	禁⽤该下拉框。
selected	selected	规定选项（在⾸次显示在列表中时）表现为选中状态。
value	text	定义送往服务器的选项值。

常用字符实体

在HTML中,某些字符是预留的。

在HTML中不能使用小于号(<) 和大于号(>) ，这是因为浏览器会误认为它们是标签。

如果希望正确地显示预留字符，我们必须在HTML源代码中使用字符实体(characterentities)。实体名称对大小写敏感!

标签的分类

HTML中标签元素三种不同类型:块状元素，行内元素，行内块状元素。

块级元素

元素都从新的一行开始，并且其后的元素也另起一行;元素的高度、宽度、行高以及顶和底边距都可设置

元素宽度在不设置的情况下，是它本身父容器的100% (和父元素的宽度一致)，除非设定一个宽度。

行内元素

和其他元素都在一行上; 元素的高度、宽度及顶部和底部边距不可设置;元素的宽度就是它包含的文
字或图片的宽度，不可改变。

行内块状元素

和其他元素都在一行上; 元素的高度、宽度、行高以及顶和底边距都可设置。

CSS

CSS (英文全称: Cascading Style Sheets)层叠样式表,是一种用来表现HTML (标准通用标记语言的一个应用)或XML (标准通用标记语言的一个子集)等文件样式的计算机语言。

CSS目前最新版本为CSS3,是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法,针对各类人群,有较强的易读性。

CSS是用来美化网页用的，没有网页则CSS毫无用处，所以CSS需要依赖HTML展示其功能。

CSS的基本使用

CSS基本语法

CSS样式由选择器和一条或多条以分号隔开的样式声明组成。每条声明的样式包含着一个CSS属性和属性值。

选择器名{属性: 属性值;.....
}

div{background-color : red;
}

注意：

css声明要以分号;结束，声明以 {} 括起来
建议一行书写⼀个属性
若值为若干单词，则要给值加引号，如 font-family: “agency fb”;
注释

多行注释：

/* 这里的内容就是注释 */

CSS的使用

行内式

行内样式将样式定义在具体html元素的style属性中。以行内式写的CSS耦合度高，只适用于当前
元素,在设定某个元素的样式时比较常用。

<p style="color:red;font-size:50px;">这是一段文本</p>

在当前元素使用 style属性的声明方式。

style 是行内样式属性;
color是颜色属性; red 是颜色属性值;
font-size是字体大小属性; 50px 是字体大小属性值

嵌入式

嵌入式通过在html页面内容开辟一段属于css的代码区域, 通常做法为在head标签中嵌套style标签，在style中通过选择器的方式调用指定的元素并设置相关CSS。

<style type="text/ss">p {color: blue;font-size: 40px;}</style>

引入外联样式文件

在实际开发当中，很多时候都使用引入外联样式文件,这种形式可以使html页面更加清晰，而且
可以达到更好的重用效果。

style.css

p{color: green; font-size: 30px;
}

test.html

<link rel="stylesheet" type="text/css" href="style.css">

rel: rel属性规定当前文档与被链接文档之间的关系。

stylesheet:文档的外部样式表。
很多时候，大量的HTML页面使用了同一个CSS。那么就可以将这些CSS样式保存在一个单独的.css文件中，然后通过link元素去引入它。

注意：当有多重样式时，记住前提规则，越精确越优先。

CSS选择器

在 CSS中，选择器是⼀种模式，用于选择需要添加样式的元素。

CSS选择器有很多，掌握常用的即可；

基本选择器

通用选择器

选择所有 *

*{......
}

*{color: orange;
}

元素选择器

选择指定标签

元素名称 {......
}

p {color: red; font-size: 20px;
}

ID选择器

选择设置过指定id属性值的元素 #

#id属性值 {......
}

p{color: red; font-weight: bold;
}

类选择器

选择设置过指定class属性值的元素 .

.class属性值 {......
}

.hidden { display: none;
}

分组选择器

当几个元素样式属性一样时, 可以共同调用一一个声明，元素之间用逗号分隔

选择器1,选择器2... {}

h2 , #pre1 { color: orange;font-style: italic;
}

CSS样式的优先级，是根据选择器的精确度/权重来决定的，常见的权重如下，权重越大，优先级越高
元素选择器: 1

类选择器: 10

id选择器: 100

嵌入式和引入外联样式文件的优先级要看就近原则，就是比谁距离代码更近

如下，嵌入式在引入式的下面，所以会离body里的代码更近，所以优先级更高

<head>  <meta charset="utf-8"><title></title><!-- 外部样式 --><link rel="stylesheet" type="text/css" href="css/style.css"/><!-- 内部css  离body里的代码更近，所以优先级更高  --><style type="text/css">  p{color: blue;}</style>
</head>

内联样式: 1000

组合选择器

CSS组合选择器说明了两个选择器直接的关系。
CSS组合选择符包括各种简单选择符的组合方式。

在CSS中包含了四种组合方式:

后代选取器(以空格分隔)，子元素选择器(以大于号分隔)，相邻兄弟选择器(以加号分隔)，普通兄弟选择器(以波浪线分隔)。

后代选择器（派生选择器）

用于选择指定标签元素下的后辈元素,以空格分隔

选择器1 选择器2 {......
}

.food li{border: 1px solid red;
}

<h1> 食物</h1>
<ul class="food"><li>水果<ul><li>香蕉</li><li>苹果/i><li>梨</li></ul></li><li>蔬菜<ul><li>白菜</li><li>油菜</li><li>卷心菜</li></ul></li>
</ul>

子元素选择器

用于选择指定标签元素的所有第一代子元素，以大于号分隔

选择器1 +选择器2{.....
}

d + div{border: 1px solid red;
}

html代码同上

相邻兄弟选择器

可选择紧接在另 -元素后的元素，且二者有相同父元素。以加号分隔

选择器1 +选择器2 {......
}

d + div{border: 1px solid red;
}

<div id="d">相邻兄弟选择器1<ul><li>开心麻花</li><li> 贾玲</i><li>宋小宝</i></ul>
</div>
<div>相邻兄弟选择器2
</div>

普通兄弟选择器

选择紧接在另一个元素后的所有元素，而且二者有相同的父元素，以波浪线分隔

选择器1 ~选择器2 {.....
}
li~li{background-color : yellow;
}

<div>普通兄弟选择器1<ul><li>开心麻花</li><li>贾玲</i><li>宋小宝</li><li>沈腾</li><li>王宁</li></ul>
</div>

CSS常用属性设置

背景

CSS 背景属性⽤于定义HTML元素的背景效果

background-color

设置元素的背景颜色

body {background-color:#ff0000;
}

background-image

设置元素的背景图像，默认情况下，背景图像进⾏平铺重复显示，以覆盖整个元素实体。

body {background-image:url('paper.gif');
}

background-repeat

设置是否及如何重复背景图像

body {background-image: url(img/logo.jpg); background-repeat: no-repeat;
}

文本

color

body {color:blue;
}h1 { color:#00ff00;
}h2 { color:rgb(255,0,0);
}

text-align

设置文本对齐方式，left (左对齐)，center (居中)，right（右对齐）

body {text-align:center;
}h1 {text-align:right;
}h2 {text-align:right;
}

text-decoration

规定添加到文本的修饰，属性值: none、underline、 overline. line-through

underline

对文本添加下划线，与HTML的u元素相同。

overline

对文本添加上划线。

line-through

对文本添加中划线，与HTML中的s和 strike 元素相同。

none

关闭原本应⽤到元素上的所有装饰。

h3 {text-decoration:underline;
}

text-indent

设置文本首行缩进

p.ident2 {text-indent: 2em;
}

em一个相对值，例如页面的文本大小为17px,则2em就为17px*2

字体

font-family

文本字体，该属性设置文本的字体。
font-family属性应该设置几个字体名称作为一种"后备”机制，如果浏览器不支持第一种字体, 他
将尝试下一种字体，所以尽量将不常见的字体靠前，将最常见的字体放置在最后,作为替补。

注意：

只有当字体名中含有空格或#、$之类的符号时（如 New York），才需要在font-family声明中加引号：
```
body {font-family: "arial black";
}
```

多个字体系列是用⼀个逗号分隔指明

/* 靠前的字体先⽣效 */
p{font-family: 微软雅⿊,⿊体,"agency fb";
}

font-size

文本大小

body{font-size: 50px; /*字体大小50px*/
}
#span1 {font-size: 25px; /字体大小25px/
}

font-style

字体风格，该属性最常用于规定斜体文本。属性值: normal、italic、oblique
1) normal:文本正常显示;
2) italic: 文本斜体显示;
3) oblique: 文本倾斜显示，oblique是将文字强制倾斜。
说明: 一般情况下，字体有粗体、斜体、下划线、删除线等诸多属性,但是不是所有字体都
具有这些属性，一些不常用字体可能只有正常体,若使用italic属性则没有效果,所以需要oblique属性强制倾斜。

font-weight

字体加粗，该属性设置文本的粗细。

bold:可以将文本设置为粗体。

100 ~ 900:为字体指定了9级加粗度。如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别。

100对应最细的字体变形;

400 等价于normal;

700等价于bold.

900对应最粗的字体变形;

对齐方式

text-align

规定元素中的文本的水平对齐方式。属性值如下:

注意:
值justify可以使文本的两端都对齐。在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后,调整单词和字母间的间隔，使各行的长度恰好相等。对最后- -行不生效。

display属性

display属性规定元素应该生成的框的类型。这个属性用于定义建立布局时元素生成的显示框类型。

浮动

float的属性值有none、left、 right。

只有横向浮动，并没有纵向浮动。
会将元素的display属性变更为block。
浮动元素的后⼀个元素会围绕着浮动元素（典型运⽤是⽂字围绕图⽚）
浮动元素的前⼀个元素不会受到任何影响（如果你想让两个块状元素并排显示，必须让两个块状元素都应用float）。

盒⼦模型

border、padding、margin三个属性构成了盒子模型。

border

设置所有的边框属性。

可同时设置边框的宽度、样式、颜⾊

table, th, td {border: 1px solid black;
}table {width:100%; height:50px;
}

使用border-width、border-style、 border-color单独设置

table,td {border-width: 1px; border-style: dotted; border-color: green;
}

border-style的属性

border-collapse

设置是否将表格边框折叠为单⼀边框。

属性值：separate（默认，单元格边框独⽴）、collapse（单元格边框合并）

table {border-collapse : collapse;
}

padding

设置元素所有内边距的宽度，或者设置各边上内边距的宽度。
如果在表的内容中控制文本到边框的内边距，使用td和th元素的填充属性:

td { padding:15px;
}

单独设置各边的内边距: padding-top. padding-left. padding bottom. padding-right
默认按照上右下左的顺序设定

td .test1 {padding: 1.5cm
}
td .test2 {padding: 0.5cm 2.5cm
}

<table border="1"><tr><td class="test1">这个表格单元的每个边拥有相等的内边距。</td></tr>
</table>
<br/> .
<table border="1"><tr><td class="test2">这个表格单元的 上和下内边距是0.5cm,左和右内边距是2.5cm。</td></tr>
</table>

注意:通过padding属性设置元素内边距时，会使元素变形。若不想影响格式效果，可以用margin属性设置元素外边距。

margin

设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。

p.margin {margin: 2px 4px 3px 4px;
}

单独设置各边的外边距: margin-top、 margin-left、 margin-bottom. margin-right

p.margin{margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px;
}
*{margin: auto auto;
}
*{margin: 100px auto;
}

说明:
auto:自动，可以理解为居中的意思。浏览器自动计算外边距。

margin: auto auto:第一个auto表示上下外边距自动计算,第二个auto表示左右外边距自动计算。

但是上下外边距在自动计算时不会生效，而左右外边距会生效,表现为居中状态,效果如下:

若要设置为.上下左右居中状态,则要计算好自行设置上下的外边距，效果如下:

注意:此时使用margin-top不生效。了解

position

分为4种：

默认定位 static
这是默认值，处于页面流给予的位置
相对定位 relative
相对于原本应该处于的位置，再进行偏移，不过即使偏移了之后，原本的位置还是被占着的
绝对定位 absolute
脱离了文档流，是相对于static以外的第一个父元素进行偏移
固定定位 fixed
同样脱离了文档流，是相对于浏览器窗口进行偏移，而且不管页面上下进度条如何拖动，都会固定在相同的位置

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">body{margin: 0;padding: 0;}#div1{border: 2px solid red;width: 200px;height: 200px;}#div2{border: 2px solid aquamarine;width: 200px;height: 200px;position: relative;top: 50px;left: 50px;}#div2-1{border: 2px solid green;width: 200px;height: 200px;}#div3{border: 2px solid dodgerblue;width: 200px;height: 200px;position: absolute;top:100px;left: 100px;}#div3-1{border: 2px solid dodgerblue;width: 100px;height: 100px;position: absolute;top:80px;left: 100px;}#div4{border: 2px solid orange;width: 200px;height: 200px;position: fixed;top:100px;left: 800px;}</style></head><body><div id="div1">div1 static默认定位<br>这是默认值，处于页面流给予的位置</div><div id="div2">div2 relative相对定位 <br>top 50px left 50px <br>相对于原本应该处于的位置，再进行偏移，不过即使偏移了之后，原本的位置还是被占着的</div><div id="div2-1">div2-1是默认定位 测试与div2相对定位的关系 <br>这里可以看出div2的未偏移的原本的地方仍然被占着位置</div><div id="div3">div3 absolute绝对定位<br>top 100px left 100px <br>脱离了文档流，是相对于static以外的第一个父元素进行偏移<div id="div3-1">div3-1 绝对定位<br>top 80pxleft 100px</div></div><div id="div4">div4 fixed固定定位<br>top 100px left 100px <br>同样脱离了文档流，是相对于浏览器窗口进行偏移，而且不管页面上下进度条如何拖动，都会固定在相同的位置</div><p>软件开发是根据用户要求建造出软件系统或者系统中的软件部分的过程。软件开发是一项包括需求捕捉、需求分析、设计、实现和测试的系统工程。软件一般是用某种程序设计语言来实现的。通常采用软件开发工具可以进行开发。软件分为系统软件和应用软件，并不只是包括可以在计算机上运行的程序，与这些程序相关的文件一般也被认为是软件的一部分。 软件设计思路和方法的一般过程，包括设计软件的功能和实现的算法和方法、软件的总体结构设计和模块设计、编程和调试、程序联调和测试以及编写、提交程序。</p><p>软件开发是根据用户要求建造出软件系统或者系统中的软件部分的过程。软件开发是一项包括需求捕捉、需求分析、设计、实现和测试的系统工程。软件一般是用某种程序设计语言来实现的。通常采用软件开发工具可以进行开发。软件分为系统软件和应用软件，并不只是包括可以在计算机上运行的程序，与这些程序相关的文件一般也被认为是软件的一部分。 软件设计思路和方法的一般过程，包括设计软件的功能和实现的算法和方法、软件的总体结构设计和模块设计、编程和调试、程序联调和测试以及编写、提交程序。</p><p>软件开发是根据用户要求建造出软件系统或者系统中的软件部分的过程。软件开发是一项包括需求捕捉、需求分析、设计、实现和测试的系统工程。软件一般是用某种程序设计语言来实现的。通常采用软件开发工具可以进行开发。软件分为系统软件和应用软件，并不只是包括可以在计算机上运行的程序，与这些程序相关的文件一般也被认为是软件的一部分。 软件设计思路和方法的一般过程，包括设计软件的功能和实现的算法和方法、软件的总体结构设计和模块设计、编程和调试、程序联调和测试以及编写、提交程序。</p><p>软件开发是根据用户要求建造出软件系统或者系统中的软件部分的过程。软件开发是一项包括需求捕捉、需求分析、设计、实现和测试的系统工程。软件一般是用某种程序设计语言来实现的。通常采用软件开发工具可以进行开发。软件分为系统软件和应用软件，并不只是包括可以在计算机上运行的程序，与这些程序相关的文件一般也被认为是软件的一部分。 软件设计思路和方法的一般过程，包括设计软件的功能和实现的算法和方法、软件的总体结构设计和模块设计、编程和调试、程序联调和测试以及编写、提交程序。</p><p>软件开发是根据用户要求建造出软件系统或者系统中的软件部分的过程。软件开发是一项包括需求捕捉、需求分析、设计、实现和测试的系统工程。软件一般是用某种程序设计语言来实现的。通常采用软件开发工具可以进行开发。软件分为系统软件和应用软件，并不只是包括可以在计算机上运行的程序，与这些程序相关的文件一般也被认为是软件的一部分。 软件设计思路和方法的一般过程，包括设计软件的功能和实现的算法和方法、软件的总体结构设计和模块设计、编程和调试、程序联调和测试以及编写、提交程序。</p><p>软件开发是根据用户要求建造出软件系统或者系统中的软件部分的过程。软件开发是一项包括需求捕捉、需求分析、设计、实现和测试的系统工程。软件一般是用某种程序设计语言来实现的。通常采用软件开发工具可以进行开发。软件分为系统软件和应用软件，并不只是包括可以在计算机上运行的程序，与这些程序相关的文件一般也被认为是软件的一部分。 软件设计思路和方法的一般过程，包括设计软件的功能和实现的算法和方法、软件的总体结构设计和模块设计、编程和调试、程序联调和测试以及编写、提交程序。</p><p>软件开发是根据用户要求建造出软件系统或者系统中的软件部分的过程。软件开发是一项包括需求捕捉、需求分析、设计、实现和测试的系统工程。软件一般是用某种程序设计语言来实现的。通常采用软件开发工具可以进行开发。软件分为系统软件和应用软件，并不只是包括可以在计算机上运行的程序，与这些程序相关的文件一般也被认为是软件的一部分。 软件设计思路和方法的一般过程，包括设计软件的功能和实现的算法和方法、软件的总体结构设计和模块设计、编程和调试、程序联调和测试以及编写、提交程序。</p><p>软件开发是根据用户要求建造出软件系统或者系统中的软件部分的过程。软件开发是一项包括需求捕捉、需求分析、设计、实现和测试的系统工程。软件一般是用某种程序设计语言来实现的。通常采用软件开发工具可以进行开发。软件分为系统软件和应用软件，并不只是包括可以在计算机上运行的程序，与这些程序相关的文件一般也被认为是软件的一部分。 软件设计思路和方法的一般过程，包括设计软件的功能和实现的算法和方法、软件的总体结构设计和模块设计、编程和调试、程序联调和测试以及编写、提交程序。</p></body>
</html>

视图效果：

拖动页面后：

position中 relative和absolute结合

relative和absolute结合使用时，不再参照浏览器定位，而参照父级元素定位
这样组合可以实现相对非浏览器的父元素进行偏移

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style type="text/css">body{margin: 0;padding: 0;}#parent{border: 2px solid #008000;width: 400px;height:400px;position:relative;top:100px;left: 100px;}#child{border: 2px solid #1E90FF;width: 200px;height:200px;position:absolute;top: 100px;left: 100px;}</style></head><body><div id="parent">parents <br> width 400px height 400px<br>top 100px left 100px<div id="child">child <br>width 200px height 200px<br>top 100px left 100px<br>relative和absolute结合使用时，可以不再参照浏览器定位，而参照父级元素定位 <br>这样组合可以实现相对非浏览器的父元素进行偏移</div></div></body>
</html>

relative和absolute结合的效果：

HTML和CSS (前端)相关推荐

php前端响应式框架,响应式css前端框架有哪些
响应式css前端框架有:1.Semantic UI Framework:2.Less Framework:3.Foundation Framework:4.UIkit Framework:5.YUI ...
30最棒的响应式css前端框架
前十个链接: http://www.gbtags.com/gb/share/2659.htm 后面一些: http://www.gbtags.com/gb/share/2666.htm 具体的链接啥的 ...
css前端知识分享—页面布局分析
今天分享下"css前端知识分享-页面布局分析"这篇文章,文中根据实例编码详细介绍,或许对大家的编程之路有着一定的参考空间与使用价值,需要的朋友接下来跟着云南仟龙Mark一起学习一下 ...
HTML+CSS+前端项目
学习目标: HTML+CSS+前端项目学习内容: HTML认知 HTML基础 CSS基础 CSS进阶 CSS盒子模型 CSS浮动在线项目实战 CSS定位装饰学习时间: 周一至周五晚上 7 点-晚 ...
30个HTML+CSS前端开发案例（五）
30个HTML+CSS前端开发案例(21-25) 本人说明全屏加载动画效果代码实现效果吃豆豆动画效果代码实现效果鼠标悬停3D翻转效果代码实现效果 3D旋转木马效果代码实现效果 f ...
30个HTML+CSS前端开发案例（二）
30个HTML+CSS前端开发案例(6-10) 常用的选项卡菜单效果网页框架布局酷狗音乐热榜小米商城首页产品栏酷狗精选歌单效果常用的选项卡菜单效果 <!DOCTYPE html> ...
30个HTML+CSS前端开发案例（完结篇）
30个HTML+CSS前端开发案例(完结篇) flex弹性布局-今日头条首页热门视频栏代码实现效果 flex弹性布局-微博热搜榜单代码实现效果 grid网格布局-360图片展示代码实现效果 ...
30个HTML+CSS前端开发案例（四）
30个HTML+CSS前端开发案例(17-20) 鼠标移入文字加载动画效果代码实现效果鼠标悬停缩放效果实现代码效果鼠标移入旋转动画实现代码效果 loding加载动画实现代码效果资 ...
30个HTML+CSS前端开发案例（三）
30个HTML+CSS前端开发案例(11-15) 小米上称右侧悬浮菜单实现代码效果图自动轮播图效果实现代码效果图小米商城二级下拉菜单效果实现代码效果图时间轴效果实现代码效果图 Q ...
简单上手H5+CSS前端3D酷炫特效源代码
简单上手H5+CSS前端3D酷炫特效个人觉得是这个特效是入手自己做比较简单的一个前端特效代码十分少,也很容易看懂,记得点个关注效果图: H5部分 <!DOCTYPE html> & ...