一、先来看实现效果吧！（效果并不是很惊艳，就平平无奇啦！）
首页开头↓
首页结尾↓
二、部分源代码：
<style>#container{width:1228px;height: 500px;margin: 0 auto;}#top{width: 1222px;height: 20px;background-color: #e7e7e7;}#top-left{width: 800px;float: left;}#contact{float: left;}#top-right{width: 161px;float: right;}#nav{width: 1222px;height: auto;margin-top: 30px;line-height: 20px;}#logo{padding-left:40px;float: left;}#cnav{padding-left: 60px;padding-top: 15px;float: left;line-height: 20px;}a{text-decoration: none;color: grey;font-size: 16px;}a:hover{color: black;text-decoration:underline;}/*鼠标经过的时候文字变成了黑色并带有下划线*/#show1{padding-left:60px;margin-right:200px;}</style>
<body bgcolor=#F0F8FF><div class="top"><a href="/i/XlBSq1"><img src="//05/30/XlBSq1.jpg" alt="XlBSq1.jpg" border="0"></a></div><div class="clearfix"></div> <div id="container"><div id="top"><div id="top-left"> </div><div id="contact"><a href="/login">会员注册</a></div><div id="contact"><a href="/login"> 会员登录</a></div><div id="contact"><a href="/login"> 购物车</a></div><div id="contact">  联系电话：18306413828</div> <div id="top-right"></div></div><div id="nav"><div id="logo"> <a href="/i/Xl0X24"><img src="//05/30/Xl0X24.jpg" width=300 height=100/></a> </div> <div id="cnav"><a href="Linerence花盆世界.html">首页 |</a> <a href="Linerence花盆世界.html">花盆套餐 |</a> <a href="Linerence花盆世界.html">花盆种类 |</a> <a href="Linerence花盆世界.html">花盆价格 |</a> <a href="Linerence花盆世界.html">在线咨询 |</a> <a href="Linerence花盆世界.html">关于Limerence花盆世界 </a></div></div><div class="clearfix"></div><div class="xh-top-headnav"><div class="xh-search"><form class="am-form-inline" action="/search"><div class="am-form-group"><input type="text" name="searchKey" required class="am-form-field" placeholder="请输入商品关键字 例如:陶瓷花盆"><button type="submit" class="am-btn am-btn-default">搜索</button></div></form></div><div id="show1"><a href="/i/XlBPIK"><img src="//05/30/XlBPIK.jpg" alt="XlBPIK.jpg" border="0" width=1100 height=300/></a></div> <div id="liubai"></div><div id="show301" style="font-size:25px" ><span style="color:red">ABOUT</span><span style="color:white">Linerence 花盆详情</span></div><div id="liubai"></div><div class="box-flowers" align="center"><a href="/i/Xl0zrR"><img src="//05/30/Xl0zrR.jpg" alt="Xl0zrR.jpg" border="0" width= 800 height=800/><p>磨砂哑光彩绘圆形花盆</p><p><e>￥30.00</e><span> 立即购买</span></p></a><a href="/i/Xl0xM9"><img src="//05/30/Xl0xM9.jpg" alt="Xl0xM9.jpg" border="0" width= 800 height=800/><p>色釉宽口方形花盆</p><p><e>￥30.00</e><span> 立即购买</span></p></a><div class="clear"></div></div><div id="liubai"></div><div id="show301" style="font-size:25px" ><span style="color:red">ABOUT</span><span style="color:white">Linerence 花盆介绍</span></div><div id="liubai"></div><div id="show4"><form method="post" action="" ><table border="2" align="right" width="600" cellspacing="3"><thead style="background:#FFB6C1;"><tr><th colspan="4" align="center">Linerence花盆世界</th></tr></thead><tr><td align="center">设计：</td><td align="center">原创设计</td><td align="center">材质：</td><td align="center">树脂材质</td></tr><tr><td align="center">尺寸：</td><td colspan="3" align="center">6CM以下 | 6-20CM | 21-35CM | 36-50CM | 50CM以上</td></tr><tr><td align="center">款式：</td><td colspan="3" align="center">宽口 | 小口 | 挂式 | 双耳 | 吊式 | 立式</td></tr><tr><td align="center">工艺：</td><td colspan="3" align="center">仿古 | 素烧 | 雕刻 | 哑光 | 磨砂 | 彩绘 | 电镀 | 色釉</td></tr><tr><td align="center">形状形态：</td><td colspan="3" align="center">圆形 | 方形 | 环形 | 六边 | 花型 | 半圆</td></tr><tr><td align="center">风格描述：</td><td colspan="3" align="center">北欧风格 | 复古风格 | 日系风格 | 国风风格 | 可爱风格</td></tr><tr><td align="center">形状形态：</td><td colspan="3" align="center">圆形 | 方形 | 环形 | 六边 | 花型 | 半圆</td></tr></table></form></div> <div id="liubai"></div><div id="show301" style="font-size:25px" ><span style="color:red">ABOUT</span><span style="color:white">Linerence 花盆世界</span></div><p align="center" style="font-size:20px;"><strong>Linerence 花盆世界</strong> 希望您<strong>见花则喜</strong> </p ><p align="center" style="font-size:20px;"><strong>Linerence 花盆世界</strong> 将浪漫种在花盆里，它汲取营养，最后盛放成了<strong>玫瑰~</strong></p ></div><div id="button" ><a href="./zhimei.html" style="color:black">主页 |</a><a href="./aboutus.html" style="color:black">关于Linerence花盆世界 |</a><a href="./contant.html" style="color:black">在线咨询 </a><br><p>copyright -2030 Linerence花盆世界工作室</p><br><br><form method="post" enctype="multipart/form-data" action="">留言：<textarea name="say" rows="5" cols="50" placeholder="请对Linerence 花盆世界提出您宝贵的意见!" ></textarea> <br><br><input type="submit" value="提交"/><input type="reset" value="重置"/></form></div></body>
这个是我个人刚刚完成并已评分的web网页设计期末大作业，做的并没有很好，请多多包涵菜鸟，嘻嘻~~
图片素材是我自己搜集的，图床是imgtu图床
上面是源代码的主体部分，有想要完整源码的，可以私信我
祝各位小伙伴们云程发轫~万里可期~加油
