静态HTML旅行主题网页设计与实现——联途旅游网服务平台网(39页)HTML+CSS+JavaScript

👨‍🎓学生HTML静态网页基础水平制作👩‍🎓，页面排版干净简洁。使用HTML+CSS页面布局设计,web大学生网页设计作业源码，这是一个不错的旅游网页制作，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用, 这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。

文章目录🌰

一、网站题目👨‍🎓
二、网站描述✍️
三、网站介绍📖
四、网站效果🌐
五、网站代码制作部分 📕
- HTML结构代码🧱
六、遇到问题及如何解决🔍
七、实训总结😊
八、更多干货🎁

一、网站题目👨‍🎓

🚀 旅游景点介绍、旅游风景区、家乡介绍、等网站的设计与制作。

二、网站描述✍️

旅游景点介绍、旅游风景区是一个介绍简介、行政区划、地理环境、自然环境、教育事业、体育事业、旅游景点、城市荣誉等等。网站集中主要展示了的地方风土人情，并通过访客留言，增加游客的互动体验。同时，地方旅游网站里的每一个网页都采用了统一的设计风格，以加强城市整体面貌统一的宣传效果。最重要的是做出旅游网站独特的风格，更能吸引浏览者的眼球。

三、网站介绍📖

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

网站程序方面：计划采用最新的网页编程语言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）网站首页布局确定好各个板块的内容，并使用了DIV+CSS布局。另外首页使用到的知识主要有图片插入、图片动态切换、导航条、利用CSS固定字体、文字大小、文字颜色、背景颜色。

（2）页面使用了DIV+CSS布局，使用到的知识主要有图片插入、导航条、利用CSS固定字体、文字大小、文字颜色、背景颜色。

（3）表单部分页面使用了DIV+CSS布局，使用到的知识主要有运用了form表单、input文本框和input提交按钮，完成表单信息收集。利用CSS设置input提交按钮文字大小和颜色。

HTML结构代码🧱



