【web开发网页制作】html+css家乡长沙旅游网页制作(4页面附源码)

家乡长沙网页制作

  • 涉及知识
  • 写在前面
  • 一、网页主题
  • 二、网页效果
    • Page1、主页
    • Page2、历史长沙
    • Page3、著名人物
    • Page4、留言区
  • 三、网页架构与技术
    • 3.1 脑海构思
    • 3.2 整体布局
    • 3.3 技术说明书
  • 四、网页源码
    • Html
    • CSS
  • 五、源码获取
    • 5.1 获取方式
  • 作者寄语

涉及知识

家乡长沙网页制作,家乡介绍网页制作,旅游网页制作,家乡旅游网站4页面,家乡div+css,家乡旅游网站成品,CSS+DIV布局,期末网页大作业,网页作业成品,web前端源码实例,如何制作网页,网页设计思路,如何从零开始制作web页面。


专栏:web前端大作业网页制作
关于我:一个持续输出型博主,爱分享,喜技术,期待关注与交流!
公众号:《IT黄大大》更多分享抢先看;
研究主题:动漫,影视,明星,节日,家乡,旅游,个人,美食,校园,商城,运动等
技术涉猎:HTML+CSS,HTML+CSS+JS,Java+数据库mysql+jsp,vue项目等
开发软件:vscode,dreamweaver,hbuilder,sublime text,eclipse,idea等;


写在前面

前两天分享了一个山西的家乡旅游网页,也有不少粉丝表示喜欢,当然中部地区的一些粉丝也给我留言说能不能搞一个中部地区的家乡网页,都说月是故乡明,这次我就给中部地区我们的湖南省会长沙做一个简约的4页面网页制作,这次主要以简约为主,适合更多的初学者来修改调整,另外也希望我的这次分享能给大家带来作业上的灵感与思路,喜欢的朋友可以去G中号【IT黄大大】上面看更多分享。
声明:原创于博主《IT黄大大》,欢迎大家转载,烦请转前注明出处,感谢大家的支持,更多专栏可关注文尾唯心宫众号《IT黄大大》

一、网页主题

这次其实我是想把国内外很多地方都去做一个网页,尽量覆盖更多人的家乡,当然一开始我是以家乡南京为开始,后面逐渐的扩展到杭州/连云港/山西等地方,博主也将不断的分享更多地方的家乡主题给大家,也期待大家能够持续关注。这个是基于div+css开发的家乡长沙网页,完整源码包包括4个页面,更多源码可以公g众g号《IT黄大大》私信,回复【w019家乡长沙源码】可获取下载链接,希望大家能谅解,创作不易。网站完整源码结构如下:
在这里插入图片描述
看下面的效果图,主要是以简约为主,希望大家能够喜欢这类风格的哈。

二、网页效果

Page1、主页

在这里插入图片描述

Page2、历史长沙

在这里插入图片描述

Page3、著名人物

在这里插入图片描述

Page4、留言区

在这里插入图片描述

三、网页架构与技术

3.1 脑海构思

要想做好一个页面,首先脑子里面得去有个架构,就好比是庖丁解牛,将架构了然于胸,什么困难都会迎刃而解,在制作这种类似网页作业的时候我们一般都是采用浮动布局的方式来实现的,因为这类静态页面的兼容性要求不高,所以我们要想好大致的框架。
声明:原创于博主《IT黄大大》,欢迎大家转载,烦请转前注明出处,感谢大家的支持,更多专栏可关注文尾唯心宫众号《IT黄大大》

3.2 整体布局

在我的页面制作过程中,我主要采用的是浮动式布局,从左往右,从上至下的顺序来进行设计制作的,当然在制作之前我会先给页面框架做一个布局,首先我会设计下面几部分:
菜单:menu(主要是采用a标签进行跳转的)
主体:main(核心内容展示)
底部:foot(版权声明)
其中头部和菜单及底部三个模块都是公用的,针对每个页面的切换主要体现在中间的主体模块,这也是一个好的网页作品必要的四大元素,不然就是斜坡上盖房子了。

3.3 技术说明书

主要应用了web前端2个模块的技术HTML + CSS
HTML模块:主要针对页面的结构搭建,该网站整体采用的是div标签作为盒子,其中包含:
有关无序列表 ul li 、
段落标签 p、
图片标签 img 、
行内标签span、
表单标签input,button
字体标签 h2 h3.等
CSS模块:
主要采用的是浮动式布局的方式,页面搭建主要通过设置div的border属性来确定每个div的位置,然后针对不同的位置定位。针对每个元素通过margin和padding属性来设置不同模块的相对位置,设置文字颜色color属性等。

主要用到了font的文字基本属性,background设置相关背景色。文本居中text-align:center
然后标签模块采用的是border属性,设置div的左边框的厚度和颜色。

