h5界面布局

来源：互联网发布：c语言的应用场景编辑：程序博客网时间：2024/05/16 14:27
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <style>        header{            height: 100px;            background-color: #f2ad0a;        }        section{            background-color: #19242C;            height: 400px;        }        #child1{            width: 10%;            height: 100%;            background-color: aquamarine;            float: left;            padding: 1px;            border: 5px black solid;            /*magin border padding 都会影响到页面布局 ，content不变，                  实际宽度为：在content的基础上加上magin border padding*/            /*变态盒模型  为保持布局不变                 border-box 添加padding 或者border 不会影响到界面布局，只会挤压页面内容content*/            box-sizing:border-box;        }        #child2{            width: 80%;            height: 100%;            background-color: #cccccc;            float: left;            /**/        }        #child3{            width: 10%;            height: 100%;            background-color: chartreuse;            float: left;            border-radius: 50px 0 50px 0;        }        /*overflow 属性规定了内容溢出盒子时如何处理              visible 内容不被修剪*/        /*border-radius 盒子弧度               写具体数值或者               四个值为 左上 右上 右下 左下*/        .mao{            background-image: url("../../img/cat.jpg");            background-color: red;            width: 1440px;            height: 900px;            border-radius: 100px 0 100px 0;        }        /*同心圆*/        .yuan1{            background-color: red;            width: 300px;            height: 300px;            border-radius: 300px;            overflow: hidden;        }        .yuan2{            background-color: yellow;            width: 150px;            height: 150px;            margin: 0 auto;            margin-top: 75px;            border-radius: 150px;        }        /*盒子阴影*/        /*box-shadow 给元素块添加周边阴影效果 */        .yin{            width: 200px;            height: 200px;            background-color: #f2ad0a;            /*1.x方向的偏移              2.y方向的偏移              3.模糊程度 值越大越模糊              4.模糊半径              5.阴影颜色*/            box-shadow: 3px 0px 0px 11px red;        }        /*输入框取消掉边框线*/        input：focus{            outline:none;        }    </style>    <title>布局</title></head><body><header></header><section>    <div  id="child1"></div>    <div id="child2"></div>    <div id="child3"></div></section><div class="mao"></div><div class="yuan1">    <div class="yuan2"></div></div><div class="yin"></div><hr><input type="text" placeholder="请输入账号"></body></html>
0 0