一、👨🎓网站题目
旅游，当地特色，历史文化，特色小吃等网站的设计与制作。
二、✍️网站描述
👨🎓静态网站的编写主要是用HTML DIV+CSS 等来完成页面的排版设计👩🎓,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的还是DW，当然不同软件写出的前端Html5代码都是一致的，本网页适合修改成为各种类型的产品展示网页，比如美食、旅游、摄影、电影、音乐等等多种主题，希望对大家有所帮助。
三、📚网站介绍
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。
📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。
📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；
四、🌐网站效果
五、🪓 代码实现
🧱HTML
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="css/index.css" rel="stylesheet" media="all" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.contact-info {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
max-width: 600px;
margin: auto;
height: 300px;
}
.contact-info h2 {
text-align: center;
color: #555;
}
.contact-info ul {
list-style-type: none;
padding: 0;
}
.contact-info li {
padding: 10px 0;
border-bottom: 1px solid #eee;
}
.contact-info strong {
display: inline-block;
width: 100px;
margin-right: 10px;
}
.contact-info a {
color: #007bff;
text-decoration: none;
}
.contact-info a:hover {
text-decoration: underline;
}
</style>
<title>首页</title>
</head>
<body>
<div class="neirong">
<ul class="center">
<li><a href="index.html">网站首页</a></li>
<li><a href="jianjie.html">陕西简介</a></li>
<li><a href="techan.html">陕西特产</a> </li>
<li><a href="renwu.html">著名人物</a></li>
<li><a href="lianxi.html">联系我们</a></li>
</ul>
</div>
<div class="banner">
<div class="pic-list" style="left:1920px">
<img
src="https://t10.baidu.com/it/fm=173&fmt=auto&h=320&img_JPEG=&s=518B9F57FF9045C24CA908FB03008038&u=2368740486%2C4120550282&w=639"
alt="" width="100%" height="400px">
</div>
<div id="buttons"> <span class='on'></span> <span></span> <span></span> </div>
<a href="javascript:;" class="arrow" id="prev"><</a> <a href="javascript:;" class="arrow" id="next">></a>
</div>
<div class="marquee">
<marquee>陕西         简称“陕”或“秦”，中华人民共和国省级行政区....
       省会西安，位于中国内陆腹地，黄河中游，....   (了解更多)
</marquee>
</div>
<div class="husj">
<div class="content">
<div class="contact-info">
<h2>联系方式</h2>
<ul>
<li><strong>姓名:</strong> 张三</li>
<li><strong>电子邮件:</strong> <a href="mailto:zhangsan@example.com">zhangsan@example.com</a></li>
<li><strong>电话号码:</strong> 123-456-7890</li>
<li><strong>地址:</strong> 虚构街道123号, 虚构市, 虚构省, 123456</li>
</ul>
</div>
<div class="end">
<p>xxx版权所有 </p>
</div>
</div>
</body>
<div class="huidaoTop" id="roll_top"><img
src="https://youimg1.c-ctrip.com/target/100i1f000001gp3tfE7FE_D_10000_1200.jpg?proc=autoorient" width="200px" />
</div>
<div class="donhua" id="soi" style="text-align:center ; padding-top:200px">
<img src="https://pic4.zhimg.com/v2-b6b88ffb95f92102854f6fcc2d4a1f07_r.jpg" width="120"
style="animation:my1 2s ease-in-out infinite; -webkit-animation:my1 ease-in-out 2s infinite;" />
<img src="https://pic.vjshi.com/2020-10-29/045cc397c3ae9e2327e432a825ff383e/00001.jpg?x-oss-process=style/watermark"
width="120"
style="animation:my1 2s ease-in-out infinite; -webkit-animation:my1 ease-in-out 2s infinite;-webkit-animation-delay:1s; animation-delay: 1s;" />
<img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.C6y7rbP9QOJAFcVXGxNGUwHaEw?rs=1&pid=ImgDetMain" width="120"
style="animation:my1 2s ease-in-out infinite; -webkit-animation:my1 ease-in-out 2s infinite;" />
</div>
</html>🧱css
ul,
li,
h1,
h2,
h3,
p {
padding: 0;
margin: 0;
list-style: none
}
body {
width: 100%;
margin: 0px auto;
line-height: 21px;
}
.clear {
clear: both
}
.center li {
list-style: none
}
.logo {
position: absolute;
top: 50px;
height: 100px;
}
.neirong {
width: 100%;
text-align: center;
float: left;
background: #36410a;
}
.neirong li a {
border-radius: 20px;
padding: 2px 60px 15px;
color: #fff
}
.neirong li a:hover {
color: #FF3;
}
.neirong li {
float: left;
margin: 20px;
padding: 10px 30px;
}
.right {
float: right;
width: 660px;
padding: 20px
}
.left {
float: left;
width: 630px;
padding: 10px
}
.clear {
clear: both
}
.daixao {
padding-bottom: 20px;
font-size: 16px;
line-height: 26px;
margin: 20px auto;
color: #111;
width: 1000px;
}
.content {
padding-bottom: 20px;
font-size: 16px;
line-height: 26px;
margin: 20px auto;
color: #111;
display: inline-block;
width: 100%;
}
.box {
margin-top: 20px;
padding-bottom: 10px;
}
.end {
clear: both;
background: #36410a;
color: #fff;
padding: 10px 0;
text-align: center;
}
.produce img {
margin: 0 20px 20px 0
}
.produce {
line-height: 30px
}
.pad {
padding: 20px;
text-align: center;
display: block;
margin: 0 auto;
}
.pics p {
margin: 1px;
text-align: center
}
.imglist {
width: 100%;
margin: 0 auto
}
.imglist li {
float: left;
width: 46%;
margin: 2%;
text-align: center
}
.scrollleft {
border: none;
width: 100%
}
.msg {
width: 400px;
margin: 0 auto
}
.msg div span {
display: block;
}
.msg div input {
background:
float: left;
border: 1px solid #fff;
width: 10px;
height: 10px;
border-radius: 50%;
background: #333;
margin-right: 5px;
}
六、🥇 如何让学习不再盲目
很多刚入门编程的小白学习了基础语法，却不知道语法的用途，不知道如何加深映像，不知道如何提升自己，这个时候每天刷自主刷一些题就非常重要（百炼成神），可以去牛客网上的编程初学者入门训练。该专题为编程入门级别，适合刚学完语法的小白练习，题目涉及编程基础语法，基本结构等，每道题带有练习模式和考试模式，可还原考试模式进行模拟，也可通过练习模式进行练习。
七、🎁更多干货
1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！
2.💗【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
3.以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻🔥源代码：
4.有任何意见或者不懂得地方可以在评论区留言，也可以私信，我会认真看也会回复的哦
573
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
