网页设计期末结课作业 2022最后的作业用Dw div+css 做网页设计

最新推荐文章于 2024-03-29 10:28:03 发布

STU学生网页设计

最新推荐文章于 2024-03-29 10:28:03 发布

阅读量149

点赞数

分类专栏：网页设计文章标签： css 前端 html javascript html5

本文链接：https://blog.csdn.net/qq_38514421/article/details/127117339

版权

网页设计专栏收录该内容

1045 篇文章 53 订阅

订阅专栏

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

二、📚网站介绍

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

📓网站程序方面：计划采用最新的网页编程语言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.视频演示

E78JP 成都旅游12页带轮播图, jquery

🧩 2.图片演示

在这里插入图片描述

四、💒 网站代码

🧱HTML结构代码


<!DOCTYPE HTML>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>成都</title>

    <meta content="成都" name="keywords">

    <meta content="成都" name="description">

    <link href="css/base.css" rel="stylesheet" type="text/css">

    <link href="css/pagename.css" rel="stylesheet" type="text/css">

    <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>

    <script type="text/javascript" src="js/jquery.SuperSlide.2.1.js"></script>

</head>



<body>



    <!--header开始-->

    <div class="header">

        <div class="w1000">

            <p>成都</p>

            <div class="contact"><a href="">设为首页</a> <a href="">加入收藏</a></div>

        </div>

    </div>





    <div class="w1000">

        <div class="header_bottom">

            <a href=""><img src="picture/logo.png" width="294" height="49" alt="" title="成都"></a>

            <ul>

                <li><a href="">网站首页</a></li>

                <li><a href="historic.html">历史</a></li>

                <li><a href="beautiful.html">风景</a></li>

                <li><a href="tourism.html">旅游</a></li>

                <li><a href="delicacy.html">美食</a></li>

                <li><a href="new.html">动态</a></li>

                <li><a href="about.html">团队介绍</a></li>

                <li><a href="connection.html">联系我们</a></li>

            </ul>

        </div>

    </div>


    <!--header结束-->


    <div class="container">

        <!--banner开始-->

        <div class="banner">

            <div class="bd">

                <ul>

                    <li style="background:url(picture/3.jpg) no-repeat center top;"></li>

                    <li style="background:url(picture/2.jpg) no-repeat center top;"></li>



                </ul>

            </div>

            <div class="hd">

                <ul>

                    <li></li>

                    <li></li>

                </ul>

            </div>

            <a class="prev" href="javascript:void(0)"></a>

            <a class="next" href="javascript:void(0)"></a>

        </div>
        <!--调用JS模块图片滚动-->
        <script type="text/javascript">
            jQuery(".banner").slide({
                titCell: ".hd ul",
                mainCell: ".bd ul",
                effect: "fold",
                delayTime: 1000,
                interTime: 5000,
                autoPlay: true,
                autoPage: true,
                trigger: "click"
            });
        </script>

        <!--banner结束-->



        <!--content开始-->

        <div class="content">

            <p class="p_tit1">走进成都</p>

            <ul class="ul_jishu clearfix">

                <li class="fl">

                    <a href="introduce.html"><img src="picture/3.jpg" width="291" height="126" alt="" title=""></a>

                    <p>
                        <a href="introduce.html">成都简介</a> 都，四川省辖地级市，简称“蓉”，别称蓉城、锦城，四川省省会，副省级市、超大城市、成渝地区双城经济圈核心城市，国务院批复确定的中国西部地区重要的中心城市，国家重要的高新技术产业基地、商贸物流中心和综合交通枢纽。 </p>

                </li>

                <li class="fl ml20">

                    <a href="Culture.html"><img src="picture/2.jpg" width="291" height="126" alt="" title=""></a>

                    <p>
                        <a href="Culture.html">成都文化</a> 各种技法让蜀绣文化底蕴更深厚。川剧文化 川剧，是四川成都文化的一大特色。说到川剧，人们马上会想到川剧的神技——变脸。变脸的最快纪录由著名川剧表演大师彭登怀保持，
                    </p>

                </li>

                <li class="fr">

                    <a href="historic.html"><img src="picture/5.jpg" width="291" height="126" alt="" title=""></a>

                    <p>
                        <a href="historic.html">成都历史</a> “成都历史悠久,也是中国的古文化之都,具有“天府之国”的美称。据史书记载,大约在公元前5世纪中叶的古蜀国开明王朝九世时将都城从广都樊乡(今双流县)迁往成都,构筑城池。关于成都一名的来历,据《太平环宇记》记载,是借用西周建都的历史经过,“以周太王从梁山止岐山,一年成邑,三年成都
                    </p>

                </li>

            </ul>


            <div class="feilei">

                <div class="fl1 fldiv">

                    <a href="#"><img src="picture/1.jpg" width="75" height="76" alt="" title=""></a>

                    <p><a href="#">宽窄巷子</a></p>

                </div>

                <div class="fl2 fldiv">

                    <a href="#"><img src="picture/2.jpg" width="75" height="76" alt="" title=""></a>

                    <p><a href="#">井巷子</a></p>

                </div>

                <div class="fl3 fldiv">

                    <a href="#"><img src="picture/3.jpg" width="75" height="76" alt="" title=""></a>

                    <p><a href="#">小龙翻大江火锅</a></p>

                </div>

                <div class="fl4 fldiv">

                    <a href="#"><img src="picture/4.jpg" width="75" height="76" alt="" title=""></a>

                    <p><a href="#">小通巷</a></p>

                </div>

                <div class="fl5 fldiv">

                    <a href="#"><img src="picture/5.jpg" width="75" height="76" alt="" title=""></a>

                    <p><a href="#">李雪牛杂火锅</a></p>

                </div>

                <div class="fl6 fldiv">

                    <a href="#"><img src="picture/6.jpg" width="75" height="76" alt="" title=""></a>

                    <p><a href="#">成都民歌湖游船</a></p>

                </div>

                <div class="fl7 fldiv">

                    <a href="#"><img src="picture/7.jpg" width="75" height="76" alt="" title=""></a>

                    <p><a href="#">名树博览园</a></p>

                </div>

            </div>

            <div class="zjfc">

                <p class="p_tit1">秀丽成都</p>

                <div class="picScroll-left">

                    <div class="hd">

                        <a class="next">
                            <</a>

                                <a class="prev">></a>

                    </div>

                    <div class="bd">

                        <ul class="picList">








                            <li>

                                <div class="pic"><img src="picture/1.jpg" width="231" height="151"></div>



                            </li>



                            <li>

                                <div class="pic"><img src="picture/2.jpg" width="231" height="151"></div>



                            </li>



                            <li>

                                <div class="pic"><img src="picture/3.jpg" width="231" height="151"></div>



                            </li>



                            <li>

                                <div class="pic"><img src="picture/4.jpg" width="231" height="151"></div>



                            </li>



                            <li>

                                <div class="pic"><img src="picture/5.jpg" width="231" height="151"></div>



                            </li>



                            <li>

                                <div class="pic"><img src="picture/6.jpg" width="231" height="151"></div>



                            </li>



                        </ul>

                    </div>

                </div>

                <!--为秀丽成都模块图片向左滚到-->

                <script type="text/javascript">
                    jQuery(".picScroll-left").slide({
                        titCell: ".hd ul",
                        mainCell: ".bd ul",
                        autoPage: true,
                        effect: "left",
                        autoPlay: true,
                        vis: 4,
                        trigger: "click"
                    });
                </script>





            </div>

        </div>

        <!--content 结束-->

    </div>

    <!--footer开始-->

    <div class="footer">

        <p><a href="">首页</a> | <a href="historic.html">历史</a> | <a href="beautiful.html">风景</a> | <a href="tourism.html">旅游</a> | <a href="delicacy.html">美食</a> | <a href="new.html">动态</a> | <a href="javascript:;">旅游</a>|
            <a href="connection.html">联系我们</a></p>

        <p>Copyright &copy; 2015－2021 All Rights Reserved 版权所有 XXXXXXXXXXXXXXXXXX</p>

    </div>



    <!--footer 结束-->

