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
         百分比
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div class="pg-body" style=" 980px;margin: 0 auto;">
        <div style=" 20%;float: left;background-color: red">asasdfasdfasdfasdfasdfasdfdf</div>
        <div style=" 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=" 200px;position: relative">
        <input style=" 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{
             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
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/aaron-shen/p/5776137.html