div+css实现经典界面

废话不多说，先上一张效果图：

效果还不错吧？

下面我来说说实现的过程：

1.确定框架：

在上面的页面中，被分为三部分：上，中，下

上：一张图片

中：比较复杂

下：一段文字

①在项目的WebRoot下新建一个文件夹:CSS

②在CSS文件夹下新建一个css文件，如果在待选中找不到css文件，可以点击Other,搜索css

好吧，看具体的css代码：

.logintop{
	width: 1096px;
	height: 250px;
	margin: auto;
	background: yellow;
}
.loginmiddle{
	width: 1096px;
	height: 596px;
	margin: auto;
	background: #EE6DF1;
}
.logindown{
	width: 1092px;
	height: 96px;
	margin: auto;
	background: purple;
	border: 2px solid red;
}

③创建好css文件，那就在html文件中引用：

④新建一个HTML文件夹，在HTML文件夹中新建一个index.html文件：

empty

⑤修改第10行为

其中的点点表示退出本层文件夹，即-------HTML文件夹

CSS/表示进入CSS文件夹

MyCss.css表示目标css文件。（MyCss.css是我创建的css文件的全名称）

⑥在HTML文件中使用div来引用css文件中的样式在标签中添加

效果如下：

2.OK，现在开始写上：

①上只是一张图片，所以，先要把图片加到工程中

②在WebRoot下新建一个photo文件夹

③把需要的图片拷贝到photo文件夹里
④在HTML文件中引用

⑤在上这个div标签中使用标签引用

⑥img标签的主要两个属性

alt:表示当图片的路径失效时显示的信息，比如，图片无法正常显示，那么就会显示这里的数据

src:表示需要显示的图片的路径

⑦在div 中添加

其中src的含义还是一样的

⑧效果如下：

⑨发现图片不能以黄色的区域全部覆盖，所以需要设置图片的css样式

⑩在css文件中添加：

.phototop{
	width: 100%;
	height: 100%;
}

在

效果如下：

3.我们在来写中：

发现中可以分为两部分：

左：

右：
①在css文件中加入如下代码：

.loginmiddleleft{
	border: 2px solid #6B72F3;
	width: 752px;
	height: 592px;
	float: left;
}
.loginmiddleright{
	width: 336px;
	height: 592px;
	border: 2px solid #5AE9E6;
	float: right;
}

②在HTML文件中进行引用，在middle的div标签中:

③为了便于观察，我们使用/* */注释掉中的背景色，效果如下：

④再次研究发现，中的左侧还可以继续分为上下两个：

css中：

.loginmiddleleftup{
	width: 748px;
	height: 288px;
	border: 2px solid blue;
}
.loginmiddleleftdown{
	width: 748px;
	height: 296px;
	border: 2px solid yellow;
}

HTML中：

⑤效果如下：

⑥右边可以分为三部分：

css:

.loginmiddlerightup{
	width: 332px;
	height: 195px;
	border: 2px solid green;
}
.loginmiddlerightmiddle{
	width: 332px;
	height: 193px;
	border: 2px solid orange;
}
.loginmiddlerightdown{
	width: 332px;
	height: 192px;
	border: 2px solid blue;
}

HTML中

效果如下：

⑦框架已经OK

4.在上面的框架中写入东西，为了方便起见，我们命名为中左上，中左下，中右上，中右中，中右下

①在中左上中：

css中：

ol li{
	font-size: 24px;
	font-weight: bolder;
	font-family: "楷体";
}

这个不需要使用class调用，会自动调用。

HTML中:

点击进入:
	

	
2016级本科生校内转专业接收计划
	
2016—2017学年第二学期期末考试安排
	
2017届毕业生工作安排专题会
	
关于利用“爱课程”优质课程资源推动我校教学内容和教学方法改革的通知
	
关于开展教育部新工科研究与实践项目申报工作的通知
	

其中ol是有序的列表，嵌套一个标签，a标签中的href属性是点击文字后将要跳转的链接地址，target属性表示新开窗口显示跳转后的界面。

但是这样的效果是文字有下划线，所以需要在css样式中去掉：

a{
	text-decoration: none;
}

效果如下：

②在中左下中发现可以分为两部分，不过我们这次不使用div：

css中：

ul{
	width: 150px;
	height: 295px;
	list-style-type: none;
	float: left;
	border: 1px solid red;
	margin-top: 0px;
}

ul li{
	font-family: 楷体;
	font-weight: bolder;
	font-size: 24px;
}

HTML中：

   
杨幂
   
范冰冰
   
高圆圆
   
马苏
   
美女
   
美女
   
美女
   
杨颖
   
刘亦菲

	

效果如下：

③但是发现点击不同的名字不能更换照片，所以还需要用到jsp的知识，

在HTML的标签中添加：

效果如下：

④中右上：

发现中右上有注册，重置，提交，所以需要表单来提交信息

HTML中：

   

   	

   		用户名:
   	
   	

   		
   	
   
   

   	

   		密  码:
   	
   	

   		
   	
   
   

   	

   		
   	
  

效果如下：

⑤中右中：

播放一个视频，需要使用到H5的

HTML中引用：

其中autoplay表示自动播放，当页面加载完成后，视频开始播放

preload表示视频加载到页面

controls表示显示进度条

src表示播放视频的路径

type表示播放的视频的类型

这时可以发现视频的大小好像不对，所以需要在css中修改视频的大小：

video{
	width: 100%;
	height: 100%;
}

效果如下：

⑥中右下

是一个下拉框，选中下拉框后的内容后会进行跳转

HTML中：

   ------友情链接-------
   西安科技大学教务处
   百度一下
   W3SCHOOL
   谷歌

效果如下：

但是发现下拉框不在最中间

所以需要在上层的div标签中添加align="center"属性，

效果如下：

5.下：

最下面只是一段文字，利用空格和换行就可以实现：

①先去掉背景色：

注释掉

.logindown{
	width: 1092px;
	height: 96px;
	margin: auto;
	/*background: purple;*/
	border: 2px solid red;
}

中的background属性

②加入文字：

          学校：西安科技大学          专业：计算机科学与技术专业
          班级：计算机科学与技术专班                     学号：140803XXXX
          姓名：贾XX          性别：男


其中， 表示一个英文空格，
表示换行 效果如下：

发现文字并不居中，所以在上层的div中设置文字居中属性：

style="text-align: center;"

效果如下：

至此，本项目完成。

总结一下，本项目中使用到了div,css,from表单，jsp,下拉列表，表格，标签，输入框，列表等等。