学生HTML网页作业：基于HTML+CSS+JavaScript画家企业8页

于 2024-05-25 11:06:41 发布
阅读量337 收藏 9
点赞数 4
分类专栏： html网页设计 文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/VX_WJ88950106/article/details/128394578
版权

🎉精彩专栏推荐 💭文末获取联系
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主
💂 作者主页: 【主页——🚀获取更多优质源码】
🎓 web前端期末大作业： 【📚毕设项目精品实战案例 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】
🌎超炫酷的Echarts大屏可视化源码：【🔰 Echarts大屏展示大数据平台可视化(150套) 】
🔖 HTML+CSS+JS实例代码： 【🗂️HTML+CSS+JS实例代码 (炫酷特效网页代码) 继续更新中…】
🎁 免费且实用的WEB前端学习指南： 【📂web前端零基础到高级学习视频教程 120G干货分享】
🥇 关于作者: 💬历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！

📂文章目录

一、👨‍🎓网站题目

👒 公司官网网站 、企业官网、酒店官网、等网站的设计与制作。

二、✍️网站描述

🏷️ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。

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

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

三、📚网站介绍

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

📓网站程序方面：计划采用最新的网页编程语言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>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title></title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <div class="top">
        <div class="w1280 clearfix">
            <a href="" class="logo fl">
                <img src="picture/logo.png" alt="">
            </a>
            <div class="fr clearfix">
                <div class="fr tel">
                    <h3>全国免费加盟热线 <img src="picture/tel.png" alt=""><img src="picture/n2.png" alt=""></h3>
                </div>
                <div class="clearfix"></div>
                <ul class="clearfix navbar">
                    <li>
                        <a href="">首 页<b></b></a>
                    </li>
                    <li>
                        <a href="aboutus.html">关于我们<b></b></a>
                    </li>
                    <li>
                        <a href="products.html">产品展示<b></b></a>
                    </li>
                    <li>
                        <a href="newslist.html">新闻中心<b></b></a>
                    </li>
                    <li>
                        <a href="branch.html">门店分布<b></b></a>
                    </li>
                    <li>
                        <a href="joinus.html">招商加盟<b></b></a>
                    </li>
                    <li>
                        <a href="contactus.html">联系我们<b></b></a>
                    </li>
                </ul>
            </div>

        </div>
    </div>

    <div class="banner">
        <div class="bd">
            <ul class="bannerfix slides clearfix">
                <li>
                    <img class="bimg" src="picture/banner.png" alt="">
                </li>
                <li>
                    <img class="bimg" src="picture/banner.png" alt="">
                </li>
                <li>
                    <img class="bimg" src="picture/banner.png" alt="">
                </li>
            </ul>
        </div>
        <div class="bamnline"><span></span></div>
    </div>

    <div class="section1">
        <div class="w1280 clearfix">
            <div class="left fl" data-scroll-reveal="enter left over 1s and move 50px">
                <b></b>
                <p>
                    食为本，心为媒<br> 技艺，是对传统的续存和升华。
                    <br> 而标准，则是现代品质坚守的底线。
                    <br> 随着时代流变而坚守的技艺与标准，
                    <br> 已成为线上花甲成长之路的灵魂。
                </p>
                <h2>精致之选</h2>
            </div>
            <div class="right fr" data-scroll-reveal="enter right over 1s and move 50px">
                <video width="638" height="359" src="file/mov_bbb.mp4" controls="controls"> </video>
            </div>
        </div>
    </div>

    <div class="section2">
        <div class="w1280">
            <div class="txtMarquee-top" data-scroll-reveal="enter bottom over 1s and move 50px">
                <div class="bd">
                    <ul class="infoList">
                        <li>
                            <a href="">热烈祝贺江苏南通市客户徐总喜签新店，预祝徐总生意兴隆，财源滚滚！</a>
                        </li>
                        <li>
                            <a href="">热烈祝贺江苏南通市客户徐总喜签新店，预祝徐总生意兴隆，财源滚滚！</a>
                        </li>
                        <li>
                            <a href="">热烈祝贺江苏南通市客户徐总喜签新店，预祝徐总生意兴隆，财源滚滚！</a>
                        </li>
                        <li>
                            <a href="">热烈祝贺江苏南通市客户徐总喜签新店，预祝徐总生意兴隆，财源滚滚！</a>
                        </li>
                        <li>
                            <a href="">热烈祝贺江苏南通市客户徐总喜签新店，预祝徐总生意兴隆，财源滚滚！</a>
                        </li>
                        <li>
                            <a href="">热烈祝贺江苏南通市客户徐总喜签新店，预祝徐总生意兴隆，财源滚滚！</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="section3">
        <ul class="clearfix">
            <li data-scroll-reveal="enter bottom over 1s and move 50px">
                <a href="">
                    <strong><img src="picture/750.png" alt=""></strong>
                    <p>线上花甲全国加盟店<br>总计750余家</p>
                </a>
            </li>
            <li data-scroll-reveal="enter bottom over 1s and move 50px">
                <a href="">
                    <strong><img src="picture/158.png" alt=""></strong>
                    <p>线上花甲门店已遍<br>布全国158座城市</p>
                </a>
            </li>
            <li data-scroll-reveal="enter bottom over 1s and move 50px">
                <a href="">
                    <strong><img src="picture/1000.png" alt=""></strong>
                    <p>线上花甲年销量超<br>10000000份</p>
                </a>
            </li>
        </ul>
    </div>

    <div class="w1280">
        <div class="section4 clearfix">
            <div class="div1" data-scroll-reveal="enter left over 1s and move 50px">
                <a href="">
                    <figure><img src="picture/tu1.png" alt=""></figure>
                    <figcaption>
                        <h2>名企赋能 品牌增信 创业无忧</h2>
                        <h3>安徽路可集团公司拥有多年餐饮连锁运营经验<b></b></h3>
                        <p>
                            是一家围绕餐饮连锁经营、直营渠道建设、企业营销策 划、品牌推广和培训咨询为核心业务的综合性公司。凭借高瞻远瞩的战略远见和多 年经验累积，成为一家知名实战运营机构。 自公司创建伊始，便以弘扬中国美食文 化为己任，
                        </p>
                        <span class="more">>More</span>
                    </figcaption>
                </a>
            </div>
            <div class="div2" data-scroll-reveal="enter right over 1s and move 50px">
                <a href="">
                    <figcaption>
                        <h2>健康美味</h2>
                        <h3><b></b></h3>
                        <p>
                            线上花甲独创《线上四部曲》并辅以精品蔬菜，营养搭配 ，既满足不同顾客口味需求，又能体验美食的乐趣！
                        </p>
                    </figcaption>
                    <figure><img src="picture/tu3.png" alt=""></figure>
                </a>
            </div>
            <div class="div3" data-scroll-reveal="enter right over 1s and move 50px">
                <a href="">
                    <figure><img src="picture/tu2.png" alt=""></figure>
                    <figcaption>
                        <h2>精致体验</h2>
                        <h3><b></b></h3>
                        <p>
                            线上花甲的创新脚步从未停止，全新2代品牌形象升级，门店利用现代 空间美学与潮流元素相融合，营造出一个更受年轻人青睐、简约、时 尚的用餐氛围。……
                        </p>
                    </figcaption>
                </a>
            </div>
        </div>
    </div>

    <div class="section5">
        <div class="w1280">
            <div class="white-bg" data-scroll-reveal="enter bottom over 1s and move 50px,wait 0.6s"></div>
            <div class="s5-text " data-scroll-reveal="enter bottom over 1s and move 50px,wait 1.6s">
                <h2><img src="picture/tit.png" alt=""></h2>
                <p>
                    每一道美食的背后，总会有一段鲜为人知的小故事，线上花甲的诞生 也不例外。多年前，他和她在山东美丽的青岛结 识，她总是热衷于 各种各样的海鲜美食，尤其是花甲，为了心爱的 她，他从岳母那里学 会正宗的辣炒蛤蜊和各种海鲜做法，岳母告诉他：
                    <b>“花甲代表一生的
						爱情，是一个甲子的承诺”！</b>
                </p>
                <p class="p2">
                    和许多年轻男女一样，他们相识、相知、相恋，最终结合并且成 了家。为了纪念那份带着大海味道的爱情，也为了传递彼此给予 的爱情承诺，他们在充满机遇的都市里寻求着发展。这样，象征着 火热长久的“线上花甲”就诞生了。
                </p>
            </div>
        </div>
    </div>

    <div class="section6">
        <div class="w1280">
            <div class="title-main">
                <h3 data-scroll-reveal="enter bottom over 1s and move 50px"><img src="picture/t1.png" alt=""></h3>
                <h2 data-scroll-reveal="enter bottom over 1s and move 50px">好食材 好配料 铸就产品的灵魂</h2>
                <h4 data-scroll-reveal="enter bottom over 1s and move 50px"><img src="picture/bolang.png" alt=""></h4>
            </div>
            <div class="s6-fen" data-scroll-reveal="enter bottom over 1s and move 50px">
                <ul>
                    <li class="on">
                        <a href="">花甲系列</a>
                    </li>
                    <li>
                        <a href="">大虾系列</a>
                    </li>
                    <li>
                        <a href="">鱿鱼系列</a>
                    </li>
                    <li>
                        <a href="">蟹脚系列</a>
                    </li>
                </ul>
            </div>
            <div class="sec6-recont">
                <div class="tab-pal on">
                    <div class="btnMode slider" id="slider">
                        <a href="javascript:void(0);" class="prev btn"><img src="picture/prev.png" alt=""></a>
                        <div class="scroll">
                            <ul class="scrollContainer">
                                <li class="panel" id="panel_1">
                                    <a href="#" class="inside">
                                        <img width="340" height="460" alt="" src="picture/tu4.png">
                                        <div class="text">
                                            <div class="title">锡纸花甲米线1</div>
                                            <div class="name">
                                                招牌经典风味，传承配方，海鲜烹制； <br>鲜香浓郁，麻辣适度，回味绵长，<br>让食嚼者拍手称快！
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li class="panel" id="panel_2">
                                    <a href="#" class="inside">
                                        <img width="340" height="460" alt="" src="picture/tu4.png">
                                        <div class="text">
                                            <div class="title">锡纸花甲米线1</div>
                                            <div class="name">
                                                招牌经典风味，传承配方，海鲜烹制； <br>鲜香浓郁，麻辣适度，回味绵长，<br>让食嚼者拍手称快！
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li class="panel" id="panel_3">
                                    <a href="#" class="inside">
                                        <img width="340" height="460" alt="" src="picture/tu4.png">
                                        <div class="text">
                                            <div class="title">锡纸花甲米线1</div>
                                            <div class="name">
                                                招牌经典风味，传承配方，海鲜烹制； <br>鲜香浓郁，麻辣适度，回味绵长，<br>让食嚼者拍手称快！
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li class="panel current" id="panel_4">
                                    <a href="#" class="inside">
                                        <img width="340" height="460" alt="" src="picture/tu4.png">
                                        <div class="text">
                                            <div class="title">锡纸花甲米线1</div>
                                            <div class="name">
                                                招牌经典风味，传承配方，海鲜烹制； <br>鲜香浓郁，麻辣适度，回味绵长，<br>让食嚼者拍手称快！
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li class="panel" id="panel_5">
                                    <a href="#" class="inside">
                                        <img width="340" height="460" alt="" src="picture/tu4.png">
                                        <div class="text">
                                            <div class="title">锡纸花甲米线1</div>
                                            <div class="name">
                                                招牌经典风味，传承配方，海鲜烹制； <br>鲜香浓郁，麻辣适度，回味绵长，<br>让食嚼者拍手称快！
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li class="panel" id="panel_6">
                                    <a href="#" class="inside">
                                        <img width="340" height="460" alt="" src="picture/tu4.png">
                                        <div class="text">
                                            <div class="title">锡纸花甲米线1</div>
                                            <div class="name">
                                                招牌经典风味，传承配方，海鲜烹制； <br>鲜香浓郁，麻辣适度，回味绵长，<br>让食嚼者拍手称快！
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li class="panel" id="panel_7">
                                    <a href="#" class="inside">
                                        <img width="340" height="460" alt="" src="picture/tu4.png">
                                        <div class="text">
                                            <div class="title">锡纸花甲米线1</div>
                                            <div class="name">
                                                招牌经典风味，传承配方，海鲜烹制； <br>鲜香浓郁，麻辣适度，回味绵长，<br>让食嚼者拍手称快！
                                            </div>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <a href="javascript:void(0);" class="next btn"><img src="picture/next.png" alt=""></a>
                    </div>
                </div>

                <div class="tab-pal ">
                    <div class="btnMode2 btnMode" id="slider2">
                        <a href="javascript:void(0);" class="prev btn"><img src="picture/prev.png" alt=""></a>
                        <div class="scroll2 scroll">
                            <ul class="scrollContainer2 scrollContainer">
                                <li class="panel" id="panel2_1">
                                    <a href="#" class="inside">
                                        <img width="340" height="460" alt="" src="picture/tu4.png">
                                        <div class="text">
                                            <div class="title">锡纸花甲米线1</div>
                                            <div class="name">
                                                招牌经典风味，传承配方，海鲜烹制； <br>鲜香浓郁，麻辣适度，回味绵长，<br>让食嚼者拍手称快！
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li class="panel" id="panel2_2">
                                    <a href="#" class="inside">
                                        <img width="340" height="460" alt="" src="picture/tu4.png">
                                        <div class="text">
                                            <div class="title">锡纸花甲米线1</div>
                                            <div class="name">
                                                招牌经典风味，传承配方，海鲜烹制； <br>鲜香浓郁，麻辣适度，回味绵长，<br>让食嚼者拍手称快！
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li class="panel" id="panel3_3">
                                    <a href="#" class="inside">
                                        <img width="340" height="460" alt="" src="picture/tu4.png">
                                        <div class="text">
                                            <div class="title">锡纸花甲米线1</div>
                                            <div class="name">
                                                招牌经典风味，传承配方，海鲜烹制； <br>鲜香浓郁，麻辣适度，回味绵长，<br>让食嚼者拍手称快！
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li class="panel current" id="panel4_4">
                                    <a href="#" class="inside">
                                        <img width="340" height="460" alt="" src="picture/tu4.png">
                                        <div class="text">
                                            <div class="title">锡纸花甲米线1</div>
                                            <div class="name">
                                                招牌经典风味，传承配方，海鲜烹制； <br>鲜香浓郁，麻辣适度，回味绵长，<br>让食嚼者拍手称快！
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li class="panel" id="panel2_5">
                                    <a href="#" class="inside">
                                        <img width="340" height="460" alt="" src="picture/tu4.png">
                                        <div class="text">
                                            <div class="title">锡纸花甲米线1</div>
                                            <div class="name">
                                                招牌经典风味，传承配方，海鲜烹制； <br>鲜香浓郁，麻辣适度，回味绵长，<br>让食嚼者拍手称快！
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li class="panel" id="panel2_6">
                                    <a href="#" class="inside">
                                        <img width="340" height="460" alt="" src="picture/tu4.png">
                                        <div class="text">
                                            <div class="title">锡纸花甲米线1</div>
                                            <div class="name">
                                                招牌经典风味，传承配方，海鲜烹制； <br>鲜香浓郁，麻辣适度，回味绵长，<br>让食嚼者拍手称快！
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li class="panel" id="panel2_7">
                                    <a href="#" class="inside">
                                        <img width="340" height="460" alt="" src="picture/tu4.png">
                                        <div class="text">
                                            <div class="title">锡纸花甲米线1</div>
                                            <div class="name">
                                                招牌经典风味，传承配方，海鲜烹制； <br>鲜香浓郁，麻辣适度，回味绵长，<br>让食嚼者拍手称快！
                                            </div>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <a href="javascript:void(0);" class="next btn"><img src="picture/next.png" alt=""></a>
                    </div>
                </div>

            </div>
        </div>
        <div class="section7">
            <div class="title-main">
                <h3 data-scroll-reveal="enter bottom over 1s and move 50px"><img src="picture/t2.png" alt=""></h3>
                <h2 data-scroll-reveal="enter bottom over 1s and move 50px">日式风情 吸睛设计 彰显现代美学</h2>
                <h4 data-scroll-reveal="enter bottom over 1s and move 50px"><img src="picture/bolang.png" alt=""></h4>
            </div>
            <div class="sec7-rewrite">
                <div class="bd">
                    <ul>
                        <li>
                            <a href=""> <img src="picture/tu5.png" alt=""></a>
                        </li>
                        <li>
                            <a href=""> <img src="picture/tu5.png" alt=""></a>
                        </li>
                        <li>
                            <a href=""> <img src="picture/tu5.png" alt=""></a>
                        </li>
                        <li>
                            <a href=""> <img src="picture/tu5.png" alt=""></a>
                        </li>
                        <li>
                            <a href=""> <img src="picture/tu5.png" alt=""></a>
                        </li>
                    </ul>
                </div>
