页面布局和样式美化-创新互联

在上一篇中我们事先了一个简单的Hello world页面。

创新互联是一家专注于网站建设、做网站与策划设计,遂平网站建设哪家好?创新互联做网站,专注于网站建设十年,网设计领域的专业建站公司;建站业务涵盖:遂平等地区。遂平做网站价格咨询:18982081108

在这一篇中，我们来认识下布局，和样式。

目前说的比较多的就是DIV+CSS

DIV 是一个html里面的标签，就好像h2一样。

看下面一段代码


	
		DIV+CSS
	
	
		
			DIV+CSS

里面的所有标签，除了div其他在上一节都说过。运行结果如下图页面布局和样式美化

没有任何的惊喜。

下面我们通过css让它有点变化，给它加个边框

代码修改成下面的样子


    
        DIV+CSS
        
    
    
        
            DIV+CSS

解析下代码：

1、我在head里面加入style标签，这是一个定义样式的标签，所有的样式都写在这个标签里面。而里面的样式代码就叫做css。

2、我在div里面加入了class="content" ，这句代码的意思在这个div里面加入一个class属性，而属性值是content。属性值可以随便写，但要有意义。不能起a，b，c 这些毫无意义的值。class属性是一个常用的属性。在标签里面还可以有其它属性，例如：id属性，我们写成

当然，值可以随便取有意义的。

3、刚刚我们在div里面写了class='content' 而style里面有写了.content{border:1px solid;} 这里style里面的意思就是将class='content'的标签的border(边框线)设置为1px (1像素) solid(实心的)。

运行效果如下，内容上面多了一条边框线

页面布局和样式美化

现在我们再改改，加个背景颜色


    
        DIV+CSS
        
    
    
        
            DIV+CSS

代码解析

1、刚刚我们说了一个id的属性。现在代码里面就有一个id的属性。值为contentid。而style里面加入了#contentid{background-color:red;}。这里面的意思就是将id=contentid的标签的background-color（背景颜色）设置为red（红色）

运行结果如下

页面布局和样式美化

留意下，在div里面写id的时候，style前面用了#号，写class的时候前面用了英文句号. 就是这样用，没错。id用#号表示； class用.表示这叫做“选择器”，#contentid 就是选择id为contentid的标签。

注意在一个页面中，id值是唯一的，class值可以多个。

就是说：已经定义了id=contentid，就不能再其他标签定义id=contentid，因为contentid 已经表示了一个标签，其他标签不能再用contentid，但可以用其他值，例如id=contentid2

但是class可以有多个，可以在多个标签上定义class=content都是没有问题的。

看下面的代码，就有两个一模一样的class，两个值不一样的id


	
		DIV+CSS
		
	
	
		
			DIV+CSS