day15前端(回顾+JavaScript)

作业总结:
1、inline-block; 3px宽度  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .inp{
            border: 0;
            border-left: 1px solid #dddddd;
            border-right: 1px solid #dddddd;
            height: 25px;
            margin: 0;
            padding: 0;
            float: left;
        }
        .sp{
            display: inline-block;
            height: 25px;
            width: 25px;
            text-align: center;
            line-height: 25px;
            float: left;
        }
    </style>
</head>
<body>
    <div style="border: 1px solid #dddddd;display: inline-block;">
        <div class="sp">-</div>
        <input class="inp" type="text" />
        <div class="sp">+</div>
    </div>
</body>
</html>
h1

2、改造标签
例如:
3、补充:
img标签边框,IE
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        img{
            border: 0;
        }
    </style>
</head>
<body>
    <div>
        <div class="item">
            <a href="http://www.etiantian.org">
                <img src="2.jp" alt="图片">
            </a>
        </div>
    </div>
</body>
</html>
img标签

 

上节回顾:

HTML
头部:编码,title,style,link
身体:
内联
块级
---> inlie-block

a标签:
target,href(url,#i1)
img标签:
src alt
iframe(伪Ajax,上传文件)
src
form标签:
action提交url;method,提交方式;enctype:....

input系列
text
password
checkbox
name = favor, value = 1
name = favor, value = 2
name = favor, value = 3
favor: 1,2
radio,互斥,
name =
file

button,无效果
submit,提交当前form表单
reset,重置当前form表单
            <select></select>

textarea

=====> 默认值
<input value='123' />
<textarea>123</textarea>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
        <input value='123' />
        <textarea>123</textarea>
        <select>
            <option>上海</option>
            <option selected="selected">广州</option>
            <option>背景</option>
        </select>
        男:<input type="radio" name="g1"  />
        女:<input type="radio" name="g1" checked="checked"/>

        <input type="checkbox" name="c1" checked="checked" />
        <input type="checkbox" name="c1"  />
        <input type="checkbox" name="c1"  checked="checked"/>
        <input type="checkbox" name="c1" />
</body>
</html>
各种默认值

 



CSS
存在形式
标签属性
style块
文件
最牛的:color:red !important;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .hide{
            display: none !important;
        }
        .c1{
            color: red !important;
        }
        .c2{
            color: green;
        }
    </style>
</head>
<body>

    <div class="c1 c2">asdfasdfasdfasdf</div>
</body>
</html>
不能被替换
      寻找:
标签选择器
class选择器
ID选择器
层级选择器
组合选择器

属性选择器
.c1[alex='a']{
color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .c1[alex='a']{
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <div class="c1" alex="a">1</div>
        <div class="c1" alex="b">2</div>
        <div class="c1">3</div>
        <div class="c1" alex="a">4</div>
    </div>
</body>
</html>
属性选择器
      样式:

color,width,height
width:百分比
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div class="pg-body" style="width: 980px;margin: 0 auto;">
        <div style="width: 20%;float: left;background-color: red">asasdfasdfasdfasdfasdfasdfdf</div>
        <div style="width: 80%;float: left;background-color: #2459a2">
       sdfsdfasdfasdfsdfasdfsdfasdfasdfsdfasdfasdfsdfasdfasdf
        </div>
    </div>
</body>
</html>
百分比
         background:

透明度:
opcity:0.6
background:rgba(0,0,0,.6)

position:
fixed
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .pg-header{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 48px;
            background-color: #2459a2;
        }
        .pg-body{
            height: 2000px;
            margin-top: 48px;
        }
    </style>
</head>
<body>
    <div class="pg-header">asdf</div>
    <div class="pg-body">老男孩</div>
</body>
</html>
fixed

 

            absolute
定义位置:
滚动:

relative


relative && absolute
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .icon-name{
            background-image: url('i_name.jpg');
            height: 16px;
            width: 16px;
            display: inline-block;
        }
        .icon-pwd{
            background-image: url('i_pwd.jpg');
            height: 16px;
            width: 16px;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div style="width: 200px;position: relative">
        <input style="width: 180px;padding-right: 20px;" />
        <span class="icon-name" style="position: absolute;top:2px;right: 0;"></span>
    </div>
</body>
</html>
relative&absolute

 


===> z-index:
===> 页面布局:fixed
边距补充

input
图标(补充 font awesome)

===================
font awesome

float: 好方式
:hover
:after
:before
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .c1:hover{
            background-color: #2459a2;
        }
        .c2:before{
            content: '666';
        }
        .c2:after {
            content: '777';
        }
        .left{
            float: left;
        }
        .item{
            background-color: red;
        }
        .clearfix:after{
            content: '.';
            clear: both;
            display: block;
            visibility: hidden;
            height: 0;
        }
    </style>
</head>
<body>
    <div class="c1">ddd</div>
    <div class="c2">888</div>

    <div style="background-color: red" class="clearfix">
        <div class="left" style="height: 100px;background-color: green">1</div>
        <div class="left">2</div>
    </div>
</body>
</html>
class属性

 


网站:
css:
.clearfix:after{
content: '.';
clear: both;
display: block;
visibility: hidden;
height: 0;
}

HTML:
<div class='clearfix'>
<div style='float'>
<div style='float'>
</div>

over-flow:hide/auto


布局:
主站(w,剧中)
后台管理
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            margin: 0;
        }
        .pg-header{
            height: 48px;
            background-color: #2459a2;
        }
        .pg-body .body-menu{
            position: absolute;
            top: 48px;
            left: 0;
            bottom: 0;
            width: 200px;
            background-color: red;
        }
        .pg-body .body-content{
            position: absolute;
            top: 48px;
            left: 210px;
            right: 0;
            background-color: green;
            bottom: 0;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div class="pg-header"></div>
    <div class="pg-body">
        <div class="body-menu"></div>
        <div class="body-content">
           asdfasdf <br/>
            asdfasdf<br/>asdfasdf<br/>asdfasdf<br/>asdfasdf<br/>asdfasdf<br/>asdfasdf<br/>asdfasdf<br/>

        </div>
    </div>
    <div class="pg-footer"></div>
</body>
</html>
后台管理

 



JavaScript
编程语言,由浏览器编译并运行
1、存在形式:
2、放置位置
body内部最下面
3、变量
var a = 123; 局部变量
a = 123; 全部变量 *****
===》
var a = 123;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

</head>
<body>
    <h1>asdfasdf</h1>


    <script>
        var ab = 123;
        alert(ab);




//        function f1(){
//            // var i = 123;
//            /* i = 123;
//             asdfasdf
//            */
//            i = 123;
//        }
//        function f2(){
//
//        }
//        f1();
//        alert(i);
    </script>
</body>
</html>
test1
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="i1" style="display: inline-block;background-color: green;color: white">欢迎宝强莅临指导</div>
    <div id="i2" style="display: inline-block;background-color: green;color: white">欢迎宝强莅临指导</div>
    <script>

        setInterval("f1()", 1000);

        function f1(){
            // js获取某一个标签 id=i1
            var tag = document.getElementById('i1');
            // 获取标签的内容
            var text = tag.innerText;

            var a = text.charAt(0);
            var sub = text.substring(1,text.length);


            var new_str = sub + a;
            tag.innerText = new_str;
        }

    </script>
</body>
</html>
test2
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <script>
        var url = "http://www.etiantian.org?n=王宝强";
        var ret = encodeURI(url);
        //alert(ret);
        console.log(ret);
        var u = decodeURI(ret);
        //alert(u);
        console.log(u);


        var r2 = encodeURIComponent(url);
        console.log(r2);


    </script>
</body>
</html>
test3
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <script type="text/javascript">

        var li = [11,22,33,44];
        var dic = {'k1': 11,'k2': 22};
        //第一种for
        // for(var i = 0;i<li.length;i++){}
        /*
        for(var i = 0;i<li.length;i=i+2){
            console.log(i,li[i]);
        }
        */
        /*第二种for循环
        for(var item in li){
            console.log(item,li[item]);
        }
        */
        for(var key in dic){
            console.log(key,dic[key]);
        }


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

//        setInterval(function(){
//            alert(123);
//        }, 1000);
//        function f1(arg){
//            alert(arg);
//        }
//        f1(123);
        // 做封装
//        (function(arg){
//            alert(arg);
//        })(123)

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

 

小练习:
  打开关闭对话框
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .hide {
            display: none;
            /*color: transparent*/
        }
        .modal{
            width: 400px;
            height: 300px;
            background-color: #dddddd;
            position: fixed;
            top: 50%;
            left: 50%;
            margin-left: -200px;
            margin-top: -150px;
            z-index: 10;
        }
        .shadow{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            /*background-color: black;*/
            /*opacity: 0.4;*/
            background-color: rgba(0,0,0,.6);
            z-index: 9;
        }
    </style>
</head>
<body>

    <div class="shadow" >
        <input type="button" onclick="open_id_1();" value="打开" />
    </div>
    <div id="id_1">
        欢迎参加本节目
        <input type="button" onclick="close_id_1();" value="关闭" />
    </div>

    <div style="height: 2000px;">
    </div>



    <script type="text/javascript">
        function open_id_1() {
            var i = document.getElementById('id_1');
            i.className = 'modal';
        }
        function close_id_1() {
            var i = document.getElementById('id_1');
            i.className = 'hide';
        }


    </script>

</body>
</html>

 




Dom



jQuery





































posted @ 2016-08-16 13:46  Aaron.shen  阅读(128)  评论(0编辑  收藏  举报