1、引言
设计结课作业,课程设计无处下手，网页要求的总数量太多？没有合适的模板？数据库，java，python，vue，html作业复杂工程量过大？毕设毫无头绪等等一系列问题。你想要解决的问题，在微信公众号“coding加油站”中全部会得到解决
2、作品介绍
可爱多肉网页设计系统采用html，css技术来实现，符合所学知识体系，适用于常见的作业以及课程设计，需要获取更多的作品，请关注微信公众号：coding加油站，获取，如需更多资料，可在微信后台留言。欢迎大家来提问，交流学习。
2.1、作品简介方面
可爱多肉网页设计采用常规方式来实现，符合绝大部分的要求。代码配置有相关文档讲解，如需从代码中学到知识点，那么这个作品将是你的不二之选
2.2、作品二次开发工具
此作品代码相对简单，基本使用课堂中所学知识点来完成，只需要修改相关的介绍文字，一些图片，就可以改为自己独一无二的代码，网页作品下载后可使用任意编辑软件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用）。
2.3、作品技术介绍
html网页作品技术方面：使用CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等相关技术来美化相关界面，部分采用了javascript来做校验。 使用html5，以及css3等相关技术完成技术的布局，在本作品中，会使用常见的布局，常见的浮动布局，flex布局都会有使用到哦。同时在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识，同时使用了一些js的相关知识。例如使用到了dom，和bom来获取浏览器的相关api，同时使用css对样式进行相关的美化，使得界面更加符合网页设计
3、作品演示
【coding加油站】HTML设计--可爱多肉网站设计（多肉）
3.1、首页
相关代码：
<main>
<aside id="left">
<ul >
<li ><a href="#duorou">趣味多肉</a></li>
<li><a href="#penqi">精致盆器</a></li>
<li><a href="#zhuangshi">装饰材料</a></li>
<li><a href="#zhongzi">神奇种子</a></li>
<li><a href="#turang">土壤彩石</a></li>
<li><a href="#huafei">花肥养殖</a></li>
<li><a href="#gongju">园艺工具</a></li>
</ul>
</aside>
<section id="main">
<!--section1 多肉-->
<section id="duorou">
<h4>趣味多肉</h4>
<ul>
<li><a href="#"><figure><img src="img/j1.jpg" alt="仙女杯属西陌莎"/><figcaption>西陌莎</figcaption></figure></a></li>
<li><a href="#"><figure><img src="img/j2.jpg" alt="拟石莲花属姬葡萄"/><figcaption>姬葡萄</figcaption></figure></a></li>
<li><a href="#"><figure><img src="img/j3.jpg" alt="景天属克雷吉"/><figcaption>克雷吉</figcaption></figure></a></li>
<li><a href="#"><figure><img src="img/j4.jpg" alt="厚叶草属青星美人"/><figcaption>青星美人</figcaption></figure></a></li>
<li><a href="#"><figure><img src="img/j5.jpg" alt="莲花掌属黑法师"/><figcaption>黑法师</figcaption></figure></a></li>
<li><a href="#"><figure><img src="img/j6.jpg" alt="青锁龙属钱串"/><figcaption>钱串</figcaption></figure></a></li>
<li><a href="#"><figure><img src="img/j7.jpg" alt="伽蓝菜属金景天"/><figcaption>金景天</figcaption></figure></a></li>
<li><a href="#"><figure><img src="img/j8.jpg" alt="长生草属观音莲"/><figcaption>观音莲</figcaption></figure></a></li>
<li><a href="#"><figure><img src="img/j9.jpg" alt="风车草属桃之卵"/><figcaption>桃之卵</figcaption></figure></a></li>
<li><a href="#"><figure><img src="img/j10.jpg" alt="银波锦属熊童子"/><figcaption>熊童子</figcaption></figure></a></li>
<li><a href="#"><figure><img src="img/f1.jpg" alt="生石花属橄榄玉"/><figcaption>橄榄玉</figcaption></figure></a></li>
<li><a href="#"><figure><img src="img/f2.jpg" alt="肉锥花属群碧玉"/><figcaption>群碧玉</figcaption></figure></a></li>
<li><a href="#"><figure><img src="img/d1.jpg" alt="大戟属光棍树"/><figcaption>光棍树</figcaption></figure></a></li>
<li><a href="#"><figure><img src="img/ju1.jpg" alt="千里光属银月"/><figcaption>银月</figcaption></figure></a></li>
<li><a href="#"><figure><img src="img/l1.jpg" alt="龙舌兰属王妃雷神"/><figcaption>王妃雷神</figcaption></figure></a></li>
<li><a href="#"><figure><img src="img/b1.jpg" alt="十二卷属姬玉露"/><figcaption>姬玉露</figcaption></figure></a></li>
<li><a href="#"><figure><img src="img/x1.jpg" alt="老乐柱属幻乐"/><figcaption>幻乐</figcaption></figure></a></li>
<li><a href="#"><figure><img src="img/x2.jpg" alt="松露玉"/><figcaption>松露玉</figcaption></figure></a></li>
</ul>
</section>
<!--section2 盆器-->
<section id="penqi">
<h4>精致盆器</h4>
<ul>
<li><a href="#"><figure><img src="img/jian1.jpg" alt="简约白瓷"/><figcaption>简约白瓷</figcaption></figure></a></li>
<li><a href="#"><figure><img src="img/jian2.jpg" alt="简约白瓷"/><figcaption>简约白瓷</figcaption></figure></a></li>
<li><a href="#"><figure><img src="img/hong1.gif" alt="红陶花器"/><figcaption>红陶花器</figcaption></figure></a></li>
<li><a href="#"><figure><img src="img/hong2.jpg" alt="红陶花器"/><figcaption>红陶花器</figcaption></figure></a></li>
<li><a href="#"><figure><img src="img/jian1.jpg" alt="木质花器"/><figcaption>木质花器</figcaption></figure></a></li>
<li><a href="#"><figure><img src="img/mu1.jpg" alt="木质花器"/><figcaption>木质花器</figcaption></figure></a></li>
<li><a href="#"><figure><img src="img/bo1.jpg" alt="玻璃花瓶"/><figcaption>玻璃花瓶</figcaption></figure></a></li>
<li><a href="#"><figure><img src="img/bo2.jpg" alt="玻璃花瓶"/><figcaption>玻璃花瓶</figcaption></figure></a></li>
<li><a href="#"><figure><img src="img/su1.jpg" alt="塑料花瓶"/><figcaption>塑料花盘</figcaption></figure></a></li>
<li><a href="#"><figure><img src="img/su2.jpg" alt="塑料花瓶"/><figcaption>塑料花盘</figcaption></figure></a></li>
<li><a href="#"><figure><img src="img/chuang1.jpg" alt="创意花器"/><figcaption>创意花器</figcaption></figure></a></li>
<li><a href="#"><figure><img src="img/chuang2.jpg" alt="创意花器"/><figcaption>创意花器</figcaption></figure></a></li>
<li><a href="#"><figure><img src="img/chuang3.jpg" alt="创意花器"/><figcaption>创意花器</figcaption></figure></a></li>
<li><a href="#"><figure><img src="img/chuang4.jpg" alt="创意花器"/><figcaption>创意花器</figcaption></figure></a></li>
<li><a href="#"><figure><img src="img/chuang5.jpg" alt="创意花器"/><figcaption>创意花器</figcaption></figure></a></li>
</ul>
</section>
<!--section3 装饰-->
<!--改-->
<section id="zhuangshi">
<h4>装饰材料</h4>
<ul>
<li><a href="#"><figure><img src="img/zhuang1.jpg" alt="装饰材料"/><figcaption>装饰材料</figcaption></figure></a></li>
<li><a href="#"><figure><img src="img/zhuang2.jpg" alt="装饰材料"/><figcaption>装饰材料</figcaption></figure></a></li>
<li><a href="#"><figure><img src="img/zhuang3.jpg" alt="装饰材料"/><figcaption>装饰材料</figcaption></figure></a></li>
<li><a href="#"><figure><img src="img/zhuang1.jpg" alt="装饰材料"/><figcaption>装饰材料</figcaption></figure></a></li>
<li><a href="#"><figure><img src="img/zhuang1.jpg" alt="装饰材料"/><figcaption>装饰材料</figcaption></figure></a></li>
<li><a href="#"><figure><img src="img/zhuang1.jpg" alt="装饰材料"/><figcaption>装饰材料</figcaption></figure></a></li>
<li><a href="#"><figure><img src="img/zhuang1.jpg" alt="装饰材料"/><figcaption>装饰材料</figcaption></figure></a></li>
<li><a href="#"><figure><img src="img/zhuang1.jpg" alt="装饰材料"/><figcaption>装饰材料</figcaption></figure></a></li>
</ul>
</section>
<!--section4 种子-->
<!--改-->
<section id="zhongzi">
<h4>神奇种子</h4>
<ul>
<li><a href="#"><figure><img src="img/zhuang1.jpg" alt="神奇种子"/><figcaption>装饰材料</figcaption></figure></a></li>
<li><a href="#"><figure><img src="img/zhuang2.jpg" alt="神奇种子" /><figcaption>装饰材料</figcaption></figure></a></li>
<li><a href="#"><figure><img src="img/zhuang3.jpg" alt="神奇种子" /><figcaption>装饰材料</figcaption></figure></a></li>
<li><a href="#"><figure><img src="img/zhuang1.jpg" alt="神奇种子"/><figcaption>装饰材料</figcaption></figure></a></li>
<li><a href="#"><figure><img src="img/zhuang1.jpg" alt="神奇种子"/><figcaption>装饰材料</figcaption></figure></a></li>
<li><a href="#"><figure><img src="img/zhuang1.jpg" alt="神奇种子"/><figcaption>装饰材料</figcaption></figure></a></li>
<li><a href="#"><figure><img src="img/zhuang1.jpg" alt="神奇种子"/><figcaption>装饰材料</figcaption></figure></a></li>
<li><a href="#"><figure><img src="img/zhuang1.jpg" alt="神奇种子"/><figcaption>装饰材料</figcaption></figure></a></li>
</ul>
</section>
<!--section5 土壤-->
<section id="turang">
<h4>土壤彩石</h4>
<ul>
<li><a href="#"><figure><img src="img/tao1.jpg" alt="陶粒"/><figcaption>陶粒</figcaption></figure></a></li>
<li><a href="#"><figure><img src="img/wu1.jpg" alt="五合一营养土"/><figcaption>五合一营养土</figcaption></figure></a></li>
<li><a href="#"><figure><img src="img/jiu1.jpg" alt="九合一颗粒土"/><figcaption>九合一颗粒土</figcaption></figure></a></li>
<li><a href="#"><figure><img src="img/honcai1.jpg" alt="虹彩石"/><figcaption>虹彩石</figcaption></figure></a></li>
<li><a href="#"><figure><img src="img/jin1.jpg" alt="进口泥炭"/><figcaption>进口泥炭</figcaption></figure></a></li>
<li><a href="#"><figure><img src="img/lv1.jpg" alt="绿沸石"/><figcaption>绿沸石</figcaption></figure></a></li>
<li><a href="#"><figure><img src="img/qing1.jpg" alt="轻石"/><figcaption>轻石</figcaption></figure></a></li>
<li><a href="#"><figure><img src="img/shui1.jpg" alt="水苔"/><figcaption>水苔</figcaption></figure></a></li>
</ul>
</section>
<!--section6 花肥-->
<section id="huafei">
<h4>花肥养殖</h4>
<ul>
<li><a href="#"><figure><img src="img/duo1.jpg" alt="多菌灵"/><figcaption>多菌灵</figcaption></figure></a></li>
<li><a href="#"><figure><img src="img/sheng1.jpg" alt="生根剂"/><figcaption>多菌灵</figcaption></figure></a></li>
<li><a href="#"><figure><img src="img/mian1.jpg" alt="灭虫剂"/><figcaption>多菌灵</figcaption></figure></a></li>
<li><a href="#"><figure><img src="img/huan1.jpg" alt="缓释剂"/><figcaption>多菌灵</figcaption></figure></a></li>
</ul>
</section>
<!--section7 工具-->
<section id="gongju">
<h4>园艺工具</h4>
<ul>
<li><a href="#"><figure><img src="img/yuan1.jpg" alt="园艺小铲"/><figcaption>园艺小铲</figcaption></figure></a></li>
<li><a href="#"><figure><img src="img/yuan2.jpg" alt="园艺小铲"/><figcaption>园艺小铲</figcaption></figure></a></li>
<li><a href="#"><figure><img src="img/jiao1.jpg" alt="浇水利器"/><figcaption>浇水利器</figcaption></figure></a></li>
<li><a href="#"><figure><img src="img/qi1.jpg" alt="气吹"/><figcaption>气吹</figcaption></figure></a></li>
</ul>
</section>
</section>
<aside id="right">
<h4>多肉百科</h4>
<ul>
<li><a href="http://yidianzixun.com/n/0Fansmyr?s=9&appid=design"><span class="spanimg"><img src="img/w1.jpeg" alt="文章1"/></span><span class="spantitle">【多肉|白而雅的11种多肉】</span></a></li>
<li><a href="http://yidianzixun.com/n/0Fmb58AA?s=9&appid=design"><span class="spanimg"><img src="img/w2.jpeg" alt="文章2"/></span><span class="spantitle">【十种最适合家养的多肉植物】</span></a></li>
<li><a href="http://yidianzixun.com/n/0FiJQdyM?s=9&appid=design"><span class="spanimg"><img src="img/w3.jpeg" alt="文章3"/></span><span class="spantitle">【不小心碰掉的多肉叶子】</span></a></li>
<li><a href="http://yidianzixun.com/n/0FcLkWWx?s=9&appid=design"><span class="spanimg"><img src="img/w4.jpeg" alt="文章4"/></span><span class="spantitle">【养多肉的好处，你知道吗?】</span></a></li>
<li><a href="http://yidianzixun.com/n/0FmkWNp7?s=9&appid=design"><span class="spanimg"><img src="img/w5.jpeg" alt="文章5"/></span><span class="spantitle">【多肉植物的“湿土干栽”？】</span></a></li>
<li><a href="http://yidianzixun.com/n/0F3mUwN2?s=9&appid=design"><span class="spanimg"><img src="img/w6.jpeg" alt="文章6"/></span><span class="spantitle">【楚城花事｜多肉 绿植 干花】</span></a></li>
<li><a href="http://yidianzixun.com/n/0FMDSpF0?s=9&appid=design"><span class="spanimg"><img src="img/w7.jpeg" alt="文章7"/></span><span class="spantitle">【多肉 | 美丽的多肉庭院】</span></a></li>
<li><a href="http://yidianzixun.com/n/0F9vm8c6?s=9&appid=design"><span class="spanimg"><img src="img/w8.jpeg" alt="文章8"/></span><span class="spantitle">【这哪里是多肉，明明是果冻！】</span></a></li>
<li><a href="http://yidianzixun.com/n/0Fk2ZkLM?s=9&appid=design"><span class="spanimg"><img src="img/w9.jpeg" alt="文章9"/></span><span class="spantitle">【又是一年多肉换土时!】</span></a></li>
<li><a href="http://yidianzixun.com/n/0Fm4W8go?s=9&appid=design"><span class="spanimg"><img src="img/w10.jpeg" alt="文章10"/></span><span class="spantitle">【识多肉之初识多肉】</span></a></li>
</ul>
</aside>
</main>3.2、多肉微淘页面
相关代码：
<main>
<div class="wt">
<h4>最新发布</h4>
<div class="seller clearfloat">
<div class="sellerleft">
<div class="sellerimg">
<img src="img/h1.jpg"/>
</div>
<div class="sellerspan">
<span>绣球姑娘</span>
<span>1天前</span>
</div>
</div>
<div class="sellerright">
<a href="#">#热销推荐#</a>
<p><a href="#">三生三世，缘来如此。</a></p>
<ul class="gimg">
<li><img src="img/j1.jpg"/></li>
<li><img src="img/j2.jpg"/></li>
<li><img src="img/j7.jpg"/></li>
<li><img src="img/j8.jpg"/></li>
</ul>
<ul class="dimg">
<li><img src="img/ll.png"/><span>3323</span></li>
<li><img src="img/pl.png"/><span>评论</span></li>
<li><img src="img/zan1.png"/><span>23</span></li>
</ul>
</div>
</div>
<div class="seller clearfloat">
<div class="sellerleft">
<div class="sellerimg">
<img src="img/h2.jpg"/>
</div>
<div class="sellerspan">
<span>旧街</span>
<span>2天前</span>
</div>
</div>
<div class="sellerright">
<a href="#">#萌肉图#</a>
<p><a href="#">立春赏肉，又是一年轮回。</a></p>
<ul class="gimg">
<li><img src="img/j9.jpg"/></li>
<li><img src="img/j10.jpg"/></li>
<li><img src="img/w1.jpeg"/></li>
<li><img src="img/w2.jpeg"/></li>
</ul>
<ul class="dimg">
<li><img src="img/ll.png"/><span>2133</span></li>
<li><img src="img/pl.png"/><span>评论</span></li>
<li><img src="img/zan1.png"/><span>21</span></li>
</ul>
</div>
</div>
<div class="seller clearfloat">
<div class="sellerleft">
<div class="sellerimg">
<img src="img/h3.jpg"/>
</div>
<div class="sellerspan">
<span>冰块儿</span>
<span>2天前</span>
</div>
</div>
<div class="sellerright">
<a href="#">#买家美肉秀#</a>
<p><a href="#">在冬天里的春の多肉。</a></p>
<ul class="gimg">
<li><img src="img/w3.jpeg"/></li>
<li><img src="img/f1.jpg"/></li>
<li><img src="img/w5.jpeg"/></li>
<li><img src="img/f2.jpg"/></li>
</ul>
<ul class="dimg">
<li><img src="img/ll.png"/><span>3452</span></li>
<li><img src="img/pl.png"/><span>评论</span></li>
<li><img src="img/zan1.png"/><span>25</span></li>
</ul>
</div>
</div>
<div class="seller clearfloat">
<div class="sellerleft">
<div class="sellerimg">
<img src="img/h4.jpeg"/>
</div>
<div class="sellerspan">
<span>Blue</span>
<span>2天前</span>
</div>
</div>
<div class="sellerright">
<a href="#">#新春换新#</a>
<p><a href="#">阳光下的多肉，看脸的世界</a></p>
<ul class="gimg">
<li><img src="img/j1.jpg"/></li>
<li><img src="img/j2.jpg"/></li>
<li><img src="img/j7.jpg"/></li>
<li><img src="img/j8.jpg"/></li>
</ul>
<ul class="dimg">
<li><img src="img/ll.png"/><span>1234</span></li>
<li><img src="img/pl.png"/><span>评论</span></li>
<li><img src="img/zan1.png"/><span>35</span></li>
</ul>
</div>
</div>
<div class="seller clearfloat">
<div class="sellerleft">
<div class="sellerimg">
<img src="img/h5.jpg"/>
</div>
<div class="sellerspan">
<span>车厘子</span>
<span>3天前</span>
</div>
</div>
<div class="sellerright">
<a href="#">#热销推荐#</a>
<p><a href="#">有个小暖棚，一切更美好。</a></p>
<ul class="gimg">
<li><img src="img/j1.jpg"/></li>
<li><img src="img/j2.jpg"/></li>
<li><img src="img/j7.jpg"/></li>
<li><img src="img/j8.jpg"/></li>
</ul>
<ul class="dimg">
<li><img src="img/ll.png"/><span>2333</span></li>
<li><img src="img/pl.png"/><span>评论</span></li>
<li><img src="img/zan1.png"/><span>12</span></li>
</ul>
</div>
</div>
<div class="seller clearfloat">
<div class="sellerleft">
<div class="sellerimg">
<img src="img/h6.jpg"/>
</div>
<div class="sellerspan">
<span>Come on</span>
<span>3天前</span>
</div>
</div>
<div class="sellerright">
<a href="#">#热销推荐#</a>
<p><a href="#">是多肉，凡露养。</a></p>
<ul class="gimg">
<li><img src="img/j1.jpg"/></li>
<li><img src="img/j2.jpg"/></li>
<li><img src="img/j7.jpg"/></li>
<li><img src="img/j8.jpg"/></li>
</ul>
<ul class="dimg">
<li><img src="img/ll.png"/><span>2312</span></li>
<li><img src="img/pl.png"/><span>评论</span></li>
<li><img src="img/zan1.png"/><span>14</span></li>
</ul>
</div>
</div>
<div class="seller clearfloat">
<div class="sellerleft">
<div class="sellerimg">
<img src="img/h7.jpg"/>
</div>
<div class="sellerspan">
<span>浮沉</span>
<span>4天前</span>
</div>
</div>
<div class="sellerright">
<a href="#">#热销推荐#</a>
<p><a href="#">包邮区的暖冬美肉。</a></p>
<ul class="gimg">
<li><img src="img/j1.jpg"/></li>
<li><img src="img/j2.jpg"/></li>
<li><img src="img/j7.jpg"/></li>
<li><img src="img/j8.jpg"/></li>
</ul>
<ul class="dimg">
<li><img src="img/ll.png"/><span>3451</span></li>
<li><img src="img/pl.png"/><span>评论</span></li>
<li><img src="img/zan1.png"/><span>45</span></li>
</ul>
</div>
</div>
<div class="seller clearfloat">
<div class="sellerleft">
<div class="sellerimg">
<img src="img/h8.jpg"/>
</div>
<div class="sellerspan">
<span>格式</span>
<span>5天前</span>
</div>
</div>
<div class="sellerright">
<a href="#">#热销推荐#</a>
<p><a href="#">多肉游记之配角也疯狂。</a></p>
<ul class="gimg">
<li><img src="img/j1.jpg"/></li>
<li><img src="img/j2.jpg"/></li>
<li><img src="img/j7.jpg"/></li>
<li><img src="img/j8.jpg"/></li>
</ul>
<ul class="dimg">
<li><img src="img/ll.png"/><span>3323</span></li>
<li><img src="img/pl.png"/><span>评论</span></li>
<li><img src="img/zan1.png"/><span>23</span></li>
</ul>
</div>
</div>
</div>
<aside id="right">
<h4>热门文章</h4>
<ul>
<li><a href="http://yidianzixun.com/n/0Fansmyr?s=9&appid=design"><span class="spanimg"><img src="img/w1.jpeg" alt="文章1"/></span><span class="spantitle">【多肉|白而雅的11种多肉】</span></a></li>
<li><a href="http://yidianzixun.com/n/0Fmb58AA?s=9&appid=design"><span class="spanimg"><img src="img/w2.jpeg" alt="文章2"/></span><span class="spantitle">【十种最适合家养的多肉植物】</span></a></li>
<li><a href="http://yidianzixun.com/n/0FiJQdyM?s=9&appid=design"><span class="spanimg"><img src="img/w3.jpeg" alt="文章3"/></span><span class="spantitle">【不小心碰掉的多肉叶子】</span></a></li>
<li><a href="http://yidianzixun.com/n/0FcLkWWx?s=9&appid=design"><span class="spanimg"><img src="img/w4.jpeg" alt="文章4"/></span><span class="spantitle">【养多肉的好处，你知道吗?】</span></a></li>
<li><a href="http://yidianzixun.com/n/0FmkWNp7?s=9&appid=design"><span class="spanimg"><img src="img/w5.jpeg" alt="文章5"/></span><span class="spantitle">【多肉植物的“湿土干栽”？】</span></a></li>
<li><a href="http://yidianzixun.com/n/0F3mUwN2?s=9&appid=design"><span class="spanimg"><img src="img/w6.jpeg" alt="文章6"/></span><span class="spantitle">【楚城花事｜多肉 绿植 干花】</span></a></li>
<li><a href="http://yidianzixun.com/n/0FMDSpF0?s=9&appid=design"><span class="spanimg"><img src="img/w7.jpeg" alt="文章7"/></span><span class="spantitle">【多肉 | 美丽的多肉庭院】</span></a></li>
<li><a href="http://yidianzixun.com/n/0F9vm8c6?s=9&appid=design"><span class="spanimg"><img src="img/w8.jpeg" alt="文章8"/></span><span class="spantitle">【这哪里是多肉，明明是果冻！】</span></a></li>
<li><a href="http://yidianzixun.com/n/0Fk2ZkLM?s=9&appid=design"><span class="spanimg"><img src="img/w9.jpeg" alt="文章9"/></span><span class="spantitle">【又是一年多肉换土时!】</span></a></li>
<li><a href="http://yidianzixun.com/n/0Fm4W8go?s=9&appid=design"><span class="spanimg"><img src="img/w10.jpeg" alt="文章10"/></span><span class="spantitle">【识多肉之初识多肉】</span></a></li>
</ul>
</aside>
</main>3.3、个人界面
相关代码：
<main>
<section class="personal">
<div class="info">
<div class="headimg"><a href="#"><span class="spanimg"><img src="img/headimg.JPG"/></span><span>绣球姑娘</span></a></div>
</div>
<div class="cargo">
<div class="cargonav">
<ul>
<li>待付款 <span>0</span></li>
<li>待发货 <span>0</span></li>
<li>待收货 <span>1</span></li>
<li>待评价 <span>0</span></li>
</ul>
</div>
</div>
</section>
<section>
<div class="cargocont">
<ul class="ul1">
<li id="ul1li1">
<ul class="ul2">
<li class="imgli" id="imgli1"><img src="img/goodscar.png"/></li>
<li id="spanli1"><span>没有代付款的相关订单哦</span></li>
</ul>
</li>
<li class="span0" id="ul1li2">没有待发货的相关订单哦</li>
<li class="ul1li3" id="ul1li3">
<ul class="ul3">
<li><span class="time">2017-3-10</span><span>订单号：3223201281275366</span></li>
</ul>
<ul class="ul4">
<li class="imgli"><img src="img/f1.jpg"/><span>西陌莎</span></li>
</ul>
</li>
<li class="span0" id="ul1li4">尚未有订单需要评价</li>
</ul>
</div>
</section>
<section class="mygoods">
<div class="mygoodsnav">
<ul>
<li id="farmnav">多肉农场</li>
<li id="warehousenav">多肉仓库</li>
</ul>
</div>
<div class="mygoodscont">
<ul>
<li id="farm"><img src="img/nc.jpg"/></li>
<li id="warehouse">
<ul>
<li>
<p>精致盆器 <span>1</span></p>
<div>
<span class="houseimg"><img src="img/chuang4.jpg"/></span><span>创意花器</span>
</div>
</li>
<li>
<p>土壤彩石 <span>2</span></p>
<div>
<span class="houseimg"> <img src="img/lv1.jpg"/></span><span>绿沸石</span>
</div>
<!--<div>-->
<!--<span class="houseimg"><img src="img/hong1.gif"/></span><span>虹彩石</span>-->
<!--</div>-->
</li>
</ul>
</li>
</ul>
</div>
</section>
<section class="publish">
<div class="pubnav">
<ul>
<li>种植日记</li>
<li>多肉转让</li>
</ul>
</div>
<div class="pubcont">
<ul>
<li>
<form name="form1">
<textarea>输入你的多肉日记，可以发表哦</textarea>
</form>
</li>
<li>
<form name="form2">
<textarea>不想养护的多肉，可以发表转让~\(≧▽≦)/~啦啦啦</textarea>
</form>
</li>
</ul>
</div>
<div class="btn">
<button>发表</button>
</div>
</section>
</main>总结
以上就是本次项目的全部内容，需要交流或者获取代码请关注微信公众号：coding加油站，获取