附加作业

完成了一个网页，用到了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="css\all.css" />
        <link rel="stylesheet" href="css\liulan1.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="image\881.jpg" />
                    </li>
                    <li class="conli">
                        <h1>Part 2</h1>
                        <img src="image\882.jpg" />
                    </li>
                    <li class="conli">
                       <h1>Part 3</h1> 
                         <img src="image\883.jpg" /> 
                    </li>
                    <li class="conli">
                        <h1>Part 4</h1>
                        <img src="image\884.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);
}

发现每次在写网页的时候，网页的布局对我来说是个难题，以后还要多多练习才行。

posted @ 2016-04-25 18:51  董潇2014551502  阅读(163)  评论(0)  编辑  收藏  举报