使用css方法编写html网页

土味霸总

已于 2022-10-24 10:49:46 修改

阅读量1.6k

点赞数 1

分类专栏： html+css web网页制作文章标签： eclipse java html css tomcat 1024程序员节

于 2022-10-08 10:44:19 首次发布

本文链接：https://blog.csdn.net/tuweibazong/article/details/127203337

版权

web网页制作同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

html+css

3 篇文章 0 订阅

订阅专栏

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

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

我的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文件中调整参数就可以啦。

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

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