HTML/CSS+bootstrap

版权声明：欢迎转载，请标注来源和链接 https://blog.csdn.net/Joovo/article/details/81008536

• HTML/CSS
  
  • css覆盖的优先级
  • 一些细节问题
• bootstrap
  
  • bootstrap 用法
  • 使用心得
• JQuery

在freecodecamp上学了一下，感觉比同类型的学习网站更好一些。
想整理一下学习的内容，但是发现太杂了…

果然还是写点心得吧，第二天就碰上了css的覆盖问题。

HTML/CSS

style标签里的写法：

• .开头对应一个class
• #开头对应一个id
• 直接写对应的是相应的标签

css覆盖的优先级

内嵌的css高于外部的css

style 标签里按照从上到下的顺序覆盖，越到后面优先级越高

如果不想某个属性被覆盖，在该行最后（分号前）加上!important

一些细节问题

font-family 表示字体，可以跟多个字体名称，作用是找不到前面的按照顺序往后找，同样适用于很多软件字体设置的思想，如 atom

• margin 表示外边框
• padding 表示内边框
• border 表示边框，所以是加上 padding 的

bootstrap

bootstrap 用法

在 HTML 文件里面添加

   <!-- 新 Bootstrap 核心 CSS 文件 -->
   <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
   <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
   <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
   <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
   <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

然后将所有使用Bootsrap样式的代码写在如下DIV中，二者选一。

  <div class="container">
   //这里写你bootstrap样式的代码
   </div>

   <div class="container-fluid">
   //这里写你bootstrap样式的代码
   </div>

当然也可以下载后本地引用

使用心得

感觉最好用的是 12栅格

<div class="row">
  <div class="col-xs-6">
    something
  </div>
  <div class="col-xs-6">
    something
  </div>
</div>

xs 表示 extrme small（用于小尺寸屏幕等）
md 表示 middle 

JQuery

看代码就很好理解，常见用法

$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});

在中间写东西，常用的方法有
.appendTo()
.clone()
.remove()
.addClass()
等