Flands Blog HomeArchivesTags
PS+HTML+CSS笔记

参加网易微专业做的笔记

PS部分

切图

普通切图

常规使用PNG24

  • 矩形选框工具
  • 自由变换(Ctrl+T)
  • 移动工具+Alt
  • 平行移动按住Shift

带背景切图

  • 合并(可见)图层(Shift+Ctrl+E)
  • 矩形选框选择内容
  • 魔棒工具去除多余部分(减去按住Alt)

切片工具

  • 拉参考线
  • 切面工具，基于参考线切片
  • 切面选择工具
  • 每一个切片命名
  • 存储

保存

  1. JPG格式适合保存色彩丰富且无透明要求的图片，一般为网页内容性质的图片.品质一般为60-80
  2. PNG8格式适合保存图片颜色不太丰富的图片，无论是否有透明要求，可以用为，背景图等，保存时需要注意设置：无仿色，杂边。注意更改为RGB颜色模式
  3. PNG24格式适合保存有半透明效果的图片，可以为LOGO

合并

  1. 保留一定的空隙
  2. 模块分类合并，大小相近合并，色彩相近合并，综合以上合并
  3. 推荐:本页用的合并|有状态的图标合并
  4. IE6不支持PNG24半透明，存两份24&8

HTML

结构

说明 代码 子元素说明 代码
头部 <header>
导航 <nav>
独立的内容 <article> 带一个标题 <section>
工具&广告 <aside>
结尾 <footer>

详解

说明 标签 属性 代码
链接 <a></a>
网址 href="http:"
锚点(对应id = pay) href="#pay"
邮箱 href="mailto:aaa@163.com"
当前页打开 target="_self"
新建页打开 target="_blank"
选择标签内打开 target="inner"
对应上面 <iframe name="inner"></iframe>
斜体强调 <em></em>
粗体强调 <strong></strong>
换行 <br>
引用 <q>
代码 <code>
保留code标签的换行 <pre>
粗体 <b>
斜体 <i>
引用，cite表示来源 <blockquote cite="http://">

列表

无序

<ul>
    <li>1</li>
    <li>1</li>
</ul>

有序

<ol type="a" start="2">		//排序前缀，开始数值
    <li>1</li>
    <li>1</li>
</ol>

自定义

<dl>
    <dt>作者</dt>
    <dd>aaaa</dd>
    <dd>aaaa</dd>
    <dt>出版书籍</dt>
    <dd>bbbb</dd>
</dl>

嵌入资源

<img src=".../cover.jpg" alt="封面">
<iframe src="">固定资源<>

flash插入视频

<object type="application/x-shockwave-flash">
    <param name="movie" value="http://a.swf">
    <param name="flashvars" value="http://a.pdf">
<embed type="application/x-shockwave-flash" src="a.swf" width="640" height="480">

HTML5插入视频

autoplay自动播放，loop循环播放，视频封面

<video autoplay loop controls="controls" poster="a,jpg">
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.webm" type="video/webm">
    <source src="movie.ogg" type="video/ogg">
    <track kind="subtitles" src="video.srt" label="English">
</video>

图

<ing usemap="#Map2">
<map name="Map2">
矩形点位
    <area shape="rect" coords="669,75,1075,682" href="" target="_blank">
</map>

表格

<table>
<caption>标题</caption>
<thead>
    <tr><th>第一行第一列</th><th>第一行第二列</th><th>第一行第三列</th></tr>
<thead>二
<tbody>
    <tr><th>第二行第一列</th><td>第二行第二列</td><td>第二行第三列</td></tr>
</tbody>
<tfoot>
    <tr><td colspan="3">占满三列</td></tr>
</tfoot>
<table>
//标签
<tr>每行
<th>头
<td>项
<td rowspan="2"> 占两行

表单

