第九章响应式布局与flex布局

最新推荐文章于 2024-06-10 23:30:57 发布

dawnlini

最新推荐文章于 2024-06-10 23:30:57 发布

阅读量154

点赞数

分类专栏：前端笔记文章标签： html css javascript

本文链接：https://blog.csdn.net/dawnlini/article/details/128461356

版权

前端笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

响应式布局与flex布局

插入图标 href=https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css

9.1媒体查询1-2

9.2 媒体查询3

9.3媒体查询4-6

9.4响应式布局

9.5flex布局&容器常用属性

9.6容器常用属性&组合效果小结

9.7案例

<div class="login">
  <h1>登录</h1>

    <input type="text" placeholder="用户名"/>
    <input type="text" placeholder="密码"/>
    <button>登录</button>

</div>



html,body{
    width: 100%;
    height: 100%;
}
body{
    display: flex;
    justify-content: center;
    /*align-content: center;*//*设置居中对齐*/
    align-items: center;
    background: linear-gradient(to bottom,rgba(57,173,219,0.2225),rgba(42,60,87,0.4)),
                linear-gradient(135deg,#670d10 0%,#092756 100%);
}
.login{
    width: 300px;
    /*height: 300px;*/
    /*border: purple dotted 2px;*/
    display: flex;
    flex-direction: column;
    justify-content: center;/*往上走添加透明的元素 或者使用margin-top*/
    align-items: center;
}
.login>h1{
    color: white;
    text-shadow: 0 0 10px rgba(0,0,0,0.3);
}
.login>input{
    width: 100%;
    background: rgba(0,0,0,0.3);
    padding: 10px;/*撑大*/
    box-sizing: border-box;/*防止撑大*/
    color: white;
    text-shadow:  1px 1px 1px rgba(0,0,0,0.3);
    border: rgba(0,0,0,0.3) solid 1px;
    border-radius: 4px;
    box-shadow: inset 0 -5px 45px rgba(100,100,100,0.2),
                0 1px 1px rgba(255,255,255,0.2);
    margin-bottom: 10px;
    transition: box-shadow 1s ease-in-out;


}
.login>input:focus{/*控件获得焦点时*/
    box-shadow: inset 0 -5px 45px rgba(100,100,100,0.2),
                0 1px 1px rgba(255,255,255,0.2);
}
.login>button{
    display: block;
    width: 100%;
    background: linear-gradient(to top,#6eb6de,#4a77d4);
    color: white;
    padding: 10px;
    border:  1px solid #3762bc;
    border-radius: 5px;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.4);
    cursor: pointer;/*鼠标经过时！*/

}
.login>button:hover{
    background: linear-gradient(to top,#4a77d4,#6eb6de);
}