`
百合不是茶
  • 浏览: 354711 次
社区版块
存档分类
最新评论
阅读更多

 

   一:  div

     相当于table,只是div定义表格时没有表格的标签多,减轻浏览器的解析压力 ,

 定义简单的div表格  ,div的宽度默认是100%,所以在定义div的时候需要设置宽度和高度

 

 <div>这是一个div的表格</div>

 

 

二: css样式引入html的方式

     1),直接在标签处定义css

         例子:设置div的宽度和高度

          

  <div style="width:200px;height:200px">这是一个div的表格</div>

 

 

 

      2),在html的<head> </head>标签之间

       

<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=gbk"/>

<style type="text/css">
<!--设置id的属性-->
#tupian{
border:1px #cc0000 solid ;
width:300px;
height:200px;
}
</style>
</head>

<body>
<div id="tupian"> 图片</div>
</body>
</html>

 

 

 

     3),外部样式,定义一个css文件

            将样式写在css文件中,通过在head标签中写样式引用

      

<link href="css的文件名.css"  type="text/css"  rel="stylesheet" />

 

 

三:CSS样式常用的属性(为了方便演示,将所有的css样式写在html的标签中)

文本,字体,背景,列表,边框

 

 背景:

 

background设置所有的背景 #000000 url('') repeat-x|repeat-y|no-repeat| x y;
background-color设置背景颜色: #000000;
background-image设置背景图片 :url('');
background-repeat 背景平铺 :repeat-x|repeat-y|no-repeat
background-position设置图片的显示的位置: x y

 设置页面的背景,平铺方式,显示图片的中间,背景颜色

<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=gbk"/>

<style type="text/css">

#tupian{
border:1px #cc0000 solid ;
width:300px;
height:200px;
background:url('grace.jpg') repeat-x  0 -50  #889890;
}
</style>
</head>

<body>
<div id="tupian"> 图片</div>
</body>
</html>




 文本;

text-indent	缩进元素文本的首行
text-align	对齐元素中的文本
word-spacing	设置字间距
letter-spacing	设置字符间距
line-height	设置行高
color	设置文本颜色

 

字体:

font-family	设置字体
font	简写属性,作用是把所有针对字体的属性设置在一个声明中
font-size	设置字体大小,一般声明为px, 或者pt
font-weight	设置字体的粗细,normal是标准字体,bold是粗体
font-style	设置字体的风格,normal是标准字体,italic是斜体,oblique是倾斜

 

 

列表;

  

list-style-type	设置列表项标志的类型 none:无标记;disc:默认,实心圆;circle:空心圆;square:实心方块;
list-style-image	将图象设置为列表项标志
list-style-position	设置列表中列表项标志的位置 
inside:列表项目标记放置在文本以内,且环绕文本根据标记对齐。 <li>标签里面
outside:默认。保持标记位于文本的左侧。列表项目标记放置在文本以外,且环绕文本不根据标记对齐。<li>标签外面

 

 

四: css的盒子模型;

 

 

盒子模型的概念;padding内间距   ;margin外间距  ;border边框;

 

在实际开发中尽量少用padding;margin可以代替padding

 

padding内间距:

padding	定义元素的内边距。padding 属性接受长度值或百分比值,但不允许使用负值。
padding:10px;  表示元素各个方向的内边距都是10像素;
padding:10px  20px;  表示元素上下的内边距都是10像素、左右的内边距都是10像素;
padding:10px 10%  0.25em  2ex;  从上面开始按照顺时针方向分别设置各个方向的内边距,可以采用不同的计量单位;
padding-left	定义元素左边的内边距
padding-right	定义元素右边的内边距
padding-top	定义元素上边的内边距
padding-bottom	定义元素下边的内边距

 

  margin外间距

margin	定义元素的外边距。margin属性接受长度值或百分比值,但不允许使用负值。
margin:10px;  表示元素各个方向的外边距都是10像素;
margin:10px  20px;  表示元素上下的外边距都是10像素、左右的内边距都是10像素;
margin:10px 10%  0.25em  2ex;  从上面开始按照顺时针方向分别设置各个方向的外边距,可以采用不同的计量单位;
margin-top	设置元素的上外边距。
margin-bottom	设置元素的下外边距。
margin-left	设置元素的左外边距。
margin-right	设置元素的右外边距。

 

 border边框

border	简写属性,用于把针对四个边的属性设置在一个声明。
border-style	用于设置元素所有边框的样式,或者单独地为各边设置边框样式。
border-width	简写属性,用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。
border-color	简写属性,设置元素的所有边框中可见部分的颜色,或为 4 个边分别设置颜色。
border-top/border-bottom/border-left/ border-right	这四个属性分别单独设置一个边的属性,可以在后面接上style/width/color来设置一个边的一种属性,如:border-top-color用来设置上边框的颜色

 

盒子模型的简单应用:padding和margin

<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=gbk"/>

<style type="text/css">
#tupian{
border:1px #cc0000 solid ;
width:300px;
height:200px;
 background:url('grace.jpg') repeat-x  0 -50  #889890;
}

 #bg{
   border:10px  #cc0000 solid;
   width:400px;
   height:400px;
   margin-top:50px;
   margin-left:10px;
   
 }
 
 #divbg{
  border:10px  #0000ff solid;
  width:300px;
  height:300px;
  margin-left:10px;
  margin-top:10px;
  padding-left:15px;
  padding-top:15px;
  
 }
</style>
</head>

<body>
<div id="tupian"> 图片</div>
<div id="bg"> 
		  <div id="divbg"> 边框模型 </div>
	</div>
</body>
</html>

 



 

五:浮动技术

   div可以左右浮动,float默认是不浮动的

  

  float:left;
    float:right;
    float:none;

 

   clear清除浮动,both清除左右两边的浮动,left左边的,right右边的,none不清除浮动

 clear:left;
clear:right
clear;both;
clear:none;

 

 

  • 大小: 4.3 KB
  • 大小: 71.3 KB
  • 大小: 30.6 KB
5
1
分享到:
评论

相关推荐

    DIV+CSS网站布局从入门到精通源代码

    DIV+CSS网站布局从入门到精通 源代码 朱印宏 邓艳超 编著 北京希望电子出版社 2011年1月 本教程介绍了商业类型的网页设计,以及目前流行的DIV+CSS标准布局方法和实战技法。通过对十个经典案例进行分析,分别从不同...

    DIV+CSS入门教程

    标题中的"DIV+CSS入门教程"指的是学习使用HTML中的DIV元素配合CSS(层叠样式表)进行网页布局的基础教程,适合初学者。通常,这种布局方式被称为“Div+CSS布局”,但实际上是不准确的术语。 在描述中提到,"DIV+CSS...

    Div+CSS布局入门+实例教程

    这个“Div+CSS布局入门+实例教程”是为初学者设计的,旨在帮助他们掌握这一核心技术。 Div(Division)是HTML中的一个元素,通常用于组合其他HTML元素,形成一个具有特定意义的区域。Div标签本身没有特定的含义,它...

    div+css页面布局,新手入门教材,2天学会div+css

    【div+css页面布局】是Web开发中的基础技术,用于构建网页的结构和样式。新手通过这门教材可以在两天内掌握基本的div+css布局技巧。以下是对标题和描述中涉及知识点的详细说明: 1. **规划网站**:在开始布局前,...

    Div+css简单快速入门.pdf

    《Div+CSS简单快速入门》 网页设计领域中,Div+CSS是一种常用的技术,用于实现网页的布局和样式控制。Div(Division)是HTML中的一个元素,常用来组织和分隔网页内容,而CSS(Cascading Style Sheets)则是样式表...

    Div+CSS布局入门教程(一二三四)

    【Div+CSS布局入门教程详解】 Div+CSS布局是网页设计中的重要技术,它通过分离样式和内容,使得网页设计更加灵活、可维护性更强。本教程将带你一步步入门Div+CSS布局,从基础概念到实际操作,帮助你掌握这种布局...

    DIV+CSS.rar_DIV_css+div_div+css_html+div+css_web前端

    【标题】"DIV+CSS.rar" 是一个关于网页布局技术的压缩包,主要围绕着 `div` 和 `CSS` 进行讲解。`div` 是HTML中的一个块级元素,常用于网页布局,而 `CSS`(层叠样式表)则是用于控制网页元素样式和布局的重要工具。...

    div+css从入门到精通

    DIV+CSS从入门到精通,网页布局,简明教程,深入浅出。

    div+css布局入门教程PDF

    《div+css布局入门教程》是一本专门为初学者设计的指南,旨在帮助读者掌握网页布局的基本技巧和概念。在这个数字化的时代,网页设计是互联网领域不可或缺的一部分,而div+css布局则是构建网页结构的关键技术。本教程...

    用div+css布局十步入门

    【用div+css布局十步入门】是一份适合初学者的CSS布局教程,旨在帮助学习者掌握使用CSS进行网页布局的基本技巧。以下是该教程详细的知识点解析: **第一步:规划网站** 在开始布局前,首先需要对网站进行规划。本...

    《DIV+CSS网站布局从入门到精通》[附书与源码].rar

    《DIV+CSS网站布局从入门到精通》[附书与源码].rar 《DIV+CSS网站布局从入门到精通》[附书与源码].rar 《DIV+CSS网站布局从入门到精通》[附书与源码].rar 《DIV+CSS网站布局从入门到精通》[附书与源码].rar 《DIV+...

    div+css网页布局入门

    "Div+CSS"是一种常用的网页布局技术,尤其适合创建响应式、易维护的页面。在这个“div+css网页布局入门”教程中,我们将深入探讨这个主题,帮助初学者掌握这一基础技能。 **Div元素** Div(Division)是HTML中的一...

    《DIV+CSS入门教程》

    《DIV+CSS入门教程》是一本专为初学者设计的电子书,旨在帮助读者快速掌握网页布局和样式设计的核心技术。在网页开发中,DIV(Division)和CSS(Cascading Style Sheets)是构建现代网页界面的重要工具。本书通过...

    Div+CSS网页样式与布局从入门到精通 实例

    本教程"Div+CSS网页样式与布局从入门到精通"旨在帮助初学者掌握这一核心技术,通过实例深入理解其工作原理和应用技巧。下面将详细介绍Div和CSS的基础概念、它们在网页布局中的作用,以及如何从入门到精通。 Div...

    div+css网页布局入门+XHTML与CSS基础

    在网页设计领域,`div+css`布局是构建现代网页的标准技术之一,它极大地提高了页面的可维护性和表现力。本教程将引导你入门`div+css`网页布局,并深入理解`XHTML`与`CSS`的基础知识。 首先,我们来了解一下`div`...

    Div+CSS布局自学入门教程.pdf

    《Div+CSS布局自学入门教程》是一份详细的技术文档,主要针对初学者,旨在教授如何使用Div和CSS进行网页布局设计。Div(Division)是HTML中的一个区块元素,常用于组织网页内容,而CSS(Cascading Style Sheets)则...

Global site tag (gtag.js) - Google Analytics