制作XX理工大学网页

今天上午学完了常用标签和表格。下午的任务是每人独立完成制作一个网页,仿照XX理工大学的官网。刚学没多久,所以选了一类比较简单的网页来练手。基本所有中国大学的官网都差不多都很简单,访问量也不大。

上来先把XX理工大学网页上的几个主要图片截图保存下,当然了那些动态图和图片轮流显示的方式我们都还没学,所以就用一个图来代替。图片都准别好后,就开始写代码了。XX理工大学的官网布局很简单,就是表格中嵌套新的表格。

代码敲了也不知道多长时间,终于写了个大概。检查代码的时候突然发现,代码都写了将近200行了!不过因为不喜欢也没有写注释的习惯,所以代码出问题的时候每次查找都有点儿费劲,幸好代码不长。

最后,终于都做完了,当然有些地方偷了些懒,标题很多地方都用111111111111111代替了。

小结:

在表格中一段文字或图片向上/下/左/右

align left center right

valign top middle bottom

仿照XX理工大学代码:

<body>
<table border="0" width="100%">
<tr>
<td width="50%"><img src="img/01.png" width="100%" height="100%"/></td>
<td>
<table border="0" width="100%" height="100%">
<tr>
<td width="100%" height="50%">
<center>
<a href="w.html" target="_blank">在校生</a>+
<a href="w.html" target="_blank">教职工</a>+
<a href="w.html" target="_blank">考生</a>+
<a href="w.html" target="_blank">校友</a>+
<a href="w.html" target="_blank">访客</a>
</center>
</td>
</tr>
<tr>
<td width="100%" height="50%" align="right" valign="bottom"><img src="img/02.png"/></td>
</tr>
</table>
</td>
</tr>
</table>
<hr />
<!--下划线-->
<table width="100%">
<tr width="100%">
<td><a href="w.html" target="_blank">首页</a></td>
<td><a href="w.html" target="_blank">新闻网</a></td>
<td><a href="w.html" target="_blank">学校概况</a></td>
<td><a href="w.html" target="_blank">机构设置</a></td>
<td><a href="w.html" target="_blank">师资队伍</a></td>
<td><a href="w.html" target="_blank">科学研究</a></td>
<td><a href="w.html" target="_blank">人才培养</a></td>
<td><a href="w.html" target="_blank">招生就业</a></td>
<td><a href="w.html" target="_blank">大学文化</a></td>
<td><a href="w.html" target="_blank">国际交流</a></td>
<td><a href="w.html" target="_blank">校友联谊</a></td>
</tr>
</table>
<img src="img/03.png"/>
<table border="0" width="100%">
<tr>
<td width="40%">
<table border="0" width="100%">
<tr>
<td>
<b>学校新闻</b><br><br />
<left>更多</left>
本网讯5月2日下午,校党委书记吕传毅在鸿远楼九楼会议室主持召开党委常委会,学习贯彻全省推进“两学一做”学习教育常态化制度化工作座谈会...
<a href="w.html">详细</a>
<ul>
<li><p><a href="w.html">11111111111111111111111111111</a></p></li>
<li><p><a href="w.html">11111111111111111111111111111</a></p></li>
<li><p><a href="w.html">11111111111111111111111111111</a></p></li>
<li><p><a href="w.html">11111111111111111111111111111</a></p></li>
<li><p><a href="w.html">11111111111111111111111111111</a></p></li>
<li><p><a href="w.html">11111111111111111111111111111</a></p></li>
</ul>
</td>
</tr>
<tr>
<td>
<b>通知公告</b><br />
<ul>
<li><p><a href="w.html">11111111111111111111111111111</a></p></li>
<li><p><a href="w.html">11111111111111111111111111111</a></p></li>
<li><p><a href="w.html">11111111111111111111111111111</a></p></li>
<li><p><a href="w.html">11111111111111111111111111111</a></p></li>
</ul>
</td>
</tr>
</table>
</td>
<td width="35%">
<table border="0" width="100%" height="100%">
<tr>
<td>
<b>图说理工&nbsp;&nbsp;&nbsp;视频理工</b><br /><br />
<img src="img/04.png" width="100%" height="100%"/>
</td>
</tr>
<tr>
<td>
<b>媒体报道</b><br />
<ul>
<li><p><a href="w.html" target="_blank">11111111111111111111111111111</a></p></li>
<li><p><a href="w.html" target="_blank">11111111111111111111111111111</a></p></li>
<li><p><a href="w.html" target="_blank">11111111111111111111111111111</a></p></li>
<li><p><a href="w.html" target="_blank">11111111111111111111111111111</a></p></li>
<li><p><a href="w.html" target="_blank">11111111111111111111111111111</a></p></li>
<li><p><a href="w.html" target="_blank">11111111111111111111111111111</a></p></li>
<li><p><a href="w.html" target="_blank">11111111111111111111111111111</a></p></li>
</ul>
</td>
</tr>
</table>
</td>
<td>
<table border="0" width="100%" height="100%">
<tr>
<td>
<b>学术活动</b><br />
<p>
<a href="w.html" target="_blank">民法通则解析</a><br />
主讲人:赵明宝<br />
地点:大学生艺术中心<br />
</p>
<p>
<a href="w.html" target="_blank">对全面从严治党的几点认识</a><br />
主讲人:王绍兴<br />
地点:2号教学楼119室<br />
</p>
<p>
<a href="w.html" target="_blank">计算数学研究进展</a><br />
主讲人:董庆英教授<br />
地点:15号教学楼430室<br />
</p>
<p>
<a href="w.html" target="_blank">数学文化与大学生素质</a><br />
主讲人:张知学教授<br />
地点15号教学楼505室<br />
</p>
</td>
</tr>
<tr>
<td>
<b>专题信息</b><br />
<ul>
<li><p><a href="w.html" target="_blank">11111111111111111111111111111</a></p></li>
<li><p><a href="w.html" target="_blank">11111111111111111111111111111</a></p></li>
<li><p><a href="w.html" target="_blank">11111111111111111111111111111</a></p></li>
<li><p><a href="w.html" target="_blank">11111111111111111111111111111</a></p></li>
</ul>
</td>
</tr>
</table>
</td>
</tr>
</table>
<hr />
<table border="0" width="100%">
<tr width="100%">
<td><th><a href="w.html" target="_blank">图书馆 </a></th></td>
<td><th>·</th></td>
<td><th><a href="w.html" target="_blank">信息公开</a></th></td>
<td><th>·</th></td>
<td><th><a href="w.html" target="_blank">招标采购</a></th></td>
<td><th>·</th></td>
<td><th><a href="w.html" target="_blank">办公系统</a></th></td>
<td><th>·</th></td>
<td><th><a href="w.html" target="_blank">邮件系统</a></th></td>
<td><th>·</th></td>
<td><th><a href="w.html" target="_blank">校园VPN</a></th></td>
<td><th>·</th></td>
<td><th><a href="w.html" target="_blank">在线学习</a></th></td>
<td><th>·</th></td>
<td><th><a href="w.html" target="_blank">站点导航</a></th></td>

