CSS学习指南

.1 CSS 语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

selector {declaration1; declaration2; ... declarationN }

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

selector {property: value}

下面这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。

在这个例子中，h1 是选择器，color 和 font-size 是属性，red 和 14px 是值。

h1 {color:red; font-size:14px;}

下面的示意图为您展示了上面这段代码的结构：

image.png

1.1.1 字体属性：

属性含义属性值

font-family 字体 各种字体
font-style 字体样式 italic、oblique
font-variant 小体大写 small-caps
font-weight 字体粗细 bold、bolder、lighter…
font-size 字体大小 absolute、relative、%
color 字体颜色 颜色值

1.1.2 颜色与背景属性：

属性含义属性值

Color 颜色 颜色值
Background-color 背景色 颜色值
Background-image 背景图案 图片路径
Background-repeat 背景图案重复方式 Repeat-x | repeat-y | no-repeat
Background-attachment 背景的滚动 Scroll | fix
Background-position 背景图案初始位置 % | n em | top | left | right | bottom

1.1.3 文本属性:

属性含义属性值

word-spacing 单词间距 n em
letter-spacing 字母间距 n em
text-decoration 装饰样式 underline| overline| line-through| blink
vertical-align 垂直方向位置 sub| super |top |text-top| middle| bottom| text-bottom
text-transform 转为其他形式 capitalize| uppercase| lowercase
text-align 对齐 left| right| center| justify
text-indent 缩进 n em| %
line-height 行高 pixels、n em、%

1.1.4 边距属性:

属性含义属性值

margin-top 上边距 n em | %
margin-right 右 n em | %
margin-bottom 下 n em | %
margin-left 左 n em | %

1.1.5 边框属性:

属性含义属性值

Border-top-width 上边框宽度 n em | thin | medium | thick
Border-right-width 右 同上
Border-bottom-width 下 同上
Border-left-width 左 同上
Border-width 四边 同上
Border-color 边框颜色 Color
Border-style 边框样式 Dotted | dash | solid | double | groove | ridge | inset | outset
Border-top|right|bottom|left 上(右|底|左)所有属性 Border-width | border-style | color

1.1.6 图文混排:

属性含义属性值

Width 宽度 n em | %
Height 高度 n em
Float 文字环绕 Left | right
clear 去除文字环绕 Left | right | both

1.1.7 列表属性:

属性含义属性值

Display 是否显示 Block | inline | list-item | none
White-space 空白部分 Pre | nowrap | normal（是否合并)
List-style-type 项目编号 Disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none
List-style-image 项目前图片 Img-url
List-style-position 第二行位置 Inside | outside
List-style 全部属性 Keyword | position | url

1.1.8 鼠标属性:

属性值含义属性值含义

Auto 自动 N-resize 上箭头
Crosshair "+" Se-resize 右下
Default 默认 Sw-resize 左下
Hand 手形 S-resize 下箭头
Move 移动 W-resize 左箭头
E-resize 右箭头 Text "I"
Ne-resize 右上 Wait 沙漏
Nw-resize 左上 help 帮助

1.2 CSS选择器

1.2.1 li标签选择器

html:

<li>列表项1</li>（改变标签里的样式类型）

css:

针对所有列表

li{
 color: rgb(255,0,0); /*#ff0000 red*/
 font-size: 30px;
}

1.2.2 类选择器 class（把一堆样式划为一类）

<pre style="margin-bottom:18.0pt;line-height:16.5pt;background:#F6F8FA;
word-break:break-all">div`.topBar +Tab = <`divclass`=`"topBar"`></`div`>`</pre>

当前页面内可以多个同样 html:

<pre style="margin-bottom:18.0pt;line-height:16.5pt;background:#F6F8FA;
word-break:break-all"><li class="blue">`列表项``2`</li></pre>

css:

<pre style="margin-bottom:18.0pt;
line-height:16.5pt;background:#F6F8FA;word-break:break-all"> color: #0000ff;</pre>
<pre style="margin-bottom:18.0pt;
line-height:16.5pt;background:#F6F8FA;word-break:break-all"> }</pre>

1.2.3 ID选择器 id（也可控制某个DIV样式）

当前页面内唯一id；如果页面内出现多个相同id，虽然可以解析出，但不规范，不建议

<li id="item">列表项1</li>
 #item{
 color: #00FF00;
 font-size:40px;
 }

