潭州学院html学习（day09）

转载于 2018-07-29 23:36:00 发布 · 186 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yuyiWang/p/9388250.html

本文详细介绍了HTML表单的构成及使用方法，并深入探讨了CSS2与CSS3中的一些实用属性，包括表单元素的样式设定、文本效果、过渡动画等。

一.表单

action="http:www.baidu.com" 提交表单的后台地址 method='get' 提交表单的方式（post/get）

表单元素：input是行块级元素
            1. action="http://www.baidu.com" 提交信息的目标地址
            2. method="" 值：get post 方式
            3. type="" 每个表单元素都有一个type属性，值不同功能也不同
            4. name="" 指定表单元素的名字，对表单元素进行标识，与value属性的值进行对应，后台获取提交的值，就需要通过name
            5. value="yajie" 表单默认值, 或者表单中输入的值
            6. placeholder="请输入用户名" 提示信息（css3）
            7. disabled 禁用输入框

selected 默认选中
    disabled 禁用表单元素
    multiple 按住Ctrl就可以选中多个
    size 使下拉列表显示多个

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
    <style>
        *{padding: 0;margin: 0;}
        ul,ol{list-style: none;}
        a{text-decoration: none;color:inherit;}
        input{
            border:2px solid hotpink;
        }
        div{
            width:500px;
            background: antiquewhite;
            margin: 80px auto;
           box-shadow: 0 0 10px 0;
            padding: 10px;
            position: center;
            float: bottom;
        }
    </style>

</head>
<body>
<div>
    <form action="http://www.baidu.com" method="post">
        <label>用户名:<input type="text" name="username"></label><br><br>
        <label> 密码:<input type="password" name="password"></label><br><br>
        <label>年龄:<input type="text" name="age"></label><br><br>
        请选择你的性别：
        <label><input type="radio" name="sex" id="男">男</label>
        <label><input type="radio" name="sex" id="女">女</label><br><br>
        请输入你喜欢的运动：
        <label><input type="checkbox" name="apple" checked>苹果</label>
        <label><input type="checkbox" name="banana" checked>香蕉</label>
        <label><input type="checkbox" name="watermelon" checked>西瓜</label>
        <label><input type="checkbox" name="柠檬" checked>melon</label><br><br>
        <select name="select" id="select" multiple size="3">
        <option value="" selected>天蓝</option>
        <option value="" selected>张帅</option>
        <option value="">九重领</option>
        <option value="">金刚</option>
        <option value="" disabled>贫困</option>
        <option value="">XHS</option>
           </select><br><br>
        <input type="submit" value="Submit">
        <inpyt type="reset" value="重置">

    </form>
</div>
</body>
</html>

二.阿里图标的引入

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阿里图标</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_767914_rs7fzx662yb.css">
    <style>
        *{padding:0;margin: 0;}
        a{text-decoration: none;
          color:inherit;}
        ol,ul{list-style: none;}
        .iconfont{
            font: bold 50px/100px '';
            color: green;
            margin: 50px 50px;
            display: block;
            float: right;
            position: absolute;
        }
    </style>
</head>
<body>
        <i class="iconfont icon-gouwuchekong"></i>
</body>
</html>

三.常用css2,css3属性

