自我总结(前端设计)
学习就是形成自己的知识体系,而总结是形成个人对知识理解的不可或缺的方法。
还有重要的遗忘曲线:
一、关于HTML总结(定义了网页的内容)
1.命名:
定义文档的主体:<body>
标题:<title>
定义元素的位移id:<id>
id属性只能单独设置id=” ”(只能填写一个,多个无效)
为html元素定义一个或多个类名(classname):<class>
class属性可以多用class=” ”(引号里面可以填入多个class)
规定元素的行内样式:<style>
标签:<label>
搜索:<search>
搜索框:<searchBox>
标签页:<tab>
定义段落:<p>
定义客户端脚本:<script>
定义文档中的节:<div>
定义html文档:<html>
定义html标题:<h1>to<h6>
定义一个按钮:<button>
定义文档中的节:<span>
定义居中文本:<center>
定义图像:<img>
定义选择列表中的选项:<option>
定义选择列表(下拉列表):<select>
定义文档的样式信息:<style>
定义html的表单:<form>
定义关于文档的信息:<head>
定义文本背景:<background>
定义文本对齐方式:<text-align:left>或<text-algin:right>
左右中:left right center
举实例有:
单选(或多选)按钮:
<input type=”radio/checkbox” id=”aaa” name=”zky” value=”beijing”/>
<label for=”aaa”>北京</label>
<input type=”radio/checkbox” id=”bbb” name=”zky” value=”shanghai”/>
<label for=”bbb”>北京</label>
创建提交按钮:
<input type=”submit” value=”提交”/>
页面结构:
容器:container
页头:header
内容:content/container
左右中:left right center
导航:nav
功能:
标题:title
状态:status
按钮:button
图标:icon
搜索:search
友情链接:link
2.行内元素与块级元素
1)行内元素(display:line)
和其他元素都在一行上,高和行高以及外边距和内边距大小不变,宽度就是它的文字或图片的宽度,不可改变,内联元素只能容纳文本或者其他内联元素
常见的行内元素
a -- 锚点
br -- 换行
Font -- 字体设定
Img -- 图片
Input -- 输入框
Label -- 表格标签
Select -- 选择
Small -- 小字体文本
Span -- 常用内联容器
Sub -- 下标
Sup -- 上标
Textarea -- 多行文本输入框
2)块级元素(dispaly:block)
每个块级元素默认占一行高度,一行内添加一个块级元素后无法一般无法添加其他元素(float浮动后除外)。两个块级元素连续编辑时,会在页面自动换行显示。
常见的块级元素:
div -- 目录列表,也是CSS Layout的主要标签
H1 -- 大标题
H2 -- 副标题
H3 -- 3级标题
H4 -- 4级标题
H5 -- 5级标题
H6 -- 6级标题
P -- 段落
二、CSS(定义了网页的布局)
1.选择器(几种常见的)
2.颜色(几种主要颜色)
3.属性
设置背景颜色:background-color
设置所有填充属性:padding
设置元素高度:height
设置元素的宽度:width
设置所有字体属性:font
规定文体的字体系列:font-family
规定文体的字体尺寸:font-size
规定文体的字体样式:font-style
规定字体的粗细:font-weight
与:before以及:after伪元素配合使用,来插入生成内容:content
设置外边距属性:margin
规定框是否浮动:float
设置定位元素下边距边界与其包含块下边界之间的偏移:bottom
规定元素的定位类型:position
设置定位元素左外边距边界与其包含块左边界之间的偏移:left
设置定位元素右外边距边界与其包含块右边界之间的偏移:right
设置定位元素的上外边距边界与其包含块上边界之间的偏移:top
设置文本的颜色:color
规定文本的水平对齐方式:text-align
三、JavaScript(定义了网页的行为)
1.用法:
<script>标签,例如:
<script> alert("我的第一个 JavaScript"); </script>
操纵html元素:
如需从JavaScript访问某个html元素,你可以使用 document.getElementById(id) 方法
使用id属性来表示html元素,例如:
!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<p id="demo">我的第一个段落</p>
<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>
</body>
</html>
2.语法:
字符串(String)字面量可以使用单引号或双引号,例如:
"John Doe"
'John Doe'
数组(Array)字面量定义一个数组,例如:
[40, 100, 1, 5, 25, 10]
对象(Object)字面量定义一个对象,例如:
{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}
函数(Function)字面量定义一个函数,例如:
function myFunction(a, b) { return a * b;}
变量:
JavaScript中使用关键字var来定义变量
数据类型:
数字,字符串,数组,对象等等
函数:
函数可以重复引用,function用于定义一个函数
字母大小写:
JavaScript对字母大小写是敏感的,区分大小写
3.JavaScript JSON
四、jQuery
1.选择器
jQuery 中所有选择器都以美元符号开头:$()
2.语法:
3.文件就绪事件(函数)
$(function(){ // 开始写 jQuery 代码... });
4.jQuery操作CSS
五、jQuery组件(具体例子网站查询)
1)基础组件:
(1)九宫格 weui_grids
weui_grid |
是一个一个的宫格 |
weui_grid_icon |
一个宫格的图标 |
weui_grid_label |
图标下面的字 |
(2)页面底部的导航 weui_tabbar
通过点击按钮切换页面的主体内容,一般嵌套在weui_tab内
自动切换
在正确的HTML结构前提下,给 .weui-tabbar__item 或者 .weui-navbar__item 加上 href="#id" 指向一个 .weui-tab__bd-item,即可实现点击的时候自动切换。但是请自行确保初始状态的一致。
(3)按钮 weui-btn
按钮可以使用 a 或者 button 标签。
按钮常见的操作场景:确定、取消、警示,分别对应class:weui-btn_primary、weui-btn_default、weui-btn_warn,每种场景都有自己的置灰态 weui-btn_disabled,除此外还有一种镂空按钮 weui-btn_plain-xxx,客户端webview里的按钮尺寸有两类,默认宽度100%,小型按钮宽度自适应,两边边框与文本间距0.75em:
.weui-btn_loading 可以使按钮变为loading状态
(4)列表 weui-cells
cell由 thumbnailweui-cell__hd、bodyweui-cell__bd、accessoryweui-cell__ft三部分组成
效果如下:
带链接的列表:
只有weui-cell__bd和weui-cell__ft,没有weui-cell__hd。另外,整个weui-cell_**被标签a包围
效果如下:
单选列表/复选列表
weui-cells_radio |
单选列表 |
weui-cells_checkbox |
复选列表 |
weui-icon-checked |
列表项默认选中 |
weui-check |
一个列表项 |
weui-cell_link |
文字显示为链接状态 |
(5)滑动删除( swipeout ) weui-cell_swiped
Swipeout 可以在列表的某一项中向左滑动出现操作按钮,类似微信聊天列表中的滑动功能。
默认情况下,当页面加载完成后,会自动初始化带有 .weui-cell_swiped 类的列表条目,此时不需要做任何手动初始化。
如果你是动态生成的DOM,或者在JS加载之后的DOM,那么这样初始化:
$('.weui-cell_swiped').swipeout()
你可以手动调用方法来打开或者关闭
$('.weui-cell__swiped').swipeout('open') //打开
$('.weui-cell__swiped').swipeout('close') //关闭
(6)表单 weui-cells__form
表单是基于列表的布局实现的.包括很多常用的表单控件:
weui-select |
下拉列表 |
weui-agree__checkbox |
同意条款的小方框 |
weui-btn-area |
weui-btn-area { margin: 1.17647059em 15px .3em;}内部用来放置按钮 |
weui-btn |
提交按钮样式 |
(7)文件上传:
目前文件上传仅有CSS样式,并没有对应的JS插件。
(8)ActionSheet
用于显示包含一系列可交互的动作集合,包括说明、跳转等。由底部弹出,一般用于响应用户对页面的点击。
ActionSheet 只能通过 JavaScript 进行调用:
通过 $.actions(params) 方法打开 ActionSheet。可用参数如下:
参数名 |
说明 |
actions |
菜单项,关于每一个菜单项的配置请参见下文 |
title |
可以给弹层设置一个标题,如果不设置则不会显示标题 |
onClose |
关闭弹层的回调函数 |
actions 参数是一个数组,数组中的每一项都是一个菜单。
对每一个菜单的可用配置如下:
参数名 |
说明 |
text |
菜单显示的文案 |
className |
菜单上额外追加的class |
onClick |
点击之后的回调函数 |
(9)导航栏
因为微信本身就有一个顶部的标题栏,所以这个导航栏其实是在标题栏之下的二级导航栏,因此它实际上就是一个放在页面顶部的 tabbar 而已。
自动切换
在正确的HTML结构前提下,给 .weui-tabbar__item 或者 .weui-navbar__item 加上 href="#id" 指向一个 .weui-tab__bd-item,即可实现点击的时候自动切换。
初识状态显示的标签,需要自行添加 .weui-bar__item--on 和 .weui-tab__bd-item--active.
weui-navbar |
放置选项卡 |
weui-navbar__item |
选项卡样式 |
weui-bar__item--on |
默认active 的选项卡 |
weui-tab__bd-item--active |
默认active的页面 |
weui-tab__bd-item |
放置页面内容 |
2)拓展组件
(1)Picker
picker是一个JS实现的类似select的组件,他可以代替原生的select组件,并且功能更加强大、样式更加统一。
picker 需要初始化才能使用,你可以在一个 input 元素上初始化picker,当用户点击input的时候会弹出picker的弹层
picker 会自动读取 input 的value作为初始值。对于有多个cols的情况,可能初始值无法正确解析,因为picker并不知道该如何进行分割。默认的规则是:多列模式下,会把input中的值以空格分隔作为每一列的值。如果你有多列并且不是以空格分隔的,那么你需要自己通过参数传入这个初始值,而不能通过 input 元素的 value属性设置。
关闭picker
在任何元素上加上一个 .close-picker 类,点击它就会关闭 Picker。
你也可以通过调用 $.closePicker() 或者 $("#input").picker("close")来关闭当前弹出的 Picker。
Picker参数
参数名 |
默认值 |
说明 |
title |
"请选择" |
Picker 的标题 |
toolbarCloseText |
完成 |
关闭按钮的文案 |
toolbarTemplate |
请参见源码 |
工具栏的模板,可以自己定义。 |
value |
|
Array with initial values. Each array item represents value of related column. Picker will auto read value from input if not set. |
rotateEffect |
false |
是否启用3D效果,启用3D可能会影响性能 |
toolbar |
true |
是否显示工具栏 |
inputReadOnly |
true |
是否会在input上添加一个 readonly 属性 |
cssClass |
undefined |
为 picker 容器增加额外的类,可以用来自定义样式 |
onChange |
undefined |
当选择值改变的时候触发 |
onClose |
undefined |
当picker被关闭时触发 |
(2)地址选择器
地址选择器是一个定制的picker,所以其用法和picker是一样的
地址选择器需要引入额外的js文件
参数
参数名 |
默认值 |
说明 |
showDistrict |
true |
是否显示地区 |
当参数值设置为false时,只能选择省市
(3)Select
Select 是一种支持单选或者多选的弹出层,它可以用来代替原生的 select 元素提供更好更一致的用户体验。Select 是一个JS组件,只能通过JS方法来调用.
当增加一个mulit:true参数时,可以设置为多选
关于select的参数
参数名 |
默认值 |
说明 |
input |
undefined |
输入框的初始值,如果设置了这个值,那么他会覆盖 input 本身的 value 值。 从 V0.7.0 开始支持此配置。 |
autoClose |
true |
自动关闭,只有在单选模式下才可用,选择完成之后自动关闭弹窗 |
closeText |
"关闭" |
关闭按钮的文案 |
multi |
false |
是否多选 |
max |
undefined |
多选模式下,最多可选个数, V0.7.2 |
min |
undefined |
多选模式下,最少可选个数, V0.7.2 |
split |
"," |
分隔符 |
title |
"请选择" |
弹窗的标题 |
onChange |
undefined |
用户选择之后的回调,注意从 V0.6.1 版本之后才支持。你也可以在 input 上监听 `change` 事件。 |
onOpen |
undefined |
弹层打开之后执行此回调函数。 V0.7.0 开始支持此配置 |
onClose |
undefined |
弹层关闭之后执行此回调函数。 V0.7.0 开始支持此配置 |
beforeClose |
undefined |
弹层关闭之前执行此回调函数,如果返回 false 则可以阻止关闭。 V0.7.2 |
(4)Popup
Popup 是一个覆盖式的弹出层,可以完全盖住当前页面。(默认)
可以设置一个链接,当点击这个链接就会打开这个模板,例如:
<a href="javascript:;" class="open-popup" data-target="">About</a>
其中 class='open-popup' 和 data-target="" 两个属性不可缺少,前者表示点击链接需要打开一个 popup,后者是这个popup的选择器
当然,也可以通过调用js方法打开:
$("#about").popup();
还有一个种是非全屏模式,在容器上增加以个类popup-bottom即可
关闭popup
给任何链接加上class='close-popup' 则点击之后就可以关闭当前打开的popup,你也可以通过 $.closePopup() 来关闭。
前端开发的一般流程
交与设计审核,过后交给开发人员,进行动态数据的添加。添加完之后,发布测试环境,产品测试领导审核,成功后,直接发布产品环境。或进行版本迭代。这是整个的一个设计,开发,部署的流程。
- 进行需求分析,画出用例图,经过再三讨论和确认之后,拟好需求规格说明书和数据库设计说明书,然后与甲方进行确认和沟通
- 制作前端静态页面(拿到的数据为假数据),在这个之前,需要做好市场调研,并结合需求规格说明书和数据库设计说明书进行合理设计,做出来的页面也需要简洁明了,然后与甲方进行沟通和确认
- 过后交给开发人员,进行数据动态添加(过程:浏览器向服务器发出请求,服务器向数据库拿到数据,服务器将数据返回给浏览器,浏览器进行显示)
- 添加完之后,发布测试环境