我和我的家乡网页制作_第三弹：制作家乡网页设计的全过程（图文教程）

最新推荐文章于 2024-05-15 00:00:18 发布
Blitzkreig 最新推荐文章于 2024-05-15 00:00:18 发布
阅读量9.6k 收藏 39
点赞数 7
文章标签： 我和我的家乡网页制作
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接： https://blog.csdn.net/weixin_35955928/article/details/113371353
版权

 前话 

终于迎来了第三弹，本篇完成两个菜单的制作，分别是"家乡美景"和"家乡美食"，这也是最近在许多小伙伴的要求下抽空完成的教程，emmm，希望大家喜欢~

 规划 

好了言归正传，书接上文，开始设计第三页家乡美景和第四页家乡美食，还是那句话，观阅此篇之前强烈建议先阅读第一弹和第二弹，因为此篇是以其为基础的。第一弹：制作家乡网页设计的全过程(图文教程)第二弹：制作家乡网页设计的全过程(图文教程)  制作 由于有之前两篇作为基础，本篇教程节奏会快一点1、打开上期制作的文件夹，复制一份introduce.html，并且重命名为landscape.html，此页为 【 家乡美景】 页2、编辑landscape.html家乡美景需要放家乡的照片，因此设计布局为4宫格敲黑板了...这里的布局和之前有所不同，这里用到了表格嵌套。可能有小伙伴要问什么是表格嵌套？嵌套表格，就是在一个大的表格中，再嵌进去一个或几个小的表格。 关键代码 
<tr>      <td>        <table>            <tr>                <td>                    <img src="images/1.jpg" style="width:500px;height:300px;"/>                td>                <td>                    <img src="images/2.jpg" style="width:500px;height:300px;"/>                td>            tr>            <tr>                <td>                    <img src="images/3.jpg" style="width:500px;height:300px;"/>                td>                <td>                    <img src="images/4.jpg" style="width:500px;height:300px;"/>                td>            tr>        table>    td>tr>
效果图

ff065e4b0f40c789bc8b8bb481047dd0.png

3、再复制一份introduce.html，并且重命名为food.html，此页为 【 家乡美食】 页 关键代码 
<tr>      <td>        <table>            <tr>                <td style="width:200px;vertical-align:top;">                    <img src="images/5.jpg" style="width:200px;height:625px;"/>                td>                <td style="width:800px;">                    <table style="width:800px;vertical-align:top;">                        <tr>                            <td style="vertical-align:top;">                                <img src="images/6.jpg" style="width:400px;height:290px;"/>                            td>                            <td style="vertical-align:top;">                                <img src="images/7.jpg" style="width:400px;height:290px;"/>                            td>                        tr>                        <tr>                            <td style="vertical-align:top;" colspan=2>                                <img src="images/8.jpg" style="width:800px;"/>                            td>                        tr>                    table>                td>            tr>        table>    td>tr>
效果图

1b3ac798c7988b9d6fd7f3d9fe96c0d1.png

 百度云下载 

链接：

https://pan.baidu.com/s/1d5cMbN7ivCYrwNGKlqYJ6w

提取码：

znrg

