<!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>
h5界面布局
最新推荐文章于 2024-05-15 14:20:26 发布