使用css方法编写html网页

我只做了部分页面,浏览器里面是可以点击直接跳转到另一个页面的。

在放之前我先把自己的文件结构给大家看一下,方便大家构建文件结构:

我的image和html是放在一个文件夹下面的。

第一个页面是一个医院的主页,网页中文字和图片部分来源于网络。

我这一部分的文件名叫做dedault.html

下面是主页的default.html的代码:(在eclipse里面写的html代码)

有些时候加入图片时不显示的话写入图片的完整路径就可以啦,比如D:\Java\cc_()\webapp\image\附属第一医院.jpg

上面的括号是我未写完的文件名称,为了保护隐私,我就把他省略了。

如果还是不出图片的话,可以试试将右斜杠改为左斜杠/,这样一般就可以啦。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>附属第一医院</title>
<link rel="stylesheet" type="text/css" href="new.css">  <!-- 这一行必不可少,是继承.css文件里面的属性 -->
<body bgcolor="lightblue"></body>
</head>
<body>
	<div class="header">   <!-- 标志logo栏 -->
		<img src="image/附属第一医院.jpg" alt="CQMU1logo" width="500"/>
		<!-- alt是当图片不显示的时候,预备的可替换图片的文本 -->
		<div id="svid">
			<form action="">
				<input id="input" type="text" placeholder="请输入要搜索的内容">
				<input id="sbutton" name="搜索" type="image" src="image/搜索.jpg">
			</form>	
		</div>
		<div id="language">
			<input id="English" name="英文版" type="image" src="image/英文版.jpg">
		</div>
		
	</div>  

	<div class="top">
		<div id="title">
			欢迎使用HIS系统(web版)
			<img src="image/HIS.jpg" alt="HIS" width="52"/>
		</div>
		<div id="denglu">
			<form action="denglu.html">
				<input id="sbutton2" type="submit" value="[登录]">
			</form>
		</div>
	</div>
	
	<div class="clearfix">
		<div class="colum sidemenu">
			<ul>
				<li><a href="default.html" class="active">首   页</a></li>
				<li><a href="yygh.html">预约挂号</a></li>
				<li><a href="zjjs.html">专家介绍</a></li>
				<li><a href="czxx.html">出诊信息</a></li>
				<li><a href="jyjcxz.html">检验检查须知</a></li>
				<li><a href="cjwt.html">常见问题</a></li>
				<li><a href="yydh.html">医院导航</a></li>
			</ul>
		</div>
		
		<div class="colum content" style="margin-left:15%;padding:1px 16px;height:397px;">
			<p style="text-indent:2em">  HIS是Hospital Information System 的缩写即医院信息系统美国该领域的著名教授Morris.Collen曾作如下定义:利用电子计算机和通讯设备,为医院所属各部门提供对病人诊疗信息和行政管理信息的收集、存储、处理、提取及数据交换的能力,并满足所有授权用户的功能需求。</p>
  			<p style="text-indent:2em">  HIS的主要功能按照数据流量、流向及处理过程分为临床诊疗、药品管理、经济管理、综合管理与统计分析、外部接口五部分。</p>
  			<p style="text-indent:2em">  HIS提高了医院的现代管理水平、提高了工作效率、优化了医疗流程、促进了医教研质量的提高、增加了医院的经济效益、有利于医改的落实、在突发公共卫生事件中发挥了特有的作用,同时提升了医院文化。</p>
  			<p style="text-indent:2em">  HIS的高级应用包括:医学图像存档与通信系统(picture archiving and communication system ,PACS),病人床边信息系统,电子病历系统,科研支持系统,教学支持系统,Internet 医学情报系统,远程诊断与教学系统等。
		</div>
		<div id="yunzhuan" style="margin-left:65%;">
			<img src="./image/工作运转图像.jpg" width="400px" />
		</div>
	</div>
	<div class="footer">
		<p>地址:某市某区某路1号   电话:*******</p>
		<p>附属第一医院版权所有  *ICP备*****号</p>
	</div>
	
