html+css演示

head标签

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="icon" href="icon.png">
        <link rel="icon" href="https://www.jd.com/favicon.ico">

        <meta http-equiv="Refresh" content="2;URL=https://www.baidu.com">

    </head>


    <body>

        <h1>hello</h1>
        <a href='https://www.jd.com/'>点击</a>

        <img src="http://img2.imgtn.bdimg.com/it/u=4289651615,1500379285&fm=11&gp=0.jpg" title="egon">

    </body>
</html>
View Code

body基本标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

<!--块级标签-->
<!--<h1>yuan</h1>-->
<!--<h2>yuan</h2>-->
<!--<h3>yuan</h3>-->
<!--<h4>yuan</h4>-->
<!--<h5>yuan</h5>-->
<!--<h6>yuan</h6>-->
<h3 style="background-color: goldenrod">咏鹅</h3>
<p>eee </p>
<p>去向向天歌 </p>
<p>白猫浮绿水 </p>
<p style="background-color: green">红章拨清波 </p>
<a href="" style="background-color: red">clickfsadfasdfdsafasdf</a> <a href="">click</a>
<!--内联标签-->

<b>blod</b>
<strong>strong</strong>

<strike>60$</strike>

<em>em</em>

3<sub>2</sub> &nbsp;&nbsp;&nbsp;
3<sup>2</sup>

&copy;
<hr>

<div style="">yuan</div>
<span style="font-weight: 900;font-size: 30px">span</span>
</body>
</html>
View Code

a标签_锚（mao）,可以用于文章章节设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>


<a href="#c1">1</a>
<a href="#c2">2</a>
<a href="#c3">3</a>

<h1></h1>
<div style="height: 500px;background-color: green" id="c1">第一章</div>
<div style="height: 500px;background-color: wheat" id="c2">第二章</div>
<div style="height: 500px;background-color: gray" id="c3">第三章

</div>

</body>
</html>
View Code

常用标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<!--<img src="http://img2.imgtn.bdimg.com/it/u=4289651615,1500379285&fm=11&gp=0.jpg" alt="egon" title="egon" width="100px" height="100px">-->
<!--<a href="https://diannao.jd.com/" target="_blank">点击</a>-->
<!--<a href="基本标签.html" target="_blank">点击2</a>-->
<!--<a href="基本标签.html" target="_blank">-->
    <!--<img src="http://img2.imgtn.bdimg.com/it/u=4289651615,1500379285&fm=11&gp=0.jpg" alt="egon" title="egon" width="100px" height="100px">-->
<!--</a>-->
<!--&lt;!&ndash;unorder list 无序&ndash;&gt;-->

<!--<ul>-->
    <!--<li>111</li>-->
    <!--<li>111</li>-->
    <!--<li>111</li>-->
<!--</ul>-->
<!--&lt;!&ndash;order list 有序&ndash;&gt;-->
<!--<ol>-->
    <!--<li>222</li>-->
    <!--<li>222</li>-->
    <!--<li>222</li>-->
<!--</ol>-->
<!--定义 define list-->
<!--<dl>-->
    <!--&lt;!&ndash;dd&ndash;&gt;-->
    <!--<dt>河北省</dt>-->
    <!--<dd>保定市</dd>-->
    <!--<dd>石家庄</dd>-->
    <!--<dd>邯郸</dd>-->
<!--</dl>-->
<table border="1px" cellpadding="5px" cellspacing="2px">

    <tr>
        <td>111</td>
        <td>111</td>
        <td>111</td>
        <td>111</td>
    </tr>
     <tr>
        <td colspan="2">111</td>

        <td>111</td>
        <td>111</td>
    </tr>
     <tr>
        <td>111</td>
        <td>111</td>
        <td>111</td>
        <td rowspan="2">111</td>
    </tr>

     <tr>
        <td>111</td>
        <td>111</td>
        <td>111</td>

    </tr>

</table>

</body>
</html>
View Code

表单标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

<h3>注册页面</h3>

<form action="" method="get" enctype="multipart/form-data">

    <p>
        <label for="c1">姓名：</label>
        <input type="text" name="username"  placeholder="username" id="c1">
    </p>

    <p>密码：<input type="password" name="pwd"></p>

    <p>性别: <input type="radio" name="gender" value="1">男<input type="radio" name="gender" value="0">女</p>

    <p>爱好：<input type="checkbox" name="hobby" value="football" checked>足球 <input type="checkbox" name="hobby" value="basktball">篮球<input type="checkbox" name="hobby" value="double2">双色球</p>

    <p>头像：<input type="file"></p>

    <p><input type="reset" value="reset"></p>

    <p><input type="button" value="按钮" onclick="alert(1234)"></p>

    <p><input type="hidden" name="key" value="v1"></p>

    <p>
        省份：
        <select name="province" size="3" multiple="multiple">
            <option value="1">河北省</option>
            <option value="2" selected>河南省</option>
            <option value="3">湖北省</option>
            <option value="4">日本省</option>
        </select>
    </p>
    <p>
        <textarea name="gerenjianjie" id="" cols="30" rows="10" placeholder="个人简介"></textarea>
    </p>
    <p><input type="submit" value="submit"></p>
</form>
</body>
</html>
View Code

css的引入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        /*1  按标签名选择*/
        /*p{*/
            /*color: red;*/
        /*}*/

        /*div{*/
            /*background-color: green;*/
        /*}*/
        /*2 按id属性选择*/

        /*#c1{*/
            /*font-size: 40px;*/
        /*}*/


        /*3 按class属性选择*/

        /*.c2{*/
            /*background-color: rebeccapurple;*/
        /*}*/

        /*4 * */

        *{
            color: red;
        }

    </style>

</head>
<body>