权重越大，优先级越高，优先级高的覆盖优先级低的

各种选择器可以用在列表li、容器div等中

html:

 <div>这是一个Div</div>

CSS:

 div{
 background-color: #ccc;
 }

1.3 CSS样式规则

1.3.1 三种定义样式的方法

①****在本文件下的表示方法

 <head>
 <style type="text/css"> //样式
 选择器（即修饰对象）{ //.g{ }
 对象属性1：属性值1； //font：
 对象属性2：属性值2； //height：50px；
 }
 </style>
 </head>

②在1.css文件中的表示方法

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

③直接跟着定义样式

<div class=" size show show-1"></div>

每个样式间用空格隔开，有三个样式 size、show、show-1

1.3.2 颜色

red = #FF0000 = rgb(255,0,0) 红色
blue = #0000ff = 蓝色
green = #00FF00 = 绿色
 #ccc = #cccccc 灰色
 #fff = #ffffff 白色
black = #333 黑色
background: #fff; 背景为白色
background: #fff; 背景为白色
 cursor: pointer; 当移动到当前位置时（配合li:hover）变成小手
 transition: all 1s ease; 渐变效果（有些浏览器不支持）
 -webkit-transition:all 1s ease;
 -o-transition:all 1s ease;
 -moz-transition:all 1s ease;
 -ms-transition: all 1s ease; 对于不支持的浏览器，解决方案

1.3.3 字体font

 width: 200px;宽度
 font-weight: bold; 字体粗细（粗体）
 font-size: 12px; 字体大小
 color: #ff7300; 字体颜色
 background-color: #ccc; 背景色
 height 高度
width 宽度（可以认为是长度）
font-family：隶书；字体

长度单位：

px 像素

颜色

 十六进制：#ffffff
 颜色名称：red

尺寸属性：

 Height、max_height、min_height
 width、max_width、min_width

字体、字号：

 font 缩写形式
 font-weight 粗细
 font-size 大小
 font-family 字体系列
 font-style 字体样式

字体颜色

 color
 opacity 透明度 css3

行距、对齐等

 line-height 行高
 text-align 对齐
 letter-spacing 字符间距
 text-decoration 文本修饰
 overflow 浮动
 text-overflow
 text-indent

1.3.4 列表宽度决定了列表项宽度

 height: 100px;
 line-height: 100px; 使其上下居中对齐
 text-align: right; 水平对齐方式：水平靠右
 text-align: center; 水平对齐方式：水平居中
 letter-spacing: 10px; 字间距
 text-decoration: none; 下划线设置（去除）
 white-space: nowrap; 设为一行显示
 overflow: hidden;
 display: block; 隐藏多余内容

1.3.5 图片

 background-image: url(images/1.jpg); 插入图片
 background-image: url(../images/1.jpg); 插入上一级文件夹中images文件夹中的图片1.jpg
 background-repeat: no-repeat; 图片默认多大就是多大（不加自动复制显示）
 background-position: 50px 50px; 移动图片（正数为右下角，负数为左上角）

1.3.6 块级元素默认占一行

★float: left; 浮动 将块级元素变为行级元素 让多行在一行 如果一行放不下，自动转第二行
 height: 50px; /*使其上下居中对齐*/
 line-height: 50px; /*使其上下居中对齐*/
 text-align: center; 水平对齐方式：水平居中
 margin-right: 5px; 每个元素间间隔5px
 font-size: 20px; 字体大小

1.3.7 焦点

鼠标移到当前位置时的状态

 a:hover{
 color: red;
 }
 /*鼠标激活选定状态*/
 a:active{
 color: green;
 }

1.3.8 超链接样式的四种状态

 未访问状态 a:link
 已访问状态 a:visited
 鼠标移上状态 a：hover
 激活选定状态 a：active

1.3.9 盒子（矩形方框）

margin（外边距/边界）
border（边框）
padding（内边距/填充）
width 宽度
height 高度
margin 外边距/边界
margin：1px 2px 3px 4px 外边距/边界（上右下左）
margin：1px 2px 外边距/边界（上下、左右）
margin：1px 外边距/边界（上下左右、通常表现出来上左）

margin

一个值：4边

两个值：上下、左右

四个值：上右下左

margin-left: auto; 左边距自动
margin-left: auto; /水平居中/
margin-right: auto; /水平居中/
margin: 0px auto; /水平居中，有的浏览器不支持/

