九月第四周学习笔记

作者: Jadon7 | 来源:发表于2018-09-30 23:06 被阅读0次

CSS

.food>li{样式}包含选择器，即加入空格,用于选择指定标签元素下的后辈元素。
* {color:red;}通用选择器，匹配html中所有标签元素
伪类选择器
* 元素:hover{样式} hover 样式
元素,元素2{样式}多个元素相同样式
背景居中缩放填充满屏幕

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

font-style:italic;文字斜体
text-decoration:underline;文字下划线
text-decoration:line-through;文字删除线
text-indent:2em;首行缩进
letter-spacing:50px;字间距
word-spacing:50px;单词间距
text-align:center;文字图片在 div 中居中
text-align:left;文字图片在 div 左对齐
text-align:right;文字图片在 div 中右对齐

JavaScript

alert(typeof 变量);输出变量的字符类型
weindow.onload=function(){};预加载
document.getElementById();获取id
parseInt()将字符串转成数字（从左到右检索，遇到非数字直接跳出）（整数）
变量.onclick=function(){};点击事件
alert();弹窗输出
条件判断？执行操作1:执行操作2if语句简易写法（三木写法）
循环语句：for/while
* break，直接跳出
* continucontinue 跳过当前循环

术语

string 字符串
number 数字
boolean 布尔值
function 函数
object 对象
undefined 未定义
NaN 非数字
null 空对象
undefind 空
变量本身没有类型，看变量存了什么类型
一个变量应该只存放一种类型

HTML/CSS

<head></head>文件头部信息一般放置<title></title>标题 <meta> <style></style>样式 <script></script>脚本等标签
<em></em>斜体 <strong></strong>粗体
<q></q>双引号引用 <blockquote></blockquote>左右缩进式引用
<br/>换行  **空格
<hr/>分割线 <address>联系地址信息</address>用户信息/斜体
<code></code>代码样式 <pre></pre>多行代码
<table></able>表格
* <th></th>头部单元格（加粗）
* <tr></tr>行
* <td></td>列
<a href=""></a>链接
* target="_blank"在a标签加入时可以在新窗口打开
* a标签邮件属性（如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔。）
[image:01D2C7D9-9481-43A6-86B0-06C242EDB772-294-00027DBE738FA0F4/C64F3143-5079-46F6-B32D-FDBEDFA05F62.png]
文本输入框

<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"`**默认选中**

提交按钮 <input type="submit" value="按钮文案">
重置按钮<input type="reset" value="按钮文案">
<div>、 <p>、<h1>、<form>、<ul> <li>都是块级元素（blick 元素）
* display: block;将元素显示为块级元素
* 每一个块级元素都从新的一行开始，并且其后的元素也另起一行
* 元素的宽高行高及顶和底边距都可以设置
* 元素宽度在不设置情况下与父容器一致
<span>、<a>、<label>、 <strong> <em>内联元素/行内元素（inline 元素）
* display:inline;将元素设置为内联元素
* 内联元素和其他元素都在一行上
* 元素的宽高边距都不可设置
* 元素的宽度就是它包含的文字或图片的宽度，不可改变
<img>、<input>内联块状元素（inline-block 元素）
* display:inline-block将元素设置为内联块状元素
* 和其他元素都在一行上；
* 元素宽高行高及边距都可以设置
border-style（边框样式）有：dashed（虚线）dotted（点线）solid（实线）
在网页中，元素有三种布局模型：
* 流动模型（Flow）
* 块状元素都会在所处的包含元素内自上而下按顺序垂直延展分布
* 内联元素都会在所处的包含元素内从左到右水平分布显示
* 浮动模型 (Float)例float:left; float:right;
* 块状元素 可以在一行内显示多个块状元素
* 层模型（Layer）有三种类型
* 绝对定位positon:absolute;
* 将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。
* 相对定位position:relative;
* 通过 left、right、top、bottom 属性确定元素在正文中的偏移位置，但是偏移的位置不会对其他元素产生影响其他元素依旧按本元素未偏移的位置来布局
* 固定定位position:fixed;
* 不会随着网页的滚动或大小调整发生位置变化
* 与background-attachment:fixed;功能相同
* 通过父子关系相对对位（相对父级定位）：
* 对父级元素添加相对定位
* 对子集元素添加绝对定位
* 例：

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

居中

如果元素为行内元素时通过对其父元素添加text-align:center;
* 图片元素宽度大于 div 时会左对齐…
定宽块状元素（宽度固定）通过设置左右 margin 为 auto 实现居中

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

不定宽块状元素方式一通过设置元素为行内元素（display:inline;）并对父级添加居中（text-algin:center;）实现

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

不定宽块状元素方式二ul 层左侧与父级（div）中心线对齐，li 层中心线与父级（ul）左侧对齐

.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>

垂直居中

父元素高度确定的单行文本垂直居中通过设置文本行高与容器高度一致居中
height:100px;line-height:100px;
父元素高度确定的多行文本、图片垂直居中
* 方法一：table（包括 tbody、tr、td）标签，会设置 vertical-align: middle

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>

所有元素只要设置position:absolute;或float:left/right;元素会变为块状元素，display 属性会变为 inline-block（块状元素）

缩写

字体样式缩写（不好用）需要指定 font-size 及 font-family 属性，其他属性未指定自动使用默认值

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++;
  }
};

九月第四周学习笔记

CSS

JavaScript

术语

HTML/CSS

居中

垂直居中

缩写

搜索动效

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读