码迷,mamicode.com
首页 > Web开发 > 详细

网页设计基础介绍

时间:2018-12-14 23:29:34      阅读:375      评论:0      收藏:0      [点我收藏+]

标签:reset   viewport   基础   特征   let   按钮   link   ica   选择   

最基础的网页设计,就是给你一个图片你做成一个网页,个人网页的功底不是很高,偏向于后台逻辑处理,偶尔会看些前端构造
首先先认识一下网页的一些相关知识:

一般的,现在一个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>也是可以解析的

到了这里,我突然的想了起来,在网页中,尖括号,双印号啊这些都是关键的网页标记,那么我们咋样在网页上显示这些符号呢:
空格 &nbsp; 半角空格

小于号 < &lt; left
大于号 > &gt; right

双引号” &quot;
版权符? &copy; 
注册符? &reg; 

一些常用的标签:
粗体<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">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
垂直跨度rowspan
<table width="200" border="1">
<tr>
<td rowspan="2">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</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生效

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

网页设计基础介绍

标签:reset   viewport   基础   特征   let   按钮   link   ica   选择   

原文地址:https://www.cnblogs.com/chengjian-physique/p/10122146.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!