</body>
</html>

 接下来是点击主页上的【登录】按钮,进入登陆页面。我的文件名是denglu.html:

 下面是我在eclipse里面用tomcat写的denglu.html文件的代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>附属第一医院--用户登录界面</title>
<link rel="stylesheet" type="text/css" href="new.css">
<body bgcolor="lightblue"></body>
</head>
<body>
	<div class="header">   <!-- 标志logo栏 -->
		<img src="image/附属第一医院.jpg" alt="CQMU1logo" width="500"/>
		<!-- alt是当图片不显示的时候,预备的可替换图片的文本 -->
		<div id="svid">
			<form action="">
				<input id="input" type="text" placeholder="请输入要搜索的内容">
				<input id="sbutton" name="搜索" type="image" src="image/搜索.jpg">
			</form>	
		</div>
		<div id="language">
			<input id="English" name="英文版" type="image" src="image/英文版.jpg">
		</div>
		
	</div>  

	<div class="top">
		<div id="title">
			欢迎使用HIS系统(web版)
			<img src="image/HIS.jpg" alt="HIS" width="52"/>
		</div>
		<div id="denglu">
			<form action="denglu.html">
				<input id="sbutton2" type="submit" value="[登录]">
			</form>
		</div>
	</div>
	
	<div class="clearfix">
		<div class="colum sidemenu" >
			<ul>
				<li><a href="default.html" class="active">首   页</a></li>
				<li><a href="yygh.html">预约挂号</a></li>
				<li><a href="zjjs.html">专家介绍</a></li>
				<li><a href="czxx.html">出诊信息</a></li>
				<li><a href="jyjcxz.html">检验检查须知</a></li>
				<li><a href="cjwt.html">常见问题</a></li>
				<li><a href="yydh.html">医院导航</a></li>
			</ul>
		</div>
		<div class="double" >
			<div id="dlt" style="margin-left:-5%;padding:1px 30px;height:0px;">
				<img src="image/登录.jpg" alt="登录" />
			</div>
			<div id="login-box" style="margin-left:45%;margin-top:10%;height:304px;">
				<h1 >Login</h1>
				<form action="">
					用户:<input id="zhanghao" type="text" placeholder="请输入您的账号"><br/>
					密码:<input id="mima" name="密码" type="password" placeholder="请输入您的密码"><br/>
					验证码:<input id="yanzhengma" name="验证码" type="text" placeholder="请输入验证码"><br/>
				</form>
				<button>登录</button>
			</div>
		</div>
	</div>
	<div class="footer">
		<p>地址:某市某区某路1号   电话:*******</p>
		<p>附属第一医院版权所有  *ICP备*****号</p>
	</div>

</body>
</html>

接下来是我做的专家介绍的页面,文件名叫做zjjs.html,点击导航栏的专家介绍就是下面这个画面啦:(这里截了一张长图,哈哈!)

 然后下面就是我做的专家介绍的源代码了:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>附属第一医院--专家介绍页面</title>