代码：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width user-scalable=no initial-scale=1.0 maximum-scale=1. minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="">
    <script src=""></script>
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        ol,ul{
            list-style: none;
        }
        a{
            text-decoration: none;
            color:inherit;
        }
        .box{
            width: 300px;
            height: 100px;
            background: hotpink;
            color: darkblue;
            /* 值： */
            /* overflow: hidden; */ /* 超出隐藏 */
            /* overflow: scroll; */   /* 超出x,y轴出现滚动条 */
           /*  overflow: auto; */   /* 超出出现滚动条 */

           /*  overflow-x: ; */   /* x轴溢出处理方式 */
            /* overflow-y: ; */   /* y轴溢出处理方式 */


            /* font */
            /* font-style: italic; */   /* 字体风格 */
            /* font-family: '华文行楷' */     /* 字体类型 */
             font-family: '华文行楷','华文中宋','微软雅黑';  /*  */
             font-weight: bold;     /* 加粗 */
             /* font-weight: normal; */   /* 不加粗 */
             line-height: 100px;
             text-align: center;

        }
        .box2{
            width: 300px;
            margin-top: 10px;
            background: hotpink;
            color: darkblue;
            text-align: center;
            /* padding: 10px 0; */
            line-height: 40px;
        }

        /* 字体的复合属性 */
        .box1 p{ font: 20px ''; }     /* 字体大小 字体类型  这个最简 */
        .box1 p{ font: 20px '华文行楷'; }     /* 字体大小 字体类型 */
        .box1 p{ font: 20px/100px '华文行楷'; }   /* 字体大小/字体行高 字体类型 */
        .box1 p{ font: bold  20px/100px '华文行楷'; } /* 字体粗细 字体大小/字体行高 字体类.box1 型 */
        .box1 p{ font: bold italic 20px/100px '华文行楷'; }   /* 字体粗细 字体风格 字体大小/字体行高 字体类型 */


        .box3{
            background: purple;
            color: #fff;
            padding: 10px 0;
            /* text-transform: capitalize; */ /* 单词首字母大写 */
            /* text-transform: uppercase;  */     /* 单词全部大写 */
            text-transform: lowercase;  /* 单词全部小写 */

            /* letter-spacing: 10px; */   /* 字间距 */
            word-spacing: 20px;

            word-break: break-all;
        }
        .box5{
            width: 100px;
            height: 100px;
            background: purple;
            cursor: pointer;
            opacity: 0.5;   /* 兼容主流浏览器（谷歌，火狐，ie8以上）值：0-1 0是完全透明，1完全不透明 */
            filter: alpha(opacity=50);  /* 兼容ie8及其以下  值：0-100  0是完全透明，100完全不透明 */
        }

    </style>
</head>
<body>
    <div class="box">
        <p>
             <!-- 永和九年，岁在癸丑，暮春之初，会于会稽山阴之兰亭，修禊事也。群贤毕至，少长咸集。此地有崇山峻岭，茂林修竹，又有清流激湍，映带左右，引以为流觞曲水，列坐其次。虽无丝竹管弦之盛，一觞一咏，亦足以畅叙幽情。 是日也，天朗气清，惠风和畅。仰观宇宙之大，俯察品类之盛，所以游目骋怀，足以极视听之娱，信可乐也。 -->
             永和九年
        </p>
    </div>
    <div class="box2">永和九年</div>
    <div class="box3">
        <p>
             I love you 永和 九年，岁在癸丑，暮春之初，会于会稽山阴之兰亭，修禊事也。群贤毕至，少长咸集。fgfdsjgfjgsdkfgjsdf
        </p>
    </div>
    <div class="box4">
         &lt;h3&gt;我是 &brvbar; h3&lt;/h3&gt;
    </div>
    <div class="box5"></div>
<script>

</script>
</body>
</html>

