WY-网页制作(1)

作者: ddai_Q | 来源:发表于2015-06-03 18:49 被阅读178次

PS切图

快捷键收集

标尺的显示隐藏 ctrl+R
清楚所有参考线 Ctrl + ；

选区工作

添加到选区：按住shift
从选区中减去：按住Alt
与选区交叉：按住shift + alt

选区编辑

隐藏文字只留背景
文字和背景合并，平铺背景覆盖文字情况

矩形选框工作
自由变换（Ctrl+T）适合背景为纯色
使用移动工具 + Alt 加上这步的适合有纹理的背景

切带背景PNG24

移动工具选中所需图层（按住 ctrl 多选）
右键合并图层 Ctrl+E
再右键复制图层到新文件或直接拖至已有文件Ctrl + N

切带背景PNG8

合并（可见）图层（shift + ctrl + E）合并图层 Ctrl+E
矩形选框工具选择内容
魔棒工具去除多余部分
- 从选区中减去：按住Alt

可平铺背景的切图

用矩形选框工具选取一块区域
复制粘贴到新文件中（平铺内容充满文件的宽-X轴或高-Y轴）

大小与质量

平衡与取舍
压缩工具
- 无损 MiniImage NetEaseWD/minimage
- 有损 TinyPng tinyPng

浏览器兼容方案

IE6不支持PNG24半透明（方案: 存2份，sprite.png 24, sprite_ie.png 8）
圆角阴影，CSS3&切图

开发工具

文本编辑
- Sublime Text
- Notepad++
- EditPlus

sublime

常用快捷键

：+ 行号
@ + 名称字符 ( 例如：定位到js具体的函数名 ,css的选择器名 )
# + 关键字名（匹配具体的关键字）

命令面板（Ctrl + Shift + P）
多行选择（Ctrl + D , Ctrl + Shift + L）

Ctrl + D 跳过某一个 Ctrl + K
Alt + F3 选中全部的相同变量进行批量操作

**常用插件 **

Package Control
Emmet
DocBlockr
SideBarEnhancements
terminal

**代码片段的使用 snippet **

代码片段的使用

HTML 发展

