HTML+CSS 焦点图设计（详细步骤）

1. 界面分析

2. 界面分析完后，不管三七二十一，先整一个大盒子，再在大盒子里面塞图片，塞小盒子

3. 代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>156-定位练习2-焦点图</title><style>/*总结：当看到某个元素覆盖某个元素的时候，一定要想到定位流，第一时间想到子绝父相（子元素绝对定位，父元素相对定位*//*步骤2*/*{margin:0;padding:0;}/*步骤3*/div{width:273px;height: 147px;border: 2px solid gold;/*分析可知水平居中，距离上面有一定间隙*/margin: 0 auto;margin-top: 100px;/*步骤13：父元素相对定位*/position: relative;}/*步骤6，统一设置左右箭头的大小*/span{margin-top: 10px;width: 40px;/*height: 50px;*//*设置背景透明*/background-color: rgba(0,0,0,0.3);font-size:25px;color: white;text-align: center;line-height: 50px;}/*步骤11：开始定位，子绝父相（子元素绝对定位，父元素相对定位*/div .leftArrow{position: absolute;left: 0px;top: 37PX;}div .rightArrow{position: absolute;right: 0px;top: 37px;}ol{/*步骤7：去除有序列表的默认样式*/list-style: none;/*步骤8：设置导航条的宽度和高度*/width: 200px;height: 40px;/*步骤10，设置ol的背景颜色*/background-color: rgba(255,255,255,0.7);/*步骤12：绝对定位*/position: absolute;right: 0px;top: 101px;}/*步骤9*/ol li{/*让1,2,3,4，5水平排版*/float: left;/*设置每个li标签的宽高*/width: 40px;height: 40px;border: 1px solid gold;/*由于每个li标签添加了边框，每个li的宽度变宽了*/box-sizing: border-box;/*水平垂直居中*/line-height: 40px;text-align: center;}</style></head>
<body>
<!--步骤1-->
<div><!--步骤4--><img src="m4.png" alt=""><!--步骤5,添加左右箭头--><span class="leftArrow">&lt;</span><span class="rightArrow">&gt;</span><!--步骤6：设置下面的盒子，类似于导航条--><ol><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ol>
</div></body>
</html>

结果：

HTML+CSS 焦点图设计（详细步骤）相关推荐

css精灵图的使用步骤
精灵图的使用步骤 1.创建一个盒子,例如span.b.div 2.设置盒子的大小为小图片的大小 3.设置背景图片为精灵图 4.测量小图片距离精灵图左边和上边的距离(background-positio ...
NodeJs——（16）用Nodejs 4.X版本，制作一个微博网站（多图，详细步骤）（已完成）
博文已完成,版本号v1.0 范例网址已移除,请下载源码(下载后需要自行设置mysql) 附完整源代码下载链接(0积分下载):http://download.csdn.net/detail/qq2000 ...
图片怎么做成GIF动态图？详细步骤解说
图片怎么做成GIF动态图?与静态图片相比,GIF动态图更容易吸引人的注意力.通过图像的连续动画效果,可以增强视觉冲击力,吸引观众的眼球并提高内容的可见性.通过将静态图片转换为动态图,可以增加趣味性和娱 ...
ArcGis画简单的行政图的详细步骤
绘制全国行政图准备数据和ArcGis软件数据获取方式很多,这里提供一个网站下载,文末获取. ArcGis 软件可以去软件安装管家下载. 注意: 不适合大佬看. 上面网站可以下载的 svg 和 j ...
教你在Excel里做GA的水平百分比图的详细步骤（图文教程）-成为excel大师（1）...
GA报表除了默认的表格方式显示数据外,还支持饼图,水平百分比图,数据透视图等展现方式,其中水平百分比图在可视化看流量时最为方便,就像这样: 那么当我们要在Excel里做类似的效果应该怎么做呢?尤其是数 ...
CSS课堂案例11-淘宝焦点图布局
淘宝焦点图布局结构步骤代码 <!DOCTYPE html> <html lang="zh-CN"> <head><meta char ...
图片怎么合成gif动图？操作步骤详解
图片怎么合成gif动图?gif动图的使用非常的广泛,平时我们聊天中见到的动态表情,已经逛某宝时看到的动态广告图,其实都是gif动图.小编作为一名互联网从业者,经常需要使用或者制作gif动态图片.不知道 ...
基于Altium Designer 20设计双层印刷电路板的详细步骤（待写）
基于Altium Designer 20设计双层印刷电路板的详细步骤一.前言 1. 2. 二.Altium Designr 20界面修改三.新建印刷电路板的项目组 **(一).新建一个保存印刷电路 ...
CSS伪元素BEFORE、AFTER妙用：制作时尚焦点图相框
在css标签中有这样子的标签div:before.div:after,对于before.after来说有部分人是相当陌生的,那么这两个标签是什么呢?有什么用处? :befor.:after是CSS的伪 ...

HTML+CSS 焦点图设计（详细步骤）

HTML+CSS 焦点图设计（详细步骤）相关推荐

最新文章

热门文章