div+css 第一天

最新推荐文章于 2023-12-19 23:05:48 发布

亲亲小朱儿

最新推荐文章于 2023-12-19 23:05:48 发布

阅读量213

点赞数

很好的学习网站，总结来源于http://www1.qdfuns.com/

因为没有权限修改hosts 所以用的sublime不能下载插件就又改用了WS

1.Table 存储数据，读完后加载
DIV 架构页面结构，即读即加载
2.W3C标准不是一个标准，而是一系列标准的集合，包含三部分的标准：结构标准、表现标准和动作标准。与结构标准对应的代表语言是xHTML，与表现

标准对应的代表语言是CSS，与动作标准对应的代表语言是JavaScript。
3.CSS
行内代码<p style="color:#F00; background:#CCC; font-size:12px;"></p>
内嵌样式将CSS代码写在<head></head>之间，并且用<style></style>进行声明
链接样式<link type="text/css" rel="stylesheet" href="style.css" />（推荐）
导入样式采用import导入CSS样式表
四种样式的优先级按照“就近原则”：行内样式 > 内嵌样式 > 链接样式 > 导入样式。
4.CSS选择器
标签选择器、ID选择器、类选择器、通用选择器。
标签：p{
font-size:12px;
background:#900;
color:090;
}
ID选择器在某一个HTML页面中只能使用一次，<p id="one">W3CFuns.com:打造中国Web前端开发人员最专业的贴心社区！</p>
#one{
font-size:12px;
background:#900;
color:090;
}
类选择器
<p class="one">此处为p标签内的文字</p>
<div class="one">此处为DIV标签内的文字</div>
.one{
font-size:12px;
background:#900;
color:090;
}
<div id="my" class="one yellow left">ID和class可同时应用到同一个标签</div>
通用选择器
*{此处为CSS代码}
为了保证作出的页面能够兼容多种浏览器，所以要对HTML内的所有的标签进行重置，会将下面的代码加到CSS文件的最顶端：
*{margin:0; padding:0;}

把共同的部分提取出来，这么做的好处，相同的部分共同定义，不同的部分单独定义。
#header,div,.blue,h1{font-size:14px;}

#header{background:#ccc;}

div{width:960px;}

.blue{color:#009;}

.h1{font-weight:normal;}

5.选择器的嵌套#div1 p a{color:#900;}/*意思是在ID为div1内的p标签内的链接a标签的文字颜色为红色*/
6.盒子模型
content(内容)、border(边框)、padding(内边距)、margin(外边距)
7.块状元素和内联元素
块状元素
一般是其他元素的容器，可容纳内联元素和其他块状元素，块状元素排斥其他元素与其位于同一行，宽度(width)高度(height)起作用。常见

块状元素为div和p。

内联元素
内联元素只能容纳文本或者其他内联元素，它允许其他内联元素与其位于同一行，但宽度(width)高度(height)不起作用。常见内联元素为“a

”。
但是宽度和高度只对块状元素起作用，内联元素不起作用。给相应的内联元素加上一个属性display:block就可以了。
8. margin:20px 0 0 20px;外边距
padding是内边距
其中的数值顺序是：上右下左。
margin:0 auto；”的作用就是将页面元素水平居中
9.页面布局有两种方式
1）浮动Float
float:left
其实这是IE6的一个BUG(IE6双倍边距BUG)，只要满足下面3个条件才会出现这个BUG:

1）要为块状元素；
2）要左侧浮动；
3）要有左外边距(margin-left)；

解决这个BUG很容易，只需要在相应的块状元素的CSS属性中加入“display:inline;”，代码如下：
2）定位Position
10.网页会先加载html盒子，然后再加载body盒子，那么CSS代码如下：
html{background:url(../images/bg.gif) repeat-x;}
body{background:url(../images/clouds.gif) repeat-x;}
11.将制作出来的标题和效果图中的标题对比，发现效果图内的链接是红色的，鼠标移上去会出现下划线，为实现这个效果就需要对标题<h1>内的链接

<a>的样式进行定义
#leftArticle h1 a{color:#900; text-decoration:none;}
#leftArticle h1 a:hover{text-decoration:underline;}
12.每段文字距离下段文字之间的距离是30px，文字大小为14px，CSS如下定义：
#leftArticle p{color:#333; text-indent:2em; margin-bottom:30px; font-size:14px;}
13. #footer a{color: #CCCCCC;text-decoration: none;}
#footer a:hover{text-decoration: underline;}指向如果是链接的话就显示下划线
总结：现在body里边写主要部件然后在head里边写CSS。