静态网页练习

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0px;
padding: 0px ;
}
.top-nav{
width: 100%;
height: 40px;
background-color: #808080;
text-align: right;
line-height: 40px;
}
.container{
width: 80%;
height: 1200px;
background-color:red;
margin: 0px auto;
}
.logo-banner{
width 100%;
height: 169px;
background-color: #808080;
}
.logo-left{
width: 20%;
height: 170px;
background-color: white;
float: left;
}
.logo-right{
width: 80%;
height: 170px;
background-color: #FFD700;
float: left;
}
.logo-right-1{
width: 100%;
height: 80px;
background-color: white;
float:left;
color: purple;
text-align: right;
line-height: 80px;
font-size: 20px;
font-weight: bold;
}
.logo-right-2{
width: 100%;
height: 90px;
background-color: white;
float: left;
text-align: right;
color: black;
line-height: 90px;
font-size: 18px;
font-weight: bold;
}
.logo-shop{
width: 100%;
height: 300px;
background-color: chocolate;

}
.btn{
width: 20%;
height: 670px;
background-color: white;
float: left;
}
.list-1{
width: 50%;
height: 670px;
background-color: white;
float: left;
}
.list-2{
width: 30%;
height: 670px;
background-color: white;
float: left;
}
.footer-1{
width: 100%;
height: 30px;
background-color: blue;
float: left;
text-align: center;
line-height: 30px;
}
.footer-2{
width: 100%;
height: 30px;
background-color: white;
float: left;
text-align: center;
line-height: 30px;
}
.btn-1-1{
float: left;
width: 100px;
height: 65px;
}
.btn-2-1{
float: left;
width: 100px;
height: 65px;
}
.list-1-1{
font-size: 18px;
text-align: left;

}
.list-1-1-1{
font-size: 12px;
text-align: left;
list-style: none;
line-height: 40px;
}
a{
text-decoration: none;
color: black;

}
a:visited{
text-decoration: none;

}
.list-1-2{
font-size: 18px;
text-align: left;
overflow: hidden;
}
.list-1-2-1{
font-size: 12px;
text-align: left;
list-style: none;
line-height: 30px;
overflow: hidden;
}
.list-2-1{
font-size: 16px;
text-align: left;
}
.list-2-1-1{
font-size: 12px;
text-align: left;
list-style: none;
line-height: 30px;
overflow: hidden;
}
.list-2-2{
font-size: 16px;
text-align: left;
}
.list-2-2-1{
font-size: 12px;
text-align: left;
list-style: none;
line-height: 30px;
}
.list-2-3{
font-size: 16px;
text-align: left;
}
.list-2-3-1{
font-size: 12px;
text-align: left;
list-style: none;
line-height: 30px;
}
.list-2-4{
font-size: 16px;
text-align: left;
}
.list-2-4-1{
font-size: 12px;
text-align: left;
list-style: none;
line-height: 30px;
}
</style>
</head>
<body>
<div class="top-nav">
·English New Vision Beta·English Vision
</div><!--顶导航-->
<div class="container">
<div class="logo-banner"><!--校徽栏-->
<div class="logo-left">
<img src="SunboHBuilder/img/u=3802107903,1484631994&fm=117&gp=0.jpg" />
</div><!--校徽-->
<div class="logo-right ">
<div class="logo-right-1">
信息公开 | 学生 | 教工 | 考生 | 校友 | 访客
<input type="text" placeholder="请输入关键字"/>
<input type="image" src="img/1.gif" />
</div><!--校徽右1-->
<div class="logo-right-2">
首页 &nbsp;南开概况&nbsp;院系机构 &nbsp; 南开新闻&nbsp; 人才师资&nbsp; 教育教学 &nbsp; 科学研究 &nbsp; 国际交流&nbsp; 招生就业 &nbsp;图书馆 &nbsp; 服务指南
</div><!--校徽右2-->
</div>
</div>
<div class="logo-shop">
<img src="img/BGPyong.jpg" />
</div><!--图片栏-->
<div class="btn">
<div class="btn-1-1">
<img src="img/bangongwang.jpg" />
</div>
<div class="btn-1-1">
<img src="img/xiaozhangxinxiang.gif"/>
</div>
<div class="btn-1-1">
<img src="img/jiaoyujijinhui.gif" />
</div>

