Blogger Information
Blog 42
fans 0
comment 1
visits 26125
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
第一课作业20180315
日薪月e的博客
Original
847 people have browsed it

效果图:

效果图.png

效果图02.png

代码:

实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>第一个作业</title>
    <style type="text/css">
        h3{
            color: brown;
            text-align: center;
            font-size: 20px;
        }
        div{
            width: 400px;
            height: 250px;
            padding: 15px;
            background-size: 430px 280px;
            background-image: url(images/bg01.jpg);
            border-radius: 20px;
            box-shadow: 6px 6px 6px #888;
        }
            .text{
            color: #363636;
            line-height: 1.5em;
            text-indent: 2em;
            font-weight: bolder;
        }
    </style>
</head>
<body>
    <div>
        <h3 onmouseover="change(this)" onmouseout="old(this)">荷塘月色</h3>
        <p class="text">曲曲折折的荷塘上面,弥望的是田田的叶子。叶子出水很高,像亭亭的舞女的裙。层层的叶子中间,零星地点缀着些白花,有袅娜地开着的,有羞涩地打着朵儿的;正如一粒粒的明珠,又如碧天里的星星,又如刚出浴的美人。</p>
    </div>
    <script type="text/javascript">
        function change(element) {
        element.style.fontSize = '24px'
        element.style.color = 'green'
        }
        function old(element) {
        element.style.fontSize = '20px'
        element.style.color = 'brown'
        }
    </script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

01.jpg02.jpg

03.jpg

Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post