需求：用HTML5+CSS渲染做一个极米商城界面
工具：火狐浏览器、谷歌浏览器（IE浏览器次选），HBuilder 试用对象：html5初学者
说明： a：软件HBuilder不需要要配置环境，直接用即可，使用方法和eclipse相似； b：在建立html文件后需要用css去渲染，下面的步骤2、3是同时进行的； c：程序中会使用到许多图标，读者可以先去步骤5、6中截取保存下来。 下面不罗嗦，直接上代码
1、首先建立一个web文件，我的命名为JiMi；再建立一个html文件，我的命名为jimishop； 2、html中代码（jimishop.html）极米商城 
常见问题
- 面向问题
- 画面问题
- 3D效果
- 设备问题
- 一般故障
- 售后服务
3、在第2步html代码中，写完body中第一个div时，我们需要用css去渲染，这时需要在你建立web项目下的css中建立一个css文件，我建立的命名为css1；
css代码如下（css1.css）*{ margin: 0px; padding: 0px;}a{ /*去除a标签下划线*/ text-decoration: none;}body{ background-color: gainsboro;}ul{ list-style: none;}.header,.banner,.nav,.zd,.sale,.js{ width: 1200px; /*增大*/ margin: 0px auto;}.nav,.zd,.sale,.js{ width: 1160px; margin-left: 103px;}/*头*/.header{ height: 59px; background-color: black;}.header_left,.header_center,.header_right{ float: left;}.header_left{ width: 204px; height: 60px;}.header_left img{ margin: 22px 0px 0px 33px;}.header_center{ width: 877px;}.header_center li{ float: left;}.header_center li a{ height: 61px; line-height: 61px; /*线高和高度相等时默认居中*/ color: white; margin-right: 40px;}.header_right img{ margin-top:20px ;}.header_right .shop{ margin-right:20px;}.banner{ height: 452px;}/*.nav dl{ float: left; }.nav dl{ height: 150px; background-color: white;}.nav dl dt{ margin: 30px 0px 20px 20px;}.nav dl dd{ margin: 5px 100px 20px 20px;}*/.nav,.zd{ height: 200px; margin-top: 40px;}h3{ font-size: 20px;}.problem_list{ margin-top: 29px; width: 1144px; height: 138px; background-color: white; padding-top: 20px;}.problem_list dl{ width: 187px; height: 117px; border-right: 1px solid gainsboro; text-align: center; float:left; }.problem_list dl dt{ margin: 20px;}.problem_list .None{ border: 0px;}.zd{ height: 770px; margin-top: 40px;}.server_list{ margin-top: 20px; height: 720px;}.server_list li{ float: left; width: 364.5px;/*350*/ height: 214px; margin: 0px 22px 22px 0px;}.server_list li a{ text-align:center; width: 365px; height: 214px; background-color: #8f8f8f; display: block;}.server_list a img{ margin-top: 40px; margin-bottom: 20px;}.server_list a span{ display: block; color: white;}/*售后*/.sale{ height: 80px; border-bottom: 1px solid black; background-color: white; font-size:0; padding-top: 45px;}.sale a{ font-size: 16px; display: inline-block; width: 290px; }.sale a img{ vertical-align: middle; margin-right: 15px;}.js{ height: 100px; margin-top: 40px;}.js li{ float: left; width: 250px; height: 100px; margin: 0px 22px 22px 0px;}.js li a{ text-align:center; width: 365px; height: 214px; /*background-color: #8f8f8f;*/ /*display: block;*/}.js .hou{ border-left: 1px solid black;} 4、代码中的数据自己可以试着调试，每个人电脑分辨率不同，数据也会不同，尽量调到适合自己电脑适合的界面
5、用到的图形组件图（自己可以对于截图保存，然后引入程序中）
6、我的运行效果图 
