1.学习重点
1. 独立完成开发前的准备工作
1.1 配置开发环境 已使用sublime,webstorm,,,vscode,ato,Hbuilder
1.2 建立项目文件 项目文件名/ css、js、images、audio、video--文件夹
index.html、favicon.ico
css/base.css、index.css
1.3样式初始化(不同浏览器的中各个标签的默认样式可能不同,为了1统一样式或者方便维护)
1.4分析网站的布局格式
2. 掌握css样式的书写位置
行内式,<div ></div>(错误)<div color: #ff0000; font-size: 18pt;">:red;font-size:200px"></div>
内嵌式,<style></style>
外链式,<link rel="stylesheet" href="地址"/>
导入式@
3. 制作网站快捷图标
www.bitbug.net
<link rel="shortcut icon" type="type/x-icon" href="地址"/>
4. 描述网站版心的概念及意义
各类屏幕的分辨率不同,导致显示效果不同,设置版心可以使页面正中心位置呈现于用户面前,提高用户体验
5. 熟悉页面的开发流程
页面分析,制作顺序:上--下、左--右;
火狐浏览器的3D视图及截图工具;
6. 熟练掌握FW的切图快捷键
v 测量线 k 切图 i 取色 z 局部放大 a 选取目标
移动 切片工具 滴管工具 放大镜工具 指针工具
7. 掌握font复合属性
font:-weight -style -size/line-height -family
100-900 italic 12px/150% “microsoft yahei”
bold
8. 掌握定位
今天大量使用了定位制作网页, 小图片的布置可以使用浮动替代
页面布局:一般优先考虑标准流/普通流,其次浮动,最后定位
fixed,absolute 脱标-模式转换-定位相对于浏览器
设置absolute的元素有父元素设置了非静态定位,此元素会相对于父元素定位,多个父元素设置了非静态定位,则相对于最近的父元素
relative 不脱标-不转换-占据原来的位置,相对于原来的位置定位
static标准流
注定位的上下只能使用其中一个,左右也是。
9. 掌握权重
继承 < 通配符*< class=伪元素:hover < id < 行内式 < (属性值+!important);
图为鼠标放置在div.one上方时的样式:
css样式中:上图div .one 写在后面;下图div:hover 写在后面
2.其他
input标签,value属性------使用:如button属性上的字
em ins del (i s u基本弃用其效果)-可以作为 起页面装饰作用的小标签,在样式初始化时清除其样式,布置浮动、定位时,使用这些元素作为盒子装图片文字等。
原标题:JY02
关键词: