首页 教程 Web前端 【web网页制作】html+css旅游家乡河南主题网页制作(5页面)【附源码】

【web网页制作】html+css旅游家乡河南主题网页制作(5页面)【附源码】

一、👨‍🎓网站题目


旅游,当地特色,历史文化,特色小吃等网站的设计与制作。

二、✍️网站描述


👨‍🎓静态网站的编写主要是用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全部页面样式,文字滚动, 图片放大等;

 四、🌐网站效果

【web网页制作】html+css旅游家乡河南主题网页制作(5页面)【附源码】【web网页制作】html+css旅游家乡河南主题网页制作(5页面)【附源码】【web网页制作】html+css旅游家乡河南主题网页制作(5页面)【附源码】【web网页制作】html+css旅游家乡河南主题网页制作(5页面)【附源码】【web网页制作】html+css旅游家乡河南主题网页制作(5页面)【附源码】

五、🪓 代码实现

🧱HTML

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link type="text/css" rel="stylesheet" href="css/style.css" /> <title>河南</title> <style> .login_box { width: 400px; height: 400px; background-color: #fff; margin: auto; margin-top: 10px; border-radius: 5px; overflow: hidden; } .title { text-align: center; font-size: 28px; color: #000; margin-top: 80px; margin-bottom: 10px; letter-spacing: 3px; font-family: sans-serif; } .input_box { width: 300px; height: 30px; width: 300px; height: 40px; padding-left: 10px; margin-top: 20px; margin-left: 50px; } .button_box { width: 300px; height: 35px; width: 300px; height: 40px; margin-top: 20px; margin-left: 50px; border-radius: 5px; background-color: #64a9d9; cursor: pointer; color: #fff; } .logo_box { position: absolute; background-color: #fff; border-radius: 100px; top: 100px; left: 46%; border: solid 5px #A68364; text-align: center; } </style> </head> <body> <div class="wrapin"> <nav> <ul> <li><a href="index.html">首页</a></li> <li><a href="guanyu.html">关于河南</a></li> <li><a href="guji.html">名胜古迹</a></li> <li><a href="tupian.html">河南美食</a></li> <li><a href="denglu.html">登录</a></li> </ul> </nav> <div class="banner"> <img src="https://youimg1.c-ctrip.com/target/0100j120006jgb1k1C109_D_10000_1200.jpg?proc=autoorient" width="100%" height="500"> </div> <div class="login_box"> <h1 class="title">欢迎登录</h1> <input class="input_box" type="text" placeholder="用户名"> <input class="input_box" type="password" placeholder="密码"> <input class="button_box" type="button" value="登录"> <footer style="background-color: #11326C;">河南</footer> </div> </body> </html>

🧱css

/*通用类*/ *{ margin:0; padding:0; } body{ min-width:1400px; margin:0 auto; font-size:14px; background:#f5f5f5; text-align:justify; color:#000; } h1,h2,h3{ font-weight:500; } img{ border:none; } a{ cursor:pointer; color:#000; text-decoration:none; outline:none; } a:hover{ color:#f60; } ul{ list-style-type:none; } .clearfix:after { content: ""; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .wrapin{ width:1200px; margin-left:auto; margin-right:auto; background-color: #FFFFFF; } nav{ width: 100%; height: 80px; line-height: 80px; background-color: #135 } nav ul li{ width: 20%; float: left; } nav ul li a{ display: block; height: 100%; color: #fff; font-size: 15px; text-align: center; } .fg1{ padding: 20px 0; }


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

很多刚入门编程的小白学习了基础语法,却不知道语法的用途,不知道如何加深映像,不知道如何提升自己,这个时候每天刷自主刷一些题就非常重要(百炼成神),可以去牛客网上的编程初学者入门训练。该专题为编程入门级别,适合刚学完语法的小白练习,题目涉及编程基础语法,基本结构等,每道题带有练习模式和考试模式,可还原考试模式进行模拟,也可通过练习模式进行练习。

七、🎁更多干货

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

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

3.以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻🔥源代码:

4.有任何意见或者不懂得地方可以在评论区留言,也可以私信,我会认真看也会回复的哦

评论(0)条

提示:请勿发布广告垃圾评论,否则封号处理!!

    猜你喜欢
    【MySQL】用户管理

    【MySQL】用户管理

     服务器/数据库  3个月前  2.38k

    我们推荐使用普通用户对数据的访问。而root作为管理员可以对普通用户对应的权限进行设置和管理。如给张三和李四这样的普通用户权限设定后。就只能操作给你权限的库了。

    Cursor Rules 让开发效率变成10倍速

    Cursor Rules 让开发效率变成10倍速

     服务器/数据库  3个月前  1.37k

    在AI与编程的交汇点上,awesome-cursorrules项目犹如一座灯塔,指引着开发者们驶向更高效、更智能的编程未来。无论你是经验丰富的老手,还是刚入行的新人,这个项目都能为你的编程之旅增添一抹亮色。这些规则文件就像是你私人定制的AI助手,能够根据你的项目需求和个人偏好,精确地调教AI的行为。突然间,你会发现AI不仅能理解Next.js的最佳实践,还能自动应用TypeScript的类型检查,甚至主动提供Tailwind CSS的类名建议。探索新的应用场景,推动AI辅助编程的边界。

    探索Django 5: 从零开始,打造你的第一个Web应用

    探索Django 5: 从零开始,打造你的第一个Web应用

     服务器/数据库  3个月前  1.27k

    Django 是一个开放源代码的 Web 应用程序框架,由 Python 写成。它遵循 MVT(Model-View-Template)的设计模式,旨在帮助开发者高效地构建复杂且功能丰富的 Web 应用程序。随着每个版本的升级,Django 不断演变,提供更多功能和改进,让开发变得更加便捷。《Django 5 Web应用开发实战》集Django架站基础、项目实践、开发经验于一体,是一本从零基础到精通Django Web企业级开发技术的实战指南《Django 5 Web应用开发实战》内容以。

    MySQL 的mysql_secure_installation安全脚本执行过程介绍

    MySQL 的mysql_secure_installation安全脚本执行过程介绍

     服务器/数据库  3个月前  1.19k

    mysql_secure_installation 是 MySQL 提供的一个安全脚本,用于提高数据库服务器的安全性

    【MySQL基础篇】概述及SQL指令:DDL及DML

    【MySQL基础篇】概述及SQL指令:DDL及DML

     服务器/数据库  3个月前  550

    数据库是长期存储在计算机内的、有组织的、可共享的、统一管理的大量数据的集合。数据库不仅仅是数据的简单堆积,而是遵循一定的规则和模式进行组织和管理的。数据库中的数据可以包括文本、数字、图像、音频等各种类型的信息。

    Redis中的哨兵(Sentinel)

    Redis中的哨兵(Sentinel)

     服务器/数据库  3个月前  342

    ​ 上篇文章我们讲述了Redis中的主从复制(Redis分布式系统中的主从复制-CSDN博客),本篇文章针对主从复制中的问题引出Redis中的哨兵,希望本篇文章会对你有所帮助。