九月第四周学习笔记

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/>换行 &nbsp;**空格
  • <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++;
  }
};
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 14,714评论 1赞 92
  • Html&CSS（二）
    本文主要是起笔记的作用，内容来自慕课网. 认识CSS样式 CSS全称为“层叠样式表 (Cascading Styl...
    0o冻僵的企鹅o0阅读 7,581评论 0赞 30
  • CSS
    一 外部式css样式 (也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css...
    KunMitnic阅读 4,650评论 0赞 1
  • 2018-09-02HTML与CSS 第二篇
    什么是选择器 每一条css样式声明（定义）由两部分组成，形式如下： 在{}之前的部分就是“选择器”，“选择器”指明...
    小挠许阅读 2,948评论 0赞 1
  • 几个关于邮件效率和安全的问题清单
    E-mail是正式场合沟通的重要方式，每个人进入职场（不管你是企业还是事业单位），都跟邮件打交道。 一般来说平均每...
    风逍扬阅读 2,948评论 0赞 1

友情链接更多精彩内容