默认下，div没有边框border（有颜色）

默认不显示border

border-color: blue;
border-width: 10px;
border-style: solid; 以上三句话使其最终显示 solid实心的
border width style color
border：20px solid green 一句话也可以显示
border-top:30px solid #ccc; 设置上边框属性
padding-top: 20px; 内边距（上）
padding: 20px; 内边距（上下左右）
padding: 20px 50px; 内边距（上下、左右）

对同一属性做设置，后面的优先级高

对外边距/边界设置，一般统一格式，不要上边设下边距，下边设上边距；如果设置，按大的显示

margin-bottom: 30px;
.topbar .search .topabar .link{float:right;} 共用一种样式{浮动 将块级元素变为行级元素}

1.3.10 解决浮动问题，使用尾类

 .fix{*zoom:1;*clear:both;} 
 .fix:before,.fix:after{
 display: table;clear:both;
 content: '';
 }
 <div class="wrap fix"> +fix谁的子元素浮动，就可以清除影响
 .fix{*zoom:1;*clear:both;}
 .fix:before,.fix:after{
 display: table;clear:both;
 content: '';
 }

1.3.11 定位

 position: absolute; 绝对定位
 position: relative; 相对定位

参照物是距离最近定位的父元素

1.3.12 对定位元素显示排序

 z-index: 1; 数字越大，优先级越高

设置鼠标指到哪里，哪里在上边

 .c4:hover{
 z-index: 3;
 }

1.3.13 响应式

viewport
 设备方向：Orientation
 设备方向：Orientation

1.3.14 其他样式

header、footer、center、left、right

头尾中间左右

链接默认带下划线

<div class=" size show show-1"></div>

每个样式间用空格隔开，有三个样式 size、show、show-1

list-style:none; 去除前面的列表序列号
border 边框
border: 1px solid red; 添加边框
<div style="clear: both"></div> 用于消除浮动效果导致的顺序错乱
height 高度
width 宽度（可以认为是长度）
font-family：隶书；字体
 top: 25px; 距离上方25px
 left: 15px; 距离左边15px
display: none;不显示
@media screen and (max-width: 900px){ } 当分辨率小于900px时
line-height: 1.8; 行高

1.4 为CSS单独建立文件（建立链接link）

TML是超文本标记语言。

web标准是由W3C和其它标准化组织制成集合。

web标准的构成

结构（对网页元素进行整理和分类-HTML）

表现（设置网页元素的版式，颜色，大小等外观样式-CSS）

行为（模型的定义及交互的表现-JS）

HTML常用标签

加粗:<strong>和<b>

倾斜：<em>和<i>

删除线：<del>和<s>

下划线：<ins>和<u>

<div>分割分区<span>跨度跨距

图片标签<img/>

属性: src图片路径

alt替换文本，图片无法正常显示

title提示文本，鼠标放到图像显示

width宽度，height高度（只需要修改其中一个）

border边框（无需单位直接写数值）

注意：

①图像标签可以拥有多个属性，必须写在标签名后面

②属性之前不分先后顺序，标签名与属性，属性与属性之间需要空格分开

③属性采取键值对的格式

相对路径：以引用文件所在位置为参考基础

（同一级路径，下一级路径/，上一级路径../）

绝对路径：从盘符开始的路径（\）

常用属性

img ——vspace垂直边距，hspace水平边距 align对齐

details,summary，鼠标点击时显示或隐藏

mark 文本中高亮显示，和strong相似

cite 用于引用标记，斜体显示

draggable true选中后可以拖动操作

font定义 font-style font-weight font-size/line-height font-family 顺序不能改变

word-wrap break-word长单词或url地址自动换行

letter-spacing字间距

word-spacing单词间距

line-height行间距

text-decorantion文本装饰unline下划线，overline上划线，line-through删除线

text-indent 2em 首行缩进两个字符

white-space空白符处理 pre

box-sizing:content-box当widthh和height的时候不包括margin和panding

更换图层位置，z轴偏移z-index:-10

align-items:center居中对齐

align-self:center

超链接标签<a>

href链接目标地址

target链接页面打开的方式（_self当前窗口打开,_blank新窗口中打开方式）

外部链接，内部链接，空链接，下载链接，网页元素链接，锚点链接（快速定位到页面的某个位置- 添加id属性）

去除超链接样式:text-decoration:none

特殊字符

