web网页界面设计_第1页
web网页界面设计_第2页
web网页界面设计_第3页
web网页界面设计_第4页
web网页界面设计_第5页
已阅读5页，还剩23页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

主讲人：洪小平《网页设计》

CSS样式设计与使用〔5〕《网页设计》浙江金融职业学院学习内容1.CSS定位与DIV布局的根本概念2.CSS定位与DIV布局的应用Part2:CSS定位与DIV布局的根本概念1.<div>标记与<span>标记<div>〔division〕简单而言就是一个区块容器标记，即<div>与</div>之间相当于一个容器。可以容纳各类HTML元素。声明时只要对<div>进行相应的控制，其中的各标记元素都会因此而改变。例10-1.html一般情况下，<span>作用与<div>类似《网页设计》浙江金融职业学院两者的区别：〔1〕<div>是一个块级元素，它包围的元素会自动换行。而<span>仅仅是一个行内元素，在它的前后不会换行。<span>没有结构上的意义，纯粹是应用样式，当其他行内元素都不适宜时，就可以使用<span>元素。〔2〕<span>标记可以包含于<div>标记之中，成为它的子元素，而反过来那么不成立，即<span>标记不能包含<div>标记。例10-2.html《网页设计》浙江金融职业学院2.盒子模型〔1〕盒子模型的概念一个盒子模型由content〔内容〕\padding〔间隙〕\border〔边框〕\margin〔间隔〕这四个局部组成。一个盒子的宽度或高度是由content+padding+border+margin组成。《网页设计》浙江金融职业学院〔2〕BORDER属性一般用于别离元素，border的外围即为元素的最外围，因此计算元素实际的宽和高时，就要将border纳入。border的属性主要有三个:color〔颜色〕:#FFFFFFwidth〔宽度〕:thin\medium\thick和〔length:具体的数值〕，默认情况下是medium，数值大约是2px宽。style〔样式〕:none\hidden\dotted\dashed\solid\double\groove\ridge\inset\outset等。其中，none和hidden都是不显示border。实例10-3.html《网页设计》浙江金融职业学院〔3〕paddingpadding用于控制content与border之间的距离，在10-4.html中参加padding-bottom的语句，即可查看效果不同。例10-4.html例10-6.html备注说明：可以看到内<div>块与外<div>块之间的padding，从上方开始按照顺时针方向，依次为10px、30px、50px、100px。因此，可以在需要设置padding四个方向的值时，可以将4个语句合并一起，用padding语法统一书写。《网页设计》浙江金融职业学院〔4〕marginmargin指的是元素与元素之间的距离通过修改10-4.html来了解margin的含义。在其中参加margin-bottom语句。效果见例10-8.html《网页设计》浙江金融职业学院3.元素的定位PositionFloatz-index《网页设计》浙江金融职业学院〔1〕Float其值很简单，可设置为left\right\默认值none。当设置了元素向左或向右浮动时，元素会向其父元素的左侧或右侧靠紧。例10-14.html10-14.html上例定义了三个<div>块，其中一个父块，两外两个是它的子块。《网页设计》浙江金融职业学院Float属性值的设定实例当没有设置块son1向左浮动前，页面效果当设置块son1的float的值为left时，页面效果《网页设计》浙江金融职业学院分析如下在设置float为left之前，它的宽度撑满了整个父块，空隙仅仅为父块的padding和它自己的margin，而设置了float为left后，块son1的宽度仅仅为它的内容本身加上自己的margin。例10-15.html。在例10-14.html中子块son1向左移动，对于父块而言它的内容就已经不属于父块了，因此父块的高度变短，同时子块son2向上移动。尽管子块son2的边框撑满了整个父块，但是其具体内容没有与son1重叠，而是围绕在son1的周围，并且保持着son1块设置的margin距离。因此，如果son2不设置边框和背景，那么效果上就是环绕着son1块。例如首字放大的实例将子块son1不动，而将子块son2设置为向右浮动，其效果可以发现son2向右浮动到了父块的右边，父块的高度也相应的变短了，但是块son1却没有受到任何影响。例10-16.html《网页设计》浙江金融职业学院案例练习10-18-0.html、10-18.html10-19-0.html、10-19.html知识点：在css中可以通过设置块元素的clear属性，去除对float的影响，修改<h3>标记的css属性。Clear:left；去除float对左侧的影响。Clear:both；去除float对两侧的影响。《网页设计》浙江金融职业学院〔2〕PositionPosition从字面上看就是指定块的位置，即块相对于其父块的位置和相对于它自身应该所在的位置。Position属性总共有四个值，分别为static\absolute\relative\fixed。默认的为static。Absolute表示绝对位置，例10-20.html《网页设计》浙江金融职业学院代码解读<styletype="text/css"><!--body{margin:10px;font-family:Arial;font-size:13px;}#father{background-color:#a0c8ff;border:1pxdashed#000000;width:100%;height:100%;}#block{background-color:#fff0ac;border:1pxdashed#000000;padding:10px;position:absolute;/*absolute绝对定位*/

