在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()
等