web网页设计实例作业~~主题是花盆售卖网页（HTML+CSS+JavaScript）
2024-05-26 03:32:18
一、先来看实现效果吧！（效果并不是很惊艳，就平平无奇啦！）
首页开头↓
首页结尾↓
二、部分源代码：
<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="https://imgtu.com/i/XlBSq1"><img src="https://s1.ax1x.com/2022/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="https://imgtu.com/i/Xl0X24"><img src="https://s1.ax1x.com/2022/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="https://imgtu.com/i/XlBPIK"><img src="https://s1.ax1x.com/2022/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="https://imgtu.com/i/Xl0zrR"><img src="https://s1.ax1x.com/2022/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="https://imgtu.com/i/Xl0xM9"><img src="https://s1.ax1x.com/2022/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 2022-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图床
上面是源代码的主体部分，有想要完整源码的，可以私信我
祝各位小伙伴们云程发轫~万里可期~加油
web网页设计实例作业~~主题是花盆售卖网页（HTML+CSS+JavaScript）相关推荐
- 文化网页设计成品 web网页设计实例作业 ——古典中国风工艺美术(9页) html+css+javascript网页设计实例
web网页设计实例作业 --古典中国风工艺美术(9页) html+css+javascript网页设计实例 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶 ...
- web网页设计实例作业 ——古典中国风工艺美术(9页) html+css+javascript网页设计实例
web网页设计实例作业 --古典中国风工艺美术(9页) html+css+javascript网页设计实例 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶 ...
- web网页设计实例作业 ——我的家乡-四川(9页) HTML+CSS+JavaScript 学生DW网页设计作业成品
HTML5期末大作业:家乡网站设计--我的家乡-四川(9页) HTML+CSS+JavaScript 学生DW网页设计作业成品 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. ...
- html网页设计代码作业——家乡介绍-长治(8页) HTML+CSS+JavaScript 学生DW网页设计作业成品 html网页制作期末大作业成品_网页设计期末作业
HTML5期末大作业:家乡介绍网站设计--家乡介绍-长治(8页) HTML+CSS+JavaScript 学生DW网页设计作业成品 html网页制作期末大作业成品_网页设计期末作业 常见网页设计作业题 ...
- html网页设计代码作业——酥麻辣祸-美食餐饮 HTML+CSS+JavaScript 学生DW网页设计
一.作品展示 二.文件目录 三.代码实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &qu ...
- web网页设计实例作业 ：茶文化主题系列——中国水墨风格绿色茶叶网页设计(5页)❤HTML+CSS+JavaScript❤
web网页设计实例作业 :茶文化主题系列--中国水墨风格绿色茶叶网页设计(5页) HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品 常 ...
- html期末作业代码网页设计 web网页设计实例作业 ——中国风文化传媒企业官网(6页) 简单网页设计作业 静态HTML文化主题网页作业
web网页设计实例作业 --中国风文化传媒企业官网(6页) 简单个人网页设计作业 静态HTML文化主题网页作业 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. ...
- web前端期末大作业 ~我的家乡-绿城之都html+css+javascript旅游网页设计实例
web前端期末大作业 ~ 我的家乡-绿城之都html+css+javascript旅游网页设计实例 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页 ...
- HTML5期末大作业：漫画网站设计——海贼王我当定了(6页) web前端期末大作业 html+css+javascript网页设计实例 企业网站制作 计算机毕设网页设计源码
HTML5期末大作业:漫画网站设计--海贼王我当定了(6页) web前端期末大作业 html+css+javascript网页设计实例 企业网站制作 计算机毕设网页设计源码 常见网页设计作业题材有 个 ...
最新文章
- CV多任务学习笔记 yolop
- node.js java web_Node.js 做 Web 后端优势为什么这么大？
- Guide: Solr performance tuning--转载
- python:copy()和deepcopy()区别
- 工作383-获取页面的宽度
- LeetCode 1497. 检查数组对是否可以被 k 整除（余数配对）
- JavaScript -- this 总结
- 利用css设置使超链接不能点击或者失效
- PHP截取文件,[转载]php做截取文件后缀名大全
- 如何学习PMP才算是成功？
- jdbc sql拼接字符串
- 可测函数列的依测度收敛性
- 单片机基础教程那么多，什么样才是靠谱的学习方式
- Md5（base64）加密与解密实战
- 2021年电赛F题智能送药小车（国二）开源分享
- 【魔方攻略】五魔方教程（原创）
- Notes Twelfth Day-渗透攻击-红队-命令与控制
- linux sftp与ftp,Linux ftp和sftp命令
- WebCollector初学教程
- Windows App开发之开发准备