博客列表 >315-HTML前端体验

315-HTML前端体验

小威的博客
小威的博客原创
2018年03月16日 10:02:51763浏览
  • 作业源码如下


  • 实例

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>春天的故事</title>
    <style type-"text/css">
         div{
          width:400px;
            height: 250px;
            color: red;
            font-size:15px;
            padding:10px;
            border-radius: 15px;
            box-shadow: 5px 5px 5px #888;
            background-image: url(images/pt1.jpg);
            background-size: 430px 280px;
            background-repeat:no-repeat;
             }
             .text{
              color: red;
              line-height: 1.5em;
              text-indent: 2em;
             }
    </style>
    </head>
    <body style="text-align:center">
    <div>
    <h3 style="color:#0000FF; text-align: center;font-size:20px"
    onmouseover="change(this)"  onmouseout="old(this)">咏柳</h3>
    <p>
    <p><b>碧玉妆成一树高</b></p>
    <p><b>万条垂下绿丝绦</b></p>
    <p><b>不知细叶谁裁出</b></p>
    <p><b>二月春风似剪刀</b></p>
    </div>
    <script type="text/javascript">
        function change(element){
             element.style.fontSize = "30px"
             element.style.color = "green"
        }
        function old(element){
          element.style.fontSize = "20px"
          element.style.color = "#0000FF"
        }
    
    </script>
    </body>
    </html>

    运行实例 »

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

  • 作业效果图

  • 鼠标未经过标题效果

QQ截图20180316100717.jpg

  • 鼠标经过标题时效果

QQ截图20180316100728.jpg

  • 手抄源码作业

QQ图片20180316101006.jpg

QQ图片20180316101001.jpg





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