码迷,mamicode.com
首页 > 其他好文 > 详细

京东静态页面第二天

时间:2016-07-24 22:42:20      阅读:192      评论:0      收藏:0      [点我收藏+]

标签:

技术分享

第二天完成情况

只做了jd网页的顶部和底部的共同部分

今天所涉及的内容的介绍

 

1.1 
 开发前的准备工作

      1.配置开发环境   sublime  webstorm  vscode  Hbuilder  atom

      2.建立项目文件夹   为了将与项目相关的文件放在一块,便于管理和以后的维护

包括与项目相关的一些文件

主页或是首页    index.html   default.html

 Css文件夹    css文件的   

             base.css     global.css

 Images文件夹  用来放置网站中的所有的图片

 Js文件

 音频或是视频文件

      3. 样式初始化   

    我们的结构中的标签都有默认的样式,在各个浏览器中的显示有可能不尽不同 ,为了保证网站风格的统一或是为了便于我们的开发或是维护,需要将所有的标签 原来的样式清掉,变成统一的样式风格,以便于我们的网站布局。

      4. 分析网站构成  

      做网站的时候也有一个规范或是通例  

  布局的顺序一般是从上到下,从左到右

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

  就在标准流元素当中,宽高是最稳定的,其实才使用padding,最后或者可以使用margin.

 标准流: 一般像div,p这样的块级元素,自己独占一行,像span,a这样的行内元素或是imginput这样的行内块元素,可以一行显示多个,我们把这样的显示方式叫做标准流。normal flow

我们网站结构中的任何标签 都可以看成是一个盒模型,都可以设置宽高,只是有的元素设置了宽高之后,不起作用。

 

要想让行内元素的宽高起作用:

    1. 将行内元素转换成块级元素或是行内块元素

    2. 浮动   脱标   

    3. 定位   脱标

定位有四种:

  Fixed    absolute    relative   static

1.2   background 复合属性

mso-para-margin-left:0.0000gd;text-indent:28.0000pt;mso-char-indent-count:0.0000;">background-attachment: 是否滚动

background: 颜色  图片的链接  是否平铺  背景位置 是否滚动。

 font:  复合属性

 font-weight:  粗度  bold  700    200  500 也可以用数字来表示

 font-size/line-height:  字体大小/行高

 font-family: 字体样式

 font-style: 字体风格   italic

 font: 400  14px/30px “宋体”,

注意一点: 合写的font无论怎么简写,有两样一定得带上,

Font-size     font-family:

1.3  相邻行内块元素的间距问题

布局的时候,相邻的行内块元素之间默认有几像素的外间距。

只能用浮动来解决这个问题。

1.4  Border-radius: 边框半径

有四个值:左上,右上,右下,左下

四个值为元素宽度或是高度的一半的时候,会将元素变成圆形或是椭圆形,峰值只能到达宽度或是高度的一半。

 

 

 

 

1.5  行内元素的margin

行内元素的左右margin是可以起作用的,但是上下的margin是不起作用的。

 

1.6  清除浮动

浮动的原因就是因为父盒子没有高度,原来的高度是靠标准流中的子元素撑起来,但是子元素浮动了之后 ,脱离标准流了,造成父级元素的高度为0;

  1. 给父盒子设置一个高度
  2. Clear: both
  3. Overflow: hidden   触发了BFC模式 也可以用来清除浮动
  4. 伪元素或是双伪元素清除法

.clearfix:before, .clearfix:after {
    /*清除浮动,最好最标准的写法*/
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1; /*IE/7/6*/  /*兼容IE6下的写法*/
}

 

1.7  定位的元素的层级

如果只给一个元素绝对定位,而不写trbl值的话,会以原位显示

定位(相对和绝对或固定)的元素都有一个层级的属性或是概念。如果定位了的相邻多个元素,在同一个位置的话,后面的元素默认会压住前面的元素。如果同样是定位了的元素,默认他们的层级都是0,只不过后面的元素会压住前面的元素。如果想让当前的元素显示在后面的元素之上,这个时候就需要改变层级的关系,z-index来改变。

z-index的取值范围0---9999999,最好是正数,尽量不要用负数。

1.8  列表

ul   li      unordered   list     无序列表

ol   li      ordered   list  有序列表

dl  dt  dd    

   dl:     difinition     list     定义列表

dt     difinition      title 标题

dd      difinition    description      定义描述

 

京东静态页面第二天

标签:

原文地址:http://www.cnblogs.com/yaowei946983706/p/5701692.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!