h5界面布局

最新推荐文章于 2024-05-15 14:20:26 发布

一只头秃的死肥宅

最新推荐文章于 2024-05-15 14:20:26 发布

阅读量1.1k

点赞数 1

分类专栏： HTML5 文章标签： HTML5 新手界面布局盒子

本文链接：https://blog.csdn.net/xuemoKingDeath/article/details/70197337

版权

HTML5 专栏收录该内容

54 篇文章 0 订阅

订阅专栏

<!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>

一只头秃的死肥宅

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
h5界面布局

html>html lang="en">head> meta charset="UTF-8"> style> header{ height: 100px; background-color: #f2ad0a; } section{ background-co
复制链接

扫一扫

专栏目录