【HTML】HTML网页设计-----可爱多肉网页设计
2024-06-19 09:40:06
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加油站，回复“可爱多肉”免费获取
【HTML】HTML网页设计-----可爱多肉网页设计相关推荐
- HTML5期末大作业：家乡网站设计——石家庄(10页) HTML+CSS+JavaScrip 旅游网页html 家乡介绍html网页设计 dw旅游景点网页设计 web课程设计网页规划与设计...
常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 游 ...
- web课程设计网页规划与设计：HTML+CSS班级设计题材——我的校园班级
源码获取 文末联系 Web前端开发技术 描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 校园班级网页设计 | 我的班级网页 | 我的学校 | 校园社团 | 校 ...
- 25个故事性网页设计，轻松讲述网页独有的故事！！！
一个好的网页设计,不仅仅只是产品或公司企业相关信息的机械罗列.一个好的故事(尤其是一个准确把握受众需求,巧妙结合企业产品特色,并能够轻松引起用户共鸣的故事),更能赋予网页思想和灵魂,让用户不由自主停留 ...
- 如何去设计一个自适应的网页设计或HTMl5
如何去设计一个自适应的网页设计或HTMl5 如今移动互联网随着3G的普及,越来越火爆,更多需求跟随而来!APP应用市场和APP应用数量成倍成倍的增长!从而给移动互联网带来新的挑战! 移动设备正超过桌面 ...
- 网页拼图游戏html代码,网页设计（一）：拼图游戏
网页设计是什么? 网页设计是平面设计的一种,但是却是和技术关系最密切的.它是技术和艺术的完美结合.如果离开了美感,大家只会想起用户图形界面早期年代,有限的显色情况下的网站,因为那时还没有网页设计的概念 ...
- 一个小型的网页抓取系统的架构设计
一个小型的网页抓取系统的架构设计 网页抓取服务是互联网中的经常使用服务.在搜索引擎中spider(网页抓取爬虫)是必需的核心服务.搜索引擎的衡量指标"多.快.准.新"四个指标中,多 ...
- html5网页制作代码_HTML5的网页设计教程
关注小编,教你如何制作网页 HTML5是超文本标记语言(HyperText Markup Language)的第五代版本,它是书写网页代码的一种规范.一种标准.它通过标记符号来标记要显示的网页中的各个 ...
- 我的网页设计（腾讯网页面制作编写）
我的网页设计(腾讯网页面制作编写) <!doctype html public "-//w3c//dtd//xhtml1.0 transitional//en" " ...
- UI设计灵感|高级黑网页首图就该这样设计
那高级黑就是沉稳霸气的经典色,在网页色彩搭配中,甚少会有人敢大面积的使用黑色,但其实黑色有它的优点,它能搭配世界上任何一种色彩,能让其他亮色凸显魅力.当大家都在研究各种色彩搭配法则的时候,高级灰与高级 ...
最新文章
- QIIME 2教程. 12数据筛选Filtering data(2021.2)
- oracle 257,ORACLE 10g SYSAUX表空间快速增长之WRH$_ACTIVE_SESSION_HISTORY篇
- 《C和指针》对于数组这一节的总结
- pandas中的DataFrame转化为dict
- Super Jumping! Jumping! Jumping! HDU - 1087
- 具体的压栈指令，例子
- 2013.3.9学习日记
- 【转】PHP发送邮件之PHPMailer
- MATLAB中文显示乱码的问题如何解决
- 形式化方法｜形式化方法对软件开发的挑战：历史与发展
- 在Windows下删除Linux系统的方法
- mysql中的自增列和默认字段值为系统时间
- python语言程序设计实验教程答案实验三_20194220 实验三《Python程序设计》实验报告...
- SIFT算法学习总结
- openGL ES进阶教程（六）美颜滤镜之美白，磨皮，红润
- Python随机函数
- gis热力专题图制作
- Deeplink（深度链接）拉起App，我是这样做到的
- springboot控制台日志打印到日志文件 (请求路径,执行sql,参数等)
- 码Ubuntu常用命令持续更新