</tr>
</table>
<table border="">
<tr>
<td><th>123</th></td>
</tr>
</table>
<img src="img/05.png"/>
</body>

时间: 2024-08-23 23:11:14

制作XX理工大学网页的相关文章

商品详情页面特殊制作,获取网页的高度,collectionView根据内容的变化其高度也随着变化

商品详情页面特殊制作,获取网页的高度,collectionView根据内容的变化其高度也随着变化,首先先看下效果图: 然后我来介绍一下这个界面的总体架构,整个页面上放置一个tableView,下面的网页是tableView的footerview,中间规格所在的区域是一个cell上放置一个collectionView, 问题点1:商品规格可能有很多种,比如颜色.重量.也可能没有规格,所以中间的cell的高度是根据规格的多少而变化的,那么collectionView创建完成以后要怎么通知tableV

制作IOS企业版网页下载

有时候我们下载苹果的应用程序时不是从AppStore下载的.而是从XX网上下载的.那我们如何将苹果的应用程序IPA文件放到自己的官网上,然后供用户下载了.这样就不需要等待慢长的审核过程, 使用过android的朋友可能就会想,这不简单,直接放在服务器上,提供一个下载地址就不可以下载安装了吗? 你答对了一半,下载到手机上是没有问题,但能像apk 那样单击安装吗?当然不能.那怎么办了,过程还是有点复杂,接下来我将step-by-step的讲解一下. Step1:  配置plist文件 , 基于下面的

