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 ...
随机推荐
- kvm虚拟化安装及虚拟机创建
1.开启虚拟化(VMware虚拟机为例),安装centos7操作系统. 2.查看CPU是否开启虚拟化 #zgrep "vmx" /proc/cpuinfo 3.配置yum源,通过 ...
- RS323串口连接仪器，接收仪器信息
SerialPort sp1 = new SerialPort(); getBloodPressur(); public void getBloodPressur() { try { string[] ...
- Python3标准库：collections容器数据类型
1. collections容器数据类型 collections模块包含除内置类型list.dict和tuple以外的其他容器数据类型. 1.1 ChainMap搜索多个字典 ChainMap类管理一 ...
- Android记事本在菜单栏添加搜索按钮方法
效果图 这个app结构和我之前将记事本开发的博客基本一致,我这里直接讲一下怎样添加 使用的开发软件为android studio 首先在res目录下新建文件夹menu,添加目录布局文件main_men ...
- TCP 协议快被淘汰了，UDP 协议才是新世代的未来？
TCP 协议可以说是今天互联网的基石,作为可靠的传输协议,在今天几乎所有的数据都会通过 TCP 协议传输,然而 TCP 在设计之初没有考虑到现今复杂的网络环境,当你在地铁上或者火车上被断断续续的网络折 ...
- scrapy框架综合运用 爬取天气预报 + 定时任务
爬取目标网站: http://www.weather.com.cn/ 具体区域天气地址: http://www.weather.com.cn/weather1d/101280601.shtm(深圳) ...
- scikit-learn包学习笔记1
dataset 在scikit-learn包自带的数据集,R包也自带数据集iris鸢尾花数据集,做训练集.特征较少. from sklearn import datasets # Import nec ...
- bugkuCTF-管理员系统（IP伪造）
题目地址:http://123.206.31.85:1003/ 登进去是一个管理员后台登录的样子 试了sql的万能密码,发现进不了,而且下面还报错了ip禁止 禁止了我们的ip,但是他本地的ip肯定没有 ...
- IntelliJ IDEA 2019年最新版2019.3.1 安装激活教程【最强，可用至2100、2089年】
IntelliJ IDEA 2019年最新版 永久激活教程 本文包括最新[2019.3.1 & 1.3]激活 和[2018.3.2]激活 说明:①2019.3.②2019.1.③2018.3版 ...
- 回味Ubuntu10.10致敬Gnome桌面
目录 Ubuntu10.10可用源 Ubuntu10.10更新语言包 输入法支持 浏览器选择 文件下载 压缩文件中文乱码的处理 视频播放 科学计算 搭建Lamp环境 实现文件分享 主题美化 Ubunt ...