css实现一个简单的信息模块

html是网页内容的载体，而css则是网页的样式。尝试用css3的新型弹性盒模型制作一个简单的信息模块。仿照的是联通官网的一个页面模块。

值得一提的是当鼠标移到元素上时，会有详情弹出：

起初以为需要用js来实现这个互动效果，后来发现如果绝对定位一个块元素设置成鼠标hover时元素上浮可以实现，于是尝试如下：

html：

<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            *{
                margin:0;
                padding: 0;
            }
            .aaa{
                background-color: bisque;
                width: 800px;
                height: 200px;
                margin: 100px auto;        
            }
            .bbb{
                display: flex;
                margin: 0;
                padding: 0;
                width: 800px;
                height: 200px;
                list-style-type: none;
                justify-content: space-between;
                align-items: center;
            }
            .bbb li{
                overflow: hidden;
                position: relative;
                width: 150px;
                height: 180px;
                background-color: pink;
            }
            .miaoshu{
                text-align: center;
                color: cornflowerblue;
            }
            img{
                position: absolute;
                width: 150px;
                height:80px;
                bottom: 50px;
            }
            .texiao{
                position: absolute;
                background-color: darkgray;
                width: 150px;
                height: 50px;
                bottom: -50px;
                transition: 0.3s;
                color: pink;
              text-align: center;
            }
            li:hover .texiao{
              bottom: 0;
            }
            
        </style>
    </head>
    <body>
        <div class="aaa">
            <ul class="bbb">
                <li class="111">
                    <p class="miaoshu">下载客户端</p>
                    <img  src="img/1.png" alt="此处为图片"/>
                    <p class="texiao">hello world</p>
                </li>
                <li class="222">
                    <p class="miaoshu">腾讯王卡</p>
                    <img  src="img/2.png" alt="此处为图片"/>
                    <p class="texiao">hello world</p>
                
                </li>
                <li class="333">
                    <p class="miaoshu">大冰神卡</p>
                    <img  src="img/3.png" alt="此处为图片"/>
                    <p class="texiao">hello world</p>
                
                </li>
                <li class="444">
                    <p class="miaoshu">小冰神卡</p>
                    <img  src="img/4.png" alt="此处为图片"/>
                    <p class="texiao">hello world</p>
                
                </li>
            </ul>
        </div>
    </body>
</html>

弹性盒模型作为css3的新添加内容，在对行内块元素的排列布局上较之前的方便简洁了许多，比较实用。

posted @ 2018-11-26 15:07  wfRailgun  阅读(368)  评论(0)    收藏  举报