空格符  

小于号< 大于号>

表格标签

align对齐方式

bolder表格边框

cellpadding单元格与内容之间空白

cellspacing单元格与单元格之前空白

合并单元格：rowspan colspan

列表标签

无序列表：ul li

有序列表：ol li

自定义列表：dl dt dd

表单标签

完整表单：表单域<form>，表单控件，提示信息

<form>

——action（指定接受并处理表单数据的服务器程序的url地址）

——method（get/post设置表单数据的提交方式）

——name（指定表单名称）

<input>输入元素

type属性：button（点击按钮）checkbox（复选框）file（输入字段和“浏览”按钮）hidden（隐藏输入字段）image（图片形式提交按钮）password（密码字段）radio（单选按钮）reset（重置按钮）sumbit（提交按钮）text（单行输入字段，默认20个字符）

name属性：（相同的名字——单选框和复选框）区别不同表单元素

value属性：定义input元素值

checked属性：页面首次加载是否选中

maxlength属性：输入字段的最大值

<lable>标签

用于绑定一个表单元素，当点击<lable>标签内的文本时，浏览器会自动将焦点转到或者选择对应的表单元素上，用来增加用户体验。

<lable>标签的for属性与相关元素的id属性相同

<select>下拉列表元素

-<option>

-selected="selected"默认选中

<textarea>文本域

-cols rows （每行每列字数）

站开发简介

网站开发包括前端和后端，后端是服务器，用来存储数据和设计业务逻辑，前端用来展示网站效果。
网站是多个网页的集合，网页是纯文本格式的文件，浏览器就是将这些纯文本格式的文件渲染成网页。

HTML简介

HTML是超文本标记语言（HyperText Markup Language），是一种用于创建网页的标准标记语言，HTML由一个个标签组成，文件的后缀名是html或htm，一个html文件就是一个网页，html文件用编辑器打开就显示文本，用浏览器打开就会渲染成网页。

HTML基本结构：

<!DOCTYPE html> 声明为 HTML5 文档
<html></html>是文档的开始标记和结束标记。此元素告诉浏览器其自身是一个 HTML 文档
<head></head>元素出现在文档的开头部分
<title></title>定义网页标题，在浏览器标题栏显示<body></body>之间的文本是可见的网页主体内容

<!DOCTYPE html>
<html>
<head>
    <title>黑猫编程</title>
</head>

<body>
    网页显示内容
</body>
</html>

前端开发需要哪些技术？

首先是UI设计师使用Photoshop设计出前端效果图片，前端工程师根据图片转化成前端代码，主要需要HTML、CSS和JavaScript。
HTML是前端的框架，比如划分页面布局、设置段落。
CSS是装饰前端框架，可以给页面添加颜色、样式等，使前端界面更加漂亮。
JavaScript是给前端添加动态效果，使网站具备交互功能。

前端开发编辑器

前端开发语言本质上都是文本文件，只要后缀名符合标准，任何文本编辑器都可以用来写前端代码，在此推荐几种编辑器:

IDE——集成开发环境：

WebStorm
PyCharm

轻量级文本编辑器：

Atom
Sublime
Notepad++
Vim和Emacs
VS Code

VS Code开发前端项目比较方便，推荐安装插件：

Auto Rename Tag
Live Server

标签分类

分类一：

闭合标签——双标签 <标签名属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>
自闭合标签——单标签 <标签名属性1=“属性值1” 属性2=“属性值2”…… />

分类二：

块级标签：独占一行，可自行设置宽高div
内联标签：按内容占位，高度和宽度由内容填充span

<meta>标签

所有浏览器都支持 <meta> 标签：

<meta>提供有关页面的元信息（meta-information），针对搜索引擎和更新频度的描述和关键词
<meta>提供的信息对用户是不可见的
SEO三大标签：titledescription：<meta name="description" content="专注编程课程研发，算法，信奥赛">keywords：<meta name="keywords" content="编程在线课程算法竞赛">
网站logo：<link rel="shortcut icon" href="cat.ico" type="image/x-icon">

图像标签

<img>标签可以在网页上插入一张图片，它是独立使用的标签，它的常用属性有：

src属性，定义图片的引用地址
alt属性定义图片加载失败时显示的文字
只设置图片宽度或者高度，会进行等比缩放
<img src="xxx.png" alt="xxx" />

标题标签

