HTML完成我的校园网页实现 HTML+CSS

已于 2022-11-09 17:40:51 修改
阅读量6.3k 收藏 160
点赞数 18
分类专栏： 前端 文章标签： html 前端 css 网站
于 2022-11-09 16:33:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_67259816/article/details/127760481
版权

目录

一.网站题目

二.网站描述

三.网页演示

四.部分网页代码 

一.网站题目

            校园官网网页高仿设计，完成设计与制作

二.网站描述

           HTML实现我的校园网页设计，采用HTML和CSS布局，只做了简单的静态页面。导航区域使用一种喜庆的红色，更多的内容使用table标签完成。

三.网页演示

四.部分网页代码 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>西安培华学院-首家走向百年的民办大学</title>
	</head>
	<body>
		<table border="0" cellspacing="0" width="1900" bgcolor="#D4143C">
			<tr>
				<td> </td>
				<td><img src="https://www.peihua.cn/image/logo.png" alt="" height="150" width="150"></td>
				<td align="right" style="color: aliceblue;"><font size="5">未来学生|</font></td>
				<td align="right" style="color: aliceblue;"><font size="5">在校学生|</font></td>
				<td align="right" style="color: aliceblue;"><font size="5">教师邮箱|</font></td>
				<td align="right"style="color: aliceblue;"><font size="5">学生邮箱|</font></td>
				<td align="right" style="color: aliceblue;"><font size="5">全景培华|</font></td>
				<td align="right" style="color: aliceblue;"><font size="5">English|</font></td>
				<td align="center" style="color: aliceblue;"><font size="5"><input type="text"></font></td>
				<td><img src="https://p.qpic.cn/qidian_pic/2852169027/201905235785b1d20be85c3c3c0a4fd80fd3de69/0" height="150" width="150"></td>
			</tr>
		</table>
		<table border="0" cellspacing="0" width="1900">
			<tr><td align="right"><font size="5">走进培华</font></td>
			    <td align="right"><font size="5">院系设置</font></td>
				<td align="right
				"><font size="5">教育教学</font></td>
				<td align="center"><font size="5">科学研究</font></td>
				<td align="center"><font size="5">创新创业</font></td>
				<td align="center"><font size="5">招生就业</font></td>
				<td align="center"><font size="5">对外交流</font></td>
				<td align="center"><font size="5">党团建设</font></td>
				<td align="center"><font size="5">维之图书馆</font></td>
				<td align="center"><font size="5">数字化校园平台</font></td>
			</tr>
		</table>
		<table border="0" cellspacing="0" width="1900">
			<tr>
				<td><img src="https://www.peihua.cn/images/dongmenguanwanglunbo20211108.jpg" alt="" width="1900"></td>
			</tr>
		</table>
		<table border="0" cellspacing="0" width="1500" align="center">
			<tr>
				<td style="color:#D4143C ;"><h2>培华要闻</h2></td>
				<td></td>
				<td align="right">更多>></td>
			</tr>
			<tr>
				<td><img src="https://www.peihua.cn/__local/3/4E/8D/8D2B7D7116091A8E3F87269632A_8890690E_28D8D.png"  width="400" height="231" alt=""><p>图书馆发挥劳动育人优势开展劳动实践活动</p></td>
				<td><img src="https://www.peihua.cn/__local/1/4E/D4/7B9C913B7595FA1D987E94C0BA6_FFBEFA5B_9DF28.png" width="400" height="231"  alt=""><p>陕西省中国画研究院院长张毅教授向学校捐赠个人书画作品</p></td>
				<td><img src="https://www.peihua.cn/__local/C/51/93/C2AFC4685DB29E5990E6E1D6332_C58464D5_96BA0.png" width="400" height="231" alt=""><p>学校劳动教育教研室召开2022-2023学年秋季学期教学部署会</p></td>
			</tr>
			
		</table>
		<table border="0" cellspacing="0" width="1700" align="center">
			<tr>
				<td style="color:#D4143C ;" align="left" width="400"><h1>新闻动态</h1></td>
				<td align="center" width="600">更多>></td>
				<td style="color:#D4143C ;" align="left" width="450"><h1>媒体培华</h1></td>
				<td align="center" width="350">更多>></td>
			</tr>
			<tr>
				<td rowspan="7"><img src="https://www.peihua.cn/__local/3/3B/42/1DA777705566D673D1FB363C392_79201083_37393.png" alt="" width="330" height="240"></td>
				<td width="600"><p>图书馆发挥教育人优势开展劳动实践活动...2022-11-08</p></td>
				<td width="450"><p>西安商网：秦创原长安大学城...</p></td>
				<td width="350"><p>2022-10-31</p></td>
			</tr>
			<tr><td width="600"><p>陕西省中国画研究院长张毅向学校捐赠...2022-11-04</p></td>
				<td width="450"><p>中国教育在线：秦创原长安大...</p></td>
				<td width="350"><p>2022-10-31</p></td>
			</tr>
			<tr>
				<td width="600"><p>西安培华学院与新长安投资集团签署战略合作...2022-11-04</p></td>
				<td width="450"><p>中国青年网：秦创原长安大学...</p></td>
				<td width="350"><p>2022-10-31</p></td></tr>
			<tr>
				<td width="600"><p>学校省级学生工作精品项目和研究课题...2022-11-03</p></td>
				<td width="450"><p>界面新闻：秦创原长安大学城...</p></td>
				<td width="350"><p>2022-10-31</p></td></tr>
			<tr>
				<td width="600"><p>2022年新入职教师岗前培训督导检查工作...2022-11-03</p></td>
				<td width="450"><p>国际在线：秦创原长安大学城...</p></td>
				<td width="350"><p>2022-10-31</p></td></tr>
			<tr>
				<td width="600"><p>培华学生在全国大学生先进成图技术与产品...2022-11-02</p></td>
				<td width="450"><p>腾讯新闻：秦创原长安大学城...</p></td>
				<td width="350"><p>2022-10-30</p></td></tr>
			<tr>
				<td width="600"><p>学校劳动教育教研室召开2022-2023学年秋季...2022-11-04</p></td>
				<td width="450"><p>搜狐新闻：秦创原长安大学城...</p></td>
				<td width="350"><p>2022-10-30</p></td></tr>
		</table>
		<table border="0" cellspacing="0" width="1900" bgcolor="#D4143C">
			<tr>
				<td rowspan="5"><img src="https://www.peihua.cn/image/d100.png" alt=""></td>
				<td colspan="2" align="center" style="color: aliceblue;">友情链接：中华人民共和国教育部|陕西省教育厅|中国教育信息网|中国教育考试网|陕西传媒网</td>
				<td></td>
			</tr>
			<tr>
				<td align="left" style="color: aliceblue;">长安校区</td>
				<td align="left" style="color: aliceblue;">高新校区</td>
			</tr>
			<tr>
				<td align="left" style="color: aliceblue;" height="40">地址：西安市长安区常宁大街888号</td>
				<td align="left" style="color: aliceblue;">地址：西安市高新区白沙路南段2号</td>
			</tr>
			<tr>
				<td align="left" style="color: aliceblue;">电话：029-85680000</td>
				<td align="left" style="color: aliceblue;">电话：029-85680000</td>
			</tr>
			<tr>
				<td align="left" style="color: aliceblue;">邮编：710125</td>
				<td align="left" style="color: aliceblue;">邮编：710065</td>
			</tr>
		</table>
		
	</body>
