制作静态网页

一.开发前的准备工作:

  1.配置开发环境:

    sublime webstrom (vecode hbuilder atrom)

  2.建立项目文件夹:

    index.html     default.html

    css文件夹:base.css  global.css

    images文件夹:放图片

    JS文件夹:放音频或者视频

  3.样式初始化

    4.分析网站结构:

    布局一般是从上到下,从左到右。

    在写页面的时候,一般考虑使用标准流的元素,其次才使用浮动或是定位。

 

二.开发过程的语法和注意事项:

  1.网站快捷图标的制作:

    www.bitbug.net

    <link rel="shortcut icon" href="/favicon.ico" />写在head标签里

   如果快捷图标在项目文件夹的根目录下的话,一定不要带/

  2.设置版心:

    所谓版心也就是页面中主要内容所在的区域,即页面正中的位置。

   我们的屏蔽设备的分辨率不一样,所以为了提高用户的体验,我们需要使用版心将网站的显示风格统一起来

  3.Fireworks快捷方式:

    I      滴管工具     吸取颜色

     K     切片工具    量取元素的宽度

     Z      放大镜工具   

     V     移动

     A     指针工具

  4.权重的大小:

    继承<标签<类class<id<行内<!important

  5.定位:

    1固定定位   position:fixed

       特点:1 不占据原来在标准流里的位置

        2 模式转换

        3定位的基准是以浏览器为基准的

       2  绝对定位  position:absolute

    特点:1 不占据原来在标准流中的位置

       2可是实现模式的转换

       3 如果父元素设置了定位,绝对定位是相对于父元素而言的,否则就是相对于浏览器而言

      3 相对定位  position: relative

    特点:父盒子1 占据原来在标准流里的位置

          2不能实现模式转换

          3定位是相对于原来在标准流里的位置而言的

      4静态定位  position: static

      静态定位其实就是标准流  

    特点:1 占据原来的位置

       2 不能实现模式转换

       3定位无论怎么设置,都没有效果

 

     子元素是绝对定位的时候,父元素是一个相对定位,那么 父级元素是给子元素设置范围的作用

如果三个元素之间的嵌套的话,就不一定非得是子绝父相,子绝父绝爷相。

定位首先是先找离自己最近的父级元素进行的一个定位,如果父级元素没有定位或是相对定位的话,默认是以浏览器或是文档的左上角为准,如果父级元素有相对定位或是绝对定位的时候,以父级元素的左上角为准。

posted @ 2016-07-23 20:18  程序猿1990  阅读(1088)  评论(1编辑  收藏  举报