day14前端（html，css）

前端第一课：

HTML
    - 标签
    标签一般分为两种：块级标签 和 行内标签（内联标签）
     h,p,br: id
        a  : id href  target
        div: id
        

        input 系列标签：
            type:
            text:
            password:
            radio:
            checkbox:
            file:
            button: 按钮
            submit    提交表单
            reset   重置表单
        
        select
        textarea -多行文本
        **form      - 要提交的内容放置的form标签中

 

　　　　相关符号：http://www.cnblogs.com/kiter/archive/2011/08/05/2128309.html
        

<!DOCTYPE html>
<html lang="en">
<head>
    <!--自闭合标签-->
    <meta charset="UTF-8">
    <!--十秒钟刷新一次页面-->
    <meta http-equiv="Refresh" Content="10">
    <!--5秒钟跳转-->
    <meta http-equiv="Refresh" Content="5; Url=http://www.autohome.com.cn" />

    <!--标签属性 name="alex"-->
    <title name="alex">老男人</title>
    <!--title的左上角图片 image/favicon.ico图片所在-->
    <link rel="shortcut icon" href="image/favicon.ico">
</head>
<body>
 <!--内联和块级-->
        <div style="background-color: red;">12</div>
        <span style="background-color: green;">12</span>
        <!--符号-->
        &lt;a&nbsp;b&gt;
        <!--段落和换行-->
        <p>asdfuo<br />iuasdkfjlkjasdfkj<br />alskdjfas;dlfj</p>
        <p>asdfuoiuasdkfjlkjasdfkjalskdjfas;dlfj</p>
        <p>asdfuoiuasdkfjlkjasdfkjalskdjfas;dlfj</p>
        <!--标题-->
        <h1>a</h1>
        <h2>a</h2>
        <h3>a</h3>
        <h4>a</h4>
        <h5>a</h5>
        <h6>a</h6>
        <h6 style="font-size: 65px;">a</h6>
        <!--a标签-->
        <a href="http://www.baidu.com">跳转1</a>
        <a href="http://www.baidu.com" target="_blank">跳转2</a>
        <!--<div href="http://www.baidu.com">阿萨德发送到</div>-->

        <!--寻找页面中id=i1的标签，讲其标签放置在页面顶部-->

        <a href="#i1">第一章</a>
        <a href="#i2">第二章</a>
        <a href="#i3">第三章</a>
        <!--id没有一个标签的id属性值不允许重复；id属性可以不写-->
        <div id="i1" style="height: 500px";>第一章内容</div>
        <div id="i2" style="height: 500px";>第二章内容</div>
        <div id="i3" style="height: 500px";>第三章内容</div>

</body>
</html>
html1（简介）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="background-color: red;">12</div>
    <span style="background-color: green;">12</span>
    <p>aaaaaaaaaa<br />aaaaaaaaaaaa<br />aaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>

    <!--标题-->
    <h1>a</h1>
    <h2>a</h2>
    <h3>a</h3>
    <h4>a</h4>
    <h5>a</h5>
    <h6>a</h6>
    <h6 style="font-size: 65px;">a</h6>

    <!--a标签-->
    <a href="http://www.baidu.com">跳转1</a>
    <a href="http://www.baidu.com" target="_blank">跳转2</a>
    <!--<div href="http://www.baidu.com">阿萨德发送到</div>-->


    <a href="#i1">第一章</a>
    <a href="#i2">第二章</a>
    <a href="#i3">第三章</a>


    <div id="i1" style="height: 500px;">第一章内容</div>
    <div id="i2" style="height: 500px;">第二章内容</div>
    <div id="i3" style="height: 500px;">第三章内容</div>




</body>
</html>
html2（标签a 跳转 锚）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form>
        <input type="text" />
    </form>

    <form action="http://192.168.11.88:8000/index/" method="post" enctype="multipart/form-data">
        <div style="border: 1px solid red;">
            <p>用户名：<input type="text" name="user"/> </p>
            <p>密码：<input type="password" name="user"/></p>
            <p>性别（单选框）
                <br /> 男<input type="radio" name="ee" value="1"/>
                <br /> 女<input type="radio" name="ee" value="0"/>
            </p>
            <p>爱好（复选框）：
                <br /> 男1<input type="checkbox" name="favor" value="1"/>
                <br /> 男2<input type="checkbox" name="favor" value="2"/>
                <br /> 男3<input type="checkbox" name="favor" value="3"/>
                <br /> 男4<input type="checkbox" name="favor" value="4"/>
                <br /> 男5<input type="checkbox" name="favor" value="5"/>
            </p>
            <p>城市：
                <select name="city">
                    <option value="1">上海</option>
                    <option value="2">北京</option>
                    <option value="3">广州</option>
                </select>
                <select multiple size="2">
                    <option>上海</option>
                    <option>北京</option>
                    <option>广州</option>
                </select>
                <select>
                    <optgroup label="AAA">
                        <option>上海</option>
                        <option>北京</option>
                    </optgroup>
                    <optgroup label="BBB">
                        <option>广州</option>
                    </optgroup>
                </select>
            </p>
            <hr />
            <p>文件：<input type="file" name="fafafa"/> </p>
            <p>备注：<textarea name="extra"></textarea></p>
            <input type="submit" value="提交">
            <input type="button" value="按钮">
            <input type="reset" value="重置">
        </div>
    </form>
