在codecademy 和慕课网上学了HTML和CSS以后，在网易买了微专业，4月份开课，在此之前，自学部分做一些笔记。
这个课程的前4课介绍基础，不做笔记。
第五课时 .CSS控制div显示
作业：1.CSS有几种引入方式 。
有四种引入方式，①直接在HTML标签中添加STYLE属性，例如<table style ="border:1px solid blue; ">X</table>
②将样式代码写在页面 <style> X </style>中，在这对标签之间使用CSS语言。
③使用Link标签，引入外部CSS文件，文本中<link rel="stylesheet" href="stylesheet.css">，另写名字为“stylesheet”的CSS文件。
④使用@import 引入文件，有两种方式，一种是放在页面中的<style>……</style>,另一种是放在CSS文件中使用，用法：@import“sub.css"【这个不太懂】
import 在计算机术语里面含义是 “引入，导入” 理解这个就比较容易理解这个语法的意思了
-
style 标签对里面使用
for example:
有一个 html 文件，名称是 index.html，内容如下：
<html>
<head>
<meta charset="utf-8">
<title>首页</title>
<style>
@import "css/reset.css";
/* 这里的 import 就是说，把 css 文件夹下的 reset.css 样式内容导入到这里 */
</style>
</head>
<body>
<h1>Hello</h1>
</body>
</html> -
在 css 文件里面使用
for example:
有 css 文件夹，下面有 reset.css 与 index.css 2 个 css 文件，文件目录结构如下：
- css
- reset.css
- index.css
reset.css 文件内容如下：
- {
margin: 0;
padding: 0;
}
index.css 文件内容如下：
@import "reset.css";
.header {
padding: 10px;
}
2.div除了可以声明id控制，还可以声明什么控制？
div除了可以声明id来控制，还可以用class（类）来赋予它一个名称，或者直接用style来设定它的样式。
3.如何让两个DIV并排显示
使用float属性，两个块级元素都设置float:left;
第六课时，浮动布局
<style>
#Lside{float:left; /*在页面上面尽量往左漂浮*/
}
#Rside{float:left; /*在页面上面尽量往左漂浮，这时如果上一个Lside ，漂到了最左,Rside会漂在Lside的右边，这是页面中除了L最左的位置，如果div 的元素不写浮动元素，则这个元素会成为背景，被盖住*/
}
</style>
<body>
<div id ="Lside">我是左</div>
<div id ="Rside">我是右</div>
</body>
作业：完成田字格的布局。（秘诀：使用 clear：both； ）
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#Lup {
width: 50px;
height: 50px;
float: left;
background-color:gray;
}
#Rup {
width: 50px;
height: 50px;
float: left;
background-color:#FFB6C1;
}
#Ldown{
width: 50px;
height: 50px;
background-color: #CD9B1D;
float: left;
clear: both;
}
#Rdown{
width: 50px;
height: 50px;
background-color: #EEE9BF;
float: left; /clear: both;/
}
</style>
<title>田字格</title>
</head>
<body>
<div id="Lup">左上角</div>
<div id="Rup">右上角</div>
<div id="Ldown">左下角</div>
<div id="Rdown">右下角</div>
</body>
</html>
效果：
代码效果图
今天还学到了markdown中在每行前面空四个空格，可以将文字转换为代码模式，不知其他有没有简便一点的方式引入代码。
网友评论