当前位置:网站首页>淘宝焦点图布局实战
淘宝焦点图布局实战
2022-07-06 02:36:00 【若水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>淘宝焦点图</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;
/* 加了绝对定位a会变成块元素,可以直接设置宽度和高度 */
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 {
/* 覆盖.promo-nav li 中的颜色要注意权重大小,权重不够,不能覆盖 */
background-color: orange;
}
</style>
</head>
<body>
<div class="tb-promo">
<img src="img/focus.jpg" alt="">
<!-- 左侧箭头 -->
<a href="#" class="prev"><</a>
<!-- 右侧箭头 -->
<a href="#" class="next">></a>
<!-- 小圆点 -->
<ul class="promo-nav">
<li class="selected"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
边栏推荐
- Large scale DDoS attacks take Myanmar offline
- 技术管理进阶——什么是管理者之体力、脑力、心力
- General process of machine learning training and parameter optimization (discussion)
- The third level of C language punch in
- Force buckle 146 LRU cache
- Building the prototype of library functions -- refer to the manual of wildfire
- 有没有sqlcdc监控多张表 再关联后 sink到另外一张表的案例啊?全部在 mysql中操作
- Method of changing object properties
- sql表名作为参数传递
- 如何精准识别主数据?
猜你喜欢
2022年版图解网络PDF
HttpRunnerManager安装(三)-Linux下配置myql数据库&初始化数据
[Yunju entrepreneurial foundation notes] Chapter II entrepreneur test 19
Shell脚本更新存储过程到数据库
LeetCode 103. Binary tree zigzag level order transverse - Binary Tree Series Question 5
[Digital IC manual tearing code] Verilog asynchronous reset synchronous release | topic | principle | design | simulation
【MySQL 15】Could not increase number of max_ open_ files to more than 10000 (request: 65535)
[Yunju entrepreneurial foundation notes] Chapter II entrepreneur test 22
Minecraft 1.16.5 biochemical 8 module version 2.0 storybook + more guns
高数_向量代数_单位向量_向量与坐标轴的夹角
随机推荐
Bigder: I felt good about the 34/100 interview, but I didn't receive the admission
[robot hand eye calibration] eye in hand
深度解析链动2+1模式,颠覆传统卖货思维?
Déduisez la question d'aujourd'hui - 729. Mon emploi du temps I
PAT甲级 1033 To Fill or Not to Fill
Crawler (9) - scrape framework (1) | scrape asynchronous web crawler framework
[community personas] exclusive interview with Ma Longwei: the wheel is not easy to use, so make it yourself!
A doctor's 22 years in Huawei
零基础自学STM32-野火——GPIO复习篇——使用绝对地址操作GPIO
有没有sqlcdc监控多张表 再关联后 sink到另外一张表的案例啊?全部在 mysql中操作
JS events (add, delete) and delegates
Compact lidar global and Chinese markets 2022-2028: technology, participants, trends, market size and share Research Report
事故指标统计
550 permission denied occurs when FTP uploads files, which is not a user permission problem
[Yunju entrepreneurial foundation notes] Chapter II entrepreneur test 20
SQL table name is passed as a parameter
After changing the GCC version, make[1] appears in the compilation: cc: command not found
Qt发布exe软件及修改exe应用程序图标
[Yunju entrepreneurial foundation notes] Chapter II entrepreneur test 11
Initial understanding of pointer variables