通过<h1>、<h2>、<h3>、<h4>、<h5>、<h6>，标签可以在网页上定义6种级别的标题。6种级别的标题表示文档的6级目录层级关系，比如说： <h1>用作主标题，其后是<h2>，再其次是 <h3>，以此类推。搜索引擎会使用标题将网页的结构和内容编制索引。

<h1>标题1</h1>
<h2>标题2</h2>

span和div

<div>定义文档中的分区，当作容器使用
<span>划分文字

思考：完成如下图所示效果

为七个div分别设置宽为100px,150px,200px,250px,300px,350px,400px;
			                      高均为20px；
			                      背景颜色分别为红橙黄绿青蓝紫
                            
<div style="width:100px;height:20px;background-color:red"></div>
<div style="width:150px;height:20px;background-color:orange"></div>
<div style="width:200px;height:20px;background-color:yellow"></div>
<div style="width:250px;height:20px;background-color:green"></div>
<div style="width:300px;height:20px;background-color:cyan"></div>
<div style="width:350px;height:20px;background-color:blue"></div>
<div style="width:400px;height:20px;background-color:purple"></div>

<!--添加两个div进行嵌套-->
<div style="width: 100px; height: 100px; background-color: pink">
  			<div style="width: 50px; height: 50px; background-color: yellow"></div>
</div>

CSS样式

css：Cascading Style Sheet 层叠样式表，它是用来美化页面的一种语言。

没有使用css的效果图

使用css的效果图

CSS引入三种方式

行内式：是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，使得代码看起来整体格式混乱，不推荐使用。

<div style="background-color:black; color:red">hello world</div>

内嵌式：是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中

<style>
        div {
            background-color:yellow;
            color:green;
        }
</style>

外链式：将css代码写在一个单独的.css文件中，在<head>标签中使用<link>标签直接引入该文件到页面中

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

在加载网页时，首先找到html根文件，再加载引用的css外部样式，速度会比较慢，因此，内嵌式一般用于网站的首页，有利于提高页面加载速度，提高用户体验。

常用CSS选择器

css 选择器是用来选择标签的，选出来以后给标签加样式

标签选择器 p { color:green }
类选择器

.a {
      font-weight:bold;
      color:yellow;
}

<p class="a">a1 class</p>
<p class="a">a2 class</p>
<p class="b">b2 class</p>
<p class="b">b2 class</p>

id选择器

#info {
      font-size:24px;
      color:red;
}

<div>hello world</div>
<div id="info">My name is xuyanpeng.</div>

优先级：id>class>标签
结构伪类选择器

nth-child:
        nth-child(odd)
        nth-child(even)
        nth-child(3n+1)
        nth-child(3)
        nth-last-child(3)
        nth-child(-n+3)
        nth-child(n+5)
        last-child
        first-child

伪元素

::before

.father::before{
            display: block;
            content: '最前面';
            width: 100px;
            height:100px;
            background-color: brown;
}

::after

.father::after{
            display: block;
            content: '最后面';
            width: 100px;
            height:100px;
            background-color: yellow;
}

超链接

HTML使用标签<a>来设置超文本链接
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，可以点击这些内容来跳转到新的文档或者当前文档中的某个部分
当把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手
在标签<a> 中使用了href属性来描述链接的地址
默认情况下，链接将以以下形式出现在浏览器中：

一个未访问过的链接显示为蓝色字体并带有下划线
访问过的链接显示为紫色并带有下划线
点击链接时，链接显示为红色并带有下划线

伪类选择器

a:link{
    text-decoration: none;
}

a:visited{
    color: red;
}

a:hover{
    color: orange;
}

a:active{
    color: green;
}

锚点定位

通过创建锚点链接，用户能够快速定位到目标内容。创建锚点链接分为两步：

文本标签

注释标签：如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。

简单解释：注释内容不会显示在浏览器窗口中，但是作为HTML文档内容的一部分，也会被下载到用户的计算机上，查看源代码时就可以看到。

文本属性

font-size：文本大小
font-family：字体
        无衬线字体：sans-serif
        衬线字体：serif
        等宽字体：monospace
font-weight：字体粗细 100-900
        normal：400
        bold：700
font-style：字体风格 normal italic
pre：预格式化文本
color：文本颜色
text-align：文本水平对齐方式
line-height：行间距
text-indent:首行缩进

特殊字符

背景属性

