当前位置:网站首页>【案例】定位的运用-淘宝轮播图
【案例】定位的运用-淘宝轮播图
2022-07-05 20:56:00 【发呆少女】
<!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>Document</title>
<style> * {
margin: 0; padding: 0; } a {
text-decoration: none; } li {
list-style: none; } .promo_bd {
position: relative; height: 315px; width: 630px; background-color: blue; margin: 100px auto; border-radius: 20px; } .promo_bd img {
height: 100%; width: 100%; border-radius: 20px; } .promo_bd .pre, .promo_bd .next {
position: absolute; width: 25px; height: 40px; top: 50%; margin-top: -20px; background-color: rgba(0, 0, 0, 0.4); color: #fff; font-size: 20px; line-height: 40px; text-align: center; } .promo_bd .pre {
left: 0; border-radius: 0 20px 20px 0; } .promo_bd .next {
right: 0; border-radius: 20px 0 0 20px; } .promo_bd .promo_nav {
position: absolute; left: 50%; margin-left: -35px; bottom: 15px; height: 14px; width: 70px; background-color: rgba(255, 255, 255, 0.3); border-radius: 7px; } .promo_bd .promo_nav ul li {
float: left; width: 8px; height: 8px; background-color: #fff; border-radius: 50%; margin: 3px; } .promo_bd .promo_nav ul .selected {
background-color: #ff5000; } </style>
</head>
<body>
<div class="promo_bd">
<img src="./ad.jpg" alt="">
<a class="pre" href="#"><</a>
<a class="next" href="#">></a>
<div class="promo_nav">
<ul>
<li class="selected"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>
边栏推荐
- Selenium element information
- Interpreting the daily application functions of cooperative robots
- Is it necessary for bazel to learn
- Mode - "Richter replacement principle"
- Analysis of steam education mode under the integration of five Education
- Which is the best online collaboration product? Microsoft loop, notion, flowus
- 渗透创客精神文化转化的创客教育
- MySQL fully parses json/ arrays
- ClickHouse 复制粘贴多行sql语句报错
- Research and development efficiency improvement practice of large insurance groups with 10000 + code base and 3000 + R & D personnel
猜你喜欢
Duchefa p1001 plant agar Chinese and English instructions
Return to blowing marshland -- travel notes of zhailidong, founder of duanzhitang
Abnova丨CRISPR SpCas9 多克隆抗体方案
Promouvoir le développement de l'industrie culturelle et touristique par la recherche, l'apprentissage et l'enseignement pratique du tourisme
Prosci LAG-3 recombinant protein specification
Abnova丨DNA 标记高质量控制测试方案
Abnova丨E (DIII) (WNV) 重组蛋白 中英文说明书
教你自己训练的pytorch模型转caffe(二)
Specification of protein quantitative kit for abbkine BCA method
最长摆动序列[贪心练习]
随机推荐
ODPS 下一个map / reduce 准备
学习机器人无从下手?带你体会当下机器人热门研究方向有哪些
Norgen AAV提取剂盒说明书(含特色)
Duchefa s0188 Chinese and English instructions of spectinomycin hydrochloride pentahydrate
示波器探头对测量带宽的影响
显示器要申请BS 476-7 怎么送样?跟显示屏一样吗??
木板ISO 5660-1 热量释放速率摸底测试
SQL series (basic) - Chapter 2 limiting and sorting data
Écrire une interface basée sur flask
Make Jar, Not War
Specification of protein quantitative kit for abbkine BCA method
Duchefa cytokinin dihydrozeatin (DHZ) instructions
Abnova丨CRISPR SpCas9 多克隆抗体方案
教你自己训练的pytorch模型转caffe(一)
CADD course learning (7) -- Simulation of target and small molecule interaction (semi flexible docking autodock)
当Steam教育进入个性化信息技术课程
Abnova丨 MaxPab 小鼠源多克隆抗体解决方案
获取前一天的js(时间戳转换)
解析创客教育的知识迁移和分享精神
中国管理科学研究院凝聚行业专家,傅强荣获智库专家“十佳青年”称号