CSS+ DIV布局

CSS+DIV 基本介绍：

html 是用来在浏览器显示的，css是用来控制html 样式的，使HTML样式和内容分离，div 是html 里的一个元素，div 可定义文档中的分区或节，div 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。用CSS来任意控制其位置，实现定位。

块元素和行内元素

行内元素，又叫内联元素，内联元素只能容纳文本或者其他内联元素。
常见内联元素： span a，input，img
特点是：只占内容的宽度，默认不换行，行内元素一般放文本或者其它的行。
块元素一般都从新行开始，可以容纳文本，其它内联元素和其它块元素，即使内容不能占满一行，块元素也要把整行占满。

常见块元素：div p
特点是：不管内容有多少，都要换行，同时占满整行，块元素可以放文本，行内元素，块元素。

注意事项：
1、一些css属性对行内元素不生效，例如margin,left，但是这个是于浏览器版本类型有关的。
2、div就是块元素，那么就拥有块元素的一切特性。

如果我们希望一个元素按照块元素的方式显示，则： display：block；
如果我们希望一个元素按照行内元素的方式显示，则： display：inline；

CSS 选择器:

id 选择器：为标有特定 id 的 HTML 元素指定特定的样式。

#para1
{
    text-align:center;
    color:red;
}

class 选择器：用于描述一组元素的样式，class可以在多个元素中使用。

.center {text-align:center;}

标签选择器

<style>
h3{
    color:red;
}
</style>

直接在标签内部写css 代码

<h3 style="color:red;">旅游网站</h3>

群组选择器：如果有多个类/id选择器，它们都有相同的部分，我们可以把相同的css样式放在一起，用,隔开

.ad_stu,.ad_2,.ad_house{
width :152px;
float:left;
}

父子选择器：在已定义类或者ID选择器的标签中，采取递进的方式对子孙元素定义样式

#style2 span{
     font-style:italic;
     color:red;
}

盒子模型

说明：
1、任何一元素都可以看做是一个盒子。
2、嵌套盒子模型的参照物不一样，则使用的属性不一样。外层盒子的panding等价于内层盒子的margin。
3、padding值过大会改变盒子的大小，margin值过大会挤到盒子外面，但盒子并没有变化。
4、如果不想破坏盒子模型的整体外观的话，尽量少使用padding。

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

浮动

什么是浮动？
div纵向排列，但是有时候需要它横向排列，这时候就能用浮动，让块级元素排列在一行上。

元素怎么浮动？
浮动分为走浮动，右浮动，会使元素向左或向右移动，其周围的元素也会重新排列。一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。

清除浮动：
元素浮动之后，周围的元素会重新排列，但有时候不想让周围的元素也跟着浮动，这时就需要使用 clear 属性。
clear 属性指定元素两侧不能出现浮动元素。

列表项:

使用css 对html 里的列表ul 很容易设置样式，html 里面很多地方都可以使用列表ul来写

<h3><span>今日推荐</span></h3>
            <ul>
                <li><a href="#"><img src="../Content/images/tuijian1.jpg"></a></li>
                <li><a href="#">喀纳斯河</a></li>
                <li><a href="#"><img src="../Content/images/tuijian2.jpg"></a></li>
                <li><a href="#">布尔津</a></li>
                <li><a href="#"><img src="../Content/images/tuijian3.jpg"></a></li>
                <li><a href="#">天山之路</a></li>
            </ul>

定位：

下面是设计的网页：