版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
1、第八讲使用CSS样式表回顾 CSS中如何设置文字样式?从哪些方面?在Google公司Logo案例中,它的实现思路是怎样的?CSS中如何设置段落样式?会使用CSS对图片边框进行设置会使用CSS对图片进行对齐会使用CSS对图片进行剪切会使用CSS实现图片替代文本会使用CSS对图文进行混排图文实例:八仙过海本讲目标导入 首先,在网络世界中,各种各样的图片组成了丰富多彩的页面,传达给用户各种信息 。 其次,图片的使用方式大体分为三种: 1、作为单独的图片本身存在; 2、作为背景图片存在; 3、作为浮动元素存在。 本讲中,我们仅涉及到第一种情况,即以 标记的方式存在于网页中,并且占位。图片边框-1如上所
2、示,我们发现通过border属性可以为标记的图片添加边框。border-style:dotted; /* 点画线 */border-color:#FF9900;/* 边框颜色 */border-width:5px; /* 边框粗细 */问题:边框都是黑色的,风格单一,只能在边框粗细上调整,那CSS对于图片边框都有哪些属性进行设置呢?案例演示2案例演示1图片边框-2CSS还可以分别设置4个边框的不同样式borderborder-left /* 左边框 */ border-right /* 右边框 */ border-top /* 上边框 */ border-bottom /* 下边框 */ bo
3、rder-top-color /* 上边框颜色 */ border-top-style /* 上边框类型 */ border-top-width /* 上边框粗细 */ 如果4个边框都采用右侧的写法会如何呢?案例演示1案例演示2图片的对齐-1横向水平对齐,分为左、中、右3种 实现图片水平对齐,不能直接对图片设置text-align属性,而是通过对父元素添加该属性实现的。案例演示图片的对齐-2纵向垂直对齐,通过vertical-align属性案例演示2案例演示1图片的剪切-1 在网站设计中,有时候会遇到对一张图片做多处使用的情况。例如在子页面中以200*200尺寸显示,而在首页由于所给的空间不够
4、,只允许显示200*100的尺寸,那该怎么办呢?CSS能很好的实现图片的剪切图片的剪切-2在此,介绍一个新属性: overflow:hidden (将超出容器的部分隐藏起来的作用)案例演示HTML部分:div width:300px; height:260px; overflow:hidden; img margin-left:-180px; margin-top:-50px; CSS部分:图片替代文本什么时候才会用“图片替代文本”呢?案例演示1、使用特殊字体制作的图片作为文章标题更为吸引人,改善阅读环境;2、不破坏原有文本结构,不影响搜索引擎的收录。图文混排文章段落中经常需要插入图片,我们通过两种方式对比进行了解: 第一种方式:传统的表格式布局中,插入一个表格,在表格的单元格中插入图片,通过对单元格设置align属性来控制图片居中、居左、居右显示。 第二种方
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 5G时代应用型高校教学模式探讨
- 5G专网背景下的工业物联网架构研究
- 500 kV断路器防跳回路缺陷的分析及改进措施
- 3D打印技术在陶瓷制造中的应用
- 33kV级TCR+TSC型SVC控制策略及仿真研究
- 220kV变电站的继电保护系统分析
- 2021年新高考数学Ⅰ卷第17题解法探究与推广引申
- 2019年全国卷Ⅱ理科第21题解法探究
- 1960年以来中国国际移民的变迁-以移民存量与目的地为主的分析
- 110kV新建输电线路并行时电磁环境影响预测研究
- 桥梁工程测量技术现状及发展方向
- 小学科学-《磁极的秘密》教学设计学情分析教材分析课后反思
- 4-张老师-内控体系建设实例-内控手册-V1.2
- Unit 1 How can I get there 单元教学分析(素材)人教PEP版英语六年级上册
- 2022联通大数据限公司招聘17人上岸笔试历年难、易错点考题附带参考答案与详解
- 石油化工设备维护检修规程版第七册:仪表
- 英语中的十大“一致”(全文)
- 学生心理健康教育工作先进事迹
- 2018-2022年广东省广州市近五年中考数学试卷【附答案】
- 体操知识竞赛附有答案
- 高中生物-基因工程的应用教学设计学情分析教材分析课后反思
评论
0/150
提交评论