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>
定位:
下面是设计的网页: