奔夢向前-代碼實現表白男生女生-2020-06-15

下面是HTML代碼,由於JS代碼過多,我就以鏈接的形式給大家,然後小白可以登錄賬號然後下載文件就可以打開學習代碼了。

<html>
<head>
<meta charset="utf-8">
<title>奔夢向前</title>
<link rel="stylesheet" href="css/wedding.css">
</head>
<body>
<div class="w-t">
    <div class="w-t-m">親愛的,嫁給我好嗎?</div>
    <img src="png/boom.png" alt="" class="boom1">
    <img src="png/boom.png" alt="" class="boom2">
    <img src="png/boom.png" alt="" class="boom3">
</div>
<div class="w-p">
    <div class="w-m">
        <img src="png/man.png" alt="">
    </div>
    <div class="w-w">
        <img src="png/woman.png" alt="">
    </div>
    <div class="w-f">
        <img src="png/flower.png" alt="">
    </div>
</div>
<div class="w-fls">
    <img src="png/flowers1.png" alt="">
    <img src="png/flowers2.png" alt="">
    <img src="png/flowers1.png" alt="">
    <img src="png/flowers2.png" alt="">
    <img src="png/flowers1.png" alt="">
    <img src="png/flowers2.png" alt="">
</div>
<div class="w-fls w-2">
    <img src="png/flowers1.png" alt="">
    <img src="png/flowers2.png" alt="">
    <img src="png/flowers1.png" alt="">
    <img src="png/flowers2.png" alt="">
    <img src="png/flowers1.png" alt="">
    <img src="png/flowers2.png" alt="">
</div>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>

一起看效果!!!

1、感謝你支持!如果大佬們把代碼按照圖片嘗試不顯示的話,可以切換兼容性的瀏覽器,例如:Google、搜狗瀏覽器、360瀏覽器,切記:不要使用windos自帶的瀏覽器,IE瀏覽器,最好是使用Google。
2、每天不斷學習編程提升自己的編程知識,繼續加油。
有情提示:上面說的都嘗試了,還是沒有出現以上圖片的效果,大家可以嘗試登陸賬號下載文件即可,祝你每天開心學編程。

3、奔夢向前祝你天天開心學編程,網頁設計本身就是屬於小白的入門課程,所以小白們你們可要加油!相信自己一定可以堅持學下去,學精他,到時候自己獨立製作一個屬於自己的網頁界面,分享給你自己的朋友。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章