<div class="btn-2-1">
<img src="img/nankaixiaoyouhui.gif" />
</div>
<div class="btn-2-1">
<img src="img/xinximenhu.gif" />
</div>
<div class="btn-2-1">
<img src="img/VPNfuwu.gif" />
</div>
<input type="text" placeholder="用户名" /><br />
<input type="password" /><br />
<select size="1"><br />
<option >教工电子邮箱</option>
<option >学生电子邮箱</option>
</select><br />
<a href="#">教工邮箱注册</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="submit" name="提 交" /><br />
<a href="#">学生邮箱注册</a><br />
<a href="#">VPN服务》》</a><br />

</div><!--按钮栏-->
<div class="list-1">
<div class="list-1-1">
最新动态&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;更多-》
</div>
<ul type="circle" class="list-1-1-1">
<li><a href="#">校党委常委会召开巡视整改民主生活会;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;07-18</a></li>
<li><a href="#">学校召开2017年暑期工作会议;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;07-21</a></li>
<li><a href="#">第九届全国MBA商业伦理与企业社会责任教学研讨会南开召开;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;07-21</a></li>
<li><a href="#">商学院推行课程思政 全过程突显德育元素;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;07-21</a></li>
<li><a href="#">我校教职工党支部书记示范班赴井冈山培训;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;07-20</a></li>
<li><a href="#">南开学子苗春当选第五届天津市道德模范;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;07-20</a></li>
<li><a href="#">我校2017年本科高招录取进程过半 生源质量稳中有升;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;07-20</a></li>
<li><a href="#">学校召开新提任处级领导干部廉政谈话会;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;07-20</a></li>
<li><a href="#">第七届“图书馆学实证研究”博士生学术会议南开举行;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;07-20</a></li>
<li><a href="#">?一名经济学博士的西部基层梦;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;07-20</a></li>
<li><a href="#">?学校党委要求组织师生收看《将改革进行到底》;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;07-19</a></li>
<li><a href="#">南开大学团队研获新型生物荧光探针设计策略;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;07-18</a></li>
</ul>
<div class="list-1-2">
校情通报&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;更多-》
</div>
<span class="list-1-2-1"><a href="#">7月6日，天津市政协副主席、我校党委书记魏大鹏在昆明会见云南省委书记、省人大常委会主任陈豪，省委副书记、省长阮成发。省委常委、常务副省长宗国英，省委副秘书长、省委办公厅主任刘立志，省政府副秘书长赵瑞君，我校领导杨克欣、张亚、佟家栋等参加会见。
南开大学办公室
2017年7月10日 </a>
</span>
</div><!--多文本栏-->
<div class="list-2">
<div class="list-2-1">
通告公告&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;更多->
</div>
<ul type="circle" class="list-2-1-1">
<li><a href="https://www.baidu.com" target="_blank">暑假期间教务处办理全日制本科毕...07-17</a></li>
<li><a href="https://www.baidu.com" target="_blank">2017年暑期全校值班安排07-14</a></li>
<li><a href="https://www.baidu.com" target="_blank">南开大学中层干部拟提拔任用人选...07-20</a></li>
<li><a href="https://www.baidu.com" target="_blank">八里台校区大中路施工的通知07-20</a></li>
<li><a href="https://www.baidu.com" target="_blank">2017年暑期职工医疗费报销和医保...07-17</a></li>

