大国外交案列

来源：互联网发布：高校教学软件编辑：程序博客网时间：2024/04/28 23:20
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        *{            margin: 0;            padding: 0;        }        ul,li{            list-style: none;        }        .clear:after{/*在每个.class之后插入新内容*/            content: "\200B";            display: block;/*使段落生成行内框，每个框是一个块级元素*/            height: 0;            clear: both;/*是图像的左侧和右侧均不出现浮动*/        }        /*定义最外层盒子*/        .box{            padding: 10px;            border: 1px solid #000;        }        /*定义左侧大图片的样式*/        .big_pic{            width: 400px;            height: 400px;            background: #999;            float: left;            margin: 5px 0;        }        /*定义小图片集合样式*/        .list{            float: left;            width: 700px;        }        /*定义每一个小图片集合样式*/        .list li{            width: 200px;            height: 200px;            background: red;            float: left;            margin:5px 5px 0;            text-align: center;        }        /*定义小图片下方文字样式*/        p{            color: #fff;            text-align: center;            margin-top: 30px;        }        /*定义每一小个图片样式*/        .btn{            display: inline-block;/*定义行内块元素*/            width: 70px;            height: 70px;            border-radius: 50%;/*向 块级 元素添加圆角边框*/            background: rgba(0,0,0,.5);/*rgba括号中前3个数字代表着 red green blue三种颜色的rgb值，0-255，最后一个是设定这个颜色的透明度即alpha值。范围从0到1，越接近1，代表透明度越低*/            margin-top: 50px;            opacity: 0;/*透明度*/            transition: all 1s ease;/*变形(transform)、转换(transition)和动画(animation)*/        }        li:hover .btn{            opacity: 1;        }        li:hover p{            color: blue;        }    </style></head><body><div class="box clear">    <div class="big_pic"></div>    <ul class="list clear">        <li><span class="btn"></span><p>大国外交</p></li>        <li><span class="btn"></span><p>大国外交</p></li>        <li><span class="btn"></span><p>大国外交</p></li>        <li><span class="btn"></span><p>大国外交</p></li>        <li><span class="btn"></span><p>大国外交</p></li>        <li><span class="btn"></span><p>大国外交</p></li>    </ul></div></body></html>
阅读全文
0 0