我将利用三天的时间来完成制作京东首页的静态页面效果，其中包含的内容有html以及css。

1、在开发进行之前，首先要配置开发环境：我们需要安装sublime  webstorm  vscode  Hbuilder  atom等开发软件，选择其一即可。我所使用的是webstorm。

2、在主文件夹中建立相关的项目文件夹 ：为了将与项目相关的文件放在一块，便于管理和以后的维护。

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

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

Css文件夹    css文件的

Base.css     global.css

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

Js文件

音频或是视频文件

3、在这之后我们要进行样式初始化，一般所有网站开发之前都会进行样式初始化，例如淘宝、京东这样的大网站，都有自己的样式初始化css文件。如：

html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img {
    margin: 0;
    padding: 0;
}

fieldset, img, input, button {
    border: none;
    padding: 0;
    margin: 0;
    outline-style: none;
}

ul, ol {
    list-style: none;
}

/*去掉原样式中的小黑点*/
input {
    padding-top: 0;
    padding-bottom: 0;
    font-family: "SimSun", "宋体";
}

select, input {
    vertical-align: middle;
}

/*输入字居中显示*/
select, input, textarea {
    font-size: 12px;
    margin: 0;
}

/**/
textarea {
    resize: none;
}

/*防止拖动*/
img {
    border: 0;
    vertical-align: middle; /*  去掉图片底部默认的3像素空白缝隙*/
}

table {
    border-collapse: collapse; /*合并外连线*/
}

body {
    font: 12px/150% Arial, Verdana, "\5b8b\4f53"; /*unitedCode的写法，宋体的写法*/
    color: #666; /*150%基于当前字体尺寸的百分比行间距*/
    background: #fff;
}

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

.clearfix:after {
    clear: both;
}

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

a {
    color: #666;
    text-decoration: none;
}

a:hover {
    color: #C81623;
}

h1, h2, h3, h4, h5, h6 {
    text-decoration: none;
    font-weight: normal;
    font-size: 100%;
}

s, i, em {
    font-style: normal;
    text-decoration: none;
}

.col-red {
    color: #C81623 !important;/*京东主色调*/
}

/*公共类*/
.w {
    /*版心 提取 */
    width: 1210px;
    margin: 0 auto;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.al {
    text-align: left;
}

.ac {
    text-align: center;
}

.ar {
    text-align: right;
}

.hide {
    display: none;
}

这样可以方便开发人员对各个标签的样式的初始化以及公共类的重用。

4、分析网站结构

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

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

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

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

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

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

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

2. 浮动   脱标

3. 定位   脱标

在布局行内块元素时，行内块元素之间有默认的几像素的间距。这几像素的间距只能用浮动来清除。

定位有四种：

Fixed    absolute    relative   static

一般我们在分析网站结构时，使用火狐浏览器可以将这个网页截图之后保存下来：

然后我们可以使用fireworks来提取网站中的具体内容的宽高、颜色等。

Fw的常用快捷键：

I      滴管工具   吸取颜色

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

Z   放大镜工具

V     移动

A     指针工具

常用的复合属性：

Background

mso-char-indent-count:3.4900;">浮动的原因就是因为父盒子没有高度，原来的高度是靠标准流中的子元素撑起来，但是子元素浮动了之后 ，脱离标准流了，造成父级元素的高度为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下的写法*/
}

（一般常用伪元素的方法来清除浮动）

定位元素的层级问题：

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

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

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

另外要注意，position:relative依旧会占据标准流中的位置，会导致其他内容无法在其层级上显示。

透明度opacity

Opacity:有兼容性问题，而且不但让背景颜色透明，而且还让里面的内容也透明

background: rgba(0,0,0,.3);

仅让背景色透明，内容不透明

相邻元素的层级问题

淘宝网页中鼠标移入后边框闪现效果

<style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            width: 200px;
            height: 500px;
            border: 10px solid blue;
            float: left;
            /*margin-right: 10px;*/
            margin-left: -10px;
            position: relative; /*定位了的元素，默认的都会有层级的概念，而且默认的层级都是0*/
        }
        div:hover {
            border-color: red;
            position: relative;
            z-index: 1;
        }
    </style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>

这样就可以通过相邻元素的层级问题，用hover伪元素来控制边框的颜色以及其他属性，达到淘宝那样的效果。

