网页设计基础介绍
Posted chengjian-physique
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了网页设计基础介绍相关的知识，希望对你有一定的参考价值。
最基础的网页设计,就是给你一个图片你做成一个网页,个人网页的功底不是很高，偏向于后台逻辑处理，偶尔会看些前端构造
首先先认识一下网页的一些相关知识:
一般的,现在一个html网页一般包含html文件,css文件,js文件,img文件这几个部分
css文件,全名叫成叠样式表稍后会说说,js呢,这个文章暂时先不说
现在说说网页
静态网页htm,html 最早的静态网页文本，目前也常见
非静态网页
asp 微软的动态网页文件
php php的文档格式，参看www.php.net，常用，比asp流行
jsp sun公司的动态网页文本,常用
shtml 动态页面文件，较少
nsp 较少，使用java，一般是lotus服务器
等等等等...
这篇文章呢,主要讲的是html页面
在网页中呢,会有很多图片,当然,并不是任何图片都支持
HTML页面中常用的有：bmp,gif,jpg,png。
BMP是一种与硬件设备无关的图像文件格式，使用非常广。它采用位映射存储格式，除了图像深度可选以外，不采用其他任何压缩，因此，BMP文件所占用的空间很大
GIF 意为Graphics Interchange format（图形交换格式），GIF图片的扩展名是gif。现在所有的图形浏览器都支持GIF格式，而且GIF格式支持背景透明。
JPEG 代表Joint Photograhic Experts Group（联合图像专家组）JPG最主要的优点是能支持上百万种颜色，从而可以用来表现照片.
PNG 是20世纪90年代中期开始开发的图像文件存储格式，其目的是企图替代GIF和TIFF文件格式
既然有图片,就会有图片的处理,下面讲述了一些Photoshop的一些快捷键
取消当前命令：Esc； 工具选项板：Enter； 选项板调整：Shift＋Tab； 退出系统：Ctrl＋Q； 获取帮助：F1； 剪切选择区：F2 / Ctrl＋X； 拷贝选择区：F3 / Ctrl＋C； 粘贴选择区：F4 / Ctrl＋V； 显示或关闭画笔选项板：F5； 显示或关闭颜色选项板：F6； 显示或关闭图层选项板：F7； 显示或关闭信息选项板：F8； 显示或关闭动作选项板：F9； 显示或关闭选项板、状态栏和工具箱：Tab； 全选:Ctrl＋A; 反选:Shift＋Ctrl＋I; 取消选择区:Ctrl＋D； 选择区域移动：方向键； 将图层转换为选择区：Ctrl＋单击工作图层； 选择区域以10个像素为单位移动：Shift＋方向键； 复制选择区域：Alt＋方向键； 填充为前景色：Alt＋Delete； 填充为背景色：Ctrl＋Delete； 调整色阶工具：Ctrl＋L； 调整色彩平衡：Ctrl＋B； 调节色调/饱和度：Ctrl＋U； 自由变形：Ctrl＋T； 增大笔头大小：“中括号”； 减小笔头大小：“中括号”； 选择最大笔头：Shift＋“中括号”； 选择最小笔头：Shift＋“中括号”； 重复使用滤镜：Ctrl＋F； 移至上一图层：Ctrl＋“中括号”； 排至下一图层：Ctrl＋“中括号”； 移至最前图层：Shift＋Ctrl＋“中括号”； 移至最底图层：Shift＋Ctrl＋“中括号”； 激活上一图层：Alt＋“中括号”； 激活下一图层：Alt＋“中括号”； 合并可见图层：Shift＋Ctrl＋E； 放大视窗：Ctrl＋“＋”； 缩小视窗：Ctrl＋“－”； 放大局部：Ctrl＋空格键＋鼠标单击； 缩小局部：Alt＋空格键＋鼠标单击； 翻屏查看：PageUp/PageDown； 显示或隐藏标尺：Ctrl＋R； 显示或隐藏虚线：Ctrl＋H； 显示或隐藏网格：Ctrl＋”。 打开文件：Ctrl＋O； 关闭文件：Ctrl＋W； 文件存盘：Ctrl＋S； 打印文件：Ctrl＋P； 恢复到上一步：Ctrl＋Z；由钢笔图形转换成选区： Ctrl＋回车
好了,回到正题;
一.html简介
HTML——
Hypertext markup language
超文本 标记 语言
文件的扩展名为.html或 .htm
首页：index.html default.html 默认页
HTML的基本语法
标记 /标签(元素)
双标签 格式为:<标签>内容</标签>
<html></html>网页 页面根元素
<head></head> 头部
<body></body> 主体
<p></p> 段落
<h1></h1> 标题
<table></table>表格。。。
单标签 格式为:<标签>
例如：<img> 图片 <br>换行 <hr>水平线
一个最基本的网页构造
<html>
<head>
<title>网页名称</title>
</head>
<body>
网页主题
</body>
</html>
保存为html文件就可以以浏览器打开网页了
一个html网页的结构是html网页,css层叠样式表,js代码,还有图片
在一个文件夹目录下创建这四个文件夹就可以说是一个站点
一般的,
<!DOCTYPE>[定义文档类型]
位于文档中的最前面的位置，告知浏览器文档使用哪种HTML或XHTML规范
二.标题元素
一般的,在网页中都会有标题元素 .标题的概念：标明文章、作品等内容的简短语句.
一下是常用的标题元素
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
从1到6的标题元素出来的效果是从大到小, <h1></h1>是最大，<h6></h6>最小,自带加粗效果
标题一般是剧中对齐的,对齐是align属性,值Left,Center,Right(水平对齐方式),比如:<h1 align=“center”></h1>
段落标签
<p></p> 默认存在段间距 ,一对标签是一个段落
换行是单标签<br />,在一些浏览器中,<br>也是可以解析的
到了这里,我突然的想了起来,在网页中,尖括号,双印号啊这些都是关键的网页标记,那么我们咋样在网页上显示这些符号呢:
空格 半角空格
小于号 < < left
大于号 > > right
双引号” "
版权符? ©
注册符? ®
一些常用的标签:
粗体<b></b>。 bold
在网页中，比较重要的文本通过粗体方式显示
倾斜<i></i>。 italic
下划线<u></u>。 underline
强调<em></em>。
强调显示文本内容，文字以斜体方式显示
加强强调<strong></strong>。
强调的程度更强烈一些，加粗的字体
水平线标记<hr>,单标签
color 颜色，
size 粗细
Width 宽度
align 对齐
图片标签:
图像标记<img>
属性：
src 图片路径
alt 提示文字
title 标题（鼠标弹出框）
width/ height 宽高
border=“5” 边框
所有标签都有title属性
比如<img src="1.jpg" alt="这是一个图片">
这里是一些概念
属性：用来表示标签的特征。
属性值：为属性赋的值称为属性值。
语法为：<标记 属性="属性值"> 内容</标记>
在插入图片的路径要选择正确,下面是路径的一些知识
路径分为绝对路径和相对路径:
绝对路径：完整的描述文件位置
比如:C：/image/1.jpg
http://www.baidu.com
相对路径：就是网页相对于目标位置
站点内部相对路径
../ 上一级
../../ 上上级
列表
无序列表ul
语法：
<ul type=“”>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
列表类型type
disc 实心圆
circle 空心圆
square 方块
有序列表ol
语法：
<ol>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ol>
列表类型type
1 1 2 3 4…
a a b c d…
A A B C D…
i i ii iii iv ..小写罗马字母
I I II III IV ..大写罗马字母
reversed 倒序
自定义列表dl
<dl>
<dt>定义项</dt>
<dd>描述项</dd>
<dd>描述项</dd>
</dl>
三.图像和超链接
超级链接是一对一关系
格式:<a href=“url”>文字、图片</a>
链接地址
给文字和图片添加链接
<a href=“index.html”>首页</a>
<a href=“index.html”><img src=“01.jpg”></a>
链接网站
<a href=“http://www.baidu.com”>百度</a
空链接：
<a href=“#”>首页</a> 单击后仍停留在当前页
超链接地址可以是
网页、 图片、文字、压缩包.rar zip 、应用程序.exe等任意文件
<a href=“链接地址url” target=“目标”></a>
target属性值
_self 原窗口 本窗口 (默认)
_blank 新窗口
_top 顶框架
_parent 父框架
四.表格
格式:
表格table、 tr行、 td 列/单元格 内容
<table>
<tr>
<td>姓名</td>
<td>身高</td>
<td>体重</td>
</tr>
<tr>
<td>张三</td>
<td>175CM</td>
<td>70kg</td>
</tr>
</table>
table的属性
Width、height 宽高（单位像素或百分比,默认不是100%）
align 对齐
border 外边框
bgcolor 背景色
background 背景图片
特有属性
cellspacing 单元格间距 默认2像素
cellpadding 单元格边距 （边框与内容的间距）
设置tr基本属性
属性：
align 水平对齐
left/center/ right
valign 垂直对齐
top 顶部
middle 中部
bottom 底部
bgcolor 背景色
设置td的基本属性
属性：
Width、height 宽高（单位是像素或%）
align valign 水平对齐、垂直对齐
bgcolor 背景色
background 指定背景图片
<td colspan=“3” 水平合并 合并列
rowspan=“2” 垂直跨度 合并行
合并必须是相邻的单元格
水平跨度colspan
<table width="200" border="1" >
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
垂直跨度rowspan
<table width="200" border="1">
<tr>
<td rowspan="2"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
表头th
特殊的单元格，加粗、居中
它的用法是取代<td>的位置即可
<tr>
<th>餐饮类型</th>
<th>主要菜系</th>
<th>价格</th>
</tr>
thead 表格页眉 一个
tbody 表格主体
tfoot 表格页脚 一个
对表格的行进行分组，
注意：thead ，tfoot只有一个 tbody可以有多个
<table>
<thead><tr></tr>….</thead>
<tbody><tr></tr>….</tbody>
<tbody><tr></tr>….</tbody>
....
<tfoot> <tr></tr>…. </tfoot>
</table>
表格属性:
1px细线表格
表格Table中
border=1
cellspacing=0
Bgcolor=边框色
单元格td
Bgcolor=白/浅色
五.表单
结构:<form></form>
属性:
Name 表单名字
action=“url” 提交地址
method 提交方式
get 获取
Post 传送
target 新窗口提交
输入标签
<input type=“#” name=“”>：
text 文本框
password 密码框
radio 单选框
checkbox 复选框
file 文件域
submit 提交按钮
reset 重置按钮
button 普通按钮
image 图像域按钮
Hidden 隐藏域
文本框
<input type=“text” value=“请输入姓名” >
输入 类型 初始值
placeholder=字体变虚且可直接输入
密码框
属性值：
type 表单对象类型
size 文字的长度
例如：
<input type="password“ />
单选框radio
属性值：
name 文本字段的名称(不可缺少)
Checked 默认选中
<input type="radio“ name=“sex" checked>男
<input type="radio" name=“sex" />女
单选同一组可以设置不同名称 错误
单选同一组不可以设置不同名称 对
复选框checkbox
属性值：
type 表单对象类型
Checked 默认选中
例如：
<input type=“checkbox” checked>上网
<input type=“checkbox ” >学习
<input type=“checkbox ” >旅游
文件域 file
例如：
<input type="file" >
下拉菜单
<select>
<option>请选择您的学历</option>
<option selected> 高中</option>
默认选中 不是checked
。。。
</select>
Select标签的属性
Multiple 多选
<select multiple>
<option>上网</option>
<option>体育</option>
<option>学习</option>
</select>
文本域 textarea（多行文本框）
属性值：
cols 列数
rows 行数
例如：
<textarea cols=“40” rows=“5”></textarea>
列数 行数
四种按钮
提交、重置
<input type="submit" value="提交" />
<input type="reset" value="重置" />
普通按钮
<input type=“button ” value=“确定" />
<input type=“image” src=“1.jpg” />图像域
Label标签
有触发对应表单控件功能。如点击单选按钮或多选框前文字，对应选项就能被选中
表单控件id的值与label标签内的for值相同
性别：
<input type="radio" name="sex" id=“man"/>
<label for=“man">男</label>
<input type="radio" name="sex" id=“women"/>
<label for=“woman">女</label>
六.一些简单的CSS
结构+表现+行为
Html+ css +js
传统html的缺点
标记较少，缺少文字间距，段落缩进等标记，美化困难
维护困难，修改过程繁琐。
网页代码过多，影响网页浏览速度
Css作用例子：链接样式表
Css(cascading style sheet)层叠样式表
用于控制网页的外观
CSS优点
使网页代码更少，网页下载更快
实现了内容与样式的分离
使网站维护更方便、快捷
使网页与浏览器的兼容性更好
注释
html <!-- -->
css /* */
CSS的基本语法
张飞{
身高：185cm；
体重：80kg；
性别：男；
}
css的基本语法:
选择器{
属性:属性值;
…}
三部分组成
css选择器:也称为选择符，用于选择需要添加样式的元素。
基本CSS选择器
全局选择器(通用)
用*来表示，代表所有标签
一般用于将所有元素的外边距和内填充清除。
*{
margin:0; 外边距
padding:0; 内填充
}
基本CSS选择器
标签选择器(元素选择器)--通过元素名选择元素
如：body{}, ul{}, a{}，img{} h2{} p{}等
类别选择器--通过class属性选择元素
先定义样式 css：
.blue {color:blue;}
然后引用：
<p class=“blue”>文字内容</p>
ID选择器
先定义样式：
#ab001{color:#ff0000;}
然后引用：
<p id=“ab001”>文字内容</p>
用法和class类似，但一个ID选择器只能选定一个元素
伪类选择器——作用在超链接的状态上
a:link{} 点击前 默认
a:visited{} 点击后
a:hover{} 放上去 鼠标滑过
a:active{} 按下去 点击瞬间
a:focus{} 获取焦点
书写时，要按照以上顺序,不可颠倒
行内样式
写在标签里，使用style属性，优先级最高
例如：
<p style=“color:#FF0000; font-size:20px;。。”> </p>
css常用的几种方式
内部样式（内嵌）
放于<head></head>之间，用<style>和</style>标记进行声明
<head>
<style>
p{
color:#0000FF;
font-size:25px;
}
</style>
</head>
<body>
<p>这是第1行正文内容……</p>
</body>
链接样式（外部样式）
html文件和css文件分开，是最实用的方法。
结构 样式 分离
<head>
<title>页面标题</title>
<link href="07-07.css" rel="stylesheet” type="text/css" />
关联 样式表 类型
</head>
<body>
<h2>CSS标题</h2>
<p>这是正文内容……</p>
</body>
导入样式
作用和链接样式表基本相同。
Html中和css文件中都可导入样式表
<head>
<style type="text/css">
<!--
@import url(“cuihua.css”);
-->
</style>
</head>
css权重 优先级
全局 0
标签 1
类别 10
id 100
行内 1000
七.CSS设置文本和背景
文字属性
Color 颜色
font-size:12px; 14px 字号
字体
font-family: 楷体，宋体;
多个字体用逗号分隔
优先使用第一个字体 楷体
加粗
font-weight
100-900
bold 、bolder 加粗
normal 正常 去掉标题h1-h6的加粗
倾斜
font-style
italic 斜体
normal 正常 <i></i> <em></em>
段落属性
text-decoration 文字装饰
Overline 上划线
Line-through 删除线
Underline 下划线
none 无 去掉超链接下划线
text-align 水平对齐
Left center right
text-indent 首行缩进
像素： 24px
百分比 50%
2个字 2em
负值 -100px
Line-height 行高 行距
行高=高度 可以让文字垂直居中
数值 ：24px
百分比：200%
背景
背景颜色
Background-image:url(01.jpg) 背景图片
Background-repeat 背景重复
Repeat(默认) 平铺
no-repeat 不重复
repeat-x 横向重复
repeat-y 竖向重复
背景位置
Background-position
关键字
水平：left center right
垂直：top center bottom
background-position:right top;
数字 background-position:200px 100px;
水平 垂直
可混用
background-position: 50px top;
一个值，第二个默认center
background-position: left （center）;
背景附件
background-attachment:fixed 固定
不随滚动条移动
背景复合属性
background:#ccc url(1.gif) no-repeat 100px 200px ；
颜色 图片地址 重复 位置
列表样式
list-style-type：disc; 实心圆
circle 空心圆
square 方块
decimal 数字
none 无
想要样式表现出来，必须将margin：0；padding：；删除
列表图片
list-style-image:url(1.jpg)；
列表位置
list-style-position：inside/outside；
内部 外部
列表复合
list-style：none或circle url(1.jpg) inside
八.盒模型
<div></div> division
相当于一个容器可以容纳：
段落、标题、表格、图片等
盒模型-页面所有元素都能看成盒子
一个盒子实际占据的宽度和高度由内容+填充+边框+边距组成
即 content+padding+border+margin
内容+ 填充+ 边框+ 边距
尺寸属性——盒子模型中指内容的大小
Width 宽
Height 高
backgiound 背景
内填充padding
padding-top:30px;
padding-bottom:60px;
padding-left:40px;
padding-right:20px;
padding:30px 20px 60px 40px;
上 右 下 左
简写：
Padding：10px; 四边相同10px
Padding：0 10px; 上下 左右
Padding:10px 20px 30px; 上 左右 下
Padding:10px 20px 30px 40px; 上 右 下 左
边框border
Border-width:10px ; 边框宽度
Border-color:#f00; 边框颜色
Border-style: 边框样式
solid 实线
dashed 虚线
dotted 点线
复合属性—不可三缺一
四边：border:10px #f00 solid;
底边 border-bottom:1px green dashed;
border-left:none;去掉
填充Padding 边框与内容的距离
边距margin 内容与内容的距离
margin -top
margin -right
margin -bottom
margin-left:10px; 当前元素向右移动
简写：
margin：10px;
margin ：0 10px; 上下 左右
margin :10px 20px 30px; 上 左右 下
margin :10px 20px 30px 40px; 上 右 下 左
一个盒子实际占据的宽度和高度由内容+内边距+边框+外边距组成
div{width:200px; padding:0 20px;} 200+20*2=240
一个盒子的 margin 为 22px，border 为 1px，padding 为 12px，content 的宽为 220px、高为 50px，如果用标准 W3C 盒子模型解释，这个盒子的宽？？？
282px 错误：
布局属性
float浮动-- 横向排列
none 默认
Left 左
Right 右
clear清除浮动--元素浮动之后，需要清除浮动
None
Left
Right
both 全部
块级元素 独占一行 自动换行
div h1—h6 p ul/li form。。
行内元素（内联） 不独占一行 不自动换行
a span img b i font input ..
块级元素:自动换行，
有宽度和高
能嵌套行内元素
<div><a></a></div> <li><a></a></li> <p><span></span></p>
默认的显示是display:block;
行内元素:不自动换行，
没有宽和高 a span
不能嵌套块级元素 <a><span></span></a>
默认的显示是display:inline;
display 显示属性：
block 块状显示
inline 行内显示
inline-block 行内块
none 不显示
九.CSS新属性:
盒子阴影
box-shadow: 2px 2px 5px 2px #f00 inset;
h-shadow 水平偏移，可为负值
v-shadow 垂直偏移 可为负值
blur 模糊值
阴影外延值 可为负值
color 颜色值
inset： 内阴影。默认外阴影
添加多个阴影逗号分隔
文字阴影
text-shadow: 2px 2px 5px #f00;
水平 垂直 模糊 颜色
如颜色省略，阴影颜色为文字颜色
文字溢出
text-overflow: ;
clip :裁切，默认值
ellipsis 省略号(...)
white-space:nowrap;(强制不换行)
overflow:hidden;（溢出隐藏）
text-overflow:ellipsis;
边框圆角
border-radius: ;
1个值 5px 四个角相同
2个值 5px 10px
左上与右下 右上与左下
3个值 5px 10px 15px
左上 右上与左下 右下
4个值 5px 10px 15px 20px
左上 右上 右下 左下
单独一个角 左上 border-top-left-radius:30px;
盒模型模式
box-sizing: ;
指定盒子宽度高度是否包含元素的padding和border
content-box 不包括padding，宽高是内容大小。
border-box 包括padding 宽高是实际大小
渐变背景
Background:-webkit-linear-gradient(top, orange, black);
线性渐变 方向 起点色 终点色
方向可为top 、bottom 、 left、 right
兼容firefox
-moz-linear-gradient(top , red, yellow);
兼容chrome
-webkit-linear-gradient(top , red, yellow);
放射性渐变
radial-gradient(起点色,终点色);
十.H5
新增的主体结构元素
新增元素 元素说明
article 文章
section 区块 对于网站的内容进行分块。通常由内容及标题组成
nav 导航 一个页面可有多个nav元素，作为页面整体或不同部分的导航
aside 侧栏 页面的附属信息部分，最典型的是侧边栏，内容可是友情链接，其他文章列表，广告单元等
time 时间 time为行内元素
hgroup元素 标题组
用于对网页的标题进行编组：
<hgroup>
<h1>百度网</h1>
<h2>全球最大中文搜索引擎</h2>
。。。
</hgroup>
新增的非主体结构元素
新增元素 说明
header 头部 一个网页可拥有多个header元素，可为每个内容 区块加一个header
main 主体(唯一) <main> 元素中的内容对于文档来说应当是唯一的。<main> 元素不能是以下元素的后代：<article>、<aside>、<footer>、<header> 或 <nav>。
footer 页脚
address 文档或作者的信息 用来在文档中呈现联系信息，包括文档作者，电话等。默认倾斜，块元素
audio音频
<audio src=”someaudio.wav”>audio元素</audio>
video视频
<video src=”movie.ogg” controls=”controls”>
VIDEO元素
</video>
embed 多媒体
插入各种多媒体，格式可以是图片，音频，视频，插件等
<embed src=”horse.wav”><embed>
十一.定位
定位position
static 静态定位 默认
relative 相对定位
absolute 绝对定位
fixed 固定定位（不随滚动条移动）
inherit 继承
相对定位relative
相对于自己原来位置偏移
指定偏移量：
水平left right
垂直top bottom
绝对定位absolute
相对于父元素位置偏移
指定偏移量：left right top bottom，负值
子绝父相
<div id=“father”>
<div id=“son”></div>
</div>
#father{
position:relative;相对
}
#son{
position:absolute; 绝对
right:100px;
top:100px;}
#father{
width:300px;
height:300px;
background:#FF0000;
}
#son{
width:200px;
height:200px;
background:#99FF00;
position:absolute;
right:100px;
top:100px;
}
z-index
用于设置绝对定位元素，层叠顺序
z-index
用于设置绝对定位元素，层叠顺序
可以为正值 或 负值, 默认值auto，默认层0层
100 -5
十二.浏览器表现标准规范及CSS优先级
浏览器
Internet Explorer 7 8 9 10,
Mozilla Firefox 火狐 FF
chrome 谷歌等
浏览器兼容性问题：
各大主流浏览器由于厂家不同，所以核心构架和代码也不同
浏览器对CSS的解析不一样，需要针对不同浏览器写不同的CSS，能够同时兼容不同的浏览器
（2）IE和FF浏览器的默认值差别：
页边距 IE为10px FF为8px
Body默认文字大小：IE为14px FF为16px
列表 左缩进40px
解决办法：*{ margin:0; padding:0;}
浏览器默认段间距：FF默认为1.12em IE为10px
在很多情况下，需要专门针对IE不同版本写css样式，IE的css hack，
所有浏览器通用：
火狐 height:200px;
IE6专用：_height:100px;
IE7专用：*height:100px;
IE7+的浏览器标准规范
9----------IE 6 7 8 9 10生效
----------IE 8 9 10生效
Height:100px9;
css优先级
!important
行内 1000
Id 100
类 10
标签 1
通用 0
派生选择器
.header img
p strong
.nav li
群组选择器
H1 , h2, h3, h4{}
Ul , ol , li{}
IE6.0浏览器问题
IE6下图片有空隙,怎么解决
img{display:block;}
div{font-size:0;}
img{margin-bottom:-5px;}
IE6双倍浮动边距,怎么解决
display:inline;
margin-left:100px; _margin-left:50px;减半
IE6 下1px高度容器
overflow:hidden;
line-height:1px; zoom:0.08; 缩放
让div在页面居中
div{position:absolute;
left:50%;
margin-left:-宽度一半；
top:50%;
margin-top:-高度一半；}
如：Div{
width:500px;
height:400px;
left:50%;
margin-left:-250px；
top:50%;
margin-top:-200px；
}
十三.CSS3新增选择器
伪类选择器
:first-child 第一个子元素
li:first-child{}
:last-child 最后一个子元素
dl:last-child {margin-right:0;}
nth-child(n) 指定序号的子元素
li:nth-child(2) {}
伪类选择器
:nth-child(3n) 索引是3的倍数的元素
:nth-child(even) 索引是偶数的元素
:nth-child(odd) 索引是奇数的元素
tr:nth-child(odd) {background:#eaeaea;}
:checked 选中状态
指定表单中radio单选框或checkbox复选框被选中时的样式。
<input type="radio" checked>男
<input type="checkbox" checked>上网
input[type="radio"]:checked
{outline:2px red solid;}
input[type="checkbox"]:checked
{outline:2px blue solid;}
::selection 元素被选中时的状态
p::selection{color:#f00;}
可以设置color 、 background-color 、text-shadow
不可设置border
:disabled 元素处于不可用状态时的样式
:enabled 元素处于可用状态时的样式
<input type="text" value="可用状态" >
<input type="text" value="禁用状态" disabled >
input[type="text"]:enabled{background:#fff;color:#000;}
input[type="text"]:disabled{background:#eee;color:#ccc;}
属性选择器
E[att="val"] 选择具有att属性且属性值等于val的元素
元素[属性=“属性值”]
Input[type=“text”] {}
input[type="text"]{width:210px;height:24px;float:left;}
E[att*="val"]
具有att属性且属性值val包含字符串的E元素
<li class="abc">列表项目</li>
<li class="acb">列表项目</li>
<li class="bc">列表项目</li>
<li class="bca">列表项目</li>
li[class*=“a”]{color:#f00;} 包含
E[att^="val"]
具有att属性且属性值为以val开头的字符串的E元素
<li class="abc">列表项目</li>
<li class="acb">列表项目</li>
<li class="bac">列表项目</li>
<li class="bca">列表项目</li>
<li class="cab">列表项目</li>
<li class="cba">列表项目</li>
li[class^=“a”]{color:#f00;} 开头
E[att$="val"]
具有att属性且属性值为以val结尾的字符串的E元素
<li class="abc">列表项目</li>
<li class="acb">列表项目</li>
<li class="bac">列表项目</li>
<li class="bca">列表项目</li>
<li class="cab">列表项目</li>
<li class="cba">列表项目</li>
li[class$=“a”]{color:#f00;} 结尾
E[att~="val"]
具有att属性且属性值为用空格分隔，其中一个等于val的元素
<li class="txt red">列表项目</li>
<li class="txt">列表项目</li>
<li class="txt blue">列表项目</li>
<li class="txt red">列表项目</li>
li[class~="red"]{color:#f00;}
十四.弹性盒模型
1.viewport 设置网页代码适应设备宽度
在头部添加如下代码：
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
display:box; 盒布局 为父元素设置
flex 盒布局 新版本
display:-webkit-box;谷歌浏览器
display:-moz-box; 火狐浏览器
display:-ms-box; ie浏览器
display:box;
-webkit-box-orient 子元素排列方式 为父元素设置
horizontal：水平排列 默认
vertical： 纵向排列
-webkit-box-flex 为子元素设置
子元素如何分配其父元素剩余空间的比例
.one{box-flex:2;}
.two{box-flex:1;}
.three{box-flex:1;}
box-ordinal-group
设置弹性盒模型对象的子元素的显示顺序。
数值较低的元素显示在数值较高的元素前面；
相同数值的元素，它们的显示顺序取决于它们的代码顺序
对齐方式box-pack
start： 从开始位置对齐
center：居中对齐
end： 从结束位置对齐
对齐方式box-align
start： 从开始位置对齐
center：居中对齐
end： 从结束位置对齐
对齐
水平排列
box-pack 水平
box-align 垂直
垂直排列
box-pack 垂直
box-align 水平
以上是关于网页设计基础介绍的主要内容，如果未能解决你的问题，请参考以下文章
《手把手教你》系列基础篇（七十二）-java+ selenium自动化测试-框架设计基础-TestNG简单介绍（详解教程）