Blitzkreig
关注 关注
  • 7
    点赞
  • 踩
  • 39
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
介绍家乡的html_第二弹：制作家乡网页设计的全过程（图文教程）
weixin_39653761的博客
01-26 1万+
前话已经有段时候没有更新了，也有小伙伴给我留言，问我啥时候更新，由于忙于所忙(到底忙什么？小编也要为生计而奔走)，鲜少去回复大家的留言，还请大家见谅，今天准备了第二更，emmmmm，终究是更新周期还是定不下来... 规划好了废话不多说，开始今天的主题，今天书接上文，设计第二页家乡介绍，好了，开始盘ta...观阅此篇之前强烈建议先阅读 《第一弹：制作家乡网页设计的全过程(图文...
html静态web期末作业网页设计制作 HTML——我的家乡（网页源码 ）dw静态网页成品模板素材网页 web前端网页设计与制作 div静态网页设计
网页设计与制作
03-18 2180
1网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了Logo（源文件）所需的知识点。
204. Web前端网页制作 我的家乡武汉网页设计实例 大学生期末大作业 html+css
最新发布
A240307的博客
05-15 1074
我的家乡武汉网页设计实例，应用html+css： Div、导航栏、图片轮翻效果、留言表单等。适用于大学生网页课程作业设计，供大家参考。
【网页制作】我的家乡连云港网页制作（附源码下载）
赏樱看雪撸代码
12-05 398
我的家乡网页制作，网页制作demo，简单的网页制作，3页面网页制作，网页制作图文说明，我的家乡网页制作源码下载。
大学生网页设计作业——家乡主题网页设计 我的家乡广州
而风不止
12-16 250
一套合格的网页应该包含(具体可根据个人要求而定)页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分；所有页面相互超链接，可到三级页面，有5-10个页面组成；页面样式风格统一布局显示正常，不错乱，使用Div+Css技术；菜单美观、醒目，二级菜单可正常弹出与跳转；要有JS特效，如定时切换和手动切换图片新闻；页面中有多媒体元素，如gif、视频、音乐，表单技术的使用；页面清爽、美观、大方，不雷同。
【web网页制作】html+css旅游家乡山西主题网页制作（3页面）【附源码】
赏樱看雪撸代码
04-15 1105
山西旅游主题网页制作，家乡山西网页，山西主题web开发，山西网页制作期末网页大作业，网页作业家乡成品，web前端源码旅游主题实例，如何制作网页，网页设计思路，如何从零开始制作web页面。
大二Web课程设计——家乡主题网页设计（web前端网页制作课作业） 四川旅游网页设计制作
wx___BJ050106的博客
12-31 594
网页作品编辑作品下载后可使用任意HTML编辑软件（如：`DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ 等任意HTML软件编辑修改网页） 网页作品技术：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。
WEB静态网页设计与制作——我的美丽家乡邢台
weixin__BJ050106的博客
01-07 199
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web
关于我的家乡html网页设计完整版,10个以家乡为主题的网页设计与实现
网页设计与制作 | HTML+CSS+JS
09-29 6754
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
我和我的家乡网页制作_绝对、相对路径，百度网盘小案例制作
weixin_30415591的博客
01-20 1663
在制作这个小案例之前，我们先来了解一下绝对地址和相对地址绝对地址：在任何情况下，都可以准确找得到的地址（例如我的家乡在山东济宁）相对地址：必须知道当前所在，才能找到的地址（例如我家里我的衣服放在了什么位置）如果我们在一个网址下链接了一个相对路径，那我们点击这个相对路径，就会以网页地址为参考，相对于这个地址进行内部跳转。二、百度云盘小案例图片大家可以自己截取一下，没必要非要一样图片。第一步，先把顶部...
【web开发网页制作】Html+Css网页制作关于我的家乡（6页面）【附源码下载】
赏樱看雪撸代码
03-20 3552
html制作页面，CSS制作页面，关于我的家乡页面制作，网页设计源码下载，如何制作页面，新手如何制作网页，DW网页制作及VScode制作网页，网页大作业，期末web大作业
完整网页设计的步骤
12-22
介绍了整个网页设计的步骤，对概念模糊的初学者来说是有一定帮助的。
网页设计制作作业-我的家乡
01-22
网页设计制作作业 主题：我的家乡 刘亚群@德州学院 本作品欢迎在保留此说明的前提下分发和修改 在线预览此作品：http://my.micsite.net/Memory/dzu/netcenter/20121215/index.html 作者网站：...
我和我的家乡昭通.rarhtml+css，网页web设计制作作业，期末设计
02-22
1、设计由多个网页组成的小型网站，自选主题，要求积极、健康， 不得从网络上下载； 2、构建本地站点，创建站点目录； 3、站点目录中各种文件分类存放，文件命名科学，网站不少于 10个页面； 4、整个网站内容大小不...
期末前端web大作业——我的家乡陕西介绍网页制作源码
08-10
乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 ...
用DIV+CSS技术设计我的家乡网站（web前端网页制作课作业）南宁绿城之d
08-10
乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 ...
云南民族文化旅游网页设计制作 简单静态HTML网页作品 我的家乡网页作业成品 学生旅游网站模板
08-10
乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 ...
HTML5期末大作业：饮食食品主题设计——绿色简洁生鲜超市网站设计(5页) HTML+CSS+JavaScript web前端大二实训大作业
qq_365392777
09-26 9971
HTML5期末大作业：饮食食品主题设计——绿色简洁生鲜超市网站设计(5页) HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平
web网页设计实例作业 我的家乡- 达州(4页) HTML+CSS+JavaScript dreamweaver作业静态HTML网页设计模板
热门推荐
qq_524614081的博客
04-10 1万+
HTML5期末大作业：家乡网站设计——我的家乡- 达州(4页) HTML+CSS+JavaScript dreamweaver作业静态HTML网页设计模板 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设
网页设计与制作+我的家乡
12-17
网页设计与制作是指通过使用HTML、CSS和JavaScript等技术，创建具有良好用户体验和视觉效果的网页。下面是一个简单的例子来介绍如何制作一个关于"我的家乡"的网页： 1. 首先，创建一个HTML文件，并在文件中添加基本的HTML结构： ```html <!DOCTYPE html> <html> <head> <title>我的家乡</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <header> <h1>我的家乡</h1> </header> <nav> <ul> <li><a href="#about">关于</a></li> <li><a href="#history">历史</a></li> <li><a href="#culture">文化</a></li> <li><a href="#photos">照片</a></li> </ul> </nav> <section id="about"> <h2>关于我的家乡</h2> <p>这里是关于我的家乡的介绍。</p> </section> <section id="history"> <h2>历史</h2> <p>这里是关于我的家乡的历史。</p> </section> <section id="culture"> <h2>文化</h2> <p>这里是关于我的家乡的文化。</p> </section> <section id="photos"> <h2>照片</h2> <img src="photo1.jpg" alt="照片1"> <img src="photo2.jpg" alt="照片2"> <img src="photo3.jpg" alt="照片3"> </section> <footer> <p>版权所有 © 2021 我的家乡</p> </footer> </body> </html> ``` 2. 创建一个CSS文件（style.css），并为网页添加样式： ```css body { font-family: Arial, sans-serif; margin: 0; padding: 0; } header { background-color: #333; color: #fff; padding: 20px; text-align: center; } nav { background-color: #f2f2f2; padding: 10px; } nav ul { list-style-type: none; margin: 0; padding: 0; } nav ul li { display: inline; margin-right: 10px; } nav ul li a { text-decoration: none; color: #333; } section { padding: 20px; } footer { background-color: #333; color: #fff; padding: 10px; text-align: center; } ``` 3. 准备一些关于你家乡的照片，并将它们命名为photo1.jpg、photo2.jpg和photo3.jpg，并与HTML文件放在同一个文件夹中。 这样，你就创建了一个简单的关于"我的家乡"的网页。你可以根据自己的需求和喜好，进一步添加内容和样式来完善网页。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
写文章

热门文章

  • 我和我的家乡网页制作_第三弹：制作家乡网页设计的全过程（图文教程） 9630
  • python 小数点位数,python如何保留小数点位数 9510
  • 计算机系统记忆部件是,什么是计算机系统的记忆部件 7805
  • html span自动换行,span标签里的内容过长如何设置自动换行 7337
  • 计算机开机关响五声原因,电脑开机持续的5声短响是怎么回事 7155

您愿意向朋友推荐“博客详情页”吗？

  • 强烈不推荐
  • 不推荐
  • 一般般
  • 推荐
  • 强烈推荐
提交

最新文章

  • 换手机游戏显示服务器爆满,雪鹰领主手游服务器爆满无法进入游戏问题分析
  • 服务器系统没有界面,裸金属服务器操作系统有图形界面嘛
  • t3出纳系统连接不到服务器,用友T3里面的出纳通提示连接系统数据库失败...
2021年140篇
2020年19篇

目录

目录

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值

哆哆女性网金宝拉木命适合起的名字跛豪电影商标起名原则雷雨剧本战地21.5网上婴幼儿起名带富的公司起名大全诗经给品牌起名韩国电影流感抗日奇侠35集肖还可以起什么名字美少女万华镜4攻略穆总的天价小新娘全文免费阅读叶佳期乔斯年小说全文免费阅读男孩子双胎起名大全奥古斯丁我也追星鼠年双胞胎男孩起名丽柜网毒战2饭店起名大全取名对书店起个名字个体工商起名卖东西起名大全免费取名布雷斯塔警长国语assign神秘海域1剧情鼠年姓苏男宝宝起名通信店起名淀粉肠小王子日销售额涨超10倍罗斯否认插足凯特王妃婚姻不负春光新的一天从800个哈欠开始有个姐真把千机伞做出来了国产伟哥去年销售近13亿充个话费竟沦为间接洗钱工具重庆警方辟谣“男子杀人焚尸”男子给前妻转账 现任妻子起诉要回春分繁花正当时呼北高速交通事故已致14人死亡杨洋拄拐现身医院月嫂回应掌掴婴儿是在赶虫子男孩疑遭霸凌 家长讨说法被踢出群因自嘲式简历走红的教授更新简介网友建议重庆地铁不准乘客携带菜筐清明节放假3天调休1天郑州一火锅店爆改成麻辣烫店19岁小伙救下5人后溺亡 多方发声两大学生合买彩票中奖一人不认账张家界的山上“长”满了韩国人？单亲妈妈陷入热恋 14岁儿子报警#春分立蛋大挑战#青海通报栏杆断裂小学生跌落住进ICU代拍被何赛飞拿着魔杖追着打315晚会后胖东来又人满为患了当地回应沈阳致3死车祸车主疑毒驾武汉大学樱花即将进入盛花期张立群任西安交通大学校长为江西彩礼“减负”的“试婚人”网友洛杉矶偶遇贾玲倪萍分享减重40斤方法男孩8年未见母亲被告知被遗忘小米汽车超级工厂正式揭幕周杰伦一审败诉网易特朗普谈“凯特王妃P图照”考生莫言也上北大硕士复试名单了妈妈回应孩子在校撞护栏坠楼恒大被罚41.75亿到底怎么缴男子持台球杆殴打2名女店员被抓校方回应护栏损坏小学生课间坠楼外国人感慨凌晨的中国很安全火箭最近9战8胜1负王树国3次鞠躬告别西交大师生房客欠租失踪 房东直发愁萧美琴窜访捷克 外交部回应山西省委原副书记商黎光被逮捕阿根廷将发行1万与2万面值的纸币英国王室又一合照被质疑P图男子被猫抓伤后确诊“猫抓病”

哆哆女性网 XML地图 TXT地图 虚拟主机 SEO 网站制作 网站优化