设计 索尼克Wiki包含框

HTML:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
        .container-1 div:first-child{
            background: radial-gradient(circle,#55aaff 1% , #4245ff);
            text-align: center;
            padding: 7px;
            font-size: 19px;
            box-shadow: 0 1px 3px -1px rgba(0,0,0,0.12),0 2px 6px rgba(0,0,0,0.07);
            color: white;
            border-top-right-radius:10px;
            border-top-left-radius:10px;
            font-weight: 600;
            margin-bottom: 0;
            margin-top: 2px;
            box-shadow: 0 1px 3px -1px rgba(0,0,0,0.12),0 2px 6px rgba(0,0,0,0.07);
        }
        .container-1 div:nth-child(3){
            background-color: #f1f1f1;
            box-shadow: 0 1px 3px -1px rgba(0,0,0,0.12),0 2px 6px rgba(0,0,0,0.07);
            margin:0 auto 1em auto;
            font-size: 14px;
            border-bottom-right-radius:8px;
            border-bottom-left-radius:8px;
            border: 1px solid rgba(0,0,0,0.07);
            padding: 8px 8px 0px 8px;
        }
        .container-1 p.linkrb{
            text-align: right;
        }
        .container-1 div:nth-child(2){
            margin: 0 auto 0 0;
            background-color: #1f5b85;
            padding: 3px;
            transition-property: all; transition-duration: .7s;transition-timing-function: cubic-bezier(0.72, 0.01, 0.2, 1);
            max-width: 100px;
            overflow: hidden;
        }
        div.container-1:hover :nth-child(2){
            max-width: 1950px;
        }
        </style>
        <title></title>
    </head>
    <body>
    <div class="container-1">
        <div><!--标题-->哦上帝啊</div>
        <div></div>
        <div><!--主体内容-->233
        <p class="linkrb"><a href="#" style="text-decoration:none;">查看更多......</p></div>
    </div>
    </body>
</html>
 
  • 点赞
反馈: _Wr_

Sonicth0623

Sonicth0623
管理成员
2021/10/24
50
21
17
Green Hill
www.sonicth.org
金环
861
用在MediaWiki上千万不要用结构伪类!
这里的<style>里面使用了结构伪类的最好改一下再用!