</ul>
<div class="list-2-2">
干部选任&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;更多->
</div>
<ul type="circle" class="list-2-2-1">
<li><a href="https://www.baidu.com" target="_blank">关于推荐结对帮扶困难村驻村干部...07-20</a></li>
<li><a href="https://www.baidu.com" target="_blank">关于考察党委组织部欧迎希的预告07-03</a></li>
<li><a href="https://www.baidu.com" target="_blank">关于考察党委组织部张洋的预告07-03</a></li>
</u>
<div class="list-2-3">
南开大学电视新闻&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;更多->
</div>
<ul class="list-2-3-1">
<li><a href="https://www.baidu.com" target="_blank">南开大学电视新闻2017年7月14日07-14</a></li>
<li><a href="https://www.baidu.com" target="_blank">南开大学电视新闻2017年7月11日07-11</a></li>
</ul>
<div class="list-2-4">
媒体南开&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;更多->
</div>
<ul class="list-2-4-1">
<li><a href="https://www.baidu.com" target="_blank">天津日报：一个问题的解决就是对...07-21</a></li>
<li><a href="https://www.baidu.com" target="_blank">今晚报：启功笔下的溥佐07-21</a></li>
<li><a href="https://www.baidu.com" target="_blank">辽宁卫视：锦州义勇军抗战遗址成...07-20</a></li>
<li><a href="https://www.baidu.com" target="_blank">光明日报：史学研究的主旨在于求...07-20</a></li>
<li><a href="https://www.baidu.com" target="_blank">天津广播网：恢弘重现改革历程 ...07-20</a></li>
</ul>
</div><!--少文本栏-->
<div class="footer-1">
南开招标网&nbsp;&nbsp;&nbsp;滨海学院&nbsp;&nbsp;&nbsp;附属小学&nbsp;&nbsp;&nbsp;学习网&nbsp;&nbsp;&nbsp;觉悟网&nbsp;&nbsp;&nbsp;校史网&nbsp;&nbsp;&nbsp;后勤保障部&nbsp;&nbsp;&nbsp;讲座网
</div>
<div class="footer-2">
天津市卫津路94号&nbsp;&nbsp;&nbsp;&nbsp;[300071]&nbsp;&nbsp;&nbsp;&nbsp;津教备0061号&nbsp;&nbsp;&nbsp;&nbsp;津ICP号12003308号——1

</div>

</div><!--内容-->
</body>
</html>

时间： 2024-08-06 03:45:39

静态网页练习的相关文章

静态网页开发技术-HTML

今天我重新复习了一下静态网页开发技术,概括如下. 一 .HTML文档结构与基本语法 :放置了标签的文本文档,可供浏览器解释执行的网页文件 1.注释标记 2.标记 3.属性 二.基本标记与使用 1.网页基本结构与标记 2.文本与段落标记 3.列表标签 4.超链接标签 5.图片标记 6.定时刷新或跳转 7.表格 三 HTML表单标签与表单设计 1.<FORM>标记及其属性 2  <INPUT>标记及其属性 3 <下拉列表框<SELECT>,<OPTION>

静态网页框架设计首次体验（文章改）

根据教材与上网成功解决了Tomcat与Myeclipse的安装,同时熟悉了Java web创建项目到部署运行整个过程.今天起正式开始学习有关Java web的编程部分.Java web静态网页(HTML网页)的标记含义.基本语法的介绍到框架设计基本模板与案例,今天的学习的内容,让网页编程有了一个初步的框架.结合自身所在协会的情况,计划制作一个关于协会的网页,已有初步想法,望通过学习不断完善和修改协会网站.根据今天所学,并参考书本30页框架设计案例对网页进行初步搭建. 具体代码如下 TW.jsp:

HTML5静态网页实战开发—企业网页

一.首先找到模板 二.勾画框架(写div),切图(ps) 三.实战开始 这一次共花了一下午时间,利用html.css做出静态网页 在外观,布局,动画都有一点改善 四.静态网页效果 倒数第二的div是一组图片滚动动画(仿js),利用css3写出(缺点是兼容性并不是很好) 五.部分源码(需要完整的可以联系我) HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8

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

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

