简单html以及css的用法详解

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

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

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

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

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

 Css文件夹    css文件的  

             Base.css     global.css

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

 Js文件

 音频或是视频文件

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

1. html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img {   
2.     margin: 0;   
3.     padding: 0;   
4. }   
5.   
6. fieldset, img, input, button {   
7.     border: none;   
8.     padding: 0;   
9.     margin: 0;   
10.     outline-style: none;   
11. }   
12.   
13. ul, ol {   
14.     list-style: none;   
15. }   
16.   
17. /*去掉原样式中的小黑点*/   
18. input {   
19.     padding-top: 0;   
20.     padding-bottom: 0;   
21.     font-family: "SimSun", "宋体";   
22. }   
23.   
24. select, input {   
25.     vertical-align: middle;   
26. }   
27.   
28. /*输入字居中显示*/   
29. select, input, textarea {   
30.     font-size: 12px;   
31.     margin: 0;   
32. }   
33.   
34. /**/   
35. textarea {   
36.     resize: none;   
37. }   
38.   
39. /*防止拖动*/   
40. img {   
41.     border: 0;   
42.     vertical-align: middle; /*  去掉图片底部默认的3像素空白缝隙*/   
43. }   
44.   
45. table {   
46.     border-collapse: collapse; /*合并外连线*/   
47. }   
48.   
49. body {   
50.     font: 12px/150% Arial, Verdana, "\5b8b\4f53"; /*unitedCode的写法，宋体的写法*/   
51.     color: #666; /*150%基于当前字体尺寸的百分比行间距*/   
52.     background: #fff;   
53. }   
54.   
55. .clearfix:before, .clearfix:after {   
56.     /*清除浮动，最好最标准的写法*/   
57.     content: "";   
58.     display: table;   
59. }   
60.   
61. .clearfix:after {   
62.     clear: both;   
63. }   
64.   
65. .clearfix {   
66.     *zoom: 1; /*IE/7/6*/  /*兼容IE6下的写法*/   
67. }   
68.   
69. a {   
70.     color: #666;   
71.     text-decoration: none;   
72. }   
73.   
74. a:hover {   
75.     color: #C81623;   
76. }   
77.   
78. h1, h2, h3, h4, h5, h6 {   
79.     text-decoration: none;   
80.     font-weight: normal;   
81.     font-size: 100%;   
82. }   
83.   
84. s, i, em {   
85.     font-style: normal;   
86.     text-decoration: none;   
87. }   
88.   
89. .col-red {   
90.     color: #C81623 !important;/*京东主色调*/   
91. }   
92.   
93. /*公共类*/