DOCTYPE html>
<html lang="zh-CN">
    <head> 
        <meta charset="utf-8" /> 
        <title>首页title> 
        <meta name="renderer" content="webkit" /> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 
        <meta name="keywords" content="联途,联途旅游" /> 
        <meta name="description" content="联途旅游是一家提供专业导游、伴游、同游的服务平台，方便您找到志同道合的朋友一起旅行，一起快乐旅游，结伴旅游，同行之路，有你才有意义。" /> 
        <meta http-equiv="Cache-Control" content="no-transform" /> 
        <link rel="shortcut icon" href="images/favicon.ico" /> 
        <link rel="canonical" href="index.html" /> 
        <link rel="stylesheet" type="text/css" href="css/common.css" /> 
        <link rel="stylesheet" type="text/css" href="css/index.css" /> 
        <script type="text/javascript">
            var TU = {
                wwwUrl: 'http://www.liantu.cn',
                myUrl: 'http://my.liantu.cn',
                imageUrl: 'http://static.liantu.cn/image/',
                domain: 'liantu.cn',
                today: '2016-03-08',
                mobile_agent: ''
            };
            var isMobi = (function() {
                var u = navigator.userAgent.toLowerCase();
                return  u.indexOf("mobi") > 0 || u.indexOf("nexus 7") > 0 || u.indexOf("480") > 0;
            })();
            if (isMobi && TU.mobile_agent != '') {
                location.href = TU.mobile_agent;
            }
        script> 
        <script type="text/javascript" id="js-prelogin" src="js/cas.js">script> 
        <script type="text/javascript" src="js/jquery.seajs.js" id="seajsnode">script> 
         
    head> 
    <body> 
        <div class="wrapper"> 
            <div class="header"> 
                <div class="mod-head"> 
                    <div class="box"> 
                        <div class="logo">
                            <a href="index.html"><img src="images/logo.png" alt="联途" />a>
                        div> 
                        <div class="login pl-login-info" id="pl-login-info">div> 
                    div> 
                div> 
                <div class="mod-mhead"> 
                    <div class="box"> 
                        <a class="icon-menu" href="javascript:;" rel="nofollow">菜单a> 
                        <a class="logo" href="index.html"><img src="images/logo.png" alt="联途" />a> 
                    div> 
                    <div class="sidebar"> 
                        <div class="mask">div> 
                        <div class="panel pl-login-info">div> 
                    div> 
                div> 
            div> 
            <div class="container"> 
                <div class="full-column"> 
                    <div class="mod-bg"> 
                        <img class="fixed" src="images/bg.jpg" /> 
                        <img class="static" src="images/bg.jpg" /> 
                    div> 
                    <div class="mod-search"> 
                        <div class="core"> 
                            <h1><a href="/banyou/" target="_blank">伴游a> · <a href="/daoyou/" target="_blank">导游a> · <a href="/tongyou/" target="_blank">同游a>h1> 
                            <p>同行之路，有你才有意义p> 
                        div> 
                        <div class="mcore"> 
                            <p>来这里，<br />换一种旅游方式p> 
                        div> 
                        <div class="J_search search"> 
                            <div class="box-bg">div> 
                            <div class="sbox"> 
                                <input type="text" class="input-text" placeholder="输入想去的地方(例如:北京)" id="search_text" /> 
                                <span class="ico"><span>span>span> 
                            div> 
                        div> 
                    div> 
                div> 
                <div class="inner"> 
                    <div class="main"> 
                        <div class="mod-step"> 
                            <dl class="d1"> 
                                <dt>
                                <i>i>
                                dt> 
                                <dd> 
                                    <p><span>预约当地向导span>他们是比导游更懂得导游的人，<br />真正体验当地风土人情。p> 
                                dd> 
                            dl> 
                            <dl class="d2"> 
                                <dt>
                                <i>i>
                                dt> 
                                <dd> 
                                    <p><span>伴你同行，一路上有你span>我不愿让你一个人，<br />这趟旅途让我陪你一起走。p> 
                                dd> 
                            dl> 
                            <dl class="d3"> 
                                <dt>
                                <i>i>
                                dt> 
                                <dd> 
                                    <p><span>旅途乐趣，也许不由风景决定span>人生总是不断的在走走停停，<br />在这里你总能找到和你一起的。p> 
                                dd> 
                            dl> 
                        div> 
                        <div class="module mod-destination"> 
                            <div class="hd"> 
                                <span class="title">热门城市span> 
                                <span class="subtitle">Hot Cityspan> 
                            div> 
                            <div class="bd"> 
                                <ul> 
                                    <li class="J_blocklink big"> 
                                        <div class="pic"> 
                                            <a href="http://www.liantu.cn/daoyou/xiamen/" target="_blank"> <img src="images/201507301606111559.jpeg" alt="厦门" width="100%" /> a> 
                                        div> 
                                        <div class="text"> 
                                            <div class="cover">div> 
                                            <p> <span class="title">厦门span> <span class="english">Xiamenspan> <span class="subtitle">在风姿绰约的海上花园漫步， 聆听鼓浪屿的天籁， 骑行在沿海环岛， 感受最美校园span> p> 
                                        div> li> 
                                    <li class="J_blocklink"> 
                                        <div class="pic"> 
                                            <a href="http://www.liantu.cn/daoyou/beijing/" target="_blank"> <img src="images/201511021401022091.jpeg" alt="北京" width="100%" /> a> 
                                        div> 
                                        <div class="text"> 
                                            <div class="cover">div> 
                                            <p> <span class="title">北京span> <span class="english">Beijingspan> <span class="subtitle">探访帝王的痕迹，抚摸北海的碧幽，漫步在北京胡同，领略798的艺术气氛span> p> 
                                        div> li> 
                                    <li class="J_blocklink"> 
                                        <div class="pic"> 
                                            <a href="http://www.liantu.cn/daoyou/wuhan/" target="_blank"> <img src="images/201511021401391496.jpeg" alt="武汉" width="100%" /> a> 
                                        div> 
                                        <div class="text"> 
                                            <div class="cover">div> 
                                            <p> <span class="title">武汉span> <span class="english">Wuhanspan> <span class="subtitle">武大的樱花烂漫、黄鹤楼的千古绝唱、户部港的繁华溢彰、热干面的乡情弥漫span> p> 
                                        div> li> 
                                    <li class="J_blocklink"> 
                                        <div class="pic"> 
                                            <a href="http://www.liantu.cn/daoyou/zhangjiajie/" target="_blank"> <img src="images/201511021401519527.jpeg" alt="张家界" width="100%" /> a> 
                                        div> 
                                        <div class="text"> 
                                            <div class="cover">div> 
                                            <p> <span class="title">张家界span> <span class="english">Zhangjiajiespan> <span class="subtitle">三千奇峰 秀水八百span> p> 
                                        div> li> 
                                    <li class="J_blocklink"> 
                                        <div class="pic"> 
                                            <a href="http://www.liantu.cn/daoyou/guilin/" target="_blank"> <img src="images/201511021402011356.jpeg" alt="桂林" width="100%" /> a> 
                                        div> 
                                        <div class="text"> 
                                            <div class="cover">div> 
                                            <p> <span class="title">桂林span> <span class="english">Guilinspan> <span class="subtitle">桂林山水 富甲天下span> p> 
                                        div> li> 
                                    <li class="J_blocklink big"> 
                                        <div class="pic"> 
                                            <a href="http://www.liantu.cn/daoyou/xianggang/" target="_blank"> <img src="images/201511021402117369.jpeg" alt="香港" width="100%" /> a> 
                                        div> 
                                        <div class="text"> 
                                            <div class="cover">div> 
                                            <p> <span class="title">香港span> <span class="english">Xianggangspan> <span class="subtitle">华洋交错 东方明珠span> p> 
                                        div> li> 
                                ul> 
                            div> 
                        div> 
                        <div class="module mod-person"> 
                            <div class="hd"> 
                                <span class="title">精选导游span> 
                                <span class="subtitle">Selected Guidespan> 
                            div> 
                            <div class="bd"> 
                                <ul class="list"> 
                                    <li> 
                                        <div class="item"> 
                                            <div class="pic"> 
                                                <a href="/daoyou/65548.html" target="_blank"><img src="images/65548.jpg" alt="陈艳" />a> 
                                            div> 
                                            <div class="text"> 
                                                <div class="bg">div> 
                                                <div class="name"> 
                                                    <a href="/daoyou/65548.html" target="_blank"> 陈艳 a> 
                                                div> 
                                                <p>厦门小雨车队六十多台车均是一年以内的新车！驾驶员向导驾龄均在五年以上，路线熟悉！所有一日游自由行路线都是一对一专车专员，选择我们犹如亲人陪伴左右！我们为您提供帆船游玩、向导伴游、带车司机向导、厦门一日游用车、鼓浪屿一日游用车、集美大嶝岛一日游用车、土楼云水谣一日游等用车服务！纯粹的自由行，不进任何购物点也与定点消费！司机兼向导带您深度厦门游p> 
                                            div> 
                                        div> li> 
                                    <li> 
                                        <div class="item"> 
                                            <div class="pic"> 
                                                <a href="/daoyou/1.html" target="_blank"><img src="images/1.png" alt="你是白痴吗" />a> 
                                            div> 
                                            <div class="text"> 
                                                <div class="bg">div> 
                                                <div class="name"> 
                                                    <a href="/daoyou/1.html" target="_blank"> 你是白痴吗 a> 
                                                div> 
                                                <p>清迈momo 1968微酒店副老板。目前长居清迈，接清迈旅拍／旅行mv制作。全球旅拍人，可全球旅拍预约。... 清迈属于泰北城市，特色好吃的泰北菜餐厅，只有清迈最多。像宛若梦境的风车餐厅，环境优雅的艺术品餐厅，更有在山间遥望美景的纯天然有机餐厅。 清迈周边的天然美景更让人陶醉。像是距城区仅一个小时车程的湖区，就像一副大师笔下的画作。再往远走，是一个叫做清道的小镇，它原始古朴，到处是望不尽的原野以及连绵不绝的公路，想来一场真真切切的公路旅行，清道比美国更适合。清道是一个没有开发的小镇，它保留的纯朴民风以及自然风光得到无数外国人的青睐，那里的交通不够发达，很多人会选择包车过去，经常有客人会包我和我先生的复古甲壳虫坐骑游玩清道，他们说，那是人生里最好的体验之一了。 我和我先生总会在闲暇时开着我们那辆是如珍宝的复古甲壳虫去清迈周边旅行，热爱拍照的我，也拍了很多人物和风景的照片，也有不少客人找到我，希望我能用相机记录他们在清迈旅行的点点滴滴。我和我先生在闲暇时间里走走拍拍，这几年间，我们发现了很多游人少却十分有趣的旅行目的地。我们时而住酒店，时而在可以望见星星的野外搭帐篷，时而睡在我们的车里。每每我们走到陌生的环境中，都被泰国本地人民的热情所感动，被不一样的风景所吸引，我们希望能渐渐让更多的人知道那些绝好却隐秘的旅行之地，于是我开始把我的所见所闻写下来，让更多的人看见，把我们自己的复古甲壳虫也拿出来供给客人包车游玩。不断的旅行，不断的分享，不停的把我们在清迈的家－清迈MoMo1968微酒店做的越来越好，就是我和我先生最大的人生追求。p> 
                                            div> 
                                        div> li> 
                                    <li> 
                                        <div class="item"> 
                                            <div class="pic"> 
                                                <a href="/daoyou/3.html" target="_blank"><img src="images/3.jpg" alt="楠楠" />a> 
                                            div> 
                                            <div class="text"> 
                                                <div class="bg">div> 
                                                <div class="name"> 
                                                    <a href="/daoyou/3.html" target="_blank"> 楠楠 a> 
                                                div> 
                                                <p>萨瓦迪卡！欢迎大家来微笑之国：泰国！我是楠楠，冯勍[qíng]楠。我是道地的桂林女孩，四年前来到普吉岛，不小心成为了泰国媳妇儿，便在这里落地生根成为岛民，喜欢摄影，出海浮潜，寻找美食，享受spa。慢慢地，内心就在酝酿着：独乐了不如众乐乐，为什么不做个旅行代理呢，把自己美好的体验传播给更多人。现在跟先生经营一家旅游代理中心，楠楠就是大家的普吉岛旅行规划师，定制您的专属行程。p> 
                                            div> 
                                        div> li> 
                                ul> 
                            div> 
                        div> 
                        <div class="module mod-travel"> 
                            <div class="hd"> 
                                <span class="title">最新同游span> 
                                <span class="subtitle">Newest Travel Peerspan> 
                            div> 
                            <div class="bd"> 
                                <ul> 
                                    <li class="J_blocklink"> 
                                        <div class="pic"> 
                                            <a href="http://www.liantu.cn/tongyou/4.html" target="_blank"><img src="images/201507211603061831.png" alt="杭州到上海旅游 08月20日 3日游 求结伴同游" />a> 
                                        div> 
                                        <div class="text"> 
                                            <div class="avatar"> 
                                                <img src="images/1.png" alt="你是白痴吗" /> 
                                                <span>你是白痴吗span> 
                                            div> 
                                            <p>杭州到上海旅游 08月20日 3日游 求结伴同游p> 
                                        div> li> 
                                    <li class="J_blocklink"> 
                                        <div class="pic"> 
                                            <a href="http://www.liantu.cn/tongyou/3.html" target="_blank"><img src="images/201507211603182952.png" alt="绍兴出发 8月13日 拉萨 7日游 求结伴" />a> 
                                        div> 
                                        <div class="text"> 
                                            <div class="avatar"> 
                                                <img src="images/1.png" alt="你是白痴吗" /> 
                                                <span>你是白痴吗span> 
                                            div> 
                                            <p>绍兴出发 8月13日 拉萨 7日游 求结伴p> 
                                        div> li> 
                                    <li class="J_blocklink"> 
                                        <div class="pic"> 
                                            <a href="http://www.liantu.cn/tongyou/1.html" target="_blank"><img src="images/201507211603301856.png" alt="厦门到丽江旅游 10月01日 5日游 求结伴同游" />a> 
                                        div> 
                                        <div class="text"> 
                                            <div class="avatar"> 
                                                <img src="images/1.png" alt="你是白痴吗" /> 
                                                <span>你是白痴吗span> 
                                            div> 
                                            <p>厦门到丽江旅游 10月01日 5日游 求结伴同游p> 
                                        div> li> 
                                ul> 
                            div> 
                        div> 
                        <div class="mod-raiders mod-hot"> 
                            <div class="hd"> 
                                <span class="tit">热门<a href="gonglue.html" target="_blank">旅游攻略a>span> 
                                <span>/span> 
                                <a href="gonglue.html" class="hmore" target="_blank" title="旅游攻略">更多a> 
                            div> 
                            <div class="bd"> 
                                <div class="raiders"> 
                                    <ul> 
                                        <li> <p><a href="/gonglue/zhusu/" class="tag" target="_blank">[住宿攻略]a> <a href="/gonglue/3255.htm" target="_blank">五大道住宿推荐 去天津五大道旅游住哪里好a> p> <span>目的地：天津,和平区,五大道span> li> 
                                        <li> <p><a href="/gonglue/meishi/" class="tag" target="_blank">[美食攻略]a> <a href="/gonglue/3254.htm" target="_blank">天津五大道美食指南 五大道附近有吃饭的地方吗a> p> <span>目的地：天津,和平区,五大道span> li> 
                                        <li> <p><a href="/gonglue/gouwu/" class="tag" target="_blank">[购物攻略]a> <a href="/gonglue/3253.htm" target="_blank">天津五大道特产有什么值得带 五大道购物指南a> p> <span>目的地：天津,和平区,五大道span> li> 
                                        <li> <p><a href="/gonglue/zizhuyou/" class="tag" target="_blank">[自助游攻略]a> <a href="/gonglue/3252.htm" target="_blank">天津五大道怎么去 天津站到五大道乘车指南a> p> <span>目的地：天津,和平区,五大道span> li> 
                                        <li> <p><a href="/gonglue/gouwu/" class="tag" target="_blank">[购物攻略]a> <a href="/gonglue/3251.htm" target="_blank">扬州宋夹城景区周边有什么特产 宋夹城周边购物推荐a> p> <span>目的地：江苏省,扬州市,邗江区,扬州宋夹城span> li> 
                                        <li> <p><a href="/gonglue/zhusu/" class="tag" target="_blank">[住宿攻略]a> <a href="/gonglue/3250.htm" target="_blank">扬州宋夹城附近酒店哪家好 宋夹城住宿推荐a> p> <span>目的地：江苏省,扬州市,邗江区,扬州宋夹城span> li> 
                                        <li> <p><a href="/gonglue/meishi/" class="tag" target="_blank">[美食攻略]a> <a href="/gonglue/3249.htm" target="_blank">宋夹城体育休闲公园附近有什么好吃的a> p> <span>目的地：江苏省,扬州市,邗江区,扬州宋夹城span> li> 
                                        <li> <p><a href="/gonglue/zijiayou/" class="tag" target="_blank">[自驾游攻略]a> <a href="/gonglue/3248.htm" target="_blank">宋夹城体育休闲公园自驾路线a> p> <span>目的地：江苏省,扬州市,邗江区,扬州宋夹城span> li> 
                                    ul> 
                                div> 
                            div> 
                        div> 
                        <div class="mod-spot mod-hot"> 
                            <div class="hd"> 
                                <span class="tit">热门<a href="jingdian.html" target="_blank">旅游景点a>span> 
                                <span>/span> 
                                <a href="jingdian.html" class="hmore" target="_blank" title="旅游景点">更多a> 
                            div> 
                            <div class="bd"> 
                                <div class="spot"> 
                                    <ul> 
                                        <li> <a href="/jingdian/1910.htm" target="_blank">扬州宋夹城a> <span class="address">扬州市邗江区长春路48号（近瘦西湖天沐温泉度假村）span> li> 
                                        <li> <a href="/jingdian/1909.htm" target="_blank">大阳山国家森林公园a> <span class="address">苏州市高新区浒关经济开发区山神湾路span> li> 
                                        <li> <a href="/jingdian/1908.htm" target="_blank">宿迁三台山森林公园a> <span class="address">江苏省宿迁市宿豫区249省道span> li> 
                                        <li> <a href="/jingdian/1907.htm" target="_blank">东台西溪景区a> <span class="address">盐城市东台市惠阳路span> li> 
                                    ul> 
                                div> 
                            div> 
                        div> 
                    div> 
                div> 
            div> 
            <div class="footer"> 
                <div class="mod-back"> 
                    <span class="qrcode"> <span class="ico">span> <img src="images/qrcode.jpg" alt="联途微信二维码" width="200" height="200" />官方微信服务号 span> 
                    <a href="javascript:" class="code" id="code">a> 
                    <a href="index.html" class="customer">a> 
                    <a href="#" class="goback">a> 
                div> 
                <div class="mod-foot"> 
                    <div class="info"> 
                        <div class="contact"> 
                            <p class="logo"> <a href="index.html"><img src="images/logo.png" alt="联途" width="136" height="50" />a> <span>同行之路，有你才有意义span> p> 
                            <p class="tell">4006 666863p> 
                            <p>24小时服务热线p> 
                        div> 
                        <dl> 
                            <dt>
                            公司信息
                            dt> 
                            <dd>
                                <a href="about.html" target="_blank" rel="nofollow">关于我们a>
                            dd> 
                            <dd>
                                <a href="copyright.html" target="_blank" rel="nofollow">免责声明a>
                            dd> 
                            <dd>
                                <a href="contact.html" target="_blank" rel="nofollow">联系我们a>
                            dd> 
                            <dd>
                                <a href="join.html" target="_blank" rel="nofollow">加入我们a>
                            dd> 
                        dl> 
                        <dl> 
                            <dt>
                            帮助中心
                            dt> 
                            <dd>
                                <a href="xieyi.html" target="_blank" rel="nofollow">用户协议a>
                            dd> 
                            <dd>
                                <a href="safe.html" target="_blank" rel="nofollow">安全保障a>
                            dd> 
                            <dd>
                                <a href="process.html" target="_blank" rel="nofollow">预定流程a>
                            dd> 
                        dl> 
                        <dl class="app"> 
                            <dt>
                            发现
                            dt> 
                            <dd>
                                <a href="/app/" target="_blank">Android客户端a>
                            dd> 
                            <dd>
                                <a href="/app/" target="_blank">iOS客户端a>
                            dd> 
                            <dd>
                                <a href="/app/huilv/" target="_blank">联途汇率a>
                            dd> 
                            <dd>
                                <a href="/app/tongyou/" target="_blank">联途同游a>
                            dd> 
                        dl> 
                    div> 
                    <div class="linker">
                        友情链接： 
                        <a href="http://www.liantu.com/" target="_blank">二维码a> 
                        <a href="http://www.shoujimi.com/" target="_blank">手机迷a> 
                        <a href="http://zhidao.3533.com/" target="_blank">手机知道a> 
                        <a href="http://10.ip138.com/" target="_blank">十大品牌排行榜a> 
                        <a href="http://www.66825.com/" target="_blank">360手机助手a>
                    div> 
                    <div class="copyright"> 
                        <a href="http://www.miitbeian.gov.cn/" target="_blank" rel="nofollow">闽ICP备15007411号-1a> Copyright © 2016 liantu.cn, All Rights Reserved stat 
                    div> 
                div> 
                <div class="mod-mfoot"> 
                    <div class="info"> 
                        <ul> 
                            <li><a href="about.html" target="_blank" rel="nofollow">关于我们a>li> 
                            <li><a href="apply.html" target="_blank" rel="nofollow">申请成为向导a>li> 
                            <li><a href="/app/" target="_blank" rel="nofollow">APP下载a>li> 
                        ul> 
                        <div class="contact"> 
                            <p class="logo"> <a href="index.html"><img src="images/logo.png" alt="联途" width="100" />a> p> 
                            <p class="tell">4006-6668-63p> 
                        div> 
                    div> 
                    <div class="copyright">
                        Copyright © 2016 liantu.cn 
                    div> 
                div> 
            div> 
        div> 
        <script type="text/javascript">
            (function() {
                var $info3 = $('.pl-login-info');
                PL.init({
                    domain: 'http://my.liantu.cn',
                    callback: function(nickName, html) {
                        !PL.MID ? (function() {
                            html.push('登录
');
                        })() : (function() {
                            var num = PL.type ? (PL.merchantlaunchordernum + PL.merchantordernum) : PL.memberordernum;
                            html.push('' + (num > 0 ? '' + num + '' : '') + '+ PL.avatar + '" alt="' + nickName + '" width="40" height="40"/>' + nickName + '
');
                            if (PL.type) {
                                html.push('\
      \
      \
      \
      商户信息\
      ' + (PL.merchantlaunchordernum ? '' + PL.merchantlaunchordernum + '' : '') + '预约管理\
      ' + (PL.merchantordernum ? '' + PL.merchantordernum + '' : '') + '订单管理\
      我的钱包\
      伴游\
      导游\
      同游\
      退出\
      \
      
');
                            } else {
                                html.push('\
      \
      \
      \
      个人信息\
      ' + (PL.memberordernum > 0 ? '' + PL.memberordernum + '' : '') + '我的订单\
      我的同游\
      我的钱包\
      伴游\
      导游\
      同游\
      退出\
      \
      
');
                            }
                        })();
                        if (!pl_status && !PL.type) {
                            var div = document.createElement('div');
                            div.className = 'link';
                            div.innerHTML = '申请成为向导';
                            var $info = document.getElementById('pl-login-info');
                            if ($info) {
                                $info.parentNode.insertBefore(div, $info);
                            }
                        }
                        pl_status = 1;
                    }
                });
            })();
            var pl_status = 0;
        script> 
        
        <script type="text/javascript">
seajs.config({
base: 'http://static.liantu.cn/script/dist',
paths: {
'modules': 'http://static.liantu.cn/script/dist'
},
map: [
[/^(.*?\/script\/(?:src|dist)\/.*?\/.*?\.js$)(?:.*)$/i, '$1?version=v1']
],
charset: 'utf-8'
});
seajs.use('modules/www/public/common.js');
seajs.use('modules/www/index/index.js');
script>
        <div class="hide"> 
        div>
    body>
html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489

六、遇到问题及如何解决🔍

实训中遇到得困难不少，比如如何收集适合网页的图片素材、如何让网页的配色看着更自然更舒适、如何用PS裁剪大小合适的图片、以及制作表单时候如何设计等等，最后，通过上网查询和请教别人得到了很好的解决。

七、实训总结😊

通过这次网页设计制作实训，能够灵活的运用到所学的知识和技巧制作简单的网页，掌握了个人网站建设的技巧和基本网站建设的过程。对于用Dreamweaver、vscode、hbuider等制作网页更为得心应手。实训过程中我尽量充分利用老师教过的知识，对所学知识进行了巩固。为了制作出更好的效果我也翻阅参考了其他资料，学习到了更多的网页处理技巧。制作网页的过程中遇到很多的问题，通过查找资料或询问同学都有得到解决。这次综合实训我的收获很大，学有所用，在实践的过程中学习巩固对知识能有更深的记忆。网页制作是一门很实用的学科，值得我以后进行更深入的学习。这次实训中我也体会到了自己掌握的技巧太少了，以至于很多想法都没能实现，在以后的学习过程中我要对网页制作有更深的了解，做出更为成熟的网页。

八、更多干货🎁

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

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

3.以上内容技术相关问题😈欢迎一起交流学习👇🏻👇🏻👇🏻🔥

相关阅读:
【开源】SpringBoot框架开发陕西非物质文化遗产网站
 运营商大数据更容易、更精准、更高效获客
 《痞子衡嵌入式半月刊》第 76 期
 [操作系统笔记]基本分段存储管理
 分布式ID生成系统之雪花算法详解
 CS224W2.1——传统基于特征的方法(节点层级特征)
JavaScript算法33- 兼具大小写的最好英文字母（leetCode:2309简单）
C++ Qt开发：Qt的安装与配置
 【SpringCloudNetflix】一图理解Spring Cloud Netflix解决了那些微服务问题？
原生HTML，CSS，JS实现tab栏切换效果
原文地址：https://blog.csdn.net/wx___BJ050106/article/details/126187526