2022年3月14日
HTML+CSS容器设计
随便写的
几个星期前写的，因为懒得写Wordpress，所以….把自己管理的索尼克Wiki改了之后只发到了_Wr_的SonicSpin论坛里面…还是看看自己的网站吧
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;
}