left:20px;/*块的左边框离页面左边界20px*/top:40px;/*块的上边框离页面上边界40px*/}--></style>《网页设计》浙江金融职业学院当设置为Absolute时，子块已经不再附属于父块，其左边框相对页面<body>左边的距离为20px,这个距离已经不是相对父块的左边框的距离了。子块的上边框相对于页面<body>上边的距离为40px，这个距离也不是相对于父块的上边的距离了。补充知识点TOP、right、bottom、left这四个css属性，它们都是配合position属性使用的，表示的是块的各个边界离页面边框的距离，或各个边界离原来位置的距离。只有当position属性设置为absolute或者relative时才能生效。这四个值不但可以设置为像素，也可以设置为百分数。10-21.Html、、、10-22.html《网页设计》浙江金融职业学院操作实例技巧：有时一个父块包含两个子块的情况将一个子块的position属性设置为absolute后的效果。例：10-23.html假设将两个子块的position都设置为Absolute，这时两个子块都将不再属于其父块，都相对于页面定位。例：10-24.html当两个的position属性都设置为absolute时，他们都按照各自的属性进行了定位，都不再属于其父块。两个子块重叠的局部，块2位于块1的上方。当将块的position参数设置为relative时，与将其设置为absolute时完全不同，这时子块是相对于其父块来进行定位的。同样配合top\right\bottom\left四个属性来使用。例：10-25.html《网页设计》浙江金融职业学院〔3〕Z-index《网页设计》浙江金融职业学院定位实例：文字阴影效果操作分析：首先建立两个<div>块，内容都是文字本身，然后将其中一个<div>块设置为阴影的颜色，用CSS定位移动到适宜的位置。最后再用z-index调整重叠关系即可。10-28.html《网页设计》浙江金融职业学院代码分析：#block1{ position:relative; z-index:1;}#block2{ color:#AAAAAA;/*阴影颜色*/

position:relative; top:-1.06em; /*移动阴影*/

left:0.1em;

z-index:0; /*阴影重叠关系*/

}《网页设计》浙江金融职业学院网页常用布局之CSS代码body{ font-family:"Arial"; font-size:13px; margin-top:0px;}《网页设计》浙江金融职业学院#container{ position:relative; width:100%; }#banner{ height:80px; border:1pxsolid#000000; text-align:center; background-color:#a2d9ff; padding:10px; margin-bottom:2px; }《网页设计》浙江金融职业学院#content{ float:left; }#links{ float:right; width:200px; text-align:center; border:1pxsolid#000000; margin-left:-200px; }《网页设计》浙江金融职业学院#footer{ clear:both; text-align:center; height:30px; bord

人人文库> 全部分类> 行业资料 > 管理策划

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论