样式表、格式布局、流式布局

内联样式表：

<div style="background-color:#0F3; height:100px; width:80%; margin:0px auto;">12345678</div>
<span style="background-color:#C09;">span不可以被更改大小，因为一开始就规定了，span使用多少就占用多少</span>

内嵌样式表：

<style type="text/css">
p
{ background-color:#3C3;
color:#C00;
width:400px;}
</style>

<p>12345689</p>
<p>12345689</p>
<p>12345689</p>

外部样式表：

新建一个css文件用来存放样式表。调用，在HTML文件中点右键，css样式，附加样式表。

css文件中：

p/*针对所有p标签起作用*/
{
    background-color:#CC0;
    font-size:24px;
    color:#30F;
    width:400px;}

html中：

<link href="111.css" rel="stylesheet" type="text/css" />

<p>你好</p>

选择器：

class选择器：以.开头

<style>
.a{ width:100px;
height:100px;
border:1px solid red;}
</style>

<div class="a">你好</div>

id选择器：以#开头

<style>
#a{ width:100px;
height:100px;
background-color:#3F0;
 }
</style>

<div id="a">你好</div>

链接的style：定义这些状态时有顺序l、v、h、a

<style type="text/css">
a:link
{
    color:black;
    text-decoration:none;}
a:visited
{
    color:black;
    text-decoration:none;}
a:hover
{
    color:red;
    text-decoration:underline;}
a:active
{
    color:orange;
    text-decoration:underline;}
    
    
.a1:link
{
    color:#6F3;
    text-decoration:none;
    }
    .a1:visited
{
    color:#6F3;
    text-decoration:none;
    }
.a1:hover
{
    color:red;
    text-decoration:underline;
    }
.a1:active
{
    color:orange;
    text-decoration:underline;
    }
</style>

<a href="http://www.baidu.com" target="_blank">百度一下</a><br />
<a href="http://www.baidu.com" target="_blank">百度一下</a><br /><br />
<a class="a1" href="http://www.qq.com" target="_blank">腾讯官网</a><br />
<a class="a1" href="http://www.qq.com" target="_blank">腾讯官网</a><br />

 

 

格式布局：

position:fixed   锁定相对于浏览器的位置（例如小广告）

<div style="width:200px; height:150px; background-color:#0F3; right:0px; bottom:200px; position:fixed;">AAA</div>

 

position：absolute

1.外层没有position：absolute；那么div相对于浏览器定位

2.外层有position：absolute；那么div相对于外层边框定位

<style>
*{ margin:0px; padding:0px;}
.b{ width:100px; height:100px; background-color:#09F; left:50px; bottom:20px; position:absolute;}
.c{ border:1px solid red; width:400px; height:200px;}
.d{ border:1px solid red; width:400px; height:200px; position:absolute;}
</style>

 

<div class="c">c<div class="b">b</div></div>
<div class="d">d<div class="b">bb</div></div>

position：relative 相对于默认位置的移动

<div id="a" style="position:relative;">你好</div>
<div id="a" style="position:relative;">你好</div>

overflow：hidden 超出部分隐藏

<div style="border:1px solid blue; width:300px; height:300px; position:relative; left:100px; top:50px;">
<div style="background-color:#0F3; width:100px; height:100px; position:relative; top:0px; left:0px; z-index:2; overflow:hidden;"><div style="background-color:#93C; width:100px; height:100px; position:relative; top:30px; left:30px;">
</div></div></div>

 

 

 

分层（z-index）在z轴方向分层，可以理解为一摞纸，层数越高越靠上。

<style>
.a{ width:100px;
height:100px;
background-color:#3F0;
position:fixed;
z-index:2;
 }
.aa{ width:100px;
height:100px;
background-color:#900;
left:20px;
top:20px;
position:relative;
    
    }
 
</style>

<div class="a">a</div>
<div class="aa">aa</div>

 

流式布局：

float：left、right 

不用给他规定位置（left、top），直接相对于浏览器。若外部被包裹，相对于外部div的除去一行的位置的左上或右上显示。

<style>
*{
    margin:0px;
    padding:0px;}
.aa{ 
width:100px;
height:100px;
background-color:#999;
float:left;
margin-left:10px;
margin-top:10px;
cursor:pointer;}
#qq{
    width:230px;
    height:450px;
    background-color:#0F3;}
</style>

<div id="qq">
<div class="aa">a</div>

<div class="aa">b</div>

<div class="aa">c</div>

<div class="aa">d</div>

<div class="aa">e</div>

<div class="aa">f</div>

<div class="aa">g</div>

<div class="aa">h</div>
</div>