<link rel="stylesheet" type="text/css" href="new.css">
<body bgcolor="lightblue"></body>
</head>
<body>
	<div class="header">   <!-- 标志logo栏 -->
		<img src="image/附属第一医院.jpg" alt="CQMU1logo" width="500"/>
		<!-- alt是当图片不显示的时候,预备的可替换图片的文本 -->
		<div id="svid">
			<form action="">
				<input id="input" type="text" placeholder="请输入要搜索的内容">
				<input id="sbutton" name="搜索" type="image" src="image/搜索.jpg">
			</form>	
		</div>
		<div id="language">
			<input id="English" name="英文版" type="image" src="image/英文版.jpg">
		</div>
		
	</div>  

	<div class="top">
		<div id="title">
			欢迎使用HIS系统(web版)
			<img src="image/HIS.jpg" alt="HIS" width="52"/>
		</div>
		<div id="denglu">
			<form action="denglu.html">
				<input id="sbutton2" type="submit" value="[登录]">
			</form>
		</div>
	</div>
	
	<div class="clearfix">
		<div class="colum sidemenu" >
			<ul>
				<li><a href="default.html" >首   页</a></li>
				<li><a href="yygh.html">预约挂号</a></li>
				<li><a href="zjjs.html" class="active">专家介绍</a></li>
				<li><a href="czxx.html">出诊信息</a></li>
				<li><a href="jyjcxz.html">检验检查须知</a></li>
				<li><a href="cjwt.html">常见问题</a></li>
				<li><a href="yydh.html">医院导航</a></li>
			</ul>
		</div>
		<div id="stomach">
			胃肠外科
		</div>
		<div class="wlh">
  			<a target="_blank" href="./image/人像1.jpg">
    			<img src="./image/人像1.jpg" alt="Cinque Terre" width="600" height="400" />
  			</a>
  			<p><b><a href="wlh.html" target="_blank">王医生</a></b></p>
		</div>

		<div class="zs">
  			<a target="_blank" href="./image/人像2.jpg">
    			<img src="./image/人像2.jpg" alt="Forest" width="600" height="400" />
  			</a>
  			<p><b><a href="zs.html" target="_blank">张三</a></b></p>
		</div>

		<div class="ls">
  			<a target="_blank" href="./image/人像3.jpg">
    			<img src="./image/人像3.jpg" alt="Northern Lights" width="600" height="400" />
  			</a>
  			<p><b><a href="ls.html" target="_blank">李四</a></b></p>
		</div>

		<div class="ww">
  			<a target="_blank" href="./image/人像4.jpg">
    			<img src="./image/人像4.jpg" alt="Mountains" width="600" height="400" />
  			</a>
  			<p><b><a href="ww.html" target="_blank">王五</a></b></p>
		</div>
		
		<!-- 神经内科 -->
		<div id="nerves">
			神经内科
		</div>
		<div class="ay">
  			<a target="_blank" href="./image/人像4.jpg">
    			<img src="./image/人像4.jpg" alt="Cinque Terre" width="600" height="400" />
  			</a>
  			<p><b><a href="ay.html" target="_blank">敖医生</a></b></p>
		</div>

		<div class="dwj">
  			<a target="_blank" href="./image/人像3.jpg">
    			<img src="./image/人像3.jpg" alt="Forest" width="600" height="400" />
  			</a>
  			<p><b><a href="dwj.html" target="_blank">邓医生</a></b></p>
		</div>

		<div class="zyy">
  			<a target="_blank" href="./image/人像2.jpg">
    			<img src="./image/人像2.jpg" alt="Northern Lights" width="600" height="400" />
  			</a>
  			<p><b><a href="zyy.html" target="_blank">周医生</a></b></p>
		</div>

		<div class="zh">
  			<a target="_blank" href="./image/人像1.jpg">
    			<img src="./image/人像1.jpg" alt="Mountains" width="600" height="400" />
  			</a>
  			<p><b><a href="zh.html" target="_blank">张医生</a></b></p>
		</div>
	</div>
	<div class="footer">
		<p>地址:某市某区某路1号   电话:*******</p>
		<p>附属第一医院版权所有  *ICP备*****号</p>
	</div>
</body>
</html>

 终于来到了最后一步,也就是某一个专家的介绍,点击上一个页面的顾医生文字,即可跳转到下面的页面:(图片是我在网上找的,大爱丞飞!!)

 下面的这个代码就是专为顾医生主页写的啦:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>顾医生(wlh)主页</title>
