鲜花静态HTML网页作业作品大学生鲜花网页设计制作成品简单DIV CSS布局网站

最新推荐文章于 2024-04-25 20:22:26 发布

Q_2709137139

最新推荐文章于 2024-04-25 20:22:26 发布

阅读量330

点赞数

文章标签： html css 前端

本文链接：https://blog.csdn.net/Q_2709137139/article/details/126315779

版权

📂文章目录

一、👨‍🎓网站题目
二、✍️网站描述
三、📚网站介绍
四、💠网站演示
五、⚙️ 网站代码
- 🧱HTML结构代码
- 💒CSS样式代码
六、🥇 如何让学习不再盲目
七、🎁更多干货
💂【获取方式】

一、👨‍🎓网站题目

🌹 鲜花网页设计、🌷鲜花商城网页制作、🌼在线花店网站、💐盆栽网、花卉网等网站的设计与制作。

二、✍️网站描述

🏷️HTML鲜花网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力。顶部导航及底部区域背景色为100%宽度，主体内容区域宽度

🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)

页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分。
所有页面相互超链接，可到三级页面，有5-10个页面组成。
页面样式风格统一布局显示正常，不错乱，使用Div+Css技术。
菜单美观、醒目，二级菜单可正常弹出与跳转。
要有JS特效，如定时切换和手动切换图片轮播。
页面中有多媒体元素，如gif、视频、音乐，表单技术的使用。
页面清爽、美观、大方，不雷同。。
不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

三、📚网站介绍

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

📓网站程序方面：计划采用最新的网页编程语言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代码）。

四、💠网站演示

在这里插入图片描述

五、⚙️ 网站代码

🧱HTML结构代码

<!doctype html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->
<!--条件注释语句,当满足if语句时则执行-->


<html lang="en">
<!--<![endif]-->

<head>
    <meta charset="utf-8">
    <!--编码格式-->
    <title>XXX花店-首页</title>

    <!--引用js文件-->
    <script src="js/jquery-1.8.2.min.js"></script>
    <script src="js/common.js"></script>
    <script src="js/jquery.easing.1.3.js"></script>
    <script src="js/ddsmoothmenu.js"></script>
    <script src="js/jquery.flexslider.js"></script>
    <script src="js/jquery.elastislide.js"></script>
    <script src="js/jquery.jcarousel.min.js"></script>
    <script src="js/jquery.accordion.js"></script>
    <script src="js/light_box.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $(".inline").colorbox({
                inline: true,
                width: "50%"
            });
        });
    </script>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/orange.css">
    <link rel="stylesheet" href="css/skeleton.css">
    <link rel="stylesheet" href="css/layout.css">
    <link rel="stylesheet" href="css/ddsmoothmenu.css">
    <link rel="stylesheet" href="css/elastislide.css">
    <link rel="stylesheet" href="css/home_flexslider.css">

    <link rel="stylesheet" href="css/light_box.css">
    <script src="js/html5.js"></script>

</head>

<body>
    <div class="mainContainer big container">
        <!--主要内容区-->
        <!--Header Block-->
        <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">
                        <!--搜索和购物车-->
                        <!--section新标签，与div类似，语义化-->
                        <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>
   >￥69.00</div>
                            <div class="pro-btn-block"> <a class="add-cart left" href="#">加入购物车</a> <a class="add-cart right quickCart inline" href="#quick-view-container" title="快速浏览">快速浏览</a> </div>
                            <div class="pro-link-block"> <a class="add-wishlist left" href="#" title="收藏">收藏</a> <a class="add-compare right" href="#">找相似</a>
                                <div class="clearfix"></div>
                            </div>
                        </li>
                        <li>
                            <div class="pro-img">
                                <img title="Freature Product" alt="Freature Product" src="picture/default_img.png">
                            </div>
                            <div class="pro-content">
                                <p>玫瑰花</p>
                            </div>
                            <div class="pro-price">￥69.00</div>
                            <div class="pro-btn-block"> <a class="add-cart left" href="#">加入购物车</a> <a class="add-cart right quickCart inline" href="#quick-view-container">快速浏览</a> </div>
                            <div class="pro-link-block"> <a class="add-wishlist left" href="#" title="收藏">收藏</a> <a class="add-compare right" href="#">找相似</a>
                                <div class="clearfix"></div>
                            </div>
                        </li>
                    </ul>
                </div>





                <div class="news-letter-container">
                    <div class="free-shipping-block">
                        <h1>享受免费送货服务</h1>
                        <p>我们把所有的订单当做节日礼物送给你！</p>
                    </div>
                    <div class="news-letter-block">
                        <h2>免费送货电话</h2>
                        <input type="text" value="手机号">
                        <input type="submit" value="提交">
                        <!--submit：定义提交按钮-->
                    </div>
                </div>
            </div>
        </section>
    </div>




    <!--Quick view Block-->
    <!--filter() 方法返回符合一定条件的元素。该方法让您规定一个条件。
   不符合条件的元素将从选择中移除，符合条件的元素将被返回。
   该方法通常用于缩小在被选元素组合中搜索元素的范围-->
    <script type="text/javascript">
        jQuery(function() {
            var tabContainers = jQuery('div.tabs > div');
            tabContainers.hide().filter(':first').show();
            jQuery('div.tabs ul.tabNavigation a').click(function() {
                tabContainers.hide();
                tabContainers.filter(this.hash).show();
                jQuery('div.tabs ul.tabNavigation a').removeClass('selected');
                jQuery(this).addClass('selected');
                return false;
            }).filter(':first').click();
        });
    </script>



    <article style="display:none;">
        <!--<article> 标签是H5的新标签,语义化