背景颜色：
        background-color：颜色值; 默认的值是 transparent 透明的
        background: rgba(0, 0, 0, 0.3); 最后一个参数为透明度
背景平铺：pbackground-repeat : repeat | no-repeat | repeat-x | repeat-y
背景固定：pbackground-attachment : scroll | fixed
背景位置：
        background-position : x y：
        x和y：为长度值或top、left等方位词
background-size：contain/cover

盒子模型

边框盒子：
        自动内减：box-sizing: border-box;
        默认：box-sizing: content-box;
margin合并：相邻盒子边距取较大值
margin塌陷：块级元素嵌套，字盒子设置外边距改变父盒子的位置

浮动应用，首页布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .container{
            width: 700px;
            border: 1px solid gray;
            margin: 0 auto;
            background-color: lightyellow;
        }

        .header{
            text-align: center;
            background-color: skyblue;
            padding: 8px;
            color: white
        }

        .left{
            width: 160px;
            float: left;
            padding: 23px;
        }

        .content{
            padding: 16px;
            margin-left: 190px;
            border-left: 1px solid gray;
        }

        .footer{
            padding: 8px;
            color: white;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>backcat1995.com</h1>
        </div>

        <div class="left">
            <p>黑猫编程教育品牌</p>
            <p>作者：黑猫</p>
        </div>

        <div class="content">
            <h2>课程大纲</h2>
            C++从入门到精通
            <br>
            玩转数据结构与算法
            <br>
            Python从小白到起飞
        </div>

        <div class="footer">
            地址：火星岩浆路1198弄
        </div>
    </div>
</body>
</html>

元素隐藏

overflow：

visible：默认值，溢出部分可见
hidden：溢出部分隐藏
scroll：无论是否溢出，都显示滚动条
auto：根据是否溢出，自动显示或隐藏滚动条

绝对单位和相对单位

1.绝对单位，当窗口大小发生改变，不能自适应窗口进行改变

<style>
    *{margin: 0; padding: 0;}
    .box{
        width: 500px;
        height: 500px;
        background-color: red;
    }
</style>

<div class="box"></div>

2.相对单位

<style>
    *{margin: 0; padding: 0;}
    .box{
        width: 50%;
        height: 50%;
        background-color: red;
    }

    body, html{
        height: 100%;
    }

    .box2{
        width: 50%;
        height: 50%;
        background-color: green;
    }
</style>

<div class="box">
    <div class="box2">

    </div>
</div>

风筝效果

<style>
        *{margin: 0; padding: 0;}
        .box{
            width: 200px; height: 200px; background-color: red;
            position: absolute; left: 50%; top: 50%;
            margin-left: -100px; margin-top: -100px;
        }

        .box div{
            width: 50%; height: 50%; background-color: black;
            position: absolute; left: 100%; top: 100%;
        }

</style>

<div class="box">
        <div>
            <div>
                <div></div>
            </div>
        </div>
</div>

列表标签

无序列表标签(ul标签)
有序列表标签(ol标签)

表格标签

<table>标签：表示一个表格
<tr>标签：表示表格中的一行
<td>标签：表示表格中的列
<th>标签：表示表格中的表头

表单标签

表单用于搜集不同类型的用户输入(用户输入的数据)，然后可以把用户数据提交到web服务器。

表单属性设置：

action: 是设置表单数据提交地址
method: 是表单提交方式，提交方式有GET和POST
表单元素属性设置
name: 表单元素的名称，用于作为提交表单数据时的参数名
value: 表单元素的值，用于作为提交表单数据时参数名所对应的值

响应式布局Bootstrap

响应式最主要特点就是针对不同宽度设备进行布局和样式设置，从而适配不同大小设备。

栅格系统：

显示和隐藏：

在线咨询

上一篇：学习网页制作并不难，HTML菜鸟教程，从这里开始第一课学习
下一篇：HTML DOM Document 对象

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

CSS学习指南

web标准的构成

HTML常用标签

站开发简介

HTML简介

前端开发需要哪些技术？

前端开发编辑器

标签分类

<meta>标签

图像标签

标题标签

span和div

CSS样式

CSS引入三种方式

常用CSS选择器

超链接

锚点定位

文本标签

文本属性

背景属性

盒子模型

浮动应用，首页布局

元素隐藏

绝对单位和相对单位

风筝效果

列表标签

表格标签

表单标签

响应式布局Bootstrap

您的项目需求