继续CSS------加油

最新推荐文章于 2024-10-05 11:27:00 发布

makabaka12138

最新推荐文章于 2024-10-05 11:27:00 发布

阅读量212

点赞数 1

分类专栏： css 文章标签：大数据

本文链接：https://blog.csdn.net/makabaka12138/article/details/125446300

版权

css 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

两栏布局：

首先介绍一下calc函数：用于动态计算长度值。

运算符前后保留空格。

例如：width:calc(100% - 10px);

任何长度都可以用calc计算，支持加减乘除，优先级与数学运算一致。

三栏布局：

这里注意：要把浮动的放前面，浮动影响后面的元素。

比如：设置两边浮动，中间固定要这么写

<style>
    .left{
        float:left;
    }
    .right
    {
        float:right;
    }
</style>


<div class = "left"> <div>
<div class = "right"> <div>
<div class = "centre"> <div>

单选框：只能单选

<input type = "radio">


<div><input type = "radio" name ="sex"> male</div>
<div><input type = "radio" name ="sex"> female</div>

name是表示在同一个组，同一个组只能选一个就是单选框

<div><input type = "radio" name ="sex" id = "man"></div>
<label for = "man">male<label>
<br>
<div><input type = "radio" name ="sex" id = "womale"></div>
<label for = "womale">female<label>

这样不仅点圆圈可以选择，点击文字也可以选择


<div><input type = "radio" name ="sex" checked> male</div>
checked 表示默认选择是male

复选框：就是多选

    <div>
        <div>你的兴趣爱好是个啥：</div>
            <div>
            <input type = "checkbox" name = "hobby" id = "game">
            <label for = "game">game</label>
            <br>

            <input type = "checkbox" name = "hobby" id = "chess">
            <label for = "chess">chess</label>
            <br>
            <input type = "checkbox" name = "hobby" id = "watch">
            <label for = "watch">watch</label>
    </div>

上传文本和隐藏字段

上传文件

<input type = "file" name = "" id = "">

图片按钮代替提交按钮 <input type = "submit">

<input type = "image" src = ".jpg">

隐藏按钮

<input type = "hidden" name = " " id = " " value ="这里的值给后端">
<!-- disabled 禁用只读 -->

<buttom disabled = "disabled"> 注册 </buttom>
<br>
<input type = "radio" disabled>不满意
<br>
<input type = "text" disabled value = "5211314">
<br>
<input type = "text" readonly value = "5211314">
<br>

下拉菜单：

<select size = "3" multiple>
    <option>山东</option>
    <option>安徽</option>
    <option>江苏</option>
            ...
</select>

selected 表示默认选中

select的属性：1.size：显示几个选项 ,mutiple:表示选择几个

option的属性：1.value：给后端提供的数据 2.selected 默认选中

文本域

多行文本输入框

<div>
    <textarea> value <textarea>
<div>

value:写在标签中间

<!-- 也可以加样式-->

    <style>
        textarea{
        width:200px;
        height:200px;
        resize:none;
        }
    /*<!-- resize有四个选择 none both vertical honzontal   功能是什么就让大家自己发掘吧 -->
    <!-- -->*/
    </style>

    <div>
        <textarea cols = "30" rows = "30" placeholder = "提示信息">哈哈哈哈哈哈哈哈哈</textarea>
    <div>

字段集：

    <fieldset>
        <legend>性别</legend>
        <input type = "radio" name = "sex">male<br>
        <input type = "radio" name = "sex">female<br>
        
    </fieldset>

fieldset也可以设置边框，通过style