CSS之窗口自适应、表单

最新推荐文章于 2023-11-04 18:58:10 发布

豆芽菜♀

最新推荐文章于 2023-11-04 18:58:10 发布

阅读量561

点赞数

分类专栏：前端文章标签： css html

本文链接：https://blog.csdn.net/m0_57752092/article/details/124419638

版权

前端专栏收录该内容

10 篇文章 1 订阅

订阅专栏

这篇博客探讨了网页布局的不同方法，包括浮动布局、响应式布局以及使用CSS的盒模型实现复杂布局。同时，文章详细介绍了HTML中的表单元素，如单选框、复选框、上传文件、下拉菜单等，以及它们的属性和用法，为网页交互设计提供了实用指南。

摘要由CSDN通过智能技术生成

 <style>
        *{
            margin: 0;
            padding: 0;
        }
        /* 窗口自适应 */
        html,body{
            height: 100%;
        }
        .box1{
            height: 100%;
            width: 300px;
            background-color: yellow;
            float: left;
        }
        .box2{
            height: 100%;
            margin-left: 300px;
            background-color: blueviolet;
        }
        /* .box1{
            height: 100%;
            width: 300px;
            background-color: yellow;
            float: left;
        }
        .box2{
            height: 100%;
            width: calc(100% - 300px);
            background-color: blueviolet;
            float: left;
        } */
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

      <style>
        *{
            margin: 0;
            padding: 0;
        }
        /* 窗口自适应 */
        html,body{
            height: 100%;
        }   
        .left{
            height: 100%;
            width: 300px;
            background-color: yellow;
            float: left;
        }
        .center{
            height: 100%;
            background-color: blueviolet;
        }
        .right{
            height: 100%;
            width: 300px;
            background-color: green;
            float:right;
        }

    </style>
</head>
<body>
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
</body>

<style>
        *{
            margin: 0;
            padding: 0;
        }
        /* 窗口自适应 */
        html,body{
            height: 100%;
        }
        
        .top,.bottom{
            width: 100%;
            height: 150px;
            background-color: blueviolet;
        }
        .middle{
            width: 100%;
            height: calc(100% - 300px);
            background-color: yellow;
        }
        .left{
            height: 100%;
            width: 150px;
            background-color: green;
            float: left;
        }
        .center{
            height: 100%;
            width: calc(100% - 300px);
            background-color: brown;
            float: left;
        }
        .right{
            height: 100%;
            width: 150px;
            background-color: green;
            float: right;
        }
    </style>
</head>
<body>
    <div class="top"></div>
    <div class="middle">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center"></div>
    </div>
    <div class="bottom"></div>
</body>

表单—— 单选框复选框

<body>
    <h3>请对……的信息做出选择</h3>
    <div>1.您是男生还是女生？</div>
<div>
    <!-- 相同name的就是一组，一组内只可选择一项
    id="名称"  <label for="名称"></label>表示点击文字也可以进行选择
    checked表示默认状态，可更改-->
    <input type="radio" name="111" id="2" checked>
    <label for="2">男</label>
</div>
<div>
    <input type="radio" name="111" id="3">
    <label for="3">女</label>
</div>
<div>2.您是哪一年毕业的？</div>
<div>
    <input type="radio" name="112" id="2" checked>
    <label for="2">2022年</label>
</div>
<div>
    <input type="radio" name="112" id="3">
    <label for="3">2023年</label>
</div>
<div>
    <input type="radio" name="112" id="4">
    <label for="4">2024年</label>
</div>
<!-- 复选框（多选） -->
<div>3.你都有什么技能？</div>
<div>
    <input type="checkbox" name="113" id="html" checked>
    <label for="html">html</label>
</div>
<div>
    <input type="checkbox" name="113" id="css" checked>
    <label for="css">css</label>
</div>
<div>
    <input type="checkbox" name="113" id="java">
    <label for="java">java</label>
</div>
</body>

上传文件图片按钮隐藏按钮禁用只读

<div>4.请选择需要上传的文件</div>
<div>
    <input type="file">
</div>
<!-- 图片按钮   相当于submit -->
<form action="">
    <input type="image" src="../image/s.png">
</form>
<div>5.隐藏按钮</div>
<input type="hidden" name="115" id="5" value="带给后端的个人信息">
<label for="5"></label>
<div>6.禁用</div>
<div>
    <!-- 禁用 disabled -->
    <input type="submit" disabled>
</div>
<div>7.只读</div>
<div>
    <input type="textbox" readonly>
</div>

下拉菜单

<div>你的收货地址是</div>
<div>
    <!-- select支持的属性
    1.size，表示显示个数
    2.multiple 多选 按住Ctrl或者shift键 -->
    <select size="2">
        <!--option支持的属性
        1.value，提供给后端需要用的value值
        2.select，默认选中的值  -->
        <option selected>陕西省</option>
        <option value="sxs">四川省</option>
        <option>广东省</option>
        <option>上海</option>
        <option>北京</option>
    </select>
</div>

    <style>    
            textarea{
            /* vertical:只可以在竖直方向拖动
             horizontal:只可以在水平方向拖动*/
            resize:horizontal;
        }
    </style>
<h3>多行文本输入框-文本域</h3>
<div>
    <!--placeholder:提示文字
    默认value：写在双标签内部，注意空格问题  -->
    <textarea placeholder="请输入你的意见" cols="30" rows="10"></textarea>
</div>

字段集

    <style>
fieldset{
            border: 1px solid blue;
            width: 600px;
            height: 300px;
            text-align: left;

        }
    </style>
<h3>字段集</h3>
<fieldset>
<legend>性别</legend>
<input type="radio" name="aa">男
<br>
<input type="radio" name="aa">女
</fieldset>