四、网页源码

Html

在这里插入图片描述

CSS

在这里插入图片描述

五、源码获取

5.1 获取方式

A、关注g公g众g号:《IT黄大大
B、私信回复【w019家乡长沙源码】。
C、即可获取下载链接。
在这里插入图片描述

作者寄语

如果我的这篇博客对您有帮助、而且您喜欢我的博客内容,请 “点赞” “评论” “收藏” 一键三连哦!当然如果这个文章对您带来不好的体验还希望能多多包涵,一起学习进步。
声明:原创于博主《IT黄大大》,欢迎大家转载,烦请转前注明出处,感谢大家的支持,更多专栏可关注文尾唯心宫众号《IT黄大大》

【关注我 | 获取更多源码 | 优质文章】 带您学习前端知识、CSS特效、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板等! 「在公g众号<IT黄大大>里也会定期分享一些免费好看的html页面,期待您的关注哈」!

2024年我们一起加油,一起成长,感谢您的支持与谅解!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/822182.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux下的IP地址与主机名

IP和主机名 IP地址和主机名 什么是IP地址 IP地址 每一台联网的电脑都会有一个地址&#xff0c;用于和其它计算机进行通讯 IP地址主要有2个版本&#xff0c;V4版本和V6版本&#xff08;V6很少用&#xff0c;课程暂不涉及&#xff09; IPv4版本的地址格式是&#xff1a;a.b…

【AIGC】AIGC在虚拟数字人中的应用:塑造未来互动体验的革新力量

&#x1f680; &#x1f680; &#x1f680;随着科技的快速发展&#xff0c;AIGC已经成为引领未来的重要力量。其中&#xff0c;AIGC在虚拟数字人领域的应用更是引起了广泛关注。虚拟数字人作为一种先进的数字化表达形式&#xff0c;结合了3D建模、动画技术、人工智能等多种先进…

MySQL-锁篇

文章目录 表级锁和行级锁了解吗&#xff1f;有什么区别&#xff1f;行级锁使用有什么注意事项&#xff1f;InnoDB有哪几类行锁&#xff1f;共享锁和排他锁是什么&#xff1f;意向锁有什么用&#xff1f; 锁是一种常见的并发事务的控制方式 表级锁和行级锁了解吗&#xff1f;有什…

鸿蒙HarmonyOS开发规范-完善中

代码规范 所有文件&#xff0c;包括自动生成的编译文件package.json都要格式化&#xff08;IDE快捷键CtrlAltL&#xff09;&#xff1b;函数命名&#xff0c;C大驼峰&#xff0c;TS、JS小驼峰&#xff0c;函数命名注意动宾结构&#xff1b;静态常量需使用全大写&#xff0c;文…

如何提取音频中的封面

大家在播放MP3音乐的时候经常可以在播放器上看到这个音乐的封面&#xff0c;那么我们要如何提取MP3的音乐里面的封面呢&#xff1f; 打开智游剪辑&#xff08;官网: zyjj.cc&#xff09;&#xff0c;搜索音乐封面提取 然后就只需要拖入MP3文件点击提交就可以了 下面这里简单展示…

Python100个库分享第20个—xlrd(办公库篇)

目录 专栏导读库的介绍库的功能库的安装测试数据准备基础用法1:读取xlsx表格基础用法2:读取指定单元格的数据基础用法3:工作表的一些基本信息总结专栏导读 🌸 欢迎来到Python办公自动化专栏—Python处理办公问题,解放您的双手 🏳️‍🌈 博客主页:请点击——> 一晌…

预分频器×重装载值)/LSI频率 为什么等于总时间

1. 第一种算法理解&#xff1a;分频系数 64 &#xff0c;外部低速时钟40khz&#xff0c; 则一次计数周期1.6ms &#xff0c;计数625个数&#xff0c;则有625个周期 &#xff0c;1.6ms*625 等于1s 如果分频系数是64&#xff0c;外部低速时钟&#xff08;LSI&#xff09;频率是…

K8S之Resource Quotas

参考文档&#xff1a;资源配额 | Kubernetes 1.Resource Quotas&#xff1a;资源配额管理 当多个用户或团队共享具有固定节点数目的集群时&#xff0c;人们会担心有人使用超过其基于公平原则所分配到的资源量。 资源配额是帮助管理员解决这一问题的工具。 资源配额&#xff0c…

Linux硬件管理

文章目录 Linux硬件管理1.查看磁盘空间 df -h2.查看文件的磁盘占用空间 du -ah3.查看系统内存占用情况 htop Linux硬件管理 1.查看磁盘空间 df -h 语法 df [选项][参数]选项 -a或–all&#xff1a;包含全部的文件系统&#xff1b; –block-size<区块大小>&#xff1a;…

