CSS之form表单与table表格

CSS介绍

form表单

 用于换行





<html lang="ne">
    <head>
        <meta charset="utf-8" />
        <title>form表单title>
        <style type="test/css">style>
    head>
    <body>
        <form action="" method="" id="first">
            <input type="text" placeholder="请输入用户名" name="userName" value="baidu"/>
            <label for="sg">身高label>
            <input id="sg" type="text" name="shengao" placeholder="请输入身高" />
            <br />
            <input type="password" placeholder="请输入密码" />
            <br />
            <input type="radio" name="gender" value="男"/>
            <input type="radio" name="gender" value="女"/>
            <input type="radio" name="gender" value="人妖"/>
            <br/>
            <input type="checkbox" name="hobby" value="篮球"/>
            <input type="checkbox" name="hobby" value="足球"/>
            <input type="checkbox" name="hobby" value="台球"/>
            <br/>
            <input type="file" multiple/>
            <br/>
            <input type="hidden" name="type" value="Mac"/>
            <br />
            <input type="submit" value="注册"/>
            <br />
        form>
        
        <input form="first" type="reset" value="清空"/>

        <textarea>textarea>
        <select>
            <option>1option>
            <option>2option>
            <option>3option>
        select>
    body>
html>

截图

CSS之form表单与table表格_第1张图片

table表格

合并边框 -- collapse(边框合并) separate(边框不合并)
empty-cells:hide 隐藏空的单元格,在边框没有合并的情况下

<html>
<head>
    <meta charset="utf-8" />
    <title>table表单title>
    <style type="text/css">
        table{
            border-collapse:collapse;
            border:1px red solid;
            /*隐藏空的单元格 在边框没有合并的情况下*/
            empty-cells:hide;
            text-align:center;
        }
        tbody{
            /*改变表格垂直居中方式
            top middle bottom
            */
            vertical-align: top;
        }
    style>
head>
<body>
    
    <table border="1" width="200" height="100" cellspacing="0" cellpadding="10">
        
        
        
            <tr>
                <th height="200">1th>
                <th width="600">2th>
            tr>
            <tr>
                <th height="200">11th>
                <th width="600">22th>
            tr>
        
        
    table>
body>
html>

截图

CSS之form表单与table表格_第2张图片

图形设计


<html>
<head>
    <meta charset="utf-8">
    <title> clip-pathtitle>
    <style type="text/css">
        div{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .circle{
            /*circle: (半径 at x y) */
            clip-path: circle(50% at 50% 50%);
        }
        .circle1{
            /*circle: (半径 at x y) */
            clip-path: circle(50% at 50% 60%);
        }
        .ellipse{
            /*椭圆ellipse(x y at 圆心)*/
            clip-path: ellipse(50% 30% at 50%);
        }
        .polygon{
            clip-path: polygon(50% 0% ,100% 100% ,0% 100% );
        }
        .class1{
            clip-path: polygon(0% 40% ,40% 40% , 40% 0% , 60% 0% , 60% 40% ,100% 40%, 100% 60%,60% 60%, 60% 100%,40% 100%, 40% 60%,0% 60%);
        }
    style>
head>
<body>
    <div class="circle">div>
    <div class="circle1">div>
    <div class="ellipse">div>
    <div class="polygon">div>
    <div class="class1">div>
body>
html>

结果截图

CSS之form表单与table表格_第3张图片
CSS之form表单与table表格_第4张图片

行块对齐


<html>
    <head>
        <meta charset="utf-8">
        <title>form表单title>
        <style type="text/css">
            .div1{
                width: 100px;
                height: 50px;
                background-color: red;
                font-size:20px;

            }
            .div2{
                width: 60px;
                height: 200px;
                background-color: yellow;
            }
            .div3{
                width: 80px;
                height: 140px;
                background-color: blue;
            }
            div{
                /*行块*/
                display: inline-block;

                /*
                baseline 基线对齐
                bottom
                top
                middle
                */
                vertical-align: text-bottom;

            }
            @font-face{ 
                src:url(STXINGKA.ttf);
                font-family:"STXingkai";
            }
            p{
                font-size:50px;
                /*设置字体*/
                font-family:"STXingkai";
            }
        style>
    head>
    <body>
        
        <div class="div1">1div>
        <div class="div2">2div>
        <div class="div3">5div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, reiciendis.n你好p>
    body>
html>

你可能感兴趣的:(前端)