</html>

shadow_58
关注
  • 18
    点赞
  • 踩
  • 160
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
专栏目录
HTML+CSS大作业：基于HMTL校园学校网页设计题材【我的学校网站】
qq_38512570的博客
04-03 636
🏫 校园班级网页设计 、👨‍🎓我的班级网页、我的学校、👩‍🎓校园社团、校园运动会、等网站的设计与制作。🏷️HTML我的班级网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和图文并茂页面。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站
html实现学校网站
06-22
用html实现的简单的学校代码。主页里面的对应的附属页。相应有附属页用一个文件夹保存
大学网站HTML模板
06-15
大学网站HTML模板
学校网站源代码学校网页模板正式版
08-16
学校网站源代码学校网页模板正式版学校网站源代码学校网页模板正式版
学校介绍静态HTML网页设计作品 DIV布局学校官网模板代码 DW大学网站制作成品下载 HTML5期末大作业
最新发布
HTML网页设计
05-26 334
🎉精彩专栏推荐 💭文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业： 【📚毕设项目精品实战案例 (1000套) 】 🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】 🌎超炫酷的Echarts大屏可视化源码：【🔰 Echarts大屏展示大数据平台可视化(150套) 】 🔖 HTML+CSS+JS实例代码： 【🗂️HTML+CSS+JS实例代码 (炫酷特效网页代码) 继续更新
一个学校主页HTML代码
11-21
一个简洁的学院主页代码，html+css编写，有需要的朋友可以省下自己设计了。
【网页期末作业】用HTML+CSS做一个漂亮简单的学校官网
网页设计与制作
01-09 1504
🏫 校园网页设计 、学校班级网页制作、学校官网、小说书籍、等网站的设计与制作。🏷️HTML静态网页设计作业使用dreamweaver制作，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力。顶部导航及底部区域背景色为100%宽度，主体内容区域宽度🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语
HTML官网
9981
11-07 1442
http://www.w3.org/html/
大学生网页设计制作作业实例代码 (全网最全,建议收藏) HTML+CSS+JS
QQ_____365392777的博客
12-15 1439
临近期末，大一新生的各种考试和专业结课作业纷至沓来。web实训大作业、网页期末作业、web课程与设计、网页设计等，简直让人头大。你还在为网页设计老师的作业要求感到头大？网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求, 废话不多说，直接看效果。📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确
制作一个简单HTML校园网页（HTML+CSS）学校网站制作 校园网站设计与实现
QQ_____365392777的博客
12-24 515
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大
html网页制作——HTML做一个公司官网首页页面（纯html代码）
html精品源码
12-18 1936
👒 公司官网网站 、企业官网、酒店官网、等网站的设计与制作。🏷️ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站...
学校部门网站html源码
06-15
学校整站源码 ，学校部门网站html源码，学校静态网站源码。
有关学校网站的一些源代码
05-25
包含了一些基本的网页制作框架，一些通用的代码！
Html 官网 蓝色主题
04-27
Html 官网 蓝色主题 Html 官网 蓝色主题Html 官网 蓝色主题
基于HTML+CSS+JS实现漂亮的校园类博客
01-02
基于HTML+CSS+JS实现静态的校园类博客，一共有六个页面，很适合拿来做期末课程大作业
静态网页设计-校园官网（HTML+CSS+JavaScript）
01-04
使用技术：HTML+CSS+JS 主要内容：仿造学校官网的布局进行设计。 适用人群：需要用来学习使用和提交期末作业的学生。 拿来即用，只需对课程报告学号姓名等信息稍作修改即可，代码不用做任何修改。 效果观看：...
HTML期末学生大作业-班级校园我的校园网页设计与实现html+css+javascript
08-10
原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML5期末考核大作业...
制作一个简单HTML校园网页（HTML+CSS）学校网站制作 校园网站设计.md
08-10
原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML静态网页设计...
学校官网网页设计模板css代码
09-07
学校官网的网页设计模板是一个用于建设学校官方网站的模板，它包括了网页的布局和样式。在网页设计模板中，CSS代码起着非常重要的作用。 首先，CSS代码可以用来定义网页的布局和样式。它可以控制网页中各个元素的位置、大小和字体等方面的样式。例如，通过设置盒子模型的宽度和高度，可以实现不同区域的大小调整；通过设置字体样式和颜色，可以调整网页中文字的显示效果。 其次，CSS代码还可以用来定义网页的背景和边框样式。通过设置背景颜色或使用背景图片，可以为整个网页或特定区域添加不同的背景效果。同时，通过设置边框颜色、边框宽度和边框样式，可以为网页各个元素添加边框效果，使页面更加美观。 另外，CSS代码还可以用来实现网页的动画效果和交互效果。通过使用CSS的动画属性和过渡效果，可以为网页中的元素添加各种动态效果，如淡入淡出、旋转等。此外，CSS代码还可以用来为网页中的链接和按钮添加鼠标悬停效果或点击效果，为用户提供更好的交互体验。 总之，CSS代码在学校官网的网页设计中发挥着重要的作用。通过合理运用CSS代码，可以实现学校官网的布局、样式、动画和交互效果，提升网页的可读性和用户体验。

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

shadow_58

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值