zoukankan      html  css  js  c++  java
  • 附加作业

    完成了一个网页,用到了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);
    }

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

  • 相关阅读:
    Android 工程师进阶 34 讲
    300分钟搞定数据结构与算法
    即学即用的Spark实战44讲
    42讲轻松通关 Flink
    Webpack原理与实践
    大数据运维实战
    ZooKeeper源码分析与实战
    前端高手进阶
    重学数据结构与算法
    ElementUI中el-upload怎样上传文件并且传递额外参数给Springboot后台进行接收
  • 原文地址:https://www.cnblogs.com/Axiao1995A/p/5432295.html
Copyright © 2011-2022 走看看