HTML/CSS/JS实例：动态网页效果展示-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_51219169/article/details/134991319

啥也不说直接看效果

在这里插入图片描述

运行方式

直接点文件手机识别到浏览器就可以看到啦，贼方便的！
要是运行不起来就下载qq浏览器；

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>那年那月</title>
</head>
<body>
    <h1 style="color: aquamarine;">你</h1><br>
    <h2 style="color: rgb(8, 89, 239);">好</h2><br>
    <h4 style="color: rgb(20, 19, 19);">我</h3><br>
    <h5 style="color: rgb(232, 10, 202);" >来</h4><br>
    <h6 style="color: rgb(245, 65, 11);">了</h5>
    <h6 style="color: red;">!</h6>
    <div id="zhansgan" style="    width: 300px;height: 283px;">
        <img style="margin-top: 24px; margin-left: 29px; width: 80%; height: 80%;" src="http://s4m85wmdn.hn-bkt.clouddn.com/log.png">
        <a href="http://39.105.21.39:8081/#/loginOne" id="kaka">激动的心，颤抖的手</a>
    </div>
    <!-- b加粗 i倾斜 u下划线 s删除线 -->
    <p style="font-size: 16px;text-indent: 2em;margin-left: 20px;">很高兴认识你，以后请多多关照哦！</p>
    <p style="font-size: 16px;text-indent: 2em;margin-left: 20px;">日照香炉生紫烟，遥看瀑布挂前川！</p>
    <p style="font-size: 16px;text-indent: 2em;margin-left: 20px;">飞流直下三千尺，疑似银河落九天！</p>
    <hr>
    <div class="weiwei">
        <audio style="width: 358px;" controls src="http://s4m85wmdn.hn-bkt.clouddn.com/ohh原唱-相见恨晚.mp3"></audio>
    </div>
    <p style="margin-left: 119px;margin-top: -528px;font-size: 29px; color: black;">相见恨晚</p>
    <div id="abc">
        <img class="yuyu"  src="http://s4m85wmdn.hn-bkt.clouddn.com/IMG_20230919_182530.jpg" title="这是牛马">
        <button style="margin-left: 110px;" onclick="Onclicl()">点击有惊喜</button>
    </div>
</body>
</html>
<style>
    #zhansgan{
        margin-top: -415px;
        margin-left: 45px;
    }
    #kaka{
        margin-top: 0px;
        margin-left: 70px;
    }
    #abc{
        width: 340px;
        height: 255px;
        background-color: #fff;
        margin-left: 10px;
        margin-top: 500px;
        display: flex;
        flex-wrap: wrap;
    }
    .yuyu{
        width: 96%;
        height: 90%;
        margin-top: 1px;
        margin-left: 7px;
    }
    .weiwei{
        width: 180px;
    }
    body{
        background-image: url(http://s4m85wmdn.hn-bkt.clouddn.com/true.jpg);
        background-size: contain;
        background-position: center top;
        background-attachment: fixed;
        
    }
</style>
<script>
    function Onclicl(){
        alert("点个毛哇，掉毛");
    }
</script>