动态网页和静态网页的特点

静态网页的基本概述静态网页的网址形式通常是以.htm..html..shtml..xml等为后后缀的.静态网页,一般来说是最简单的HTML网页,服务器端和客户端是一样的,而且没有脚本和小程序,所以它不能动.在HTML格式的网页上,也可以出现各种动态的效果,如.GIF格式的动画.FLASH.滚动字母等,这些"动态效果"只是视觉上的,与下面将要介绍的动态网页是不同的概念. 静态网页的特点(1)静态网页每个网页都有一个固定的URL,且网页URL以.htm..html..shtml等常见形式为

原理与示例：php+mysql+jquery 生成静态网页（含后台编辑功能）

从Web的工作原理来看,用户访问HTML所带来的服务器负载要远小于访问动态页面,因为在前者中,服务器只用把对应的html代码发送给客户端即可,而在后者中,服务器则需要根据访问条件进行一系列的计算,然后生成html代码,最后把运算结果代码发送给客户端. 所以,对于访问量较大的宣传式网站(比如新闻类),要尽可能地使用静态页面. 另一方面,我们不可能让网站编辑人员来一个一个地手工制作这些HTML,那样就是回到多年前的纯静态时代了.我们可以用动态语言来方便.快捷地生成这些静态网页.而且,目前这一技术已经

ASP.NET总结——静态网页与动态网页

刚刚看完<北大青鸟ASP.NET>视频的前六集.这六集视频给我太多太多听觉和视觉上的"刺激"(太卡了).尽管如此,在视频当中,我依然接触了许多新的概念,知识.(其实也不算新,只是这次好像正式了些.)之后,它们就激起了我很大的求知欲望.可是搜索了一番,还是觉得自己理解地很浅显,但是我觉得非常有必要总结一下,这样才能为以后深入地理解打下基础.         静态网页与动态网页 当初,在看<牛腩新闻发布系统>的时候,小牛老师有的时候创建的网页的后缀是.aspx的,有

静态网页开发技术

静态网页是指可以由浏览器解释执行而生成的网页,其开发技术主要有HTML.JavaScript.和CSS.HTML是一组标签,负责网页的基本表现形式:JavaScript是在客户端浏览器运行的语言,负责在客户端与用户的互动:CSS是一个样式表,起到美化整个页面的功能. HTML(Hyper Text Markup Language)即超文本标记语言,是用来编写网页文件的标准,定义了一组标记(tag,也称标签)用来描述Web文档数据. 用HTML编写的超文本文档称为HTML文档(文件),是一个放置了

利用CSS制作静态网页的注意事项

利用CSS制作静态网页主要是在<head>里面使用外联CSS文件来赋予网页样式 首先用div分区块,了解网页布局,脑子里面有个大概的页面布局 目前学习写的几种的网页布局可以分为以下几种情况: 1.页面中间 centen ,两边留白 :直接测量 centen 内容的宽度和高度,利用 maigin:auto 让内容居中即可: 2.页面顶部 head 满页面内容 ,下面centen 居中 ,两边留白:head 宽度设为100%,中间centen 内容的宽度和高度,利用 maigin:auto 让内容

静态网页与动态网页的理解

静态网页的工作原理 静态网页也称为普通网页,是相对网页而言的.静态网页不是指网页中的元素都是静止不动的,而是指网页文件中没有程序代码,只有HTML(超文本标记语言)标记,一般后缀为.htm..html..shtml或.xml等.在静态网页中,可以包括GIF动画,鼠标经过Flash按钮时,按钮可能会发生变化. 静态网页一经制成,内容就不会再变化,不管何人何时访问,显示的内容都是一样的. 如果要修改网页的内容,就必须修改其源代码,然后重新上传到服务器上. 对于静态网页,用户可以直接双击打开,看到的效