奔梦向前-代码实现表白男生女生-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、奔梦向前祝你天天开心学编程,网页设计本身就是属于小白的入门课程,所以小白们你们可要加油!相信自己一定可以坚持学下去,学精他,到时候自己独立制作一个属于自己的网页界面,分享给你自己的朋友。

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