资讯专栏INFORMATION COLUMN

【静态页面架构】CSS之链接和图像

jlanglang / 1793人阅读

CSS架构

一。链接:

链接元素:通过使用a元素的href属性设置跳转到指定页面地址

  


这是个链接

绝对路径与相对路径:

绝对路径:以域名开头,到域名后面可指定具体页面或资源的路径

相对路径:在当前页面与资源处在一个目录就是相对路径

当前页面与资源在子级目录,就是../目标文件

当前页面与资源在父级目录,就是目录文件名/目标文件名

当前页面与资源与父级目录处在同一个目录,就是..目录文件名/目标文件名


这是抖音链接

我的email

锚点:通过a元素的href属性与其他元素的ID属性配合,实现锚点效果


这是顶部














回到顶部

下载功能:以a元素的Download属性链接,用做下载到本地文件


下载图片

动态为类选择器:




这是一个链接


二。图像:

图片元素:以SRC引入图片的路径




 alt="小姐姐">

背景图像:以background-image属性引入一个或多个图像对页面进行显示






平铺方式:background-repeat属性定义页面背景图像的平铺方式




    

背景关联:background-attachment属性用来设置背景图像是固定的还是跟页面滚轮拖动的




爱新觉罗

Lorem ipsum dolor sit amet, consectetur adipisicing elit

background属性:用来设置多个背景属性的简写属性

精灵图(雪碧图):将一些小图标合成一个图片,进行移动抠图




文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/113812.html

相关文章

  • 静态页面架构CSS盒子模型

    摘要:架构盒子模型以内容区显示文本和图像内边距内容区至边距的距离边距内容区的边界外边距元素的边框之间的距离边距属性简写属性用来设置边距的上右下左。 CSS架构 盒子模型; 以内容区(显示文本和图像) 内边距(内容区至边距的距离) 边距(内容区的边界) 外边距(元素的边框之间的距离) 1.边距; border属性; 简写属性用来设置边距的上(top)右(right)下(bottom)左(lef...

    fanux 评论0 收藏0
  • 静态页面架构CSS其它元素

    摘要:架构其他元素块级元素与内联元素该元素独占一行只以垂直方向排列内联元素该元素不会独占一行,只以水平方向排列不能设置宽高行内块级元素该元素不会不会独占一行,还是水平方向排列,可设置宽高块级元素元素独占一行,以垂直方向排列内联元素元素不会独占一行 CSS架构 其他元素; 块级元素与内联元素;该元素独占一行只以垂直方向排列 内联元素;该元素不会独占一行,只以水平方向排列(不能设置宽高) 行...

    weakish 评论0 收藏0
  • HtmlCss学习笔记-html基础知识

    摘要:我的邮箱地址欢迎大家交流学习纠错此篇博客是我的复习笔记,和学的时间太久了,忘得差不多了,最近要使用一下,所以重新打开的书略读,后记录了标签,元素,属性的具体意义。有些标记有属性,具体格式,以标记为例,其中为标记的属性。我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 此篇博客是我的复习笔记,html和css学的时间太久了,忘得差不多了,最近要使用一下,所以重新打开htm...

    yzzz 评论0 收藏0
  • 静态页面架构CSS显示与溢出

    摘要:架构显示与溢出显示属性以设置隐藏效果和元素类型设置当前元素为隐藏效果这种方式将元素设置为隐藏后,该元素不会再占有页面空间通过属性将元素显示将元素设置为块级元素将元素设置为内联元素将元素设置为行内元素属性以设置,元素显示或隐藏 CSS架构 显示与溢出; 1.显示; display属性; 以display设置隐藏效果和元素类型 div { widt...

    tolerious 评论0 收藏0

发表评论

0条评论

jlanglang

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<