关于制作第一个网页的总结

看关于html,css和js的书已经有一段时间了,今天试着将自己学到的技能实践了一下,先上图!!!! 现将模拟制作的过程总结一下:              1,拿到网页效果图的时候分析了下结构,确定采用浮动固定布局之后就开始做了              2,把大的框架写好以后,再细分小的框架内容              3,在制作的过程中往往效果一样,但实现的方式可以不同              4,完全按照自己的手法制作,但有些tag还拿捏不准,有的时候乱用             

flex-布局,轻松制作移动端网页

这是我不久之前看到的一篇,当时还在为响应式布局苦恼,不过学习了这个,觉得轻松多了. Flex 布局教程 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. 2009年,W3C提出了一种新的方案----Flex布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能. 一

纯CSS制作各种各样的网页图标(三角形、暂停按钮、下载箭头、加号等)

三角形 <div class="box"></div> <style>.box{ width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 50px solid transparent; border-right: 50px solid red; } </style> 平行四边形图

JQuery制作简单的网页导航特效

使用JQuery中hover()方法,使其根据鼠标的移动简单的改变背景颜色; hover();用于模拟鼠标指针悬停事件,当鼠标指针移动到元素上时,会触发指定的第一个函数,当鼠标指针移除这个元素时,会触发第二个函数:类似于mouseover和mouseout组合具体的代码如下: html代码: <div class="nav"> <ul> <li><a href="#">首页</a></li> &

Bootstrap+Html5制作强大的网页视频播放器

在做视频管理系统时,我们的定位是做到类似土豆视频的功能.视频管理,当然播放是必不可少的.在做这个播 放页面的时候,也研究了一下土豆的播放器,土豆用的是自己做的.但由于我们目前的技术有限,于是想着从网上找 一个现成的插件,于是开始了播放器的技术选型. 我发现了一个好的插件叫Video.js,研究了一下.基本的播放没问题,但当需要动态传参播放视频的时候,该款 播放器却很难跟着我的思路走,参数动态传不进去.如果现在去研究内部的js,改动内部代码,时间不允许.于是迫 不得已,只能另换解决方案. 搜索一番

首次使用photoshop制作简单的静态网页页面

刚刚进入IT领域,我首先接触到的是PhotoShop软件.经过一周的学习,我对PS软件已经有了初步的认识.PS首先是一款修图软件,对于图片中不太美观的地方可以按照自己的想法做任意的修改,利用"蒙版"工具可以做图片间的融合,这给我们提供了巨大的创作空间:其次,它可以进行图片和动画的制作,静态网页页面和多张图片的联动动画都可以在这里完成. 周五我做了两个简单的静态网页页面:网上购物的注册界面和登录页面,也借此检测一下自己对PS软件的掌握程度.在制作过程中,我发现许多问题并从中总结到了一些经

JQuery插件制作具有动态效果的网页

JQuery插件 制作具有动态效果的网页   前  言 JQuery 今天我给大家介绍一个运用JQuery插件制作的动态网页--iphone 5C 宣传页面.这个网页中运用到了fullpage.js和move.js两个插件. 动态效果           1导入插件 在这个页面中需要用到三款插件,分别是jquery-3.1.1.js(JQuery 3.1.1版本).jquery.fullPage.js(附带jquery.fullPage.css)和 move.js 动画插件. 导入顺序也如上所示