<p class="c2">hello1</p>
<p id="c1">hello2</p>
<p class="c2">hello3</p>

<div>DIV</div>

<!--<p style="color: red">hello3</p>-->

</body>
</html>
View Code

组合选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        1 后代选择器
         .outer p{
             color: red;
         }
         /*2 子代选择器*/
        .outer>p{
             color: red;
         }
        .outer .c2 p{

        }
        /*3 多元素选择器*/

        .outer>p,.c3{
            color: red;
        }
    </style>
</head>
<body>
<div class="outer">
    <p>P</p>
    <div class="c2">
        <p>PP</p>
    </div>
</div>

<div class="c3">P</div>

</body>
</html>
View Code

背景属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            width: 120px;
            height: 90px;
            background-color: #53868B;
            /*background-image: url("http://img2.imgtn.bdimg.com/it/u=4289651615,1500379285&fm=11&gp=0.jpg");*/
            /*background-repeat: no-repeat;*/
            /*background-position: -200px -100px;*/
            background: url("http://img2.imgtn.bdimg.com/it/u=4289651615,1500379285&fm=11&gp=0.jpg") no-repeat -200px -100px;
        }
    </style>
</head>
<body>
<!--<img src="http://img2.imgtn.bdimg.com/it/u=4289651615,1500379285&fm=11&gp=0.jpg" alt="">-->
<div class="c1"></div>
</body>
</html>
View Code

边框属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            width: 200px;
            height: 200px;
            /*border-style: solid;*/
            /*border-width: 10px;*/
            /*border-color: red;*/
            border: solid red 2px;
            border-radius: 20%;
        }
    </style>
</head>
<body>
<div class="c1">sadfsda</div>
</body>
</html>
View Code

内边距与外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1,.c2{
            width: 300px;
            height: 300px;
            padding: 50px;
            /*padding: 50px 20px 20px;*/
            /*padding-top: 50px;*/
            border: dashed 2px red;
        }

        .c1{
             background-color: wheat;
             margin-bottom: 20px;
        }

        .c2{
             background-color: dodgerblue;
             margin-top: 50px;
        }


        .s1,.s2{
            color: white;
            padding: 10px;
        }

        .s1{
            background-color: rebeccapurple;
        }

        .s2{
            background-color: darkmagenta;
            margin-left: 100px;
        }

        .outer{
            width: 100%;
            height: 600px;
            background-color: wheat;
            overflow: hidden;
        }

        .inner{
            width: 80%;
            height: 300px;
            background-color: gray;
            margin: 100px auto;
        }
    </style>

</head>
<body>
    <!--<div class="c1">Yuan</div>-->
    <!--<div class="c2">Yuan2</div>-->

    <!--<span class="s1">111</span>-->
    <!--<span class="s2">222</span>-->
<div class="outer">
    <div class="inner"></div>
</div>

</body>
</html>
View Code

float属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        body{
            margin: 0;
        }
        .c1{
            width: 100px;
            height: 170px;
            background-color: #53868B;
            float: left;
        }
        .c2{
            width: 200px;
            height: 70px;
            background-color: cornflowerblue;
            float: left;
        }
        .c3{
            width: 300px;
            height: 120px;
            background-color: darkmagenta;
            float: right;
        }
    </style>

</head>
<body>

<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>


</body>
</html>
View Code

register.html草稿

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        *{
            margin: 0;
            padding: 0;
        }

        .header{
            width:100%;
            height: 30px;
            background-color: darkgray;
        }
        .headerContent{
            width: 80%;
            height: 30px;
            /*background-color: aquamarine;*/
            margin: 0 auto;
            line-height: 30px;
        }

        .keep{
            float: left;

        }

        .action{
            float: right;
        }

        .headerContent a{
            text-decoration: none;
            color: black;
            font-size: 14px;
        }

        .action a{
            margin-right: 8px;
        }

        .logo{
            width: 80%;
            margin: 0 auto;
            /*background-color: green;*/

        }


        .content{
            border: 1px solid red;
            width: 80%;
            height: 500px;
            margin: 0 auto;
        }

        .regForm{
            width:60% ;
            background-color: dodgerblue;
            height: 100%;
            float: left;
           
        }

        .regForm  h2{
            margin-top: 20px;
            margin-left: 20px;
        }

        .lognBtn{
            width: 40%;
            background-color: rebeccapurple;
            height: 100%;
            float: left;
        }

        #form{

            margin-top: 20px;
            margin-left: 40px;
        }

        #c1{
            line-height: 30px;
        }

        #form .submit{
             padding: 5px 20px;
             background-color: red;
             margin-top: 10px;
             color: white;
             border:none;
        }


    </style>
</head>
<body>

<div class="header">
    <div class="headerContent">
          <div class="keep">
              <a href="">收藏</a>
          </div>

          <div class="action">
              <a href="">登录</a>
              <a href="">注册</a>
              <a href="">VIP</a>
              <a href="">客户服务</a>
          </div>
    </div>
</div>

<div class="logo">
    <a href=""><img src="2.png" alt=""></a>
</div>


<div class="content">
    <div class="regForm">
        <h2>注册新用户</h2>

        <form action="" id="form">
            <p>
                <label for="c1">用户名：</label>
                <input type="text" id="c1">
            </p>
            
            
            <p><input type="submit" class="submit" value="同意以上协议并注册"></p>
        </form>

    </div>
    <div class="lognBtn"></div>
</div>


<div style="text-align: center;margin-top: 20px;line-height: 40px;background-color: greenyellow">yadhaklsasdf 阿斯蒂芬阿斯蒂芬撒的发生</div>



</body>
</html>
View Code

 

posted @ 2017-09-22 21:05  warren1236  阅读(124)  评论(0)  编辑  收藏  举报