h5界面布局

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>

你可能感兴趣的:(HTML5)