用Hbulider做一个小项目

假设你现在有Hbuilder，我用的是Hbuilder。（没有的亲可以去下载，这是官网网址：http://www.dcloud.io/）

首先你安装好之后的打开页面应该是这样子的

然后新建一个web项目

此时弹出此窗口

只需要想我一样写个项目名字，选个文件路径就可以了。

然后如下图:(我们就可以进入开发啦)

右击img文件--》然后点击打开文件所在目录--》

然后把以下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="data: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 ;
}

htmlcss，Hbuilder入门小项目——我的淘宝，相似相关推荐

python将整数逆序_python练手入门小项目：字符串的妙用
题目来源:小行:python练手入门小项目详解(一) 1 给任意一个的正整数,要求:一.求它是几位数,二.逆序打印出各位数字. 代码: def reversed_integer(number):ass ...
STM32学习——入门小项目
博客地址:STM32学习--入门小项目 – Infinite's Blog 这个小项目是来自参加电设时,老师发的STM32入门(进阶)任务,具体的要求如下: 软件设计要求编写简单I/O程序,能用板上 ...
JavaFX开发桌面，移动端，嵌入式权威指南（一）—— JavaFX桌面入门小项目
目录概述代码结果总结 JavaFX应用舞台和场景显示图像显示文字将文本节点作为组动画文本向上滚动概述 JavaFX是用于构建富互联网应用程序的Java库.使用JavaFX开发的应用 ...
SSM入门小项目----学生信息管理系统
SSM入门小项目----学生信息管理系统学习了SSM后,自己想动手写个小项目,巩固一下.选择了比较简单的学生信息管理系统,项目比较简单,包括的功能有:登录.学生信息的增删改查.分页(前端实现). 本 ...
html+css入门小项目巩固练习
html+css入门小项目巩固练习在B站通过视频复习了之前在学校学习的前端知识,然后在B站找了一个小的实战项目跟着练习,花了半天的时间实现如下: 1.首页 2.关于我们 3.联系我们码云源码地址: ...
后盾网lavarel视频项目---5、淘宝镜像cnpm的原理及如何使用
后盾网lavarel视频项目---5.淘宝镜像cnpm的原理及如何使用一.总结一句话总结: 原理:把npm上面的所有软件copy过来使用:npm install -g cnpm --regist ...
Python项目实战 —— 04. 淘宝用户行为分析
Python项目实战 Python项目实战--目录 Python项目实战 -- 04. 淘宝用户行为分析一.背景二.解题思路三.数据分析 3.1 数据清洗 3.2 数据分析 3.2.1 用户整体 ...
微信小程序仿京东淘宝商品排序
微信小程序仿京东淘宝商品排序效果图如下所示仿京东微信小程序视频请加QQ:1010753897 下载地址:https://download.csdn.net/download/qq_43764578 ...
安卓项目实践——仿淘宝界面(二)——底部导航栏技术（Fragment实现）
安卓项目实践--仿淘宝界面(一)--底部导航栏技术(Fragment实现) 1.实现效果展示 2.技术简述该导航栏主要使用Fragment技术实现,关于Fragment的介绍大家可以自行百度,导航栏 ...

htmlcss，Hbuilder入门小项目——我的淘宝，相似

用Hbulider做一个小项目

htmlcss，Hbuilder入门小项目——我的淘宝，相似相关推荐

最新文章

热门文章