</body>
</html>
html3(注册提交)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>老男孩搜索</h1>
    <iframe style="width: 100%;height: 2000px;" src = "http://www.baidu.com"></iframe>
</body>
</html>
html4（引用网站）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <th colspan="2">标题1</th>
                <!--<th>第2列</th>-->
                <th>标题2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>第1列</td>
                <td rowspan="2">第2列</td>
                <td>第3列</td>
            </tr>
            <tr>
                <td>第1列</td>
                <!--<td>第2列</td>-->
                <td>第3列</td>
            </tr>
        </tbody>
    </table>

    <table border="1">
        <tr>
            <th><a href="http://www.baidu.com" target="_blank">11</a></th>
            <th>22</th>
            <th>33</th>
        </tr>
        <tr>
            <td>44</td>
            <td>55</td>
            <td>66</td>
        </tr>
        <tr>
            <td>77</td>
            <td>88</td>
            <td>99</td>
        </tr>
    </table>
</body>
</html>
html5(表格)

     
CSS
    存放位置：
        单独css文件 最低
        html头部
        标签属性    最高
    - 效果
        color: red;
        display:none
                inline  转成内联标签
                block   转成块级标签
                inline-block 具有两种特性
        边距：
            margin 外边距（本身不增加）
            padding 内边距（本身增加）
            
        position:
            relative
            absolute    固定窗口 滚动移动
            fixed    固定窗口

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*标签选择器*/
        div{
            color: green;
        }
        /*id选择器*/
        #i1{
            font-size: 56px;
        }
        /*clas选择器*/
        .c1{
            background-color: red;
        }
        /*层级选择器*/
        .c2 div p .c3{
            background-color: red;
        }
        .c2 div p a{
            background-color: green;
        }
        /*组合选择器*/
        .c4,.c5,.c6{
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div class="c4">1</div>
    <div class="c5">1</div>
    <div class="c6">1</div>

    <div class="c2">
        <div>1</div>
        <div>
            <p>
                <span>oo</span>
                <a class="c3">uu</a>
            </p>
        </div>
    </div>
    <div class="c3">sdfsdf</div>

    <span class="c1">1</span>
    <div class="c1">2</div>
    <a class="c1">3</a>


    <a id="i1">baidu</a>
    <div>99</div>
    <div>99</div>
    <div>99</div>
    <div>
        <div>asdf</div>
    </div>

</body>
</html>
css1（各种选择器）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .img{
            background-image: url("http://misc.360buyimg.com/jdf/1.0.0/unit/globalImages/1.0.0/jd2015img.png");
            height: 800px;
            width: 500px;
            background-repeat: no-repeat;
            /*background-position: 0px 18px;*/
        }
        .img2{
            background-image: url("http://misc.360buyimg.com/jdf/1.0.0/unit/globalImages/1.0.0/jd2015img.png");
            height: 18px;
            width: 20px;
            background-position: 0px 18px;
        }
    </style>
</head>
<body>
    <div class="img2"></div>
    <div class="img"></div>
</body>
</html>
css2（大图片部分引用）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="width: 500px;height: 500px;border: 1px solid red;">
        <div style="width: 20%;background-color: aqua;float: left">f</div>
        <div style="width: 30%;background-color: beige;float: right">f</div>
        <div style="clear: both"></div>
    </div>
</body>
</html>
css3（float飘）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <span style="background-color: red;height: 50px;width: 200px">asdasdsa</span>

    <span style="display: inline-block;height: 50px;background-color: red">ddddddd</span>
</body>
</html>
css4（内联，块级标签转换）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="height: 1000px;background-color: #ddd;"></div>
    <div style="position: fixed;right: 200px;bottom: 100px">返回顶部</div>
</body>
</html>
css5（fixed固定位置）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="height: 500px;width: 400px;border: 1px solid red;position: relative">

        <div style="height: 200px;background-color: red">
            <div style="position: absolute;bottom: 0;right: 0">111</div>
        </div>
    </div>
</body>
</html>
css6（特定块中固定位置）

 

posted @ 2016-08-08 09:47  Aaron.shen  阅读(151)  评论(0)  编辑  收藏  举报