HTML连载61-焦点图、固定定位
一、焦点图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>D156_PictureOfFocus</title>
<style>
*{
margin:0;
padding:0;
}
div{
width: 639px;
height: 338px;
boder:2px black solid;
margin:0 auto;
margin-top: 100px;
position:relative;
left:0px;
top:0px;
}
span{
width: 40px;
height: 80px;/*行内标签设置大小是没有用的，必须先转换为行内块级标签*/
display:inline-block;
background-color: rgba(0,0,0,0.3);/*复习了rgba的最后一个参数是透明度*/
font-size:50px;/*设置大于号小于号的颜色和大小*/
color:white;
}
ol{
list-style: none;/*去掉有序标签的默认样式*/
width: 20px;
height: 20px;
background-color: rgba(0,0,0,0.3);
float:right;
/*position:absolute;*/
}
ol li{
width: 40px;
height: 40px;
border:2px solid gold;
box-sizing: border-box;/*防止里面的内容变化而导致外面的盒子大小样式被破坏*/
text-align: center;
display: inline-block;
/*float:right;*/
}
div .leftArrow{
position:absolute;
left:0px;
top:128px;
}
div .rightArrow{
position:absolute;
left:600px;
top:128px;
}
</style>
</head>
<body>
<div>
<img src="data:image/taobaoFocusPicture.jpg" alt="">
<span class="leftArrow"><</span><!--这里复习了大于号小于号的表示方法-->
<span class="rightArrow">></span>
<ol><!--复习了有序标签ol，无序标签是ul-->
<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li>
</ol>
</div>
</body>
</html>
二、固定定位
注意点：
1.固定定位的元素是脱离标准流的，不会占用标准流中的空间
2.固定定位和绝对定位一样不会区分行内/块级/行内块级。
.duibi{
width: 600px;
height: 2000px;
border:2px solid #000;
background-image: url("image/play_tennis.jpg") ;
background-repeat: no-repeat;/*背景图片不会重复*/
background-attachment: fixed;/*这个属性复习了，背景图片设置为fixed后，就不会随着页面上下滚动而滚动了，这张图片会固定位置*/
}
.................省略代码...................
<div class="duibi"></div>
.box4{
width: 100px;
height: 100px;
background-color: purple;
position:fixed;/*脱离了标准流了，所以在标准流中就好像没有他一样*/
}
.box3{
border:2px black solid;
width: 200px;
height: 1000px;
}
...........省略代码................
<div class="box3">
<div class="box4"></div>
</div>
三、源码：
D156_PictureOfFocus.html
D157_FixedPosition.html
地址:
https://github.com/ruigege66/HTML_learning/blob/master/D156_PictureOfFocus.html
https://github.com/ruigege66/HTML_learning/blob/master/D157_FixedPosition.html
2.CSDN：https://blog.csdn.net/weixin_44630050
3.博客园：https://www.cnblogs.com/ruigege0000/
4.欢迎关注微信公众号：傅里叶变换，个人账号，仅用于技术交流，后台回复“礼包”获取Java大数据学习视频礼包
HTML连载61-焦点图、固定定位的更多相关文章
- HTML四种定位-固定定位
固定定位 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset=&q ...
- 理解CSS相对定位和固定定位
× 目录 [1]相对定位 [2]固定定位 前面的话 一般地,说起定位元素是指position不为static的元素,包括relative.absolute和fixed.前面已经详细介绍过absolut ...
- position之fixed固定定位、absolute绝对定位和relative相对定位
什么是层模型? 什么是层布局模型?层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样,每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧.但是在网 ...
- 解决ie6下不支持fix属性，模拟固定定位
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- Bootstrap 固定定位（Affix）
来自:慕课网 http://www.imooc.com/code/5396 Affix 效果常见的有以下三种: ☑ 顶部固定 ☑ 侧边栏固定 ☑ 底部固定 固定定位--声明式触发固定定位 Affix ...
- 实现 DIV 固定定位在网页主体部分最右侧
position:fixed 相对于窗口的固定定位,这个窗口可理解为可视窗口,除了浏览器自己的东西,剩下的就是这个可视窗口.而大部分的网页都是窄屏设计,比如说网页主体部分固定宽 1200px,或者自适 ...
- input固定定位后，当input框获取到焦点时，会离开手机软键盘的解决方法
前些天做页面时候遇到这样一个问题,将input框用position:fixed固定定位在最底部的时候,当Input获取焦点的时候,input框离开了手机软键盘,而不是吸附在软键盘上,效果如下图: 找了 ...
- 一款基于jQuery轮播切换焦点图,可播放多张图片
今天给大家分享一款基于jQuery轮播切换焦点图,可播放多张图片,在这个组件中,你可以任意指定8张图片,然后插件就会帮你自动生成缩略图,并且自动开始切换播放图片.当然,你也可以手动切换图片,只要点击缩 ...
- 基于jquery左侧带选项卡切换的焦点图
今天给大家分享一款基于jquery左侧带选项卡切换的焦点图.这款焦点图左侧有短标题,单击切换并显示长标题.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class ...
随机推荐
- c++精度
- ES6 class（基本语法+方法）
静态属性与静态方法 1. 不会被类实例所拥有的属性与方法 只是类自身拥有2. 只能通过类调用 静态方法与普通方法重名,不会冲突static 关键字(静态方法) 静态属性类名.属性名 = 属性值; 1. ...
- 洛谷【P2022 有趣的数】 题解
题目链接 https://www.luogu.org/problem/P2022 题目描述 让我们来考虑1到N的正整数集合.让我们把集合中的元素按照字典序排列,例如当N=11时,其顺序应该为:1,10 ...
- UVA1401 （字典树加简单dp）
#pragma GCC optimize(2) #include <bits/stdc++.h> #define ll long long using namespace std; ; ; ...
- F.Three pahs on a tree
思路 两次bfs找出树的直径并处理出端点离树上各叶子节点的距离,在直径上找一点的子树叶子p3,使得dis(p1,p2) + dis(p2,p3) + dis(p1,p3)最大 易知上式是路径实长的两倍 ...
- 聊聊c#字符串拼接
字符串对我编程人员来说是字符串时每天见面的常客,你不认识不熟悉他都不得行,字符串的拼接更是家常便饭,那么在实际开发过程中实现字符串的拼接有哪一些方式呢?咱们一起来聊聊,来交流沟通,学习一波.也许你会说 ...
- Python之四：控制流
1.If 逻辑判断: if a: b elif c: d else: e 先判断a语句块的值是否为真,如果为真,则执行b语句块,如果不为真则转到elif判断c语句块的值是否为真,如果为真执行d语句块, ...
- 在Scala中免费验证
优锐课带你详细了解如何在Scala中实施免费的monad验证.抽丝剥茧,细说架构那些事! 由于业务数据的复杂性,已经在数据验证上花费了很多精力.在Scala中,提出了使用应用程序进行验证的方法,并被广 ...
- css 基础教程学习
css基础语法 css语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 选择器通常是您需要改变样式的 HTML 元素. 每条声明由一个属性和一个值组成. 如果要定义不止一个声明,则 ...
- 859. Kruskal算法求最小生成树（模板）
给定一个n个点m条边的无向图,图中可能存在重边和自环,边权可能为负数. 求最小生成树的树边权重之和,如果最小生成树不存在则输出impossible. 给定一张边带权的无向图G=(V, E),其中V表示 ...