完成了一个网页，用到了css和html。
网页展示：
正如上图所展示的，当鼠标放到网页上面part任意一个模块的时候绿草的图片就会浮现出来。
代码如下：
html：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>浏览</title> <link rel="stylesheet" href="cssall.css" /> <link rel="stylesheet" href="cssliulan1.css" /> </head> <body> <div style="position:absolute;z-index:100;left:45%;top:10%"> <input type="button" value="next" onClick="window.location.href='1.jsp'"> </div> <div id="box"> <div id="container"> <ul id="conul"> <li class="conli"> <h1>Part 1</h1> <img src="image881.jpg" /> </li> <li class="conli"> <h1>Part 2</h1> <img src="image882.jpg" /> </li> <li class="conli"> <h1>Part 3</h1> <img src="image883.jpg" /> </li> <li class="conli"> <h1>Part 4</h1> <img src="image884.jpg" /> </li> </ul> </div> </div> </body> </html>
css:
#box{ width:100%; height:100%; overflow:hidden; position:relative; } #container,#conul{ width:100%; height:100%; } #conul .conli{ float:left; width:25%; height:100%; background-color:rgb(16,21,36); overflow:hidden; } #conul img{ width:100%; transform:scale(1.10); -webkit-transform:scale(1.10); transition:all 0.5s linear; -webkit-transform:all 0.5s linear; opacity:0; -webkit-opacity:0; filter:alpha(opacity=0); } #conul img:hover{ transform:scale(1.00); -webkit-transform:scale(1.00); opacity:0.5; -webkit-opacity:0.5; filter:alpha(opacity=50); } #conul h1{ width:25%; position:absolute; color:white; top:48%; font-weight:bold; } #conul .ziul{ width:25%; position:absolute; top:9%; display:none; } #conul .ziul li{ width:10%; height:100%; color:white; float:left; font-size:26px; font-family:xingkai; margin-left:20px; } .ziul .first{ padding-left:24px } #nav .curr{ background-color:rgba(75,77,86,1); }
发现每次在写网页的时候，网页的布局对我来说是个难题，以后还要多多练习才行。