<form action="/login" method="post">
    <fieldset>
        <legend>选择</>
    </fieldset>														分区块
    <input type="file" name="file">男		 文件按钮
                checkbox												多选框
                radio														单选框
                time    时间 min="11:00" max="21:00" step="900"
                text														输入框
                    placeholder="提示信息"
                    value="显示文本"
        redonly															禁止使用
        hidden															隐藏
        disabled														禁止选中
    <button type="submit">								提交
            reset															重置
            button														按钮

    <label for="a">文本</>
        <textarea name=""rows="4" cols="3" id="a"></>	多行文本输入框
    
    <select id="a">												下拉选项
        <optgroup label="group">
        <option value="0">选项一</option>
        </optgroup>																	选项分组
        <option value="0" selected>默认显示</option>

CSS

初始化

  • *{margin:0; padding:0; font-size:14px;} 初始化设置
  • <link rel="stylesheet" type="text/css" href="文件位置/CSS文件.css" />

列表

  • list-style:none 去掉无序列表的点
  • text-decoration:none 去掉下划线
  • float:left;text-align:center 横向菜单设置
  • 文字&背景
  • text-indent:20px 文字向右移动20px,em单位为字数
  • background-position:right 图片作为背景右对齐

伪元素&选择器

语法

组合符号

  • 空格 必须有且顺序不能变
  • && 必须有顺序可变
  • || 至少要有一个顺序可变
  • | 只能有一个
  • [] 分组

数量符号

  • + 出现二次或者多次
  • ？ 可选择是否出现
  • {} 可以出现几次，最少和最多
  • * 出现1次或多次
  • # 替代*号，逗号隔开

盒子模型

盒子顺序

margin--border--padding--content
外边框----边框----内边框----实体

盒子层次

  1. border 边框
  • a{border:5px solid red;border-width:高度px}边框属性
  • border-radius:4个水平半径值/4个垂直半径值 圆角边框
  • border-color:#333 #333 transparent 底边透明
  • outline:宽度 样式 颜色 轮廓边框，不占据空间，在border外
  1. content+padding 内容+内边距
  • box-sizing:content-box,border-box 指定是否包括padding&border
  • box-shadow:水平偏移 垂直偏移 模糊半径? 阴影大小? 颜色 负值为反方向，内阴影第一个加inset
  1. background-image 背景图片
  2. background-color 背景颜色
  3. margin 外边距

定位

float对于元素脱离标准文档流，但是对于内容还在文档流，解决办法创建一个隐藏元素

{content:'.';
display:block;
clear:both;
height:0;
overflow:hidden;
visibility:hidden;}

浮动

.box{float:right} 使块级元素横向排列
.cleanfloat{width:100%;overflow:hidden;} 清除浮动
.cleanfloat{clear:both;} 清除浮动-紧邻元素
overflow: auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

居中定位

{width:设置一个宽度，默认100%;border:1px solid red;}
margin:0 auto 水平居中

定位形式

  1. position:static;top 静态定位

  2. position:relative 相对原本位置定位，处于标准文档流，测试一般使用这个作为祖先或者父元素

  3. position:absolute 绝对定位，脱离标准文档流，未设置宽度时随着内容调节宽度，祖先元素未设置定位时以为祖先元素定位，祖先元素设置后以最近的相对祖先元素定位

  4. position:fixed 固定定位，随浏览器窗口滚动

    附带参数:top px;

标准文档流

从上至下，从左至右排列。脱离元素会显示其上一层，覆盖掉处于标准文档流的文字。(相当于加了个挡板一样的东西遮住视野。)

布局

两列布局使用margin-left空出position的宽度，实现自适应

Flex

方向

  • flex-direction 方向
  • flex-wrap换行
  • flex-flow 流布局(缩写，direction | wrap)
  • order 顺序(为数值，越大越向后，未设置在最前)

弹性

  • flex-grow 数值，占用多余的空间倍数，也可为px
  • flex-shrink 数值，占用负值空间
  • flex-basis 初始大小
  • flex 上面的顺序缩写

