CSS实例01.ppt

CSSCSS实例讲解实例讲解主讲: 夏琳1CSS样式1、CSS: 控制文字竖排2、CSS: 固定网页背景图像3、CSS: 首行缩进4、CSS: 边框制作5、CSS: 改变链接格式,制作多彩链接6、CSS: 滤镜效果应用7、DIV+CSS: 进行网页布局设计2CSS:控制文字竖排3CSS:-mode(设置对象书写方向)语法:writing-mode : lr-tb、tb-rl参数:lr-tb:从左向右,从上往下tb-rl:从上往下,从右向左示例:div { writing-mode: tb-rl; }-align(设置对象中文本的对齐方式)语法:text-align : left、right、center、justify 参数:left:左对齐 right:右对齐 center:居中 justify:两端对齐示例:div { text-align : center; }4接下来让我们来制作一个紧排的实例:< html >< head >< title >竖排文字< /title >< style type="text/css" >< !--.tnt {Writing-mode:tb-rl;Text-align:left;font-size:9pt;line-height:20px}-- >< /style >< /head >< body >< div class="tnt" > 确实,在表现文字的竖排在文字处理办公软件中非常容易就可以实现。由于这种效果在网页制作中并不多见,所以这个问题的讨论比较少。但是在制作具有中国古代特色的网站,如文字历史、书法、名胜古迹旅游等等网站时,如果用上竖排的文字,配以古色古香的背景及朴实陈旧的色彩,在视觉上会获得意想不到的效果。< /div >< /body >< /html > 56CSS:固定网页背景图像为网页添加背景图像可以增加网页的视觉效果,在Dreamweaver MX 2004中,一般通过页面属性就可以指定背景图像,其操作步骤如下。(1) 新建网页文档,保存。(2) 用一般的方法设置网页的背景图像,单击菜单栏中的“修改”→“页面属性”命令,则弹出“页面属性”对话框,单击“背景图像”选项右侧的“浏览”按钮,如图所示。7如图所示,确认选定的背景图像,然后单击“确定”按钮,完成背景图像的设置。8此时我们看到的背景如图所示,是图片平铺在整个页面中的,在“页面属性”对话框中指定背景图像只能获得这样的效果。要想利用一张图片来指定背景图像,就可以利用样式表来实现这一功能,而且可以把图像固定在指定的位置。平铺背景图像效果9下面开始制作在画面中央只显示一张图片的背景图像。(1) 先在刚才的基础之上,按Ctrl+Z键取消背景设置的操作。然后,打开CSS样式面板,然后单击“新建CSS样式”图标。(2) 弹出“新建CSS样式”对话框,在“名称”中输入“.back”,然后单击“确定”按钮,。“新建CSS样式”对话框10