网页制作基础大二dw作业HTML+CSS+JavaScript云南我的家乡旅游景点

创始人

2024-04-12 14:38:05

0次

家乡旅游景点网页作业制作网页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒子设定居中，内部左中右布局，下方横向浮动排列，大学学习的前端知识点和布局方式都有运用，CSS的代码量也很足、很细致，使用hover来完成过渡效果、鼠标滑过效果等，使用表格、表单补充模块，为方便新手学习页面中没有使用js有需要的可以自行添加。

⚽精彩专栏推荐👇🏻👇🏻👇🏻

❤ 【作者主页——🔥获取更多优质源码】
❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】

文章目录🌰

一、网页介绍📖
一、网页效果🌌
二、代码展示😈
- 1.HTML结构代码 🧱
- 2.CSS样式代码 🏠
三、个人总结😊
四、更多干货🚀

一、网页介绍📖

1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。

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

3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、音频元素、Flash，同时设计了Logo（源文件）所需的知识点。

一、网页效果🌌

在这里插入图片描述

二、代码展示😈

1.HTML结构代码 🧱

代码如下（示例）：以下仅展示部分代码供参考~



丽江
欢迎来到丽江！
首页关于丽江丽江民宿周边景点   美食特色


关于丽江






丽江位于青藏高原东南缘，滇西北高原，金沙江中游。 是国际知名旅游城市 、古代“南方丝绸之路”和“茶马古道”的重要通道 。市区中心位于东经100°25'，北纬26°86'，总面积2.06万平方公里，北连迪庆藏族自治州，南接大理白族自治州，西邻怒江傈僳族自治州，东与四川凉山彝族自治州和攀枝花市接壤，距昆明市527公里。丽江市位于云贵高原与青藏高原的连接部位，地势西北高而东南低，最高点为玉龙雪山主峰，属低纬暖温带高原山地季风气候，境内水利资源丰富，动植物种类繁多，为云南省重点林区、中国水电西电东送基地之一。
截至2015年，丽江市辖1个市辖区，4个县。2016年，全年完成地区生产总值310.1799亿元，人均地区生产总值24186元。 截至2017年末，丽江市全市常住人口129.0万人，户籍人口1227009人。 丽江是一个多民族聚居的地方，除汉族外，共有12个世居少数民族，22种少数民族；丽江是著名的旅游城市，拥有世界文化遗产丽江古城、世界自然遗产三江并流、世界记忆遗产纳西族东巴古籍文献三大世界遗产。 旅游资源丰富，有旅游风景点104处，有丽江古城、玉龙雪山、虎跳峡、老君山、束河古镇、阿纳果等知名旅游景点。先后被评为中国旅游竞争力百强城市 、中国十大休闲城市 、中国优秀旅游城市 、中国十大魅力城市 、云南省人才特区 、长江经济带上的绿色明珠 等荣誉称号。
......
 版权所有 © 丽江官网

2.CSS样式代码 🏠


@charset "utf-8";
* {margin: 0;padding: 0;
}body {font-size: 14px;
}.logo {float: left;width: 140px;height: 120px;margin-top: 20px;position: absolute;left: 15%;margin-left: -10px;
}li {list-style: none;
}a,
a:link,
a:visited {color: #7f0d0d;text-decoration: none;
}a:hover {text-decoration: underline;
}.gundong {width: 600px;height: 50px;line-height: 50px;background: #9bb6f0;margin: auto;margin-bottom: 10px;text-align: center;font-size: 28px;color: #ffffff;
}.banner {position: absolute;left: 50%;margin-left: -960px;
}.nav {width: 600px;height: 60px;line-height: 60px;background-color: #fff;margin: 10px auto;text-align: center;
}.nav a {font-size: 24px;margin: 10px;
}.nav a:hover {color: #F00;text-decoration: none;
}.main {width: 1140px;height: auto;background: #ffffff;margin: auto;;padding-top: 50px;padding-bottom: 50px;
}.main .cont {width: 800px;margin: auto;
}.main .cont p {padding: 10px;font-size: 16px;color: 333;text-indent: 32px;line-height: 28px;
}.main .cont img {width: 100%;/* height: auto; */
}.a3,
.a3 img {width: 1163px;height: 400px;
}.foot {width: 100%;height: 60px;font-weight: 600;background-color: #CCCCCC;margin: 0 auto;text-align: center;line-height: 60px;
}.gy {width: 600px;height: 400px;margin: 0 auto;
}.chanpin {width: 1226px;height: 600px;background-color: #fff;margin: 0 auto;margin-left: -210px;
}.chanpin li {width: 300px;height: 300px;background-color: #fff;float: left;padding: 4px;/* margin-right: 14px; */margin-left: 80px;
}/* 这里必须写 .box .last 要注意权重的问题  20 */.chanpin .last {margin-right: 0;
}.chanpin img {width: 234px;/* height: 285px; */height: 225px;
}.chanpin h3 {text-align: center;margin-top: 14px;margin-bottom: 10px;
}.gengduo {text-align: center;
}.lx {width: 1126px;height: 400px;display: block;margin: 0 80px;
}.left {width: 500px;height: 400px;background-color: #fff;float: left;line-height: 22px;margin: 0 40px;
}.right {width: 500px;height: 400px;background-color: #fff;float: left;text-align: center;
}.lx1 {width: 1100px;height: 600px;display: block;/* margin: 0 -110px; */margin-left: -160px;
}.left1 {width: 400px;height: 600px;background-color: #fff;float: left;line-height: 22px;margin-left: 50px;
}.main .cont .left1 img {height: 280px;width: 400px;margin-top: -22px;
}.right1 {width: 600px;height: 600px;background-color: #fff;float: left;text-align: center;
}.otox {border: 1px solid #ccc;line-height: 25px;font-size: 16px;padding: 5px;background: #fff;border-radius: 5px;-webkit-border-radius: 5px;-moz-border-radius: 5px;width: 400px;/* margin-bottom: 15px; */text-align: center;margin: 0 10px 15px;
}.btn {border: 1px solid #ccc;line-height: 25px;font-size: 16px;padding: 5px;background: #fff;border-radius: 5px;-webkit-border-radius: 5px;-moz-border-radius: 5px;width: 150px;/* margin-bottom: 15px; */text-align: center;margin: 0 10px 15px;
}#tj {background-color: #e27575;
}#cx {background-color: #3c763d;
}#ms:hover {font-weight: 600;font-size: 28px;
}