对齐

  • justify-content X轴上的对齐方式
  • align-items Y轴上的对齐方式
  • align-self 设置单独的对齐方式
  • align-content 设置所有flex对齐样式

三行两列自适应

body{flex:1;display:flex;} 占据所有空余空间
right-main{flex:1;}

Font

.font{
font-style：normal；					字体样式，normal(正常)、italic(斜体)、oblique(倾斜)
font-variant:normal;					字体变化，normal(正常)、small-caps(小体大写字母)
font-weight:normal;						字体浓淡，normal(正常)或bold(加粗)
font-size:12px;								字体大小
line-height:10px；						 行高
font-family:"微软雅黑";		  	字体
}
line-height										为百分比则先计算高度，为数字则重新计算字体大小的倍数
    
缩写则为
.font{font:normal || normal || normal 12px/10px "微软雅黑"}

文字(部分可应用至元素

描述 代码
文字两端对齐 text-align:justify
缩进,em单位为文字 text-indent
垂直对齐，上标下标 vertical-align
是否保留换行 white-space
长单词换行 word-wrap
长单词不换行 word-break
文字阴影 text-shadow
下划线 text-decoration
多的字用…代替 text-overflow:ellipsis
配合上面的隐藏 overflow:hidden
定义鼠标形状 cursor
强制继承 inherit

背景

描述 代码
背景图片 background-image:url(a.jpg)
背景图片切图 background-image:url(a.jpg) no-repeat 0 -50px
平铺方式不重复,逗号设置第二图 background-repeat:no-repeat
随着滚动条一起动 background-attachment
背景从右偏移 background-position:(right) X轴 Y轴
线性渐变，从右向左，45deg角度变换，颜色20%占用位置 background-image:linear-gradient(to right bottom,颜色,颜色)
圆心100px，颜色。at 0 0为左上角 background-image:radial-gradient(circle 100px,red,blue)
配合上面两个可重复变换 background-image:repeating
背景图以哪个区域为准 background-origin:content-box
裁剪限制到某个区域显示 background-clip:同上
背景大小 background-size:数值

变形

描述 代码
旋转NUM度，可为负值 transform:rotateY(NUMdeg)
坐标轴位置，上下左右 transform-origin:
可接下面的方法，顺序会影响表现 transform:
移动 translate(X轴移动 Y轴移动?
旋转 rotate:同上
缩放 scale: 同上
倾斜 skew: 同上
透视效果 perspective:500px
透视角度 perspective-origin:
3D轴 transform:translate3d(XYZ):
3D移动 transform:translateX
同上，缩放 transform:scale3d
preserve-3d(保留3D空间) transform-style:flat(扁平化)
背面是否可见,旋转180° backface-visibility:visible (or) hidden

动画

描述 代码
指定需要过渡的属性(left;color) transition-property:
过渡时间 transition-duration:1s
控制中间速度 transition-timing-function:
同上，延迟几秒后开始 transition-delay:1s
以上缩写 transition：
自动动画
随便一个名字或者None animation-name:abc
执行时间 animation-duration:
控制中间时速度 animation-timing-function:
执行次数 animation-iteration-count:数字 (or) infinite
执行方向 animation-direction:
暂停 animation-play-state:running (or) paused
延迟 animation-delay:
动画开始结束是否保留状态 animation-fill-mod:
缩写 animation:

调用–由animation调用，可以调用多个 

@keyframes abc{
    from {opacity: 1 ;height: 100px;}
    to{}
    或者
    0%{}
    100%{}
    或者
    0%,50%,100%{}
}

特定组合

标题显示…

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

横向菜单

li{float:left;}
text-align:center

CSS Reset

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
* {
    vertical-align: baseline;
    font-weight: inherit;
    font-family: inherit;
    font-style: inherit;
    font-size: 100%;
    outline: 0;
    padding: 0;
    margin: 0;
    border: 0;
  }
  ol, ul {
    list-style: none;
  }
  a img, :link img, :visited img {
    border:0;
  }
CSS