2022年3月14日

HTML+CSS包含框设计

作者 Sonicth0623

随便写的包含框

几个星期前写的,因为懒得写Wordpress,所以….把自己管理的索尼克Wiki改了之后只发到了_Wr_的SonicSpin论坛里面…还是看看自己的网站吧

前往SonicSpin论坛查看

预览见Sonicpedia主页

HTML

<div class="container-1">
<div id="title"><!--标题-->123</div>
<div class="com"><!--不要在此写东西--></div>
<div id="content"><!--主体内容-->123
<p class="linkrb"><!--右下角链接-->123</p></div>
</div>

CSS(使用到了CSS3的transition属性)

      div.container-1{
            border-bottom-right-radius:8px;
            border-bottom-left-radius:8px;
            border-top-right-radius:10px;
            border-top-left-radius:10px;
            transition-duration: 1s;
        }
        .container-1 div#title{
            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#content{
            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.wid{
            margin: 0 auto 0 auto;
            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;
        }
        .container-1 div.nar{
            margin: 0 auto 0 auto;
            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;
        }
        .container-1 div.com{
            margin: 0 auto 0 auto;
            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 div.wid{
            max-width: 1000px;}
        div.container-1:hover div.nar{
            max-width: 500px;
        }
        div.container-1:hover div.com{
            max-width: 1500px;
        }