<article>标签定义的内容本身必须是有意义的且必须是独立于文档的其余部分-->
        <section id="quick-view-container" class="quick-view-wrapper">
            <div class="quick-view-container">
                <div class="quick-view-left">
                    <!--快速浏览左边内容-->
                    <h2>百合花束 鲜花花束</h2>
                    <div class="product-img-box">
                        <p class="product-image">
                            <img src="picture/sale_icon_img.png" title="Sale" alt="Sale" class="sale-img">
                            <a href=""><img src="picture/quick_view_img1.png" title="Image" alt="Image"></a>
                        </p>
                        <ul class="thum-img">
                            <li><img src="picture/quick_thum_img1.png" title="小图" alt="image"></li>
                            <li><img src="picture/quick_thum_img2.png" title="小图" alt="image"></li>
                        </ul>
                    </div>
                </div>


                <div class="quick-view-right tabs">
                    <!--tab：标签页-->
                    <!--快速浏览右边内容-->
                    <ul class="tab-block tabNavigation">
                        <!--Navigation：导航-->
                        <li><a class="selected" href="#tabDetail">概览</a></li>
                        <li><a href="#tabDes">鲜花详情</a></li>
                    </ul>

                    <div id="tabDetail" class="tabDetail">
                        <div class="first-review">此商品为鲜活易腐类，不支持7天无理由退货</div>
                        <div class="price-box">
                            <span class="price">￥69.00</span></div>
                        <div class="availability">有库存</div>


                        <div class="color-size-block">
                            <div class="label-row">
                                <!--label：标签；row：行，排-->
                                <label><em>*</em> 颜色</label>
                                <span class="required">* 必填项</span>
                            </div>
                            <div class="select-row">
                                <select><option>  红色  </option>
                                <option>  蓝色   </option>
                                <option>  粉色   </option>
                                <option>  紫色   </option>
                         </select>
                                <!--select元素用来创建下拉列表，
                         <select>元素中的<option>标签定义了列表中的可用选项-->
                            </div>


                            <div class="label-row">
                                <label><em>*</em>支付方式</label>
                            </div>
                            <div class="select-row">
                                <select>
                        <option>快捷支付</option>
                        <option>余额宝支付</option>
                        <option>集分宝</option>
                    </select>
                            </div>
                        </div>

                        <div class="add-to-cart-box">
                            <!--快速浏览的加入购物车-->
                            <span class="qty-box">
					<label for="qty">数量:</label>
					<a class="prev" href="#"><img alt="" title="" src="picture/qty_prev.png"></a>
					<input type="text" name="qty" class="input-text qty" id="qty" maxlength="12" value="1">
					<a class="next" href="#"><img alt="" title="" src="picture/qty_next.png"></a>				</span>
                            <button title="加入购物车" class="form-button"><span>加入购物车</span></button>
                            <!--<button> 标签定义一个按钮。
                在 <button> 元素内部可以放置内容，比如文本或图像。
                这是该元素与使用 <input>元素创建的按钮之间的不同之处-->
                        </div>
                    </div>



                    <div id="tabDes" class="tabDes">
                        <div> XXX花店适用场景: 爱意表达 生日 祝福 婚礼 探望 其他 求婚 友情 周年纪念</div>
                        <div>鲜花主花材: 百合适用对象: 爱人 老师 客户 领导/长辈 朋友/同事 病人鲜花朵数: 11朵</div>
                        <div>适用节日: 情人节 圣诞节 春节 3.8妇女节 母亲节 感恩节 教师节 中秋节 七夕 白色情人节</div>
                        <div>鲜花绿植工艺: 鲜花(鲜切花)鲜花规格(直径X高): 35*55花束辅材: 黄莺/满天星/勿忘我</div>
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
        </section>
    </article>








    <!--Footer Block-->
    <section class="footer-wrapper">
        <footer class="container">
            <div class="link-block">
                <ul>
                    <li class="link-title"><a href="#">关于我们</a></li>
                    <li><a href="#">售后政策</a></li>
                    <li><a href="#">售后服务</a></li>
                    <li><a href="#">隐私权政策</a></li>
                </ul>
                <ul>
                    <li class="link-title"><a href="#">客户服务</a></li>
                    <li><a href="#">退换货</a></li>
                    <li><a href="#">购物保障</a></li>
                    <li><a href="contact_us.html">留言板</a></li>
                </ul>
                <ul>
                    <li class="link-title"><a href="#">服务条款</a></li>
                    <li><a href="#">新闻中心</a></li>
                    <li><a href="#">帮助</a></li>
                    <li><a href="#">服务条款</a></li>
                </ul>
                <ul>
                    <li class="link-title"><a href="#">我们的实力</a></li>
                    <li class="aboutus-block">本店商品已向全国2603个区县提供自营配送服务，支持货到付款、POS机刷卡和售后上门服务，让您购物无忧！ <a href="#">更多</a> </li>
                </ul>


            </div>
            <div class="footer-bottom-block">
                <ul class="bottom-links">
                    <li><a href="">首页</a></li>
                    <li><a href="contact_us.html">留言板</a></li>
                </ul>
                <p class="copyright-block">Copyright &copy; 2020.XXX花店 All rights reserved.</p>
            </div>
        </footer>
    </section>

