100字范文 > 用DIV+CSS技术设计的鲜花主题网站（web前端网页制作课作业）

用DIV+CSS技术设计的鲜花主题网站（web前端网页制作课作业）

时间：2024-04-02 02:49:54

🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业：【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】

📂文章目录

二、📚网站介绍三、🔗网站效果▶️1.视频演示🧩 2.图片演示四、💒 网站代码🧱HTML结构代码🏠CSS样式代码五、🎁更多源码

二、📚网站介绍

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。

其中：

（1）📜html文件包含：其中index.html是首页、其他html为二级页面；

（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；

（3）📄 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。

三、🔗网站效果

▶️1.视频演示

T12JP 花店 4页带js

🧩 2.图片演示

四、💒 网站代码

🧱HTML结构代码

<div class="mainContainer big container"><div class="header-wrapper"><header class="container"><div class="head-right"><ul class="top-nav"><li class=""><a href="#">我的账户</a></li><li class="my-wishlist"><a href="#">收藏</a></li><li class="checkout"><a href="#">结算</a></li><li class="log-in"><a href="account_login.html">登录</a></li></ul><section class="header-bottom"><div class="cart-block"><ul><li>(2)</li><li><a href="#" title="购物车"><img title="购物车" alt="购物车" src="picture/item_icon.png"></a></li><li>购物车</li></ul><div id="minicart" class="remain_cart" style="display: none;"><p class="empty">您的购物车共有2件商品</p><ol><li><div class="img-block"><img src="picture/small_img1.png" title="" alt=""></div><div class="detail-block"><h4><a href="#" title="玫瑰">玫瑰</a></h4><p><strong>1</strong> x ￥99.00</p><a href="#" title="Details">细节展示</a></div><div class="edit-delete-block"><a href="#" title="Edit"><img src="picture/edit_icon.png" alt="Edit" title="Edit"></a><a href="#" title="Remove"><img src="picture/delete_item_btn.png" alt="Remove" title="Remove"></a></div></li><li><div class="img-block"><img src="picture/small_img.png" title="" alt=""></div><div class="detail-block"><h4><a href="#" title="玫瑰">玫瑰</a></h4><p><strong>1</strong> x ￥99.00</p><a href="#" title="Details">细节展示</a></div><div class="edit-delete-block"><a href="#" title="Edit"><img src="picture/edit_icon.png" alt="Edit" title="Edit"></a><a href="#" title="Remove"><img src="picture/delete_item_btn.png" alt="Remove" title="Remove"></a></div></li><li><div class="total-block">共计:<span>￥198.00</span></div><a href="" title="结算" class="orange-btn">结算</a></li></ol></div></div><div class="search-block"><input type="text" value="搜索"><input type="submit" value="submit"></div></section></div><h1 class="logo"><img title="Logo" alt="Logo" src="picture/logo.png"></h1><nav id="smoothmenu1" class="ddsmoothmenu mainMenu"><ul id="nav"><li class="active"><a href="">首页</a></li><li><a href="category.html">全部商品</a></li><li><a href="contact_us.html">留言板</a></li></ul></nav><div class="mobMenu"><h1><span>菜单</span><a class="menuBox highlight" href="javascript:void(0);"></a><span class="clearfix"></span></h1><div id="menuInnner" style="display:none;"><ul class="accordion"><li class="active"><a href="">首页</a></li><li class="parent"><a href="category.html">全部商品</a></li><li class=""><a href="contact_us.html">留言板</a></li><span class="clearfix"></span></ul></div></div></header></div><section class="banner-wrapper"><div class="banner-block container"><div class="flexslider"><ul class="slides"><li><img title="Banner" alt="Banner" src="picture/banner1.png"></li><li><img title="Banner" alt="Banner" src="picture/banner2.png"></li><li><img title="Banner" alt="Banner" src="picture/banner3.png"></li><li><img title="Banner" alt="Banner" src="picture/banner4.png"></li></ul></div><ul class="banner-add"><li class="add1"><a href="#" title=""><img title="add1" alt="add1" src="picture/banner_add1.png"></a></li><li class="add2"><a href="#" title=""><img title="add2" alt="add2" src="picture/banner_add2.png"></a></li></ul></div></section><section class="content-wrapper"><div class="content-container container"><div class="heading-block"><h1>热卖商品</h1><ul class="pagination"><li class="grid"><a href="#" title="网格"></a></li></ul></div>

🏠CSS样式代码

ul.disc {list-style: disc outside;}ul ul,ol ol {margin: 4px 0 5px 30px;}li {margin-bottom: 12px;}ul.large li {line-height: 21px;}/* 手机 */@media handheld,only screen and (max-width: 767px) {body,p {font-size: 12px;line-height: 1.6;}}em {font-style: italic;line-height: inherit;}strong {font-weight: bold;line-height: inherit;}small {font-size: 56.4%;line-height: inherit;}h1 small,h2 small,h3 small,h4 small,h5 small {color: #777;}/*Blockquotes */blockquote,blockquote p {line-height: 20px;color: #777;}blockquote {margin: 0 0 18px;padding: 9px 20px 0 19px;border-left: 1px solid #ddd;}blockquote cite {display: block;font-size: 12px;font-size: 1.2rem;color: #555;}blockquote cite:before {content: "\ \0020";}blockquote cite a,blockquote cite a:visited {color: #555;}hr {border: 1px solid #ddd;clear: both;margin: 16px 0 18px;height: 0;}abbr,acronym {text-transform: uppercase;font-size: 90%;color: #222;border-bottom: 1px solid #ddd;cursor: help;}abbr {text-transform: none;}

五、🎁更多源码

1.如果我的博客对你有帮助请 “👍点赞” “✍️评论” “💙收藏”一键三连哦！

2.💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、等!

📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。