<link rel="stylesheet" type="text/css" href="new.css">
<body bgcolor="lightblue"></body>
</head>
<body>
	<div class="header">   <!-- 标志logo栏 -->
		<img src="image/附属第一医院.jpg" alt="CQMU1logo" width="500"/>
		<!-- alt是当图片不显示的时候,预备的可替换图片的文本 -->
		<div id="svid">
			<form action="">
				<input id="input" type="text" placeholder="请输入要搜索的内容">
				<input id="sbutton" name="搜索" type="image" src="image/搜索.jpg">
			</form>	
		</div>
		<div id="language">
			<input id="English" name="英文版" type="image" src="image/英文版.jpg">
		</div>
		
	</div>  

	<div class="top">
		<div id="title">
			欢迎使用HIS系统(web版)
			<img src="image/HIS.jpg" alt="HIS" width="52"/>
		</div>
		<div id="denglu">
			<form action="denglu.html">
				<input id="sbutton2" type="submit" value="[登录]">
			</form>
		</div>
	</div>
	
	<div class="clearfix">
		<div class="colum sidemenu" >
			<ul>
				<li><a href="default.html" >首   页</a></li>
				<li><a href="yygh.html">预约挂号</a></li>
				<li><a href="zjjs.html" class="active">专家介绍</a></li>
				<li><a href="czxx.html">出诊信息</a></li>
				<li><a href="jyjcxz.html">检验检查须知</a></li>
				<li><a href="cjwt.html">常见问题</a></li>
				<li><a href="yydh.html">医院导航</a></li>
			</ul>
		</div>
		<div class="wlhys">
			<h1>顾医生</h1>
			<h4>浏览:932次 字体:【大 中 小】</h4><hr/>
			<form action="zjjs.html">
				<input id="sbutton3" type="submit" value=">>>返回"><br/>
			</form>
			<img src="./image/sy2.jpg" alt="wlh" width="600" height="400" /><br/>
			<p style="text-indent:2em">顾医生是胃肠内科教授,主任医师,博士,博士生导师。现任医学会糖尿病分会常委、市糖尿病中心主任等,曾留学于法国、加拿大,从事胃肠工作20余年,擅长内分泌性高血压、糖尿病、甲亢等疾病诊治。</p>
		</div>
	</div>
	<div class="footer">
		<p>地址:某市某区某路1号   电话:*******</p>
		<p>附属第一医院版权所有  *ICP备*****号</p>
	</div>
</body>
</html>

好啦,以上就是我写的全部html代码啦。现在就差约束以及调整这些内容的css文件啦,我将这四个html文件有关的css文件都放在一个里面了。

大家也可以看见我所引用到的都是new.css文件。在每一个html文件的开头都有这一行代码,这一行必不可少,应为有一些大小和位置是在css里面才可以调的。

<link rel="stylesheet" type="text/css" href="new.css">

好啦,话不多说,我直接上new.css文件的代码吧:

@charset "UTF-8";
*{box-sizing:border-box;}
body {  
	margin:0;   /*让结构更加紧凑*/
	width:1277px;

}  

/*header部分*/
.header {
	background-image:url("/images/重庆医科大学附属第一医院.jpg");
	background-attachment:fixed;
	background-repeat:no-repeat;
	/*background-repeat 属性定义了图像的平铺模式.
	从原图像开始重复,原图像由 background-image 定义,并根据 background-position 的值放置
	背景图像的位置是根据 background-position 属性设置的。如果未规定 background-position 属性,图像会被放置在元素的左上角*/
	text-align:left;  /*text-align规定元素中的文本的水平对齐方式*/
	height:74px;  /*设置段落的高度和宽度height,width*/
	overflow: hidden;
}
#svid {
	width:500px;
	height:30px;
	position:absolute;
	top:19px;
	left:650px;
}
#language {
	width:500px;
	height:30px;
	position:absolute;
	top:19px;
	left:1100px;
}
#English {wdith:30px;
		height:40px;
		vertical-align:middle;
		right:30px
}
#sbutton {
	height:40px;
	left:700px;
	vertical-align:middle;
}

#input {
	height:40px;
	width:250px;
	verhical-align:middle;
}

/*top登录模块*/
.top {
	font-size:20px;
	height:70px;
	overflow: hidden;
	width:100%
}
#title {
    line-heilin:30px;
    background-color:#777;
    color:white;
    height:50px;
    width:950px;
    float:left;
    padding:0px; 
    text-align:center;
    font-size:40px;
}

#denglu {
	background-color:white;
	color:black;
    width:327px;
    float:left;
    padding:5px; 
    text-align:center;
}
#sbutton2 {
	width:200px;
	height:40px;
	background-color:white;
	font-size:25px;
	border:none;
}


