Div+CSS基础代码网页布局+实例教程Word格式文档下载.docx
《Div+CSS基础代码网页布局+实例教程Word格式文档下载.docx》由会员分享,可在线阅读,更多相关《Div+CSS基础代码网页布局+实例教程Word格式文档下载.docx(13页珍藏版)》请在冰豆网上搜索。
-//W3C//DTDXHTML1.0Transitional//EN"
"
http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
htmlxmlns="
//www.w3.org/1999/xhtml"
head>
metahttp-equiv="
Content-Type"
content="
text/html;
charset=gb2312"
/>
title>
CSS高度实例<
/title>
style>
.yangshi{min-height:
_height:
width:
150px;
border:
/style>
/head>
body>
测试内容高度超出演示实例测试内容测试内容高度超出演示实例高度超出演示实例,实例
/body>
/html>
CSS宽度
传统Html宽度属性单词:
width如width="
;
CSS宽度属性单词:
width如width:
300px;
HTML宽度与DIV+CSS对比
1、传统html中宽度width="
,即设置对应元素宽度为300px(像素)。
而宽度值后无需跟单位,默认情况下以像素(px)为单位。
如:
tdwidth="
我的宽度为300px<
即:
设置了对应表格td的宽度为300px.
2、divcss中宽度设置width:
,即设置对应CSS样式为300px,这里需要跟单位。
#header{width:
}
定义headerCSS选择器样式为300px宽度。
而在标签运用:
divid="
header"
我的宽度为300px宽度<
CSS宽度自适应
常常我们看见一个网页宽度随浏览器宽度改变而自动改变,宽度是自适应宽度。
这里运用了百分比即可实现自适应宽度。
如果网页总宽度为80%即width:
80%;
,将使此宽度知道自适应宽度为浏览器80%。
当然前提是设置最外层没有宽度限制条件下。
DIVCSS自适应宽度例子:
CSS样式代码:
styletype="
text/css"
body{margin:
0auto;
text-align:
center;
.yangshi{width:
1pxsolid#003;
margin:
Html中bodydiv代码:
我是80%自适应宽度<
CSS边框
CSS边框即CSSborder是控制对象的边框边线宽度、颜色、虚线、实线等样式CSS属性
Html表格控制边框:
border="
1"
bordercolor="
#000000"
说明:
控制表格边框宽度为1px,颜色为黑色,默认为实线样式边框
DIVCSS边框:
border-color:
#000;
border-style:
solid;
border-width:
1px;
以上代码为设置对象边框颜色为黑色、边框为实线、宽度为1px边框。
边框样式包括
设置上边框:
border-top:
设置下边框:
border-bottom:
设置左边框:
border-left:
设置右边框:
border-right:
边框显示样式:
border-style:
none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset
参数值解释:
none:
无边框。
与任何指定的border-width值无关
hidden:
隐藏边框。
IE不支持
dotted:
在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。
否则为实线
dashed:
在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。
solid:
实线边框
double:
双线边框。
两条单线与其间隔的和等于指定的border-width值
groove:
根据border-color的值画3D凹槽
ridge:
根据border-color的值画菱形边框
inset:
根据border-color的值画3D凹边
outset:
根据border-color的值画3D凸边
设置上边框为1px实线黑色边框。
border-top-color:
border-top-style:
border-top-width:
或简写border-top:
#000solid1px;
完整DIVCSS实例:
实例内容设置CSS命名为yangshi的css选择器,设置该属性选择器样式为边框为1px宽度实线黑色边框、宽度为200px,高度为50px的矩形。
CSS代码:
div,body{border:
0;
5px;
padding:
}/*初始化网页样式*/
.yangshi{border:
1pxsolid#000;
200px;
height:
}/*设置对象样式*/
HTML中对应DIV代码:
divcss5实例-CSS边框实例<
br/>
这是一个CSS实例
CSS背景
backgroundCSS手册查询-background手册
background-color设置颜色作为对象背景颜色
background-image设置图片作为背景图片
background-repeat设置背景平铺重复方向
background-attachment设置或检索背景图像是随对象内容滚动还是固定的。
background-position设置或检索对象的背景图像位置。
图片背景样式(固定、滚动)
实现这个效果使用CSS单词是background-attachment当然通常情况下背景默认是固定的如果是自己使用CSSbackground简写则如上图。
background-attachment使用解析:
background-attachment:
fixed;
背景固定
scroll背景图像是随对象内容滚动
浮动float
float的作用:
通过css定义float(浮动)让div样式层块,向左或向右(靠)浮动。
float语法:
float:
none|left|right
参数值:
对象不浮动
left:
对象浮在左边
right:
对象浮在右边
效果图:
如下。
Css样式实例内容,我们让文字和图片在一个固定宽度div层内,让蓝色背景文字内容居右,小图片居左。
1、首先我们设置一个最外层的宽度为300px,高度为200px的css命名为box的css选择器代码如下(知识点px是什么意思)
.box{width:
2、设置box内的文字内容部分css样式命名为yangshi,并设置背景为蓝色,宽度为120px,居右浮动
.yangshi{width:
120px;
float:
right;
background:
#0066FF;
3、设置图片居左浮动div+css样式
img{float:
left;
4、body内的div布局,代码如下
box"
网站,测试内容<
imgsrc="
demo.gif"
这里img标签是链接外部图片,图片名为demo.gif
接下来我们演示使用div+css让这里小图片居右(上个例子是居左),蓝色背景文字内容区居左。
这里我们只需要改变yangshi的float:
为float:
left和图片css样式img{float:
}为img{float:
right;
CSS代码如下:
.box{width:
img{float:
left;
CSS文字cssfont
DIV+Css开发中设置字体常用css属性单词英文cssfont
font、font-family(字体)、
font-size(字大小)、
font-style(字样式)、
font-weight(加粗)、
text-decoration(下划线)、
font-variant(字母大小写)、
text-transform(英文大小写)、
letter-spacing(间隔)
加粗
Html常规加粗标签
以前html直接对对象加粗的标签如下:
/b>
或<
strong>
/strong>
两者效果相同。
加粗实例,代码如下:
我被加粗<
我也被加粗了<
br/>
我未被加粗
CSS加粗基础技巧实例
.yangshi1{font-weight:
bold}
.yangshi2{font-weight:
800}
Divhtml代码:
spanclass="
yangshi1"
/span>
yangshi2"
我未被加粗
Padding属性
Padding属性包含了
paddingleft:
左补距离(设置距左内边距)
;
paddingtop:
头顶补距离(设置距顶部内边距)
paddingright:
右补距离(设置距右内边距)
paddingbottom:
底补距离(设置距低内边距)。
其二维构建图可见CSS属性二维图。
Padding解析图
paddingleft用法:
padding-left:
10px;
这个意思距离左边补距10像素,可跟百分比如(padding-left:
10%;
距离左边补10%的距离);
paddingright用法:
padding-right:
这个意思距离右边补距10像素,可跟百分比如(padding-right:
距离右边补10%的距离);
paddingtop用法:
padding-top:
这个意思距离顶边补距10像素,可跟百分比如(padding-top:
距离顶边补10%的距离);
paddingbottom用法:
padding-bottom:
这个意思距离低边补距10像素,可跟百分比如(padding-bottom:
距离底边补10%的距离);
注意padding中间的链接“-”号,设置距离值时用“:
”并赋予值,并以“;
”结束,并且全部用小写半角字母。
CSS注解
作用:
css注解(css注释)可以帮助我们对自己写的CSS文件进行说明,如说明某段CSS代码是什么地方、功能、样式等说明,以便我们以后维护具有一看即懂的方便性,同时在团队开发网页是时候合理适当的注解有利于团队看懂css样式是对应html哪里的,以便顺利快速开发divcss网页。
CSS注解是以“/*”斜杠一个星号开始,以“*/”星号斜杠结束,注解说明内容放到“/*”“*/”中间。
css注解——div+CSS注释示例如下:
/*css注解实例css注释实例*/
/*body定义*/
body{text-align:
/*头部css定义*/
960px;
CSS超链接
超链接的代码
ahref="
target="
_blank"
title="
关于divcss的网站"
DIV+CSS<
/a>
解析如下:
href后跟被链接地址目标网站地址这里是
target
_blank--在新窗口中打开链接
_parent--在父窗体中打开链接
_self--在当前窗体打开链接,此为默认值
_top--在当前窗体打开链接,并替换当前的整个窗体(框架页)
CSS可控制超链接样式css链接样式如下
a:
active是超级链接的初始状态
hover是把鼠标放上去时的状况
link是鼠标点击时
visited是访问过后的情况
超链接样式案例
1、通常对全站超链接样式化方法
a{color:
#333;
text-decoration:
none;
}//对全站有链接的文字颜色样式为color:
并立即无下划线text-decoration:
hover{color:
#CC3300;
underline;
}//对鼠标放到超链接上文字颜色样式变为color:
并文字链接加下划线text-decoration:
2、通过链接内设置类控制超链接样式css方法
案例超链接代码<
class="
CSS<
对应CSS代码
a.yangshi{color:
}
a.yangshi:
通过这样的设置可以控制链接内的css类名为“yangshi”超链接的样式
3、通过对应超链接外的父级的css类的css样式来控制超链接的样式
.yangshia{color:
.yangshia:
这里值得注意的是a.yangshi与.yangshia的样式css代码区别
字体(font-family)
CSS运用实例代码:
.divcss5{font-family:
黑体;
divcss5"
我也是黑体字体<
Html的文字字体设置代码:
fontface="
黑体"
我是黑体字<
/font>
边距margin
CSS优化
CSS代码优化地方:
1、border(CSS边框)简写:
border-top:
border-bottom:
border-right:
可以简写为:
2、padding(CSSpadding)简写:
2px;
3px;
4px;
可简写为:
padding:
1px2px3px4px;
3、margin简写
margin-top:
margin-right:
margin-bottom:
margin-left:
margin:
4、background简写
background-color:
可以简写为background:
background-image:
url(图片地址)
background:
5、font简写
font-size:
12px;
line-height:
font-family:
Arial,Helvetica,sans-serif;
font:
12px/12pxArial,Helvetica,sans-serif;
2、CSS重用优化
这里主要介绍是CSS代码的共用属性提取来达到节约代码、维护方便
CSS实例如下:
.yangshi_a{width:
100px;
20px;
font-size:
24px;
.yangshi_b{width:
他们都有相同高度、宽度、浮动、文字大小,而只有内容居左居右不同
我们就可以提取他们相同属性
优化后:
.yangshi_a,.yangshi_b{width:
.yangshi_b{text-align:
CSSID与CSSCLASS
Cssid知识
一个网页里ID只能使用一次。
当然即使一个id在一个网页内被使用多次,其CSS样式仍然可以实现生效,但是一般规定W3C标准是使用一次
id选择器以"
#"
来定义,命名CSS选择器。
定义命名cssid选择器例子:
#yangshi1{color:
#F00;
}定义红色实例
#yangshi2{color:
#0F0;
}定义绿色
对应html中div引用
我颜色为红色<
我颜色为绿色<
一个div标签的定义只能使用一个id如:
id="
测试内容<
或
yangshi1yangshi2"
两个都是不正确的,并且CSS样式属性也不能生效-成为CSS失效之一。
CSSclass知识
与CSSID不同class可以在网页中多次用到。
Class选择器定义以“.”来定义。
定义cssclass选择器例子:
.yangshi1{color:
}定义文字为红色.yangshi2{font-size:
28px;
}定义文字大小为18px
对应html中div+css引用:
我字体大小为28px<
我颜色为红色文字大小为28px<
以上即是“yangshi1”“yangshi2”类的正确使用方法
图片img
html>
图片实例<
sytletype="
Img{padding:
/tytle>
ingsrc="
xx.jpg"
/body
列表LI
li不能单独使用,需要与<
ol>
ul>
配合使用,使用范例:
li>
div+css范例<
/li>
div+css范例之li<
/ol>
/ul>
此内容来自:
唐山小鱼网络工作室
更多内容请访问