h5界面布局

<!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;
        }
        /*输入框取消掉边框线*/
        inputfocus{
            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>
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值