#2阴阳师首页模块模拟

最新推荐文章于 2024-07-22 11:03:23 发布

Rainbow-彩虹桥

最新推荐文章于 2024-07-22 11:03:23 发布

阅读量90

点赞数 1

分类专栏： Web前端基础知识文章标签： css html html5

本文链接：https://blog.csdn.net/m0_51553630/article/details/120317989

版权

Web前端基础知识专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title> 阴阳师首页模拟</title>
        <style>
            body{
                margin: 0;
            }
            div{
                width: 1050px;
                height: 520px; 
                margin: 100px auto;
                background-color: rgb(216, 129, 187);/* 背景颜色*/
            }
            a{
                float: left;
                /* display: block; */
                width: 230px;
                height: 520px;
                margin-right:15PX;
                margin-left:15px;
                background-color:darkorange;
                transition: 700ms;
            }
            a:hover{
                transform: translateY(-30px);
            }
        </style>
    </head>
    <body>
        <div>
            <a href="https://www.baidu.com" title="官方漫画">
             <img src="images/电子漫画.png">
            </a>
            <a href="https://www.baidu.com" title="电子杂志">
                <img src="images/平安物语.gif">
            </a>
            <a href="https://www.baidu.com" title="主题cos周">
              <img src="images/cos周.jpg">    
            </a>
            <a href="https://www.baidu.com" title="平安物语">
                <img src="images/四季.jpg"> 
            </a>
        </div>
    </body>
</html>

页面效果图

在这里插入图片描述

Rainbow-彩虹桥

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
#2阴阳师首页模块模拟

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title> 阴阳师首页模拟</title> <style> body{ margin: 0; } div{ width: 10
复制链接

扫一扫