你的位置:首页 > 网页设计

[网页设计]JY02


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基本弃用其效果)-可以作为  起页面装饰作用的小标签,在样式初始化时清除其样式,布置浮动、定位时,使用这些元素作为盒子装图片文字等。