</div></body>

</html>

💒CSS样式代码


ul,li{ list-style:none; border:0; margin:0; padding:0;}
dl,dt,dd{ margin:0; padding:0; -webkit-margin-start:0;}
h1,h2,h3,h4,h5{ font-weight:normal; font-size:12px; display:block;}
strong,b{ font-weight:normal;}
table,tr,td{ border-spacing:0;}
em,i,b{ font-style:normal;}
p{ line-height: 170%; color: #555; }
input{ border: none; background: none; }
figcaption{ display: block;}
input:focus{ outline: none; }
::-webkit-input-placeholder { /* WebKit browsers */ font-size:14px; color: #dfdfdf; } 
::-ms-input-placeholder { /* Internet Explorer 10+ */ font-size:14px;color: #dfdfdf; } 
.fl{float:left;}
.fr{float:right;}
.clearfix{*zoom:1;} 
.clearfix:before,.clearfix:after{display:table; line-height:0; content:"";}
.clearfix:after{clear:both;}
.w1280{ width: 1280px; margin: 0 auto; }
.f5{ background: #F5F5F5; }
.mt30{ margin-top: 30px;}
.pt30{ padding-top: 30px;}
.p30{ padding:30px 0;}
.mt45{ margin-top: 45px;}
.mt50{ margin-top: 50px;}
.pt50{ padding-top: 50px;}

.top{background: rgba(255,255,255,0.8); position: fixed; top: 0; width: 100%; z-index: 99999;  height: 130px; 
; transition: all 1.5s ease; }
.top .logo{ display: block; margin-top: 30px;}
.navbar{ margin-right: -28px;  }
.navbar li{ float: left;  margin-top:20px;  }
.navbar li a{ font-size: 16px; color: #000; margin: 0 28px; display: block; position: relative; transition: all 0.7s; }
.navbar li a b{ content: ''; display: block; position: absolute; transition: all 0.7s;   height: 4px; bottom: -25px; 
  width:56px; transform: scale(0,1);  left: 50%; margin-left: -28px; }
.navbar li:hover a b{ background: #00a862;  transform: scale(1);} 
.navbar li:hover a{ color: #00a862;}
.top .tel{ margin-top: 35px;}
.top .tel img{ display: inline-block; vertical-align: middle; margin-left: 5px;}
.top.on{ animation-name:down; animation-duration: 1s; animation-fill-mode: both;}

.banner { position: relative; overflow: hidden; height: 830px; margin-top: 80px;  }
.banner .bannerfix >li { height: 100%; line-height: 0; opacity:0; transition:opacity 1000ms linear; -webkit-transition:opacity 1000ms linear; float:left;}
.banner .bannerfix >li .bimg { line-height: 0; width: 100%; position: relative; transition: transform 5s ease;
 -webkit-transition: transform 5s ease; transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1);}
.banner .bannerfix >li.imgIn{ opacity:1; z-index:10; display:block;}
.banner .bannerfix >li.imgIn .bimg { transform: matrix(1, 0, 0, 1, 0, 0); -webkit-transform: matrix(1, 0, 0, 1, 0, 0); }

.banner .flex-control-nav{ width:100%; height:20px; position:absolute; left:0; bottom:59px; text-align:center; z-index:20;}
.banner .flex-control-nav li{ display:inline-block; position:relative;   margin: 0 10px;}
.banner .flex-control-nav li span{ display:block; text-indent:999px; overflow:hidden; width:14px; height:14px;
 background:#c8c8c8; transition:1s;  border-radius: 100%; }
.banner .flex-control-nav li a.flex-active span{ width: 70px; border-radius: 10px;}
.banner .text-tit{ position: absolute; z-index: 999; top: 50%; left: 50%; transform: translate(-50%,-150%); transition: all 2s; 
opacity: 0;  visibility: hidden; filter: alpha(opacity=0);  margin-left: -400px \9; top: 30% \9;}
.banner .text-tit img{ display: block; max-width: 100%;}
.banner .bannerfix >li.imgIn .text-tit{  visibility: visible; opacity: 1; filter:alpha(opacity=100);  transform: translate(-50%,-50%);
 transition: all 2s;}
 
 
 .section1{ background: url(../image/bg1.png) no-repeat top center; width: 100%; overflow: hidden; height: 380px;
 padding: 60px 0;}
 .section1 .left p{  color: #000000; font-size: 18px; width: 290px; line-height: 36px; }
 .section1 .left{ height: 376px; padding-left: 86px; border-left:2px solid #000;}
 .section1 .left b{ display: block; width: 66px;	height: 2px;	background-color: #000000; margin: 40px 0 30px 0;} 
 .section1 .left h2{ color: #000000; font-size: 48px; font-weight: bold; margin-top: 36px;}

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

第一、带着目标去学习，无论看书报课还是各种线下活动。
首先要明确自己的学习目标是什么，是想解决什么问题，实现怎样的目标。

第二、学习要建立个人知识体系
知识是学不完的，书籍是浩如烟海的。我们尽情徜徉其中的时候，千万不要被海水淹死，没有自我了。在学习过程中，我们会发现每一个知识点都是有她的边界和背景的，我们要善于归纳整理知识

第三、学到了就要用到

有时，我们一天下来感觉学到了很多干货，那么我们一定要将这些知识点和实际工作和生活联系起来。知识和实践相互联系靠拢。爱学习是一件好事，但只有会学习的人，才有价值。

七、🎁更多干货

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

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

3.

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

在这里插入图片描述

IT芷君
关注
  • 4
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
博客
大学生个人网站作业 超简单DIV CSS个人网页成品 简单个人网站作业模板 HTML个人网页设计下载 简约黑白色个人主页
06-17 73
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大...
博客
大学生简单抗击疫情静态HTML网页设计作品 DIV布局疫情感动人物介绍网页模板代码 DW学生抗疫逆行者网站制作成品下载
06-17
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；...
博客
大学生静态HTML网页源码 我的校园网页设计成品 学校班级网页制作模板 web课程设计 dreamweaver网页作业
06-17 33
🏫 校园班级网页设计 、👨‍🎓我的班级网页、我的学校、👩‍🎓校园社团、校园运动会、等网站的设计与制作。🏷️HTML我的班级网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和图文并茂页面。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站...
博客
大一html5期末大作业 ：基于html实现非遗文化网页设计题材【传统文化木雕】7个页面
06-17
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；...
博客
大一新生HTML期末作业 学生个人网页设计作业 HTML5响应式个人简历网站模板 web前端网页制作课作业
06-17 129
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大...
博客
大一学生《Web编程基础》HTML实例网页代码 HTML+CSS+JS 黑色横排的个人主页作品
06-17 4
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大...
博客
大一学生《Web前端网课作业》基于HTML+CSS自我介绍网页设计与制作
06-17 35
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大...
博客
大一学生Web课程设计 美食主题网页制作(HTML+CSS+JavaScript)
06-17 21
🎀 精彩专栏推荐👇🏻👇🏻👇🏻 🥧 美食网页介绍、🍰甜品蛋糕、🦐地方美食小吃文化、🍺餐饮文化、等网站的设计与制作。🍧美食主题网站 主要对各种美食进行展示，让浏览者清晰地了解到各种美食的详细信息，便于浏览者进行选择。该模块的左侧有个美食分类，用户可以选择自己喜欢的种类，当点击种类后，就会在右侧出现该分类下的各种美食，用户可以点击自己感兴趣的食品，从而看到它的具体信息。它的具体信息包括配料、产地及它的一些功能，使用户对该食品有着全面的认识。👨‍🎓静态网站的编写主要是用HTML DIV...
博客
大一学生网页课程作业 南京介绍网页设计 学生家乡网页设计作品静态 HTML网页模板源码 html我的家乡网页作业
06-17 26
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web...
博客
个人设计web前端大作业 基于html5制作美食菜谱网页设计作业代码
06-17 20
🎀 精彩专栏推荐👇🏻👇🏻👇🏻 🥧 美食网页介绍、🍰甜品蛋糕、🦐地方美食小吃文化、🍺餐饮文化、等网站的设计与制作。🍧美食主题网站 主要对各种美食进行展示，让浏览者清晰地了解到各种美食的详细信息，便于浏览者进行选择。该模块的左侧有个美食分类，用户可以选择自己喜欢的种类，当点击种类后，就会在右侧出现该分类下的各种美食，用户可以点击自己感兴趣的食品，从而看到它的具体信息。它的具体信息包括配料、产地及它的一些功能，使用户对该食品有着全面的认识。👨‍🎓静态网站的编写主要是用HTML DIV...
博客
关于《web课程设计》网页设计 用html css做一个漂亮的网站 仿新浪微博个人主页
06-17 22
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大...
博客
基于HTML(服装商城)电商项目项目的设计与实现（html前端源码和论文设计）
06-17
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web...
博客
基于HTML+CSS+JavaScript+Bootstarp响应式健身网站(web前端期末大作业)
06-17 27
🏀校园篮球网页设计、⚽足球体育运动、🤽体育游泳运动、🏓兵乓球 、🎾网球、等网站的设计与制作。🏷️ 大学生校园运动静态HTML网页设计作品，采用DIV CSS布局制作，内容包括：校园运动、运动技巧、运动规则、技术规则、经典动作。页面主体内容区域宽度为1200PX。网页整体使用CSS设置了网页背景图片。页面精美包含多个排版布局，学生网页作业水平制作。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构...
博客
基于HTML仿华为手机网站电商项目的设计与实现
06-17 27
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web...
博客
基于HTML电商项目的设计与实现—— HTML+CSS+JavaScrip家具网页设计实例 企业网站制作
06-17 26
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web...
博客
基于web在线餐饮网站的设计与实现——蛋糕甜品店铺(HTML+CSS+JavaScript)
06-17 68
👨‍🎓静态网站的编写主要是用HTML DIV+CSS JS等来完成页面的排版设计👩‍🎓,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的还是DW，当然不同软件写出的前端Html5代码都是一致的，本网页适合修改成为各种类型的产品展示网页，比如美食、旅游、摄影、电影、音乐等等多种主题，希望对大家有所帮助。 🎀 精彩专栏推荐👇🏻👇🏻👇🏻 🧡 【作者主页——🔥获取更多优质源码】🧡 【web前端期末大作业—
博客
计算机毕业设计【HTML+CSS+JavaScript服装购物商城】毕业论文源码
06-17 22
常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用。 ⚽精彩专栏
博客
静态HTML明星主页 HTML+CSS 周杰伦明星页面（学生课程设计网页设计制作大作业）
06-17 111
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；...
博客
情人节程序员用HTML网页表白【3D旋转木马相册】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
06-17 58
1 网页简介：基于HTML+CSS+JavaScript 制作七夕情人节表白网页、生日祝福、七夕告白、 求婚、浪漫爱情3D相册、炫酷代码,快来制作一款高端的表白网页送(他/她)浪漫的告白,制作修改简单,可自行更换背景音乐,文字和图片即可使用等任意html编辑软件进行运行及修改编辑等操作）。...
博客
《WEB前端框架开发技术》HTML5响应式旅游景区网站设计与实现——榆林子州HTML+CSS+JavaScript
06-17 88
🏀 精彩专栏推荐👇🏻👇🏻👇🏻 💝 【作者主页——🔥获取更多优质源码】💝 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】🚀 旅游景点介绍、旅游风景区、家乡介绍、等网站的设计与制作。旅游景点介绍、旅游风景区是一个介绍简介、行政区划、地理环境、自然环境、教育事业、体育事业、旅游景点、城市荣誉等等。网站集中主要展示了的地方风土人情，并通过访客留言，增加游客的互动体验。同时，地方旅游网站里的每一个网页都采用了统一的设计风格，以加强城市整体面貌统一的宣传效果。最重要的

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值