html+css 实现图片整体布局效果

最新推荐文章于 2021-06-10 13:01:43 发布

JSHeng@

最新推荐文章于 2021-06-10 13:01:43 发布

阅读量5.5k

点赞数

分类专栏： html

本文链接：https://blog.youkuaiyun.com/jiaosheng1/article/details/78176875

版权

html 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个使用HTML5和CSS实现的响应式单页应用案例，包括页面结构设计、样式设置及交互效果实现等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

        <!doctype html>
        <html>
        <head>
        <meta charset="utf-8">
        <title>周考一</title>
        <link rel="stylesheet" href="css/zhoukao1.css">
        </head>
        <body>
        <div class="da">
        <div class="divleft">
        <div id="d1">Blue App Template</div>

        <div id="d2">
        <p>One page Responsive HTML5 parallax
         </p>
         <p>business landing page</p>
        </div>
        <div id="d3">
                            <p> consectetur adipisicing elit. Similique autem,</p>
                            <p> atque in voluptatibus repellat nostrum iusto architecto vel placeat</p>
                            <p>  numquam omnis assumenda.</p>
                        </div>
                        <div id="d4"></div>
        </div>
        <div class="rightdiv"></div>
        </div>
        </body>
        </html>




    @charset "utf-8";
    /* CSS Document */

    .da{
        width:1200px;
        height:700px;
        background-image:url(../img/bg.jpg);}
    .divleft{
        width:700px;
        height:700px;
        float:left;
        }

    .rightdiv{
        width:300px;
        height:630px;
        background:url(../img/phone.png);
        float:right;
        margin-top:20px;}

    .rightdiv:hover{
        transform:skew(0,25deg);}

    #d1{
        width:500px;
        height:40px;
        text-align:center;
        margin-top:100px;
        font-weight:900px;
        font-size:36px;
        color:#FFF;
        }
    #d1:hover{
        transform:scale(1,2);
        color:#F00;}

    #d2{
        margin-top:100px;
        width:500px;
        height:40px;
        font-size:18px;
        color:#FFF;
        margin-left:80px;
        }
    #d2:hover{
        transform:rotate(180deg);}

    #d3{
        width:600px;
        height:40px;
        font-size:18px;
        margin-top:50px;
        margin-left:80px;
        color:#FFF;
        }

        #d4{
        width:280px;
        margin-left:80px;
        height:70px;
        margin-top:100px;
        background-image:url(../img/003.png);
    }
    #d4:hover{
        background-image:url(../img/001.png);
        }