</body>

</html>

🏠CSS样式代码

/*CSS reset*/

html { color:#000;}

body {font: 12px/1.231 SimSun, arial, helvetica, clean, sans-serif;}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td { margin:0; padding:0;}

table {}

fieldset, img { border:0; }

address, caption, cite, code, dfn, strong, th, var, optgroup { font-style:inherit; font-weight:inherit; }

em{ font-style:normal;}

b,strong{ font-weight:bold;}

del, ins { text-decoration:none; }

li { list-style:none; }

caption, th { text-align:left; }

h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal; }

q:before, q:after { content:''; }

abbr, acronym { border:0; font-variant:normal; }

sup { vertical-align:baseline; }

sub { vertical-align:baseline; }

legend { color:#000; }

/*input, button, textarea { font-family:inherit; font-size:inherit; font-style:inherit; font-weight:inherit; }*/

input, button, textarea, select { *font-size:100%; }

a,a:visited{color: #0f8f38; text-decoration:none; outline:none; blr:expression(this.onFocus=this.blur());}

a:hover {color:#c00;}

textarea{ resize:none; } 



/*文字排版*/

.f12 { font-size:12px; }

.f13 { font-size:13px; }

.f14 { font-size:14px; }

.f15 { font-size:15px; }

.f16 { font-size:16px; }

.f17 { font-size:17px; }

.f18 { font-size:18px; }

.f19 { font-size:19px; }

.f20 { font-size:20px; }

.f25 { font-size:25px; }

.fb { font-weight:bold }

.fn { font-weight:normal; }

.t0 { text-indent:0em; }

.t2 { text-indent:2em; }

.lh150 { line-height:150%; }

.lh180 { line-height:180%; }

.lh200 { line-height:200%; }

.unl { text-decoration:underlline; }

.no_unl { text-decoration:none; }



/*定位*/

.tl { text-align:left; }

.tc { text-align:center; }

.tr { text-align:right; }

.bc { margin-left:0; margin-right:0; }

.fl { float:left; display:inline; }

.fr { float:right; display:inline; }

.cb,.clear { clear:both; }

.cl { clear:left; }

.cr { clear:rigth; }

.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }

.vm { verticle-align:middle; }

.pr { position:relative; }

.pa { position:absolute; }

.abs-right { position:absolute; right:0 }

.zoom { zoom:1; }

.hidden { visiility:hidden; }

.none { display:none; }



/*长度高度*/

.w10 { width:10px; }

.w20 { width:20px; }

.w30 { width:30px; }

.w40 { width:40px; }

.w50 { width:50px; }

.w60 { width:60px; }

.w70 { width:70px; }

.w80 { width:80px; }

.w90 { width:90px; }

.w100 { width:100px; }

.w200 { width:200px; }

.w300 { width:300px; }

.w400 { width:400px; }

.w500 { width:500px; }

.w600 { width:600px; }

.w700 { width:700px; }

.w800 { width:800px; }

.w { width:100% }

.h50 { width:50px; }

.h80 { width:80px; }

.h100 { width:100px; }

.h200 { width:200px; }

.h { height:100% }



/*边距*/

.m10 { margin:10px; }

.m15 { margin:15px; }

.m30 { margin:30px; }

.mt5 { margin-top:5px; }

.mt10 { margin-top:10px; }

.mt15 { margin-top:15px; }

.mt20 { margin-top:20px; }

.mt30 { margin-top:30px; }

.mt50 { margin-top:50px; }

.mt100 { margin-top:100px; }

.mb5 { margin-bottom:5px; }

.mb10 { margin-bottom:10px; }

.mb15 { margin-bottom:15px; }

.mb20 { margin-bottom:20px; }

.mb30 { margin-bottom:30px; }

.mb50 { margin-bottom:50px; }

.mb100 { margin-bottom:100px; }

.ml5 { margin-left:5px; }

.ml10 { margin-left:10px; }

.ml15 { margin-left:15px; }

.ml20 { margin-left:20px; }

.ml30 { margin-left:30px; }

.ml50 { margin-left:50px; }

.ml100 { margin-left:100px; }

.mr5 { margin-right:5px; }

.mr10 { margin-right:10px; }

.mr15 { margin-right:15px; }

.mr20 { margin-right:20px; }

.mr30 { margin-right:30px; }

.mr50 { margin-right:50px; }

.mr100 { margin-right:100px; }

.p10 { padding:10px; }

.p15 { padding:15px; }

.p30 { padding:30px; }

.pt5 { padding-top:5px; }

.pt10 { padding-top:10px; }

.pt15 { padding-top:15px; }

.pt20 { padding-top:20px; }

.pt30 { padding-top:30px; }

.pt50 { padding-top:50px; }

.pt100 { padding-top:100px; }

.pb5 { padding-bottom:5px; }

.pb10 { padding-bottom:10px; }

.pb15 { padding-bottom:15px; }

.pb20 { padding-bottom:20px; }

.pb30 { padding-bottom:30px; }

.pb50 { padding-bottom:50px; }

.pb100 { padding-bottom:100px; }

.pl5 { padding-left:5px; }

.pl10 { padding-left:10px; }

.pl15 { padding-left:15px; }

.pl20 { padding-left:20px; }

.pl30 { padding-left:30px; }

.pl50 { padding-left:50px; }

.pl100 { padding-left:100px; }

.pr5 { padding-right:5px; }

.pr10 { padding-right:10px; }

.pr15 { padding-right:15px; }

.pr20 { padding-right:20px; }

.pr30 { padding-right:30px; }

.pr50 { padding-right:50px; }

.pr100 { padding-right:100px; }

五、🎁更多源码

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

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

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

STU学生网页设计

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
网页设计期末结课作业 2022最后的作业用Dw div+css 做网页设计

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件
复制链接

扫一扫