2019.10.28 带有简单效果的网页

一、带有简单效果的网页

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>穷游网</title>
        <link rel="stylesheet" type="text/css" href="2019.10.28.css"/>
    </head>
    <body>
        <div id="biaoti">
            <div id="qing"></div>
            <div id="zuoce">
                <div id="quan">!</div>出境游安全提示
                <div id="dayuhao"></div>
            </div>
            <div id="zhongjian">今日推荐</div>
        </div>
        <div id="kuangjia">
            <div class="big">
                <div class="logo">视频</div>
                <div class="neirong">
                    <img src="../image/049d.jpg" >
                </div>
            <div class="x1"><h1>穷游2019轻年计划，让我们一起脱线出发!</h1></div>
            <div class="x2">会玩儿的中国人</div>
            <div class="x3">世界</div>
            </div>
            <div class="big">
                <div class="logo">商城</div>
                <div class="neirong">
                    <img src="../image/480x320.jpg" >
                </div>
                <div class="x1"><h1>北京直飞塞班6-7天含税机票(限时立减200元+可升级商务舱+东航直飞正点时段)</h1></div>
                <div class="x2">北京</div>
                <span>3700</span>
                <div class="x3">元起</div>
            </div>
            <div class="big">
                <div class="logo">游记</div>
                <div class="neirong">
                    <img src="../image/480x3201.jpg" >
                </div>
                <div class="x1"><h1>【你的世界地图长什么样】之【多洛米蒂，住在会呼吸的风景里】</h1></div>
                <div class="x2">多多熊</div>
                <div class="x3">20387人浏览过</div>
            </div>
            <div id="denglu">
                <div id="gang"></div>
                <div id="d1">让我们更懂你</div>
                <div id="d2">拥有穷游账号，获得更准确的推荐</div>
                <div id="d3">立即注册</div>
                <div id="d4">
                    <div id="a1">已有账号？</div>
                    <div id="a2">登录</div>
                </div>
                <div id="d5">
                    <div id="tb"><img src="../image/淘宝.png" ></div>
                    <div id="qq"><img src="../image/QQ(1).png" ></div>
                    <div id="xl"><img src="../image/新浪微博.png" ></div>
                    <div id="wx"><img src="../image/微信(1).png" ></div>
                </div>
            </div>
            <div id="qingli"></div>
            <div class="big">
                <div class="logo">商城</div>
                <div class="neirong">
                    <img src="../image/480x3202.jpg" >
                </div>
                <div class="x1"><h1>北京天津直飞日本/东京/北海道札幌/冲绳那霸/福冈/名古屋/大阪4-8天往返含税机票</h1></div>
                <div class="x2">天津,北京,廊坊,保定</div>
                <span>968</span>
                <div class="x3">元起</div>
            </div>
            <div class="big">
                <div class="logo">专栏</div>
                <div class="neirong">
                    <img src="../image/15721623285438.jpg" >
                </div>
                <div class="x1"><h1>宫岛｜你也一定会喜欢这里</h1></div>
                <div class="x2">小畅的星球</div>
                <div class="x3">畅斯changs</div>
            </div>
            <div class="big">
                <div class="logo">游记</div>
                <div class="neirong">
                    <img src="../image/480x3203.jpg" >
                </div>
                <div class="x1"><h1>法式浪漫，意式浓情—法意17日二度蜜月，陶醉勃艮第，惊艳托斯卡纳，奥赛、乌菲齐、梵蒂冈超详细高光作品（Vlog更新中）</h1></div>
                <div class="x2">Mickey米哥</div>
                <div class="x3">13212人浏览过</div>
            </div>
            <div class="big">
                <div class="logo">游记</div>
                <div class="neirong">
                    <img src="../image/480x3204.jpg" >
                </div>
                <div class="x1"><h1>【葡萄夫妇国庆釜山行】爱上彩虹色的海角城市，附街拍|网红|韩食|独家私藏拍摄地|保姆级干货攻略</h1></div>
                <div class="x2">xiaoputao0501</div>
                <div class="x3">9934人浏览过</div>
            </div>
        </div>
    </body>
</html>

