博客列表 >html体验案例

html体验案例

Pengsir
Pengsir原创
2018年03月16日 17:53:45566浏览
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>搞笑段子</title>
    <style>
        div{
            width: 1800px;
            height: 800px;
            background-color: yellow;
            font-size: 2em;
            line-height: 5em;
            border: 1px solid lightslategrey;
            padding: 15px;
            background-image: url("img7.jpg");
            background-repeat: no-repeat;
            background-size: cover;
            border-radius: 2em;
            box-shadow: 10px 10px 8px #888;
        }
        h2{
            color: red;
            text-align: center;
            font-size: 100px;
        }
        .text{
            color: green;
            text-align: center;
            /*line-height: 4em;*/
 text-indent: 6em;
        }
    </style>
</head>
<body>
<div>
    <h2 onmouseover="change(this)" onmouseout="old(this)">搞笑段子</h2>
    <p class="text">一天半夜四点多,一朋友打电话来说了一句话:那个,我刚看到手机上有你一个去年的未接来电所以打来问问你有啥事.<br>
        超市里,看见一只五花大绑着的螃蟹从18.9元的冰柜里往28.9元的柜子里爬。我泪流满面,你太TM有上进心了</p>
</div>
<script>
    function change(element) {
        element.style.fontSize='24px'
 element.style.color='yellow'
 }
    function old(element) {
        element.style.fontSize='100px'
 element.style.color='red'
 }
</script>
</body>
</html>

手抄:

01..JPG02.JPG

效果图:

搞笑段子.png

上一条:3-16手记下一条:第一个实例
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议