CSS基础(四) - 清安宁

三栏布局

骨架demo:左右两栏,中间大栏

......
<style>
    html,body {
        height: 100%;
    }
    .left,.right {
        width: 200px;
        height: 100%;
        background-color: aqua;
    }
    .center {
        height: 100%;
        width: calc(100% - 400px);
        background-color: red;
    }


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

<!--效果:左右两侧固定,中间栏自适应-->

把三栏拼凑在一起


<!--左栏向左浮动,右栏向右浮动,中间栏由于计算好了宽度,所以刚好见缝插针,插上来-->
......
.left {
        float: left;
    }
.right {
    float: left; 
}
......

<!--实际效果:

    - 中间栏把剩余的空间全部占满(调试工具查看得知),右栏被挤到窗口下面了,无法实现三栏合一

    - 使用浮动这种效果,影响的,永远是"后面的元素"

-->

解决办法: 中间栏也浮动起来即可,完整代码如下

<!DOCTYPE html>
<html>
    <head>
        ......
        <style>
            html,body {
                height: 100%;
            }
            .left,.right {
                width: 200px;
                height: 100%;
                
            }
            .center {
                height: 100%;
                width: calc(100% - 400px);
                background-color: red;
                float: left; /*增加之处*/
            }
            .left {
                float: left;
                background-color: aqua;
            }
            .right {
                float: left; 
                background-color: aquamarine;
            }
        
        </style>
    </head>
    <body>
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
        <script></script>
    </body>
</html>

demo演示

<!--

    - 上下导航栏(固定高度),中间大块

    - 中间大块又分成三部分,左右栏(固定宽度),中间大块

-->

<!DOCTYPE html>
<html>
    <head>
        ......
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            html,body {
                height: 100%;
            }
            .top,.bottom {
                width: 100%;
                height: 50px;
                background-color: aqua;
            }
            .middle {
                width: 100%;
                height: calc(100% - 100px); /*自动计算上下高度*/
                background-color: red;
            }
            .left,.right {
                width: 200px;
                height: 100%;
                background-color: aquamarine;
            }
            .left {
                float: left;
            }
            .right {
                float: right;
            }
            .center {
                width: calc(100% - 400px); /*自动计算左右宽度*/
                height: 100%;
                background-color: chocolate;
                float: left;
            }
        </style>
    </head>
    <body>
        <div class="top"></div>
        <div class="middle">
            <div class="left"></div>
            <div class="center"></div>
            <div class="right"></div>
        </div>
        <div class="bottom"></div>
        <script></script>
    </body>
</html>

表单控件

单选框
- name属性值相同,位于同一组,保证单选效果
- id 和 label 关联,当用户点击label的时候,等同于点击了单选框,十分方便
- checked 设置了默认值,默认选项

<div class="container">
    <input type="radio" name="shopping" id="apple" checked>
    <label for="apple">苹果</label>
    <input type="radio" name="shopping" id="banana">
    <label for="banana">香蕉</label>
    <input type="radio" name="shopping" id="melon">
    <label for="melon">西瓜</label>
    <input type="radio" name="shopping" id="pear">
    <label for="pear">梨</label>
</div>

复选框: 和单选框类似

<div class="container" >
    <input type="checkbox" name="hobby">跳舞
    <input type="checkbox" name="hobby">唱歌
    <input type="checkbox" name="hobby" checked>旅行
    <input type="checkbox" name="hobby" checked>摄影
</div>

上传文件

<div class="container">
    <!--最简单的样式:就有"上传文件,未选择任何文件"-->
    <input type="file"> 
</div>

创建图形按钮替换原来的文本按钮(要放在form里面)

<form action="">
    <input type="image" src="img/btn.png">
</form>

hidden,隐藏在页面中,value值提交给后端

<input type="hidden" value="xxx">

禁用/只读某些表单控件:disabled/readonly

<div class="container">
    <input type="radio" disabled>被禁用的单选框
    <button disabled>被禁用的按钮</button>
    <input type="text" disabled>
    <input type="text" value="只能读" readonly>
</div>

遮罩层的写法

