基础复习(京东静态页面的实现)第一天

 

 一、前言

    作为一个技术小白决定记录下自己前端学习过程的点点滴滴,欢迎各为大神轻喷!

 二、引入

    前端最为基础的就是Html、css、js,为了巩固并且加强自己的基础所以挑选出了京东的静态页面作为这三天的复习内容!在第一天中我首先完成的是页面的快速导航、头部广告、搜索栏三个基础页面!

 三、重点内容

  ㈠ 开发前的准备工作:

   在开始一个完整的项目之前首先要做的并不是着急的去写代码,完成项目前的准备工作。项目的准备工作可以分为以下几个部分

    ① 配置开发环境     ② 建立项目文件夹     ③css文件的样式初始化     ④ 分析网站的构成

  ㈡ css样式书写的位置:

    css作为页面的"衣服"当然有他特定的"衣柜"。而"衣柜"的不同就存在着一定的优先级的问题!

     ① 行内式:

              <div style="font-size: 12px"></div>

     ② 外链式:

              <head lang="en">
                  <meta charset="UTF-8">
                  <title></title>
                  <link rel="stylesheet" href="css/base.css"/>
              </head>

     ③ 内嵌式:

              <style>
                  input { 
                      outline-style: none ;
                  }   
                  textarea {
                      resize: none;
                  }
              </style>

    除了这三种的样式之外还有一种基本不怎么用的样式叫做导入时,因为出现次数很少所以不予以记录。而且这三种样式也有着一定的优先级

     内嵌式>行内式>外链式

  ㈢ 通栏、版心的概念以及意义:

   ① 通栏是指和一个整版宽度相同、但是面积不到半个版的排版方式。

   ② 版心:

        概念:是页面中主要内容所在的区域。即每页版面正中的位置,又叫节口。

        意义:因为我们的屏蔽设备的分辨率不一样吧,因此 显示网站的风格有可能不一样的,为了提高用户的体验,将网站的显示风格统一起来,因此需要给网站设置一个版心

  ㈣ 定位的使用:

   在css一共有着四种定位的方式:

    ① 固定定位:不占位、脱标、定位以浏览器为基础(position:fixed)

    ② 绝对定位:不占位、脱标、父元素有定位以父元素为基础否则以浏览器为基础(position:absolute )

    ③ 相对定位:占位、不脱标、相对于原来标准流里面的位置(position: relative)

    ④ 静态定位:占位、不脱标、没有效果(position:static)

      需要注意的是,在定位一直有着一个口诀叫做"子绝父相"其含义是子元素是绝对定位的时候,父元素是一个相对定位,那么父级元素是给子元素设置范围的作用。但是如果是三个元素之间的嵌套的话不一定要遵守这个口诀了。定位首先是先找离自己最近的父级元素进行的一个定位,如果父级元素没有定位或是相对定位的话,默认是以浏览器或是文档的左上角为准,如果父级元素有相对定位或是绝对定位的时候,以父级元素的左上角为准。

  ㈤ 权重的问题

    在css样式的书写的过程中有发现设置的样式没有被实现,而在浏览器中查看的时候显示的被贯穿线贯穿。这个时候很有可能出现的问题就是权重较低而别覆盖。那么根据选择器的不同也就会导致权重的不同,下面就是选择器的权重优先级

    标签选择器< 类选择器<id选择器<行内样式<!important

            

  ㈥ Fw的使用以及font复合属性

    Fireworks是一款创建与优化 Web 图像和快速构建网站与 Web 界面原型的理想工具。Fireworks 不仅具备编辑矢量图形与位图图像的灵活性,

    还提供了一个预先构建资源的公用库。熟练的使用Fw也是一个基础小白应该做到,其中几个最重要的快捷键如下:

     ① I 滴管工具 吸取颜色  ② K  切片工具  量取元素的宽度  ③ Z  放大镜工具  ④ V  移动  ⑤A  指针工具

    font符合属性用于简写属性在一个声明中设置所有字体属性。按顺序可设置如下属性:

     ① font-style 字体的样式  ② font-variant 字体的异体  ③ font-weight 字体的粗细  ④ font-size/line-height字体的尺寸和行高  

     ⑤ font-family 字体的系列样式

 四、总结

    学习是个循序渐进的过程不进则退,在今天需要掌握的主要内容已经如上所列(没有基础的请参照w3c的Html,css基础)。

五、效果图

 

 

posted on 2016-07-24 00:12  Mr.Miracle  阅读(1233)  评论(0编辑  收藏  举报