网页基础:网页设计(我所知道的所有的html和css代码(含H5和CSS3)),如有错误请批评指正

最基础的网页设计,就是给你一个图片你做成一个网页,当然,我的工作是C#,个人网页的功底不是很高
首先先认识一下网页的一些相关知识:

一般的,现在一个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等任意文件

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可以有多个

表格属性:
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">

</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 多媒体

插入各种多媒体，格式可以是图片，音频，视频，插件等

十一.定位

定位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生效

\0----------IE 8 9 10生效

Height:100px\9;

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"]: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^=“a”]{color:#f00;} 开头

E[att$="val"]
具有att属性且属性值为以val结尾的字符串的E元素

li[class$=“a”]{color:#f00;} 结尾

E[att~="val"]
具有att属性且属性值为用空格分隔，其中一个等于val的元素

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 水平

网页基础:网页设计(我所知道的所有的html和css代码(含H5和CSS3)),如有错误请批评指正的更多相关文章

9月5日网页基础知识通用标签、属性（body属性、路径、格式控制）通用标签（有序列表、无序列表、常用标签）（补）
网页基础知识一.HTML语言 HTML语言翻译汉语为超文本标记语言. 二.网页的分类 1.静态页面:在静态页面中修改网页内容实际上就是修改网页原代码,不能从后台操作,数据来只能来源于原于代码.静态网 ...
网页爬虫的设计与实现（Java版）
网页爬虫的设计与实现(Java版) 最近为了练手而且对网页爬虫也挺感兴趣,决定自己写一个网页爬虫程序. 首先看看爬虫都应该有哪些功能. 内容来自(http://www.ibm.com/deve ...
[书目20131223]Android、iPhone、Windows Phone手机网页及网站设计&colon;最佳实践与设计精粹 - 张亚飞
目录第I篇手机版专用网站设计和开发入门篇第1章准备创作环境和测试环境 3 1.1 使用Mobile Safari测试网页 4 1.1.1 iOS Simulator安装 5 1.1.2 使用M ...
11-28 网页基础--JavaScript(DOM)
网页基础第二部分--HTMLDOM操作一.定义:htmlDOM是一种面向对象的树的模型,它包含html中的所有元素:通过html可以找到所有包含在dom中的元素. 二.作用: 1.查找html元素 ...
JSP技术基础（动态网页基础）
前言:如果说html为静态网页基础,那么jsp就是动态网页基础,两者的区别就是jsp在html的前面多加了几行而已.当然,jsp里面对java的支持度更高.要明白,js只是嵌入在客户端的小程序小脚本而 ...
小白学 Python 爬虫（8）：网页基础
人生苦短,我用 Python 前文传送门: 小白学 Python 爬虫(1):开篇小白学 Python 爬虫(2):前置准备(一)基本类库的安装小白学 Python 爬虫(3):前置准备(二)Li ...
网页基础学习--网络结构和HTML(未完待续)
一.网络常见基本结构: 1.B/S网络结构: Browser/Server:浏览器/服务器,这是现在最流行的网络模式.平常的上网:比如新浪网.凤凰网等.我的电脑(客户端) ...
11-16网页基础--HTML
网页制作部分主要讲解三大部分: 1.HTML 超文本标记语言( 全称:Hyper Text Markup Language) 专门编辑静态网页 2.CSS 网页美化:是HTML控制的 ...
02- HTML网页基础知识与浏览器介绍
1.认识网页网页主要由文字,图像和超链接等元素构成.当然,除了这些元素,网页还可以包含音频,视频,以及flask等. 如图所示就是一个网页: 网页是如何形成的呢? 它是由前端人员写的代码,经过浏览器 ...

随机推荐

使用ajaxfileupload插件提示Uncaught TypeError&colon;has no method &&num;39&semi;handleError&&num;39&semi;
最近使用ajaxfileupload插件上传文件时,后台正常运行时,可以正常使用:当后台出现异常时,上传后没有任何反应,也无任何返回信息,使用chrome查看时,发现ajaxfileupload插件报 ...
mysql主配置文件my&period;cnf详细说明
MySQL配置文件my.cnf 例子最详细翻译,可以保存做笔记用[转载]#BEGIN CONFIG INFO#DESCR: 4GB RAM, 只使用InnoDB, ACID, 少量的连接, 队列负载大 ...
cuda编程学习3——VectorSum
这个程序是把两个向量相加 add<<<N,1>>>(dev_a,dev_b,dev_c);//<N,1>,第一个参数N代表block的数量,第二个参数1 ...
zabbix3&period;2利用自动发现功能对fastcgi模式的php状态进行集中监控
zabbix3.2利用自动发现功能对fastcgi模式的php状态进行集中监控前端nginx虚拟主机引用后端多个php接口,为了方便监控,将后端服务器集中配置在nginx中,具体配置如下: [roo ...
js 中数组的遍历
var x = ['a','b','c'] x.forEach(function(val,k){ console.log(val + '--' +k); }) a--0 b-- 1 c-- 2 var ...
java把13位时间戳转换成&quot&semi;yyyy-MM-dd HH&colon;mm&colon;ss&quot&semi;格式，工具类
public static void main(String[] args) { String time = System.currentTimeMillis();//获取当前时间精确到毫秒级的时间戳 ...
springboot自动装配
Spring Boot自动配置原理 springboot自动装配 springboot配置文件 Spring Boot的出现,得益于“习惯优于配置”的理念,没有繁琐的配置.难以集成的内容(大多数流行第 ...
python使用scikit-learn计算TF-IDF
1 Scikit-learn下载安装 1.1 简介 1.2 安装软件 2 TF-IDF基础知识 2.1 TF-IDF概念 2.2 举例说明计算 3 Scikit-Learn中计算TF-IDF 3.1 ...
使用CDI+制作支持半透明的Panle
创建一个自定义控件程序集,并修改父类为Panle,添加如下代码: public partial class OpaqueLayer : Panel { private Color transparen ...
Group by、having、order by、Distinct 使用注意事项
直奔主题,如下SQL语句 SELECT COUNT(*) AS COUNT,REQUEST,METHOD FROM REQUESTMETH GROUP BY REQUEST,METHOD HAVING ...