<style type="text/css">
    #overlay {
        background: rgba(0,0,0,0.6);
        width: 100%; /*如何有高度,设立positon即有高度!如何铺满全屏,所有的边距为0即可!*/
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
</style>
......
<div id="box"> <!--外层盒子-->
    <button @click="isShow=true">显示</button> 
    <div id="overlay" v-show="isShow" @click="isShow=false"> <!--遮罩层-->
        <div id="center" @click.stop> 
            <div>用户名: <input type="text" /></div>
            <div>密码: <input type="password" /></div>
            <div>
                <button>登录</button>
            </div>
        </div>
    </div>
</div>
......

容器居中的另一种写法

......
<style>
    .container {
        width: 200px;
        height: 200px;
        background-color: aqua;
        position: fixed;
        margin: auto; /*加上这些组合,才会居中*/
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
    
</style>
.....
<body>
    <div class="container"></div>
    ......
</body>

容器居中,之前的写法是这样:指定上,左50%,再向左上移动,扣除响应的外边距

......
<style>
    .container {
        width: 200px;
        height: 200px;
        background-color: aqua;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -100px;
        margin-top: -100px;
    } 
</style>
......
<body>
    <div class="container"></div>
</body>

小结:实现容器居中,利用position-fixed/absolute 都可以做出来!

下拉框 select-option


<!--

- select

    - size: 规定下拉框要显示多少个列表项

    - multiple: 表示允许用户多选

- option

    - selected: 表示被选中

    - value: 表示提交后端的值
-->

......
<body>
    <div class="container">
        <select name="" size="3" multiple>
            <option value="">111</option>
            <option value="">222</option>
            <option value="">333</option>
            <option value="" selected>444</option>
        </select>
    </div>
    <script></script>
</body>
......

多行文件标签 textarea

最最原始的样子(可以随意拉拽)

......
<body>
    <div class="container">
        <textarea></textarea>
    </div>
    <script></script>
</body>
......

......
<textarea rows="" cols=""></textarea> <!--一般不会这样写,通过css控制文本框的宽/高-->

......
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        textarea { /*通过css控制文本框的大小*/
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>
    <div class="container">
                        <!--提示信息-->
        <textarea placeholder="请输入你的建议..."></textarea>
    </div>
    <script></script>
</body>

<!--

- 如果要输入默认值,直接把文本写在标签里面即可,没有什么value属性

    - <textarea>默认文本</textarea>

-->

注意事项: textarea如果用回车间隔开,那么有个小bug,用户输入文本的时候,前面有一堆回车...

......
<div class="container">
    <textarea placeholder="请输入你的建议..."> <!--有很多回车-->
        
    </textarea>
</div>

正确写法

......
<div class="container">
    <textarea placeholder="请输入你的建议">...</textarea> <!--正确格式,不要加回车-->
</div>

通过css resize 控制文本框的拉拽样式

......

    <style>
        textarea {
            width: 300px;
            height: 300px;
            /* resize: none; */ /*固定宽高*/
            /* resize: vertical; */ /*垂直方向允许拉拽*/
            /* resize: horizontal; */ /*水平方向允许拉拽*/
            resize: both; /*默认效果,宽/高都可以拉拽*/
        }
    </style>
......
<body>
    <div class="container">
        <textarea placeholder="请输入你的建议..."></textarea>
    </div>
    <script></script>
</body>

字段集: fieldset 标签

......
<body>
    <fieldset>
        <legend>性别:</legend>
        <input type="radio" name="aaa">男
        <input type="radio" name="aaa">女
    </fieldset>
    <script></script>
</body>

<!--

- fieldset搭配 legend 使用

- legend 表示'缺口'

- 注意不要把我们的内容放入 legend,这是一个误区!!!

-->

可以对 fieldset 和 legend 运用样式

......
<head>
    ......
    <style>
        fieldset {
            width: 500px; /*设置高度/宽度/边框*/
            height: 300px;
            border: 1px solid red;
        }
        
        legend {
            border: 1px solid blue; /*设置边框/文本对齐方式*/
            text-align: center;
        }
    </style>
</head>
<body>
    <fieldset>
        <legend>性别:</legend>
        <input type="radio" name="aaa">男
        <input type="radio" name="aaa">女
    </fieldset>
    <script></script>
</body>

发表于 2022-12-01 14:52 清安宁阅读(20) 评论(0) 编辑收藏举报