</body>

</html>

💒CSS样式代码


#colorbox,
#cboxOverlay,
#cboxWrapper {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
    overflow: hidden;
}

#cboxOverlay {
    position: fixed;
    width: 100%;
    height: 100%;
}

#cboxMiddleLeft,
#cboxBottomLeft {
    clear: left;
}

#cboxContent {
    position: relative;
}

#cboxLoadedContent {
    overflow: auto;
}

#cboxTitle {
    margin: 0;
    display: none!important;
}

#cboxLoadingOverlay,
#cboxLoadingGraphic {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#cboxPrevious,
#cboxNext,
#cboxClose,
#cboxSlideshow {
    cursor: pointer;
}

.cboxPhoto {
    float: left;
    margin: auto;
    border: 0;
    display: block;
    max-width: none;
}

.cboxIframe {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
}

#colorbox,
#cboxContent,
#cboxLoadedContent {
    box-sizing: content-box;
}

#cboxOverlay {
    background: url(../image/overlay.png) repeat 0 0;
}

#colorbox {}

#cboxTopLeft {
    width: 21px;
    height: 21px;
    background: url(http://www.ylcp.shop/files/files/1649403337119/images/controls.png) no-repeat -101px 0;
}

#cboxTopRight {
    width: 21px;
    height: 21px;
    background: url(http://www.ylcp.shop/files/files/1649403337119/images/controls.png) no-repeat -130px 0;
}

#cboxBottomLeft {
    width: 21px;
    height: 21px;
    background: url(http://www.ylcp.shop/files/files/1649403337119/images/controls.png) no-repeat -101px -29px;
}

#cboxBottomRight {
    width: 21px;
    height: 21px;
    background: url(http://www.ylcp.shop/files/files/1649403337119/images/controls.png) no-repeat -130px -29px;
}

#cboxMiddleLeft {
    width: 21px;
    background: url(http://www.ylcp.shop/files/files/1649403337119/images/controls.png) left top repeat-y;
}

#cboxMiddleRight {
    width: 21px;
    background: url(http://www.ylcp.shop/files/files/1649403337119/images/controls.png) right top repeat-y;
}

#cboxTopCenter {
    height: 21px;
    background: url(../image/border.png) 0 0 repeat-x;
}

#cboxBottomCenter {
    height: 21px;
    background: url(../image/border.png) 0 -29px repeat-x;
}

#cboxContent {
    background: #fff;
    overflow: hidden;
}

.cboxIframe {
    background: #fff;
}

#cboxError {
    padding: 50px;
    border: 1px solid #ccc;
}

#cboxTitle {
    position: absolute;
    bottom: 4px;
    left: 0;
    text-align: center;
    width: 100%;
    color: #949494;
}

#cboxCurrent {
    position: absolute;
    bottom: 4px;
    left: 58px;
    color: #949494;
}

#cboxSlideshow {
    position: absolute;
    bottom: 4px;
    right: 30px;
    color: #0092ef;
}

#cboxPrevious {
    position: absolute;
    bottom: 0;
    left: 0;
    background: url(http://www.ylcp.shop/files/files/1649403337119/images/controls.png) no-repeat -75px 0;
    width: 25px;
    height: 25px;
    text-indent: -9999px;
}

