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
    评论
好的,以下是一个简单的基于HTML5和CSS3的聊天窗口示例,您可以在此基础上进行修改和扩展: HTML部分: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>聊天室</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="chat"> <div class="messages"> <div class="message received"> <div class="avatar"></div> <div class="text">你好!</div> </div> <div class="message sent"> <div class="avatar"></div> <div class="text">你好!</div> </div> <div class="message received"> <div class="avatar"></div> <div class="text">最近怎么样?</div> </div> </div> <div class="input"> <input type="text" placeholder="请输入消息..."> <button>发送</button> </div> </div> </body> </html> ``` CSS部分: ```css .chat { width: 400px; height: 500px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; } .messages { flex: 1; padding: 10px; overflow-y: scroll; } .message { display: flex; align-items: center; margin-bottom: 10px; } .received { flex-direction: row; } .sent { flex-direction: row-reverse; } .avatar { width: 50px; height: 50px; border-radius: 50%; margin-right: 10px; } .text { background: #eee; padding: 10px; border-radius: 10px; max-width: 70%; word-wrap: break-word; } .input { display: flex; align-items: center; padding: 10px; } input { flex: 1; height: 40px; padding: 0 10px; border-radius: 20px; border: none; outline: none; } button { height: 40px; width: 60px; background: #0084ff; color: #fff; border: none; outline: none; border-radius: 20px; margin-left: 10px; cursor: pointer; } ``` 此聊天窗口使用flex布局实现,包含消息列表和输入框两个部分,消息列表使用overflow-y: scroll实现滚动效果,消息分为接收和发送两种类型。您可以通过修改CSS样式来自定义聊天窗口的外观和布局
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值