![HTML发展

](https://img.haomeiwen.com/i591100/db48d6e36e7ba10e.png)

dfn 标签可标记那些对特殊术语或短语的定义。
rt,rp 与ruby合用，上拼音标注(rp 不支持rt的浏览器时显示的样式)
q 标签定义短的引用。浏览器经常在引用的内容周围添加引号
abbr 标签指示简称或缩写，比如 "WWW" 或 "NATO"。
cite 标签通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。
samp 标签表示一段用户应该对其没有什么其他解释的文本字符。要从正常的上下文抽取这些字符时，通常要用到这个标签。字符序列 (ae 可能会被转换为 æ 连字字符。)
ins 下划线文本
bdi (设置间隔)标签允许您设置一段文本，使其脱离其父元素的文本方向设置。Username Bill:80 points。支持：F,C
bdo 元素可覆盖默认的文本方向。
s 带删除线文本 sssHTML 5 中不再支持这个标签.
kbd 标签定义键盘文本。
wpr Word Break Opportunity (wbr) 规定在文本中的何处适合添加换行符。提示：如果单词太长，或者您担心浏览器会在错误的位置换行，那么您可以使用 wbr 元素来添加 Word Break Opportunity（单词换行时机）。
code 标签用于表示计算机源代码或者其他机器可以阅读的文本内容
blockquote 标签定义块引用。blockquote 之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进（增加外边距），而且有时会使用斜体。也就是说，块引用拥有它们自己的空间
meter 标签定义已知范围或分数值内的标量测量。也被称为 gauge（尺度）,例子：磁盘用量、查询结果的相关性，等等。注释：meter 标签不应用于指示进度（在进度条中）。如果标记进度条，请使用 progress 标签
legend 元素为 fieldset 元素定义标题
fieldset 元素可将表单内的相关元素分组

a标签链接到Email地址

<a href="mailto:lanmeng@yeah.net">联系我们</a>
<a href="tel:18310257958">18310257958</a>
加上抄送和主题
<a href="mailto:lanmeng@yeah.net?cc=admin@188.com&subject=建议&body=body.....">联系我们(抄送)</a>

强调标签 em, strong

em 主要是语义的强调，默认样式：斜体

strong 主要是重要性的强调(比em更强烈的强调 )，默认样式：粗体

<div>
.....
   <div class="proinfo">
     .....
     <p class="w-price">
         <strong>￥39</strong>
         <span>市场价￥45</span>
     </p>
   </div>
.....
</div>

引用标签 cite q

cite 文章文本出处，人物。默认样式：斜体
q 引用一段文字，某人说的话。默认样式：加引号

代码

code 计算机代码

格式化

b 粗体，摘要关键字，产品名称等
i 斜体，技术术语

视频video

track 引入视频的字幕文件

视频

图

canvas 基于像素
svg 矢量

热点区域

map
area

map热点

表格

表格实例

表单

button的type与input的type一致，submit , reset
input type (H5新增)
- email
- url
- number
- tel
- search
- range
- color
- data picker(data,month,week,time,datetime,datetime-local)

表单示例

CSS语法

引入

外部、内部、内嵌样式

浏览器私有属性

chrome,safari -webkit-
firefox -moz-
IE -ms-
opera -o-

属性值语法

....

@规则

@media
@keyframes
@font-face
以及@import @charset @namespace @page @supports @document

CSS 选择器: 简单、伪元素、组合

简单选择器

标签
id
class
属性
伪类选择器
- :link
- :visited
- :hover
- :active
- :enabled
- :disabled
- :checked
- :first-child
- :last-child :nth-child(n)
- :nth-of-type(n) :first-of-type{....} :last-of-type{....}
- :onlly-child{....} 只有一个子元素的项 (ul>li*1)
- :empty 选中空标签 <p></p>
- :root 选中根元素<html>
- :not() 不包含某个选择器（参数为简单选择器）
- :target 锚点的目标目标
- :lang() lang值的选择器

====例子====
属性选择器：
1、[arr] 例如： [disabled]{background-color:#eee;}
2、[arr=val] 例如： [type=button]{background-color:blue;}。那么 #nav{} == [id=nav]{}
3、[arr~=val] 包含以空格区分例如： .sports{} == [class~=sports]{}
4、[arr^=val] 以什么开头例如：[href^='#']{color:red;}
5、[arr$=val] 以什么结尾例如：[href$=pdf]{color:red;}
6、[arr=val] 值中包含例如：[href="lady.163.com"]{color:red;}

//[lang |= en]{color:red;} 会选中前三个（用的不多）
<p lang="en">1、hello</p>
<p lang="en-us">2、hello</p>
<p lang="en-au">3、hello</p>
<p lang="enfr">4、hello</p>
<p lang="cy-en">5、hello</p>


 //：[href^='#']{color:red;} 选中后两个
 <a href="http://www.baidu.com">baidu</a>
 <a href="#html">html</a>
 <a href="#css">css</a>

::first-letter应用到第一个字母上，为红色

    <p> CSS伪元素选择器是。。。<p>

first-of-type

    <dl>
         <dt>作者:</dt>
         <dd>Dave shea:</dd>  /* 红色 */ 
         <dd>Molly E. Holzschlag</dd>
         <dt>出版社:</dt>
         <dd>人民邮电出版社</dd>
     </dl>
     
     dd:first-of-type{ color:red;  }

first-of-type

伪元素选择器

::first-letter{....} 第一个字母
::first-line{...} 第一行
::before{ content: 'before'; } 在元素前插入
::after{ content: 'after'; } 在元素后插入
::selection 应用于被用户选中的内容

组合选择器

后代选择器
子选择器
兄弟选择器

CSS优先级

a = 行内样式
b = ID选择器
c = 类、伪类、属性选择器
d = 标签选择器和伪元素选择器

value = a*1000 + b*100 + c*10 + d*1

CSS优先级

CSS改变优先级

改变先后顺序
提升选择器优先级
!important

文本和颜色

font-size:

line-height

normal | <number> | <length> | <percentage>
line-height: 3px or 3em or 300% or 3

** 300% 与 3的区别 **
假设父元素font-size : 30px

300% : 先计算成固定值再继承。（首先对父元素的字体进行计算得到行高：30*3 = 90px,则子元素的文字字体变化，不影响子元素的行高）
3 : 直接继承。（直接继承line-heitght = 3，比如子元素设置font-size: 16px, 那么，line-height: 3*16 = 48px）

font

[ [<font-style> || <font-variant> || <font-weight> || <font-stretch> ] ? <font-size> [/ <line-height> ] ? <font-family> ] | caption | icon | menu | message-box | small-caption | status-bar
缩写：font:30px/2 "Consolas" , monospace;
缩写：font:italic bold 20px/1.5 arial,serif;
( <font-size>和<font-family>是必填项)

text-align ：left | right | center | justify(两端对齐)

....

vertical-align: baseline | sub 下标 | super 上标 | top | text-top | middle | bottom | text-bottom | <percentage> | <length>

....

text-indent 首行缩进 <length> | <percentage>

eg:
text-indent : 2em; 缩进2个字；
text-indent:-9999px; 用于隐藏文字（SEO）

white-space normal | nowrap | pre | pre-wrap | pre-line

white-space

normal : 空格被合并，自动换行
nowrap: 空格被合并，不要换行
pre : 换行保留
pre-wrap：保留格式+自动换行（用的较多）
pre-line: 保留换行，合并空格，自动换行

word-wrap:normal | break-word 单词换行

...

word-break : normal | keep-all | break-all

keep-all 与 normal 基本一致，no break
break-all 单词任意两个字母都能换行（break）

text-shadow none | [<length>{2,3} && <color>?]#

 //x轴，y轴，（第三个值为模糊半径），颜色不写默认为文字的颜色
 text-shadow:1px 2px #f00;

text-overflow clip | ellipsis

 text-overflow : ellipsis;
 overflow : hidden;
 white-space : nowrap ;

inherit 强制继承父元素属性

font-size, font-family,font-weight, font-style, line-height, color, text-decoration, text-align, text-indent, white-space, word-wrap, word-break, text-shadow.....
都可以将值设置为inherit，继承父元素属性

盒模型

border
margin
padding
content

padding 的值缩写

padding: 20px 10px 30px == padding : 20px 10px 30px 10px;
三个值的时候，表示：上，左右，下

margin合并

毗邻元素

父元素与第一个/最后一个子元素

<div style="margin-bottom: 40px"><div>
<div style="margin-top:20px"><div>

border-radius: [<length> | <percentage> ] {1,4}[/[<length> | <percentage> ] {1,4} ] ?

圆角定义

border-radius例子

说明：上下看

左上角（0px,20px)-水平半价，垂直半径. [border-top-left-radius]
右上角（5px,15px）
右下角（10px,10px）
左下角（15px,5px）

overflow: visible | hidden | scroll | auto
overflow-x, overflow-y

auto 超出自动显示滚动条

box-sizing： content-box | border-box | inherit
默认width，height设置的是内容区，content-box

box-sizing 示例

box-shoadow:none | <shadow> [,<shadow>]*
<shadow> : inset ? && <length>{2,4} && <color>?

box-shadow

内外阴影

outline:[<outline-width>] || <outline-style> || <outline-color> | inherit 轮廓
outline-width: <lenght> | thin | medium | thick | inherit
outline-style: solid | dashed | dotted | ... | inherit
outline-color:<color> | invert | inherit

特点；

不占空间（与box-shadow一样）
在border外

outline

背景

backgroud-image

<bg-image> [,<bg-image>] * 背景图片可以有多张，叠加顺序，先设置的在上面，后设置在下面, 背景色在最下面

background-image: url(./red.png) , url(./blue.png)
background-color: green;

多张背景图

backgound-repeat <repeat-style>[,<repeat-style>]*
repeat-style = repeat-x | repeat-y |
[repeat | space(平铺中会有间隙，没有被截掉的图形) | round(平铺会有拉伸，正好放下图形有拉伸) | no-repeat]{1,2}

background-image: url(./red.png) , url(./blue.png)
background-repeat: no-repeat repeat, repeat-x;

指定repeat方式

backgound-attachment 可以写多个；
<attachment> = scroll 默认| fixed | local

scroll 滚动的时候，背景不动，内容动
local 内容背景一起动
fixed 几乎不用

background-position 可以设置多个

懒，直接用图

设置百分比的情况
background-position ： 20% 50%；
表示，图片的20% 50%（x,y）的点，与容器的20% 50%的点重合
所以都是50% 50%（= center center），则背景居中

20% 50%

设置一个值的情况
background-position：right；表示X轴的100%位置对应容器的100%位置，默认Y轴center

right

设置四个值的情况
background-position：right 10px top 20px；
此时的right，top不能转化为百分比，其实表示的是参照位置（参照物的作用）

right 10px top 20px

雪碧图的应用

....

linear-gradient() 线性渐变
[ [<angle> | to <side-or-corner> ] ,] ? <color-stop> [,<color-stop> ] +

<side-or-corner> = [ left | right ] || [ top | bottom ]
<color-stop> = <color> [ <percentage> | <length>] ?

linear-gradient 线性渐变其本身不是CSS的属性，而是属性下面的数值，一般用在background的属性里比较多，使用线性渐变需要注意,有很多种线性渐变的表达方式，对于不同的手机、版本也会有所不同。在手机web上面，使用这种格式比较安全，-webkit-gradient(linear, left top, left bottom, from(), to())

 backgound-image: linear-gradient(red,blue); // 默认值是to bottom

linear-gradient(red,blue)

反向写法 backgound-image: linear-gradient(to top, red,blue);

backgound-image: linear-gradient(to right bottom, red,blue);

左上角到右下角

backgound-image: linear-gradient(45deg, red,blue);

45度 linear-gradient(45deg, red,blue);

backgound-image: linear-gradient( red,green,blue);
参数的百分比缺省表示平分（0% 50% 100%）

三色

设置的方法：backgound-image: linear-gradient( red,green 20%,blue);

linear-gradient( red,green 20%,blue);

radial-gradient() 径向渐变

语法

<extent-keyword> = closest-side 离圆心最近的边 | farthest-side 离圆心最远的边 | closest-corner 离圆心最近的角 | farthest-corner 离圆心最远的度

background-image: radial-gradient(circle,red,blue)

repeat - * - gradient

background-image : repeating-linear-gradient(red,blue 20px , red 40px)

Paste_Image.png

background-image : repeating-radial-gradient(red,blue 20px , red 40px)

Paste_Image.png

background-origin = border-box | padding-box | content-box

区别就是，background 0,0 和 100%,100% 坐标的区别，默认值是padding-box

Paste_Image.png

background-clip = border-box | padding-box | content-box

 background-image:url(red.png)
 background-clip : padding-box

xiaoguo

 background-clip: content-box

Paste_Image.png

background-clip: content-box
background-origin : content-box 
联合两个属性

完美.png

background-size = length | percentage | auto | cover | contain

Paste_Image.png

cover : 尽可能的小，但宽高不小于容器，撑满整个容器
contain：尽可能大，但宽高不大于容器，以最大的型展现在容器中

background : url(red.png) 0 0/20px 20px no-repeat, url(blue.png) 50% 50%/contain no-repeat content-box green;

Paste_Image.png

WY-网页制作(1)

PS切图

sublime

HTML 发展

标签

CSS语法

CSS 选择器: 简单、伪元素、组合

文本和颜色

盒模型

背景

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读