用Hbulider做一个小项目
假设你现在有Hbuilder，我用的是Hbuilder。（没有的亲可以去下载，这是官网网址：http://www.dcloud.io/）
首先你安装好之后的打开页面应该是这样子的
然后新建一个web项目
此时弹出此窗口
只需要想我一样写个项目名字，选个文件路径就可以了。
然后如下图:(我们就可以进入开发啦)
右击img文件--》然后点击打开文件所在目录--》
扫描二维码关注公众号，回复：
5027339 查看本文章
然后把以下4张图片复制或者另存为，去保存到上面这个目录中。
1、命名：icon.png 图片： 
2、命名：bg.png 图片：
3、命名：title.png 图片：
4、命名：pic01.jpg 图片： 
点击index.html进行html代码编写。
html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的淘宝</title>
<link rel="stylesheet" href="../css/style.css">
<!-- link+tab 链接外部的css，href路径 ref文件类型-->
</head>
<body>
<!-- div实现大区域大面积的排版 -->
<div>
<!-- 引入标题 -->
<h3><img src="images/title.png" alt="我的淘宝" title="我的淘宝"></h3>
<!-- ul实现结构类似的布局 -->
<ul>
<li>
<img src="img/pic01.jpg" alt="" class="top">
<p class="des">日韩镀白金版奥地利水晶手链日韩镀白金版奥地利水晶手链</p>
<p class="price">
<img src="../img/icon.png" alt="">
<span>￥49</span>
<span class="sales">销量：20</span>
<!-- 一个标签浮动，同级标签必须浮动 -->
</p>
<!-- 找相似 -->
<a href="#">
<h6>找相似</h6>
<!-- h1-h6用来引入标题 -->
<p>发现更多宝贝</p>
</a>
</li>
<li>
<img src="img/pic01.jpg" alt="" class="top">
<p class="des">日韩镀白金版奥地利水晶手链日韩镀白金版奥地利水晶手链</p>
<p class="price">
<img src="img/icon.png" alt="">
<span>￥49</span>
<span class="sales">销量：20</span>
<!-- 一个标签浮动，同级标签必须浮动 -->
</p>
<!-- 找相似 -->
<a href="#">
<h6>找相似</h6>
<!-- h1-h6用来引入标题 -->
<p>发现更多宝贝</p>
</a>
</li>
<li>
<img src="img/pic01.jpg" alt="" class="top">
<p class="des">日韩镀白金版奥地利水晶手链日韩镀白金版奥地利水晶手链</p>
<p class="price">
<img src="img/icon.png" alt="">
<span>￥49</span>
<span class="sales">销量：20</span>
<!-- 一个标签浮动，同级标签必须浮动 -->
</p>
<!-- 找相似 -->
<a href="#">
<h6>找相似</h6>
<!-- h1-h6用来引入标题 -->
<p>发现更多宝贝</p>
</a>
</li>
<li>
<img src="img/pic01.jpg" alt="" class="top">
<p class="des">日韩镀白金版奥地利水晶手链日韩镀白金版奥地利水晶手链</p>
<p class="price">
<img src="img/icon.png" alt="">
<span>￥49</span>
<span class="sales">销量：20</span>
<!-- 一个标签浮动，同级标签必须浮动 -->
</p>
<!-- 找相似 -->
<a href="#">
<h6>找相似</h6>
<!-- h1-h6用来引入标题 -->
<p>发现更多宝贝</p>
</a>
</li>
<li>
<img src="img/pic01.jpg" alt="" class="top">
<p class="des">日韩镀白金版奥地利水晶手链日韩镀白金版奥地利水晶手链</p>
<p class="price">
<img src="img/icon.png" alt="">
<span>￥49</span>
<span class="sales">销量：20</span>
<!-- 一个标签浮动，同级标签必须浮动 -->
</p>
<!-- 找相似 -->
<a href="#">
<h6>找相似</h6>
<!-- h1-h6用来引入标题 -->
<p>发现更多宝贝</p>
</a>
</li>
<li>
<img src="img/pic01.jpg" alt="" class="top">
<p class="des">日韩镀白金版奥地利水晶手链日韩镀白金版奥地利水晶手链</p>
<p class="price">
<img src="img/icon.png" alt="">
<span>￥49</span>
<span class="sales">销量：20</span>
<!-- 一个标签浮动，同级标签必须浮动 -->
</p>
<!-- 找相似 -->
<a href="#">
<h6>找相似</h6>
<!-- h1-h6用来引入标题 -->
<p>发现更多宝贝</p>
</a>
</li>
</ul>
</div>
</body>
<!--
网站设计思想：从整体到局部，从上到下，从左到右
父级标签和子集标签要换行空格
同级标签分行
-->
</html>右击css文件夹，新建style.css文件，添加html的样式（html只是把网页的框架搭建出来，而css可以用来让网页变得更美观）。
css：
* {
padding: 0px;
margin: 0px;
list-style: none;
/* 列表样式 */
}
body {
background: #f1f1f1;
}
div {
width: 1210px;
margin: 20px auto;
background: #ffffff;
}
h3 {
height: 36px;
text-align: center;
/*文本类使用text-align:center*/
}
ul {
width: 1160px;
margin: 0 auto;
overflow: hidden;
}
li {
width: 222px;
height: 305px;
margin: 30px 10px 0px 0px;
background-color: #f5f5f5;
float: left;
/*子集浮动，父集检测不到子集，此时只需要给父集清除浮动*/
position: relative;
transition:all 2s;
/*让标签变化过程可见*/
cursor: pointer;
border: 1px solid #FFFFFF ;
}
/* 选择同级标签第5n个 n从1开始*/
li:nth-of-type(5n) {
margin-right: 0px;
}
/* 选择器不得超过三级 */
.top {
width: 222px;
height: 222px;
}
.des {
font-size: 13px;
color: #6c6c6c;
line-height: ;
margin: 3px 12px;
}
.price {
font-size: 12px;
line-height: 18px;
color: #ff4400;
margin: 15px 12px 0px 12px;
}
.price img {
width: 16px;
height: 16px;
margin-right: 2px;
}
.sales {
float: right;
color: #9ca0aa;
/* 一个标签浮动，同级标签必须浮动 */
}
/*空格代表后代选择器
.bottom img选择类名为bottom内部的img的标签*/
.price img {
float: left;
}
.price span:nth-of-type(1) {
color: #f40;
font-weight: bold;
float: left;
}
a {
width: 222px;
height: 82px;
color: #ffffff;
text-decoration: none;
background: url('../images/bg.png');
position: absolute;
/*子级绝对定位position: absolute;，父集相对定位position:relative;。
可以让子级固定在父级某个位置（top left right bottom）
top和bottom只设置一个方向
*/
bottom: 0px;
left: 0px;
text-align: center;
/*与文字有关的样式基本 都可以被继承，可减少代码量*/
transition:all 2s;
opacity: 0;
}
h6 {
width: 120px;
margin: 0 auto;
font-style: normal;
text-align: center;
padding-bottom: 7px;
border-bottom: 1px solid #d65915;
/*线的粗细，线的类型 solid实线，dashed虚线，线的颜色*/
font-size: 17px;
margin-top: 21px;
margin-bottom: 5px;
}
a p {
font-size: 13px;
}
/*鼠标移入li操作后代a*/
li:hover a{
opacity: 1;
}
li:hover{
border: 1px solid #FF4400 ;
}