代码：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width user-scalable=no initial-scale=1.0 maximum-scale=1. minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="">
    <script src=""></script>
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        ol,ul{
            list-style: none;
        }
        a{
            text-decoration: none;
            color:inherit;
        }
        .box1 p{
            width: 300px;
            /* height: 100px; */
            background: darkblue;
            color: yellow;

            display: -webkit-box; /*继承block的属性*/
            -webkit-box-orient:vertical;   /*元素垂直显示*/
            -webkit-line-clamp:3;  /*设置文本显示的行数*/
            overflow: hidden; /*（不能使用padding）*/

        }
        body,html{
            height: 100%;
        }
        body{
            /* 线性渐变 */
            /* background: -webkit-linear-gradient(left top,deeppink,yellow,#153170); */
            /* background: -webkit-linear-gradient(left top,deeppink 10%,yellow 20%,#153170 100%); */
            background: -webkit-radial-gradient(left top,deeppink,yellow,#153170);
            background: -webkit-radial-gradient(center,deeppink,yellow,#153170);
            /* 径向渐变 */

        }
        .box2{
            width: 200px;
            height: 100px;
            background:darkcyan;
            border-radius: 10px;    /* 当半径为宽高的一半时，为圆 */
            /* border-radius: 50%; */     /* 相对于自身的宽高 */
        }
        .box3{
            width: 100px;
            height: 100px;
            background:darkblue;
            transition-property: width;     /* 哪个属性过渡，不写就默认all，全部属性都会过渡 */
            transition-duration: 1s;    /* 过渡持续的时间 */
            transition-delay: 2s;       /* 过渡延迟 */
            transition-timing-function: ease;     /* 过渡曲线：就好比你跑步，加速，减速，先加速后减速 */
                    /* 
                    1.    linear: 匀速
                    2.    ease：慢快慢
                    3.    ease-in：匀加速
                    4.    ease-out：匀减速

                    */

        }
        .box3:hover{
            width: 300px;
            background:deeppink;
        }
        /* 复合属性 */
        .box4{
            width: 100px;
            height: 100px;
            background:brown;
            transition: 2s;    /* 过渡时间 */
            transition: width  2s;     /* 过渡属性 过渡时间 */
            transition: 2s   linear;   /* 过渡时间 过渡曲线 */
            transition: width  2s  linear;     /* 过渡属性 过渡时间  过渡曲线 */
            transition: width  2s   3s   linear;   /* 过渡属性 过渡时间   延时时间 过渡曲线 */
        }
        .box4:hover{
            width: 300px;
            background:deeppink;
        }
        .box5{
            width: 100px;
            height: 100px;
            background:darkgoldenrod;
            transition: 1s;
        }
        .box5:hover{
            transform: rotate(90deg);/* 默认值，绕Z轴转 */
            /* transform: rotateX(180deg); *//* （绕X轴顺时针转） */
            /* transform: rotateY(180deg); *//* （绕Y轴逆时针转） */

            /* 大于1放大，小于1缩小 */
            /* transform: scale(1.5); */
            /* transform: scale(0.5); */

            transform: translate(100px);     /* 只有一个值，x轴位移 */
            transform: translateY(100px);   /* y轴位移 */
            transform: translateZ(100px);   /* z轴位移 需要3d环境 */

            /* transform: rotate(90deg) scale(0.5) translate(100px); */
            
            transform: rotate(90deg);
            transform-origin: 100px 100px;  /* 旋转基点 */
            transform-origin: right top;  /* 旋转基点 */
        }
        .box6{
            display: flex;
            justify-content: space-between;     /* 水平方向 */
            /* justify-content: space-around; */

            align-content: space-between;   /* 垂直方向 */
            /* align-content: space-around; */
            flex-wrap: wrap;
            width: 450px;
            height: 330px;
            box-shadow: 0 0 10px 0 #000;
            margin: auto;
        }
        .box6 p{
            width: 100px;
            height: 100px;
            background: darkblue;
        }

    </style>
</head>
<body>
    <div class="box1">
        <p>永和九年，岁在癸丑，暮春之初，会于会稽山阴之兰亭，修禊事也。群贤毕至，少长咸集。此地有崇山峻岭，茂林修竹，又有清流激湍，映带左右，引以为流觞曲水，列坐其次。虽无丝竹管弦之盛，一觞一咏，亦足以畅叙幽情。 是日也，天朗气清，惠风和畅。仰观宇宙之大，俯察品类之盛，所以游目骋怀，足以极视听之娱，信可乐也。</p>
    </div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
    <div class="box6">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
        <p>7</p>
        <p>8</p>
        <p>9</p>
        <p>10</p>
        <p>11</p>
        <p>12</p>
    </div>



<script>

</script>
</body>
</html>