简单html以及css的用法的更多相关文章

  1. 牢记 31 种 CSS 选择器用法

    原文 The 30 CSS Selectors you Must Memorize 由 Jeffrey Way 发表于 2011 年 6 月,介绍了 30 种最常用的 CSS 选择器用法,多加了一种, ...

  2. 网页重构应该避免的10大 CSS 糟糕用法

    对于网页重构来说,CSS禅意花园 是网页布局从 table 表格转到了 html +css 的标志 .这些年来,随着我们的网站越来越复杂:html5,css3,新的技术.新的属性,越来越多的开发者开始 ...

  3. CSS3基础——笔记+实战案例(CSS基本用法、CSS层叠性、CSS继承性)

    CSS3基础——笔记 CSS是Cascading Style Sheet的缩写,翻译为"层叠样式表" 或 "级联样式表".CSS定义如何显示HTML的标签央视, ...

  4. 网页重构应该避免的10大CSS糟糕用法

    对于网页重构来说,CSS禅意花园 是网页布局从 table 表格转到了 html +css 的标志 .这些年来,随着我们的网站越来越复杂:html5,css3,新的技术.新的属性,越来越多的开发者开始 ...

  5. css奇特用法之 IMG添加背景图片配合显示--效果惊艳

    IMG标签本身是显示图片的,但通过CSS可以再为其设置背景图片,让其和自身的图片配合来显示,最终的效果会让你惊叹.当然,这个发现来自于老外,所以代码马上与大家分享.再此之前,我也从来没有想到过这个思路 ...

  6. Css相关用法个人总结

    Css相关用法个人总结

  7. css !important用法以及CSS样式使用优先级判断

    之前一直看到很多css中都有!important这个样式,一直不知道有什么作用的,今天在网上详细了解了一下,看了别人的博客,顺便转载收藏一下 css !important用法CSS样式使用优先级判断 ...

  8. 跨平台移动开发 Xuijs超轻量级的框架Style CSS属性用法

    PhoneGap里面推荐使用的超轻量级的框架 Style CSS属性用法 设置css属性:setstyle 通过ID设置css属性 x$('#top1').setStyle('color', '#DB ...

  9. python简单的函数定义和用法实例

    python简单的函数定义和用法实例 这篇文章主要介绍了python简单的函数定义和用法,实例分析了Python自定义函数及其使用方法,具有一定参考借鉴价值,需要的朋友可以参考下 具体分析如下: 这里 ...

随机推荐

  1. SQL SERVER 2008 nvarchar 转换 deciaml 失败（nvarchar to decimal)

    转换数据发生 消息 8115,级别 16,状态 6,第 1 行 将 nvarchar 转换为数据类型 numeric 时出现算术溢出错误. nvarchar 是带很长小数,直接转换成decimal 失 ...

  2. MAC——laravel环境

    apache: 目录:etc/apache2 重启:sudo apachectl restart PHP: 把/etc/php.ini.default复制并重命名/ect/php.ini 打开Load ...

  3. DEDECMS-helper小助手扩展

    今天在做DEDE动态调用模板的时候卡住了,后终被强大的互联网解决,记录解决问题的过程,以备后用 可以在/data/helper.inc.php中进行默认小助手初始化的设置,系统默认载入小助手 例如创建 ...

  4. ExtJS 4 Grids 详解

    Grid Panel是ExtJS最常用的组件之一,它的功能非常丰富,提供了非常便捷的方法执行排序,分组,编辑数据. Basic Grid Panel 基本表格面板 让我们创建一个简单的表格,这有创建和 ...

  5. wordpress 设置头像

    默认的wordpress头像是第三方的.. 如果想自己上传.就得装插件了 WP User Avatar 安装完成后..设置下面就会出现这个选项..然后自己就可以上传头像了 原文:http://abuj ...

  6. [BZOJ 1207] [HNOI 2004] 打鼹鼠 【DP】

    题目链接:BZOJ - 1207 题目分析 每一次打鼹鼠一定是从上一次打某只鼹鼠转移过来的,从打第 j 只鼹鼠能不能转移到打第 i 只鼹鼠,算一下曼哈顿距离和时间差就知道了. 那么就有一个 DP ,用 ...

  7. index rang scan

    根:分支的范围,范围块的地址 ----- begin tree dump branch: 0x1000c93 16780435 (0: nrow: 5, level: 1)    leaf: 0x10 ...

  8. Linux目录树

    Linux目录树(directory tree) 分层结构(不同于数据库文件系统),单个文件/目录的最大长度为255个字符,完整路径为4096个字符 特殊的文件系统 文件系统 挂载点 说明 Root ...

  9. France \'98（概率）

    题目描述 Today the first round of the Soccer World Championship in France is coming to an end. 16 countr ...

  10. -_-#【jQuery插件】Colorpicker 颜色选择器

    Spectrum - The No Hassle jQuery Colorpicker (jQuery 插件) Color Picker jQuery plugins (jQuery 插件) colo ...