.cleafix {  /*双冒号消除对后面文字的影响*/
	content: "";
	clear: both;
	display: table;
	height:935px;
	width:70%;
	overflow:hidden;
}  

.content {
	width:45%;
	word-wrap:break-word;
	word-break:break-all;
}
.clearfix .sidemenu {
	width:5%;
}

/*导航栏*/
.sidemenu ul {
  list-style-type: none;
  margin: -15px;
  padding: 0px;
  width: 500%;
  background-color: #f1f1f1;
  height: 60%;
  
  
}

.sidemenu li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

.sidemenu li a.active {
  background-color: #4CAF50;
  color: white;
}

.sidemenu li a:hover:not(.active) {
  background-color: #555;
  color: white;
}

.colum {
	float: left;
	padding: 15px;
}

.footer {
	background-color: #444;
	color: white;
	padding: 10px;
	text-align:center;
	height:90px;
	margin-top:auto;  /*固定在底部*/
	width:100%;
  	left:0px;
  	overflow: hidden;
}

/*登录页面*/
#login-box {
	text-align:center;
	font-size:20px;
}
.double {
	border-style:double;
	width:600px;
	height:395px;
	margin-left:30%;
	border-color:red;
}
/*胃肠外科*/
#stomach {
    line-heilin:25px;
    background-color:blue;
    color:white;
    height:40px;
    width:1090px;
    float:left;
    padding:0px; 
    text-align:center;
    font-size:30px;
    margin-top:-20%;
    margin-left:15%;
}

.wlh {
  margin-left: 23%;
  margin-top:-16%;
  border: 1px solid #ccc;
  float: left;
  width: 180px;
  text-align:center;
}
.wlh img {
  width: 100%;
  height: 200px;
}
.zs {
  margin-top:-16%;
  margin-left: 3%; 
  border: 1px solid #ccc;
  float: left;
  width: 180px;
  text-align:center;
}
.zs img {
  width: 100%;
  height: 200px;
}
.ls {
  margin-left: 3%;
  margin-top:-16%;
  border: 1px solid #ccc;
  float: left;
  width: 180px;
  text-align:center;
}
.ls img {
  width: 100%;
  height: 200px;
}
.ww {
  margin-left: 3%;
  margin-top:-16%;
  border: 1px solid #ccc;
  float: left;
  width: 180px;
  text-align:center;
}
.ww img {
  width: 100%;
  height: 200px;
}

/*神经内科*/
#nerves {
    line-heilin:25px;
    background-color:blue;
    color:white;
    height:40px;
    width:1090px;
    float:left;
    padding:0px; 
    text-align:center;
    font-size:30px;
    margin-left:15%;
}

.ay {
  margin-left: 23%;
  border: 1px solid #ccc;
  float: left;
  width: 180px;
  text-align:center;
}
.ay img {
  width: 100%;
  height: 200px;
}
.dwj {
  margin-left: 3%; 
  border: 1px solid #ccc;
  float: left;
  width: 180px;
  text-align:center;
}
.dwj img {
  width: 100%;
  height: 200px;
}
.zyy {
  margin-left: 3%;
  border: 1px solid #ccc;
  float: left;
  width: 180px;
  text-align:center;
}
.zyy img {
  width: 100%;
  height: 200px;
}
.zh {
  margin-left: 3%;
  border: 1px solid #ccc;
  float: left;
  width: 180px;
  text-align:center;
}
.zh img {
  width: 100%;
  height: 200px;
}

/*个人主页*/
.wlhys {
	font-size:15px;
	text-align:center;
	margin-top:-2%;
}
#sbutton3 {
	background-color:lightblue;
	font-size:5px;
	float:right;
	border:none;
}
.wlhys img {
	width: 120px;
  height: 200px;
}
.wlhys p {
	margin-left:22%;
	width:900px;
	text-align:left;
}

好了,以上就是我全部的代码了,如果有一些图片位置不对的话,找到相应的div对应的css文件中调整参数就可以啦。

有时候可能需要调整很多次参数,要有耐心哦。

这是我第一次写网页的代码,有不太对的地方大家多多指教。

  • 1
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值