如何做网站的基础,小红书网站开发费用,闵行工程建设网站,怎么建立appleopard/ˈlepərd/ 豹子#xff0c;豹纹
弹出层指的是鼠标悬停于某个元素之上时显示的一个界面组件。
关注和理解特性#xff1a;z-index属性和动态生成HTML元素。
HTML5新增#xff1a;
figure:媒体内容(图像#xff0c;音频#xff0c;视频)#xff0c;用于包含一…leopard/ˈlepərd/ 豹子豹纹
弹出层指的是鼠标悬停于某个元素之上时显示的一个界面组件。
关注和理解特性z-index属性和动态生成HTML元素。
HTML5新增
figure:媒体内容(图像音频视频)用于包含一组相关元素。
figcaption:为figure提供说明性文本在figure中只能有一个并且在第一个或者最后一个位置。
并排显示某度上的图片 代码6.3.弹出层.html
!DOCTYPE html
htmlheadmeta charsetutf-8title/titlestylefigure {width: 144px;height: 153px;margin: 20px 20px;border: 1px solid #666;position: relative;float: left;}img {width: 144px;height: 153px;display: block;}/style
/headbodyfigureimg srcimg/pink.jpg altpink heels /figcaptionh3Pink Platforms/h3a href#More info/a/figcaption/figurefigure classclick_meimg srcimg/baowen.jpg altbaowen heels /figcaptionh3Leopard Platforms/h3a href#More info/a/figcaption/figurefigure classclick_meimg srcimg/red.jpg altred heels /figcaptionh3Red Platforms/h3a href#More info/a/figcaption/figure
/body/html
6.3.1 堆叠上下文z-index
隐藏弹出层悬停显示弹出层
增加CSS
figcaption {display: none;/* 隐藏弹出层 */position: absolute;/* 相对于容器 */left: 74%;/* 放到右边 */top: 15px;width: 130px;/* 弹出层宽度 */padding: 10px;/* 弹出层内边距 */background-color: #f2eaea;border: 3px solid red;border-radius: 6px;}/* 鼠标悬停在图片上显示 */figure:hover figcaption {display: block;}figcaption h3 {/*弹出层的内容*/font-size: 14px;color: #666;margin-bottom: 6px;}figcaption a {/*弹出层的内容*/display: block;text-decoration: none;font-size: 12px;color: #000;}/* 把弹出层设置为最高层 */figure:hover figcaption {display: block;z-index: 2;}
6.3.2 用CSS创造三角形
用div来创建角上是平分的所以要是内部宽高为0其他边透明正好是三角形。 代码:
div {border: 12px solid;width: 0;height: 0;border-color: transparent red transparent transparent;
}
与伪元素after结合起来,在6.3.弹出层.html中增加CSS: !DOCTYPE html
htmlheadmeta charsetutf-8title/titlestylefigure {width: 144px;height: 153px;margin: 20px 20px;border: 1px solid #666;position: relative;float: left;}img {width: 144px;height: 153px;display: block;}figcaption {display: none;/* 隐藏弹出层 */position: absolute;/* 相对于容器 */left: 74%;/* 放到右边 */top: 15px;width: 130px;/* 弹出层宽度 */padding: 10px;/* 弹出层内边距 */background-color: #f2eaea;border: 3px solid red;border-radius: 6px;}/* 鼠标悬停在图片上显示 */figure:hover figcaption {display: block;}figcaption h3 {/*弹出层的内容*/font-size: 14px;color: #666;margin-bottom: 6px;}figcaption a {/*弹出层的内容*/display: block;text-decoration: none;font-size: 12px;color: #000;}/* 把弹出层设置为最高层 */figure:hover figcaption {display: block;z-index: 2;}/* 红色三角形盒子 */figcaption::after {content: ;position: absolute;border: 12px solid;border-color: transparent red transparent transparent;height: 0px;width: 0px;top: 17px;right: 100%;}/style
/headbodyfigureimg srcimg/pink.jpg altpink heels /figcaptionh3Pink Platforms/h3a href#More info/a/figcaption/figurefigure classclick_meimg srcimg/baowen.jpg altbaowen heels /figcaptionh3Leopard Platforms/h3a href#More info/a/figcaption/figurefigure classclick_meimg srcimg/red.jpg altred heels /figcaptionh3Red Platforms/h3a href#More info/a/figcaption/figure
/body/html
