微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

CSS3——提示工具 图片廓 图像透明 图像拼接技术 媒体类型 属性选择器

 提示工具

分享图片

分享图片

分享图片

分享图片

提示框在鼠标移动到特定的元素上显示

 

分享图片

设置提示框的位置

提示添加箭头

分享图片

提示框的淡入效果

提示框美化

分享图片

 

 

 

图片廓

分享图片

响应式图片

 

 

图像透明

创建透明图像——悬停效果

分享图片

———鼠标放置后———> 

分享图片

创建一个具有文本的拥有背景图像的透明框

 

分享图片

 

 

 图像拼合技术

图像拼合————单个图像的集合

【有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求】

 图像拼合会降低服务器的请求数量,并节省带宽

 

与其使用3个独立的图像,不如使用这种单个图像

分享图片

——————>  

分享图片

图像拼合的悬停效果

 

 

媒体类型

指定文件将如何在不同媒体呈现【以不同的方式显示在屏幕、纸张、听觉浏览器等】

@media 规则

【在相同样式表为不同媒体设置不同的样式】

其他媒体类型 

 

 

 属性选择器

属性选择器——把包含title 的所有元素变成蓝色

<style>
[title]
{
color:blue;
}
</style>
</head>

<body>
<h2>Will apply to:</h2>
<h1 title="Hello world">Hello world</h1>
<a title="runoob.com" href="//www.runoob.com/">runoob.com</a>
<hr>
<h2>Will not apply to:</h2>
<p>Hello!</p>
</body>

分享图片

属性和值选择器

[title=runoob]
{
    border:5px solid green;
}

分享图片

多值选择

属性选择器 ~=,*= 的区别

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。