#cboxPrevious:hover {
    background-position: -75px -25px;
}

#cboxNext {
    position: absolute;
    bottom: 0;
    left: 27px;
    background: url(http://www.ylcp.shop/files/files/1649403337119/images/controls.png) no-repeat -50px 0;
    width: 25px;
    height: 25px;
    text-indent: -9999px;
}

#cboxNext:hover {
    background-position: -50px -25px;
}

#cboxLoadingOverlay {
    background: url(../image/loading_background.png) no-repeat center center;
}

#cboxLoadingGraphic {
    background: url(http://www.ylcp.shop/files/files/1649403337119/images/loading.gif) no-repeat center center;
}

#cboxClose {
    position: absolute;
    top: 0;
    right: 0;
    background: url(http://www.ylcp.shop/files/files/1649403337119/images/controls.png) no-repeat -25px 0;
    width: 25px;
    height: 25px;
    text-indent: -9999px;
}

#cboxClose:hover {
    background-position: -25px -25px;
}

.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF, endColorstr=#00FFFFFF);
}

.cboxIE6 #cboxTopLeft {
    background: url(../image/borderTopLeft.png);
}

.cboxIE6 #cboxTopCenter {
    background: url(../image/borderTopCenter.png);
}

.cboxIE6 #cboxTopRight {
    background: url(../image/borderTopRight.png);
}

.cboxIE6 #cboxBottomLeft {
    background: url(../image/borderBottomLeft.png);
}

.cboxIE6 #cboxBottomCenter {
    background: url(../image/borderBottomCenter.png);
}

.cboxIE6 #cboxBottomRight {
    background: url(../image/borderBottomRight.png);
}

.cboxIE6 #cboxMiddleLeft {
    background: url(../image/borderMiddleLeft.png);
}

.cboxIE6 #cboxMiddleRight {
    background: url(../image/borderMiddleRight.png);
}

.cboxIE6 #cboxTopLeft,
.cboxIE6 #cboxTopCenter,
.cboxIE6 #cboxTopRight,
.cboxIE6 #cboxBottomLeft,
.cboxIE6 #cboxBottomCenter,
.cboxIE6 #cboxBottomRight,
.cboxIE6 #cboxMiddleLeft,
.cboxIE6 #cboxMiddleRight {
    _behavior: expression(this.src=this.src ? this.src: this.currentStyle.backgroundImage.split('"')[1], this.style.background="none", this.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + this.src + ", sizingMethod='scale')");
}

六、🥇 如何让学习不再盲目

21年程序员总结给编程菜鸟的16条忠告

入门期间不要盲目看太多书，找一本网上或身边有经验程序员推荐的教材，先系统的学习。
多看帮助文档，帮助文档就像一个游戏的玩法说明通关秘籍，该看就看别太自信。
菜鸟容易被对象、属性、方法等词汇迷惑？那是你连最基础知识都还没掌握。
不要忽视没一个看起来不起眼的问题，经常总结做到举一反三。
没积累足够知识和经验前，你是开发不出一个完整项目的。
把最新技术挂在嘴边，还不如把过时技术牢记心中。
活到老学到老，只有一招半式是闯不了江湖的。
看得懂的书，仔细看；看不懂的书，硬着头皮也要看完。
书读百遍其义自见，别指望读一遍就能掌握。
请把教程里的例子亲手实践下，即使案例中有完整源码。
把在教程中看到的有意义的例子扩充；并将其切实的运用到自己的工作中。
不要漏掉教程中任何一个习题——请全部做完并做好笔记。
水平是在不断的实践中完善和发展的，你与大牛差的只是经验的积累。
每学到一个难点的时候，尝试对朋友或网上分享你的心得,让别人都能看得懂说明你真的掌握。
做好保存源文件的习惯，这些都是你的知识积累。
遇到问题不要张口就问，要学会自己找答案，比如google、百度和w3cschool上都有很多编程相关资料，你只要输入关键字就能找到你的答案。

七、🎁更多干货

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

2.💗【👇🏻👇🏻👇🏻关注我| 💬获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、期末大作业模板、等! 「在这里有好多前端开发者，一起探讨前端 Node 知识，互相学习」！

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

💂【获取方式】

gitee码云源码仓库-欢迎Star: https://gitee.com/zhanyuqiu2022/my-app

Q_2709137139

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
鲜花静态HTML网页作业作品大学生鲜花网页设计制作成品简单DIV CSS布局网站

🌹 鲜花网页设计、🌷鲜花商城网页制作、🌼在线花店网站、💐盆栽网、花卉网等网站的设计与制作。🏷️HTML鲜花网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力。顶部导航及底部区域背景色为100%宽度，主体内容区域宽度🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CS...
复制链接

扫一扫