day15前端(回顾+JavaScript)

时间：2016-08-16 14:33:42 阅读：214 评论：0 收藏：0 [点我收藏+]

标签：

作业总结：
   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>


   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;
   
   
Dom



jQuery

day15前端(回顾+JavaScript)

标签：

原文地址：http://www.cnblogs.com/aaron-shen/p/5776137.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行