Blogger Information
Blog 36
fans 0
comment 0
visits 28028
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
表单和css选择器 2018_8_15作业
小程_武汉_214945
Original
626 people have browsed it

表单:

实例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
    <form action="" method="get">   <!--get/post提交方式-->
        <table width="500px" align="center" style="background-color: skyblue" cellspacing="0" cellpadding="8px">
            <caption><h2>用户注册</h2></caption>
            <tr>
                <td colspan="2">
                    <hr />
                </td>
            </tr>
            <tr>
                <td align="right"><label for="num">帐号:</label></td>
                <td><input type="text" name="num" id="num" /></td>
            </tr>
            <tr>
                <td align="right"><label for="password">密码:</label></td>
                <td><input type="password" name="password" id="password" /></td>
            </tr>
            <tr>
                <td align="right">性别:</td>
                <td>
                    <input type="radio" name="sex" id="" value="男" />男
                    <input type="radio" name="sex" id="" value="女" />女
                    <input type="radio" name="sex" id="" value="保密" />保密
                </td>
            </tr>
            <tr>
                <td align="right">爱好:</td>
                <td>
                    <input type="checkbox" name="hobby[]" id="" name="game" />打游戏
                    <input type="checkbox" name="hobby[]" id="" name="wash" />洗
                    <input type="checkbox" name="hobby[]" id="" name="篮球" />篮球
                    <input type="checkbox" name="hobby[]" id="" name="足球" />足球
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <hr />
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="submit" value="提交" style="margin-left: 100px;border-radius: 8px;cursor:pointer" />
                    <input type="reset" value="重置" style="margin-left: 100px;border-radius: 8px;cursor:pointer" />
                </td>
            </tr>
        </table>
    </form>

    </body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

3种单位的区别


实例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <title>3种单位的区别</title>
    <body>
    <div class="px">px</div>
    <div class="em">em</div>
    <div class="rem">rem</div>
    <style>
        /*
            浏览器默认字体16px
            最小12px
         */
        .px{
            font-size:20px;
            width:100px;
            line-height:100px;
            text-align:center;
            background-color:#666666;
        }
        .em{    /*em =16px 默认值*/
            font-size:20px;
            width:5em;
            line-height:5em;
            text-align:center;
            background-color:red;
        }
        .rem{
            width:10rem;
            line-height:10rem;
            text-align:center;
            background-color:blue;
        }
    </style>
    </body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

样式继承:


实例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <title>样式继承</title>
    <body>
    <style>
        /*在文档中 字体、颜色、字体大小、列表样式、表格可继承*/
        /*元素外部的属性 边框 内外边距不可继承*/

        body{
            font-size:22px;   /*可继承*/
        }
        ul{
            font-weight:bold;   /*可继承*/
            border:1px solid red;  /*不可继承*/
            padding:1rem;     /*不可继承*/
        }
        ul li{
            border:inherit;   /*强制继承*/
            padding:inherit;  /*强制继承*/
        }
    </style>


    <nav>
        <ul>
            <li class="item1"><a href="">导航1</a></li>
            <li class="item2"><a href="">导航2</a></li>
            <li class="item3"><a href="">导航3</a></li>
            <li class="item4"><a href="">导航4</a></li>
        </ul>
    </nav>

    </body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

CSS选择器:


实例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <title>样式冲突</title>
    <body>
    <!--
        样式优先级
        内联:style属性声明在元素内部,仅对当前元素有效
        内部:style标签,对当前文件有效
        外部:通过link引入css样式
        优先级:内联>内部>外部
        同名样式后面定义的会覆盖前面的
        强制优先级:!import

     -->
    <style>
        h2{
            /*color:blue;*/
        }
    </style>
    <h2 style="color: red">hello  world</h2>

    <style>
        ul{
            margin:0;
            padding:20px 5px;
            width:600px;
            border:1px dashed #666;
        }
        /*子块撑开父级*/
        ul:after{
            content:'';
            display:block;
            clear:both;
        }
        ul li{
            list-style:none;
            float:left;
            width:40px;
            height:40px;
            line-height:40px;
            border-radius:50%;
            background-color:skyblue;
            text-align:center;
            margin:0 5px;
            box-shadow:3px 3px 3px #666666;
        }
        /*属性选择器*/
        ul li[id]{
            background-color:red;
        }
        ul li[class]{
            background-color:green;
        }
        ul li[class="item2"]{
            background-color:yellow;
        }
        /*以***开头*/
        ul li[class^="cat"]{
            background-color:blue;
        }
        /*以***结尾*/
        ul li[class$="big"]{
            background-color:#f24f24;
        }
        /*属性值中包含**的*/
        ul li[class*="t"]{
            background-color:#f56f56;
        }
        /*层级选择器*/
        body ul li{
            border:1px solid #000;
        }
        /*子选择器*/
        ul>li[class="item2"]{
            background-color:cyan;
        }
        /*相邻选择器*/
        ul li[class$="big"] ~ *{
            background-color:black;
            color:#fff;
        }
        /*相邻兄弟选择器*/
        ul li[class$="big"]+li{
            background-color:pink;
        }
        /*群组选择器*/
        h2,p{
            font-size:33px;
            font-weight:bold;
        }
        /*伪类*/
        a{
            font-size:22px;
        }
        /*访问后*/
        a:link{
            color:blue;
        }
        /*访问前*/
        a:visited{
            color:red;
        }
        /*获取焦点*/
        a:focus{
            color:pink;
        }
        /*鼠标悬停*/
        a:hover{
            color:#000;
        }
        /*鼠标点击激活的时候*/
        a:active {
            color: aquamarine;
        }
        /*伪类选择器  位置*/
        ul li:first-child{  /*第一个*/
            background-color:#fff !important;
        }
        ul li:last-child{   /*倒数第一个*/
            color:red;
        }
        ul li:nth-child(5){     /*第五个*/
            background-color:skyblue;
        }
        ul li:nth-child(even){
            /*偶数、odd基数*/
            background-color:#f4f4f4;
        }
        /*伪类选择器: 根据子元素的数量*/
        ol :only-child {
            background-color: lawngreen;
        }

        ol li:only-child {
            background-color: lawngreen;
        }

        ul li:nth-last-child(3) {
            background-color: wheat;
        }
        /*规定属于其父元素的第二个 p 元素*/
        ol li:nth-of-type(2) {
            background-color: wheat;
        }
        /*空元素*/
        :empty{
            width:220px;
            height:220px;
            background-color:cyan;
        }

        :empty:after{
            content:'hello world';  /*内容*/
        }

        :empty:before {
            /*通过伪类添加的元素,默认都是行内元素,不支持宽高设置,可以通过设置背景图片的方式来间接处理*/
            content: url("./static/images/footlogo.png");
        }

    </style>

    <ul>
        <li id="item1">1</li>
        <li class="item2">2</li>
        <li class="cat dog big">3</li>
        <li >4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>

    <h2>hello</h2>
    <p>你好吗</p>
    <a href="http://www.php.cn/">PHP中文网</a>

    <div></div>
    <ol>
        <li>1</li>
    </ol>

    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ol>

    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ol>


    </body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

IMG_20180816_090914.jpg

Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post