九月第四周学习笔记

2018-09-30  本文已影响0人  Jadon7

CSS

body{
   background:url(./images/background.jpg)  no-repeat center center;
   background-size:cover;
   background-attachment:fixed;
   background-color:#CCCCCC;
}

JavaScript

术语

HTML/CSS

<form>
    <input type="文本类型" name=“命名”/> 

    * type：**text 文本** **password 密码** **radio 单选框** **checkbox 复选框** **checked="checked" 时，该选项被默认选中**
    * value：提交数据到服务器的值（后台程序PHP使用）
    * name：为控件命名，以备后台程序 ASP、PHP 使用
    * 

<textarea  rows="行数" cols="列数">默认输入的文本</textarea>

<select>
  <option value="向服务器提交的数据">显示数据</option>
  <option value="向服务器提交的数据2">显示数据2</option>
    ...
</select> 

    * `selected="selected"`**默认选中**

.boxF{position:relative;}
.boxZ{position:absolute;...位置信息}
--------------------------
<div class="boxF">
        <div class="boxZ"></div>
</div>

居中

width: 100px；  //定宽
margin: 10px auto;  //左右 margin 为 auto

.juzhong{text-align:center;}
.juzhong ul{display:inline;}
.juzhong li(display:inline;)
------------------------------
<div class="juzhong">
    <ul>
        <li></li>
        <li></li>
    </ul>
</div> 

.juzhong{float:left;position:relative;left:50%}
.juzhong ul{position:relative;left:-50%}
.juzhong li{position:relative;}
------------------------------
<div class="juzhong">
    <ul>
        <li></li>
        <li></li>
    </ul>
</div>

垂直居中

table td{height:500px;}
-----------------------------------
<table><tbody><tr><td class="wrap">
<div>
        <p>需要居中文本。</p>
        <p>需要居中文本。</p>
</div>
</td></tr></tbody></table> 

    * 方法二：设置 css 为`display:table-cell;vertiacl-algin:middle;`

.container{
    height:300px;
    display:table-cell;
    vertical-align:middle;
}
-----------------------------------
<div class="container">
    <div>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
    </div>
</div>

缩写

font-style:italic;
    font-variant:small-caps; 
    font-weight:bold; 
    font-size:12px; 
    line-height:1.5em; 
    font-family:"宋体",sans-serif;

font:italic  small-caps  bold  12px/1.5em  "宋体",sans-serif;

搜索动效

<div id="frame" class="text-center">
  <h3><a href="#" id="wiki">Click here for a random article</a></h3>
  <div id="search" class="search">
    <div id="oval" class="oval"></div>
    <div id="line" class="line"></div>
    <div id="esc">
      <div id="x1" class="x1"></div>
      <div id="x2" class="x2"></div>
    </div>
  </div>
  <h3 id="tips" style="margin:50px">Click icon to search</h3>
</div>

body{
  background:#333;
}
a:link{
  color:#fff;
  text-decoration:blink;
}
#tips{
  color:#fff;
}
#frame{
  width:500px;
  height:300px;
  position:absolute;
  margin:auto;
  top:0;
  right:0;
  bottom:0px;
  left:0;
}
.searchOnclick{
  position: relative;
  left: 50%;
  margin: 300px 0 30px -195px;
  transition: all 300ms; 
  transition-delay: 100ms;
}
.search{
  position: relative;
  left: 50%;
  margin: 300px 0 30px -22px;
  transition: all 300ms; 
  transition-delay: 100ms;
}


.oval{
  width:44px;
  height:44px;
  border: 2px solid #fff;
  border-radius:22px;
  transition: all 300ms; 
  transition-delay: 100ms;
}
.ovalOnclick{
  width:400px;
  height:44px;
  border: 2px solid #fff;
  border-radius:22px;
  transition: all 300ms; 
  transition-delay: 100ms;
}
.line{
  width:15px;
  height:2px;
  background-color:#fff;
  transform: rotate(-315deg);
  margin-left:35px;
  margin-top:-3px;
  transition: all 100ms; 
  transition-delay: 300ms;
}
.lineOnclick{
  width:0px;
  height:2px;
  background-color:#fff;
  transform: rotate(-315deg);
  margin-left:35px;
  margin-top:-3px;
  transition: all 100ms; 
}
.x2{
  width:0px;
  height:2px;
  background-color:#fff;
  transform: rotate(45deg);
  margin-left:360px;
  margin-top:-2px;
  transition: all 100ms; 
}
.x2Onclick{
  width:24px;
  height:2px;
  background-color:#fff;
  transform: rotate(45deg);
  margin-left:360px;
  margin-top:-2px;
  transition: all 100ms; 
  transition-delay: 350ms;
}


.x1{
  width:0px;
  height:2px;
  background-color:#fff;
  transform: rotate(135deg);
  margin-left:360px;
  margin-top:-22px;
  transition: all 100ms; 
}
.x1Onclick{
  width:24px;
  height:2px;
  background-color:#fff;
  transform: rotate(135deg);
  margin-left:360px;
  margin-top:-22px;
  transition: all 100ms; 
  transition-delay: 400ms;
}

var a=0; 
var search = document.getElementById("search");
var oval = document.getElementById("oval");
var line = document.getElementById("line");
var x1 = document.getElementById("x1");
var x2 = document.getElementById("x2");

search.onclick=function()
{
  if(a%2==0)
  {
    oval.className="ovalOnclick";
    search.className="searchOnclick";
    line.className="lineOnclick";
    x1.className="x1Onclick";
    x2.className="x2Onclick";
    a++;
  }else{
    oval.className="oval";
    search.className="search";
    line.className="line";
    x1.className="x1";
    x2.className="x2";
    a++;
  }
};
上一篇 下一篇

猜你喜欢

热点阅读