div+css实现经典界面

来源：互联网发布：乐视电视需要网络吗编辑：程序博客网时间：2024/06/08 08:44

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

效果还不错吧？

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

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行为

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

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

CSS/表示进入CSS文件夹

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

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

<div class="logintop"></div><div class="loginmiddle"></div><div class="logindown"></div>

效果如下：

2.OK，现在开始写上：

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

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

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

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

⑥img标签的主要两个属性

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

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

⑦在div 中添加

<img alt="图片xkd.jpg" src="../photo/xkd.jpg">

其中src的含义还是一样的

⑧效果如下：

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

⑩在css文件中添加：

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

在<img标签中以class调用>

<img class="phototop" alt="图片xkd.jpg" src="../photo/xkd.jpg">

效果如下：

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标签中:

  <div class="loginmiddle">    <div class="loginmiddleleft"></div>    <div class="loginmiddleright"></div>    </div>

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

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

css中：

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

HTML中：

<div class="loginmiddleleft">    <div class="loginmiddleleftup"></div>    <div class="loginmiddleleftdown"></div></div>

⑤效果如下：

⑥右边可以分为三部分：

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中

<div class="loginmiddleright"><div class="loginmiddlerightup"></div><div class="loginmiddlerightmiddle"></div><div class="loginmiddlerightdown"></div></div>

效果如下：

⑦框架已经OK

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

①在中左上中：

css中：

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

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

HTML中:

<p style="font-family: 楷体;font-size: 24px;font-weight: bolder;">点击进入:<ol><li><a href="http://jwc.xust.edu.cn/news.asp?id=4&bh=1396" target="_blank">2016级本科生校内转专业接收计划</a></li><li><a href="http://jwc.xust.edu.cn/news.asp?id=4&bh=1376" target="_blank">2016—2017学年第二学期期末考试安排</a></li><li><a href="http://jwc.xust.edu.cn/news.asp?id=4&bh=1374" target="_blank">2017届毕业生工作安排专题会</a></li><li><a href="http://jwc.xust.edu.cn/news.asp?id=4&bh=1394" target="_blank">关于利用“爱课程”优质课程资源推动我校教学内容和教学方法改革的通知</a></li><li><a href="http://jwc.xust.edu.cn/news.asp?id=4&bh=1385" target="_blank">关于开展教育部新工科研究与实践项目申报工作的通知</a></li></ol>

其中ol是有序的列表，嵌套一个<a>标签，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中：

<ul>   <li value="1" onclick="changeImg(this)">杨幂</li>   <li value="2" onclick="changeImg(this)">范冰冰</li>   <li value="3" onclick="changeImg(this)">高圆圆</li>   <li value="4" onclick="changeImg(this)">马苏</li>   <li value="5" onclick="changeImg(this)">美女</li>   <li value="6" onclick="changeImg(this)">美女</li>   <li value="7" onclick="changeImg(this)">美女</li>   <li value="8" onclick="changeImg(this)">杨颖</li>   <li value="9" onclick="changeImg(this)">刘亦菲</li></ul><img id="pic" alt="图片" src="../photo/1.jpg" width="40%"  height="295px"style="float: right;margin-right: 17%">

效果如下：

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

在HTML的<head>标签中添加：

  <script type="text/javascript">  function changeImg(fun){  var str=fun.value;  var strimg="../photo/"+str+".jpg";  document.getElementById("pic").src=strimg;  }  </script>

效果如下：

④中右上：

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

HTML中：

<form action="" method=""><table style="width: 300px;height: 180px;border: 0px;" align="center">   <tr>   <td style="width: 150px;height: 60px;border: 0px;" align="center">   <b style="font-family: 楷体;font-size: 24px;color: black;">用户名:</b>   </td>   <td style="width: 150px;height: 60px;border: 0px;" align="center">   <input type="text" name="user">   </td>   </tr>   <tr>   <td style="width: 150px;height: 60px;border: 0px;" align="center">   <b style="font-family: 楷体;font-size: 24px;color: black;">密  码:</b>   </td>   <td style="width: 150px;height: 60px;border: 0px;" align="center">   <input type="password" name="password">   </td>   </tr>   <tr>   <td colspan="2" style="width: 300px;height: 60px;border: 0px;"align="center">   <table style="width: 300px;height: 60px;border: 0px;" align="center">   <tr>   <td style="width: 100px;height: 60px;border: 0px;" align="center">   <a href="" target="_blank"><input type="button" value="注册" style="font-family: 楷体;font-size: 24px;"></a>   </td>   <td style="width: 100px;height: 60px;border: 0px;"align="center">   <input type="reset" value="重置" style="font-family: 楷体;font-size: 24px;">   </td>   <td style="width: 100px;height: 60px;border: 0px;" align="center">   <input type="submit" value="登陆" style="font-family: 楷体;font-size: 24px;">   </td>   </tr>   </table>   </td>  </tr></table></form>

效果如下：

⑤中右中：

播放一个视频，需要使用到H5的<video>标签来实现，当然，前提是把视频加入到工程中，方法还是一样的。

HTML中引用：

<video autoplay="autoplay" preload="preload" controls="controls" src="../video/video1.mp4" type="video/mp4"></video>

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

preload表示视频加载到页面

controls表示显示进度条

src表示播放视频的路径

type表示播放的视频的类型

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

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

效果如下：

⑥中右下

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

HTML中：

<selectonchange="javascript:window.open(this.options[this.selectedIndex].value);" style="margin-top: 40px" >   <option selected="selected" style="font-family: 楷体;font-size:16px; ">------友情链接-------</option>   <option value="http://jwc.xust.edu.cn" style="font-family: 楷体;font-size:16px; ">西安科技大学教务处</option>   <option value="http://www.baidu.com" style="font-family: 楷体;font-size:16px; ">百度一下</option>   <option value="http://www.w3school.com.cn" style="font-family: 楷体;font-size:16px; ">W3SCHOOL</option>   <option value="http://www.google.com" style="font-family: 楷体;font-size:16px; ">谷歌</option></select>

效果如下：

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

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

效果如下：

5.下：

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

①先去掉背景色：

注释掉

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

中的background属性

②加入文字：

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

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

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

style="text-align: center;"

效果如下：

至此，本项目完成。

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

阅读全文

0 0