当前位置:网站首页>Taobao focus map layout practice
Taobao focus map layout practice
2022-07-06 02:42:00 【Ruoshui CJJ】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Taobao focus map </title>
<style>
* {
padding: 0%;
}
.tb-promo {
position: relative;
width: 564px;
height: 315px;
margin: 100px auto;
}
.tb-promo img {
width: 100%;
border-radius: 12px;
}
li {
list-style: none;
}
a {
position: absolute;
width: 20px;
height: 30px;
background: rgba(0, 0, 0, .3);
text-align: center;
line-height: 30px;
/* Added absolute positioning a Will become a block element , You can set the width and height directly */
text-decoration: none;
color: #fff;
}
.prev {
bottom: 0;
top: 0;
left: 0;
margin: auto 0;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
.next {
bottom: 0;
top: 0;
right: 0;
margin: auto 0;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
.promo-nav {
position: absolute;
bottom: 15px;
left: 0;
right: 0;
margin: 0 auto;
width: 70px;
height: 13px;
background: rgba(0, 0, 0, .3);
border-radius: 6px;
}
.promo-nav li {
float: left;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: skyblue;
margin: 3px 3px;
}
.promo-nav .selected {
/* Cover .promo-nav li Pay attention to the weight of the color in , Insufficient weight , Can't cover */
background-color: orange;
}
</style>
</head>
<body>
<div class="tb-promo">
<img src="img/focus.jpg" alt="">
<!-- Left arrow -->
<a href="#" class="prev"><</a>
<!-- Right arrow -->
<a href="#" class="next">></a>
<!-- Little dots -->
<ul class="promo-nav">
<li class="selected"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
边栏推荐
- The third level of C language punch in
- MySQL winter vacation self-study 2022 11 (5)
- 2022 eye health exhibition, vision rehabilitation exhibition, optometry equipment exhibition, eye care products exhibition, eye mask Exhibition
- I changed the driver to 5.1.35, but it is still the same error. I can succeed even now, but I will report this every time I do an SQL operation
- Thinking on Architecture Design (under continuous updating)
- Template_ Quick sort_ Double pointer
- Shell script updates stored procedure to database
- 【若依(ruoyi)】设置主题样式
- 【若依(ruoyi)】ztree 自定义图标(iconSkin 属性)
- [postgraduate entrance examination English] prepare for 2023, learn list5 words
猜你喜欢
Keyword static
解决:AttributeError: ‘str‘ object has no attribute ‘decode‘
Solve 9 with C language × 9 Sudoku (personal test available) (thinking analysis)
GifCam v7.0 极简GIF动画录制工具中文单文件版
UE4 - how to make a simple TPS role (I) - create a basic role
[Yunju entrepreneurial foundation notes] Chapter II entrepreneur test 15
Structural theme model (I) STM package workflow
Deeply analyze the chain 2+1 mode, and subvert the traditional thinking of selling goods?
3D drawing ()
PMP practice once a day | don't get lost in the exam -7.5
随机推荐
[Yunju entrepreneurial foundation notes] Chapter II entrepreneur test 8
力扣今日題-729. 我的日程安排錶 I
[Wu Enda machine learning] week5 programming assignment EX4 - neural network learning
Thinking on Architecture Design (under continuous updating)
[Yunju entrepreneurial foundation notes] Chapter II entrepreneur test 10
Microsoft speech synthesis assistant v1.3 text to speech tool, real speech AI generator
Pat 1046 shortest distance (20 points) simulation
Maturity of master data management (MDM)
Deeply analyze the chain 2+1 mode, and subvert the traditional thinking of selling goods?
Bigder: I felt good about the 34/100 interview, but I didn't receive the admission
Blue Bridge Cup group B provincial preliminaries first question 2013 (Gauss Diary)
How to accurately identify master data?
Accident index statistics
一位博士在华为的22年
【若依(ruoyi)】ztree 自定义图标(iconSkin 属性)
Yyds dry inventory comparison of several database storage engines
米家、涂鸦、Hilink、智汀等生态哪家强?5大主流智能品牌分析
How to check the lock information in gbase 8C database?
Day 50 - install vsftpd on ceontos6.8
Master data management theory and Practice