微信小程序浮标,可以拖动,自动靠边隐藏一半客服图标功能

不多说&#xff0c;直接上代码。全屏拖动无抖动&#xff0c;中间停留自动靠边&#xff0c;拖动隐藏一半&#xff0c;可自己根据代码改动为自己想要的效果 js代码 import { tpStaticUrl,basictpStaticUrl } from "../../../envConfig"; let app getApp(); Componen…

Python 基于 OpenCV 视觉图像处理实战 之 OpenCV 简单实战案例 之十三 简单去除图片水印效果

Python 基于 OpenCV 视觉图像处理实战 之 OpenCV 简单实战案例 之十三 简单去除图片水印效果 目录 Python 基于 OpenCV 视觉图像处理实战 之 OpenCV 简单实战案例 之十三 简单去除图片水印效果 一、简单介绍 二、简单去除图片水印效果实现原理 三、简单去除图片水印效果案例…

神经网络压缩图像

简介 典型的压缩管道由四个组件组成&#xff1a; 编码&#xff1a;输入图像 x x x通过编码器函数 ε \varepsilon ε&#xff0c;将其转换为潜在表示 z z z。 量化&#xff1a;截断 z z z以丢弃一些不重要的信息 熵编码&#xff1a;使用某种形式的熵编码&#xff08;例如&…

盲人安全导航技巧:科技赋能让出行更自如

作为一名资深记者&#xff0c;长期关注并报道无障碍领域的发展动态。今日&#xff0c;我将聚焦盲人安全导航技巧&#xff0c;探讨这一主题下科技如何赋能视障人士实现更为安全、独立的出行。一款融合了实时避障、拍照识别物体及场景功能的盲人出行辅助应用叫做蝙蝠避障&#xf…

Java中Session的实现

在Java中&#xff0c;Session是一种用于在Web应用程序中跟踪用户状态的机制。它允许服务器在不同的HTTP请求之间存储和检索特定于用户的信息。Session是建立在HTTP协议之上的&#xff0c;它通过在服务器和客户端之间传递一个唯一的标识符来跟踪用户。 下面是对Java中的Session的…

4G/5G布控球/移动执法仪/智能单兵电力巡检远程视频智能监控方案

一、背景与需求 随着科技的不断进步&#xff0c;视频监控技术已成为电力行业不可或缺的一环。电力行业的巡检及建设工作&#xff0c;因施工现场在人迹罕见的野外或山区&#xff0c;地形复杂多变&#xff0c;安全更是重中之重&#xff0c;现场工作的视频图像需实时传回监管中心…

全量知识系统 程序详细设计之 “组织”与“分析”(QA SmartChat)

Q1. 今天我们聊聊全量知识系统&#xff08;“全知系统”&#xff09;中的“组织”与“分析” 全知系统是指一个包含所有可能知识和信息的系统&#xff0c;它具有对所有领域的知识的理解和洞察力。在这样一个系统中&#xff0c;组织和分析是非常重要的环节&#xff0c;可以帮助…

【读论文】【泛读】三篇生成式自动驾驶场景生成: Bevstreet, DisCoScene, BerfScene

文章目录 1. Street-View Image Generation from a Bird’s-Eye View Layout1.1 Problem introduction1.2 Why1.3 How1.4 My takeaway 2. DisCoScene: Spatially Disentangled Generative Radiance Fields for Controllable 3D-aware Scene Synthesis2.1 What2.2 Why2.3 How2.4…

LabVIEW变速箱自动测试系统

LabVIEW变速箱自动测试系统 在农业生产中&#xff0c;采棉机作为重要的农用机械&#xff0c;其高效稳定的运行对提高采棉效率具有重要意义。然而&#xff0c;传统的采棉机变速箱测试方法存在测试效率低、成本高、对设备可能产生损害等问题。为了解决这些问题&#xff0c;开发了…

HTTP协议安全传输教程

HTTP协议有多个版本&#xff0c;包括但不限于HTTP/0.9、HTTP/1.0、HTTP/1.1、HTTP/2和HTTP/3。这些版本各自具有不同的特点和改进&#xff0c;以适应网络技术的发展和满足不同的需求。例如&#xff0c;HTTP/1.0使用文本格式传输数据&#xff0c;简单易用且兼容性好&#xff0c;…

C++11 Thead线程和线程池

参考资料&#xff1a; 2、5.lock_guard 与 std::unique_lock-陈子青的编程学习课堂 (seestudy.cn) 3、C11 多线程编程-小白零基础到手撕线程池_哔哩哔哩_bilibili 一、 C11 Thead线程库的基本使用 # include <thread> std::thread t(function_name, args...); // 线…