一: 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;
相关推荐
div+css布局教程入门 div+css布局教程入门 div+css布局教程入门
DIV+CSS网站布局从入门到精通 源代码 朱印宏 邓艳超 编著 北京希望电子出版社 2011年1月 本教程介绍了商业类型的网页设计,以及目前流行的DIV+CSS标准布局方法和实战技法。通过对十个经典案例进行分析,分别从不同...
网页设计基础Div+CSS布局入门教程
实践DIV+CSS网页布局入门指南实践DIV+CSS网页布局入门指南实践DIV+CSS网页布局入门指南
Div+CSS布局入门教程,本教程含实例文件,欢迎有需求者下载
Div+CSS布局入门教程 Div+CSS布局入门教程 Div+CSS布局入门教程 Div+CSS布局入门教程 Div+CSS布局入门教程
div+css网页布局入门+XHTML与CSS基础
div+css布局入门教程PDF
Div+css简单快速入门.pdf
DIV+CSS从入门到精通,网页布局,简明教程,深入浅出。
DIV+CSS入门DIV+CSS入门DIV+CSS入门
Div+CSS布局入门教程,帮你完成入门的学习
第一步:规划网站,本...第六步:页面内的基本文本的样式(css)设置; 第七步:网站头部图标与logo部分的设计; 第八步:页脚信息(版权等)的表现设置; 第九步:导航条的制作(较难); 第十步:解决IE浏览器的显示BUG;
《DIV+CSS网站布局从入门到精通》[附书与源码].rar 《DIV+CSS网站布局从入门到精通》[附书与源码].rar 《DIV+CSS网站布局从入门到精通》[附书与源码].rar 《DIV+CSS网站布局从入门到精通》[附书与源码].rar 《DIV+...
DIV+CSS入门教程完整版,很适合初学者的教程。非常容易理解。
DIV+CSS布局入门教程
最新DIV+CSS图文布局入门教程,超级详细.rar最新DIV+CSS图文布局入门教程,超级详细.rar
《DIV+CSS入门教程》中文pdf版 电子书下载,整理蓝点的一篇div CSS教程,并做成的电子书便于大家阅读。图文并茂特别适合新手阅读。附构思图和css源文件下载
DIV+CSS布局大全 DIV+CSS布局入门 DIV+CSS DIV+CSS布局