css：

            *{
                margin: 0 auto;
                padding: 0;
            }
            body{
                width: 1349px;
                height: 10000px;
            }
            .logo{
                background: rgba(0,0,0,0.1);
                float: left;
                text-align: center;
                line-height: 20px;
                margin-left: 10px;
                margin-top: 10px;
                width: 48px;
                height: 22px;
                border-radius: 22.5px;
                border: 1px solid white;
                position: absolute;
                color: white;
                z-index: 2;
            }
            #biaoti{
                width: 90%;
                height: 70px;
            }
            #quan{
                margin-top: 10px;
                margin-left: 13px;
                float: left;
                width: 20px;
                text-align: center;
                line-height: 19px;
                color:rgba(2,219,148);
                border-radius: 15px;
                background-color: white;
            }
            #zuoce{
                margin-left: 30px;
                margin-top: 15px;
                height: 40px;
                width: 180px;
                float: left;
                font-size: 16px;
                color: white;
                line-height: 37px;
                text-align: center;
                position: absolute;
                border-radius: 20px;
                background-color: rgba(2,219,148);
            }
            #zuoce:hover{
                cursor: pointer;
            }
            #zhongjian{
                text-align: center;
                font-size: 38px;
                line-height: 70px;
                color: #6E6E6E;
            }
            #dayuhao{
                margin-top: 15px;
                margin-right: 20px;
                transform: rotate(45deg);
                width: 7px;
                height: 7px;
                border-top:2px solid white;
                border-left:none;
                border-right:2px solid white; 
                border-bottom: none;
                float: right;
            }
            #kuangjia {
                width: 90%;
                height: 500px;
            }
            .big{
                border: 0.5px solid lightgray;
                width: 22%;
                height: 320px;
                margin-left: 2.4%;
                float: left;
                position: relative;
            }
            .big:hover{
                box-shadow: -1px 0px 5px 1px lightgray,0px -1px 5px 1px lightgray,1px 0px 5px 1px lightgray,0px 1px 5px 1px lightgray;
                cursor: pointer;
            }
            .neirong{
                overflow: hidden;
                height: 200px;
            }
            img{
                width: 100%;
                height: 100%;
                transition: 2s;
            }
            .big:hover img{
                transform: scale(1.2,1.2);
            }
            #denglu{
            }
            #qingli{
                clear: both;
                height: 30px;
            }
            .x1{
                width: 90%;
                height: 45px;
                color: #333333;
                font-size: 8px;
                margin: 16px;
                overflow: hidden;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 3;
            }
            .x1:hover{
                color: #10b041;
            }
            .x2{
                float: left;
                color: #6E6E6E;
                margin-left: 20px;
                height: 40px;
                line-height: 40px;
                font-size: 14px;
                font-weight: bold;
            }
            .x3{
                margin-right: 20px;
                float: right;
                margin-left: 20px;
                height: 40px;
                line-height: 40px;
                font-size: 12px;
                font-weight: bold;
                color: #A9A9A9;
            }
            span{
                margin-right: 10px;
                margin-bottom: 10px;
                position: absolute;
                right: 36px;
                bottom: 3px;
                font-weight: 600;
                color: red;
                opacity: 0.5;
            }
            #denglu{
                background-color: #f8f8f8;
                border: 0.5px solid lightgray;
                width: 22%;
                height: 320px;
                margin-left: 2.4%;
                float: left;
                position: relative;
            }
            #denglu:hover{
                box-shadow: -1px 0px 5px 1px lightgray,0px -1px 5px 1px lightgray,1px 0px 5px 1px lightgray,0px 1px 5px 1px lightgray;
            }
            #gang{
                height: 3px;
                background-color: #10b041;
            }
            #d1{
                height: 55px;
                text-align: center;
                line-height: 55px;
                font-size: 14px;
            }
            #d2{
                height: 30px;
                text-align: center;
                line-height: 30px;
                font-size: 14px;
                color: #959595;
            }
            #d3{
                margin-top: 30px;
                width: 230px;
                height: 38px;
                background-color: #10b041;
                border-radius: 3px;
                color: white;
                font-size: 16px;
                font-weight: 800;
                text-align: center;
                line-height: 37px;
            }
            #d3:hover{
                background-color:#3f9f5f;
                cursor: pointer;
            }
            #d4{
                cursor: pointer;
            }
            #d4{
                width: 98px;
                height: 21px;
                text-align: center;
                margin-top: 22px;
                margin-bottom: 22px;
            }
            #a1{
                float: left;
                font-size: 14px;
                color: #959595;
            }
            #a2{
                float: left;
                color: #10b041;
                font-size: 14px;
            }
            #d5{
                margin-top: 10px;
                width: 200px;
                height: 40px;
            }
            #tb{
                margin-left: 6px;
                margin-top: 28px;
                width: 40px;
                height: 40px;
            }
            #tb:hover{
                cursor: pointer;
            }
            #qq{
                margin-left: 55px;
                margin-top: -41px;
                width: 40px;
                height: 40px;
            }
            #qq:hover{
                cursor: pointer;
            }
            #xl{
                margin-left: 102px;
                margin-top: -43px;
                width: 45px;
                height: 45px;
            }
            #xl:hover{
                cursor: pointer;
            }
            #wx{
                margin-left: 153px;
                margin-top: -42px;
                width: 40px;
                height: 40px;
            }
            #wx:hover{
                cursor: pointer;
            }

效果图：

二、代码

background: rgba(0,0,0,0.1); 透明背景效果

border: 1px solid white; 增加边框

border-radius: 15px; div圆角效果

position: absolute; 绝对定位，相对于浏览器的定位

position：relative；相对定位，相对于当前的容器的定位

transform: rotate(45deg); 旋转效果

box-shadow: -1px 0px 5px 1px lightgray,0px -1px 5px 1px lightgray,1px 0px 5px 1px lightgray,0px 1px 5px 1px lightgray; 四周阴影效果

overflow: hidden; 超出部分隐藏

transition: 2s; 过渡时间2s

transform: scale(1.2,1.2); 放大1.2倍效果

opacity: 0.5; 整体透明50%

posted @ 2019-10-31 15:52 墨染千城阅读(253) 评论(0) 收藏举报

刷新页面返回顶部

墨染千城

2019.10.28 带有简单效果的网页

公告