一、焦点图


<!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">&lt;</span><!--这里复习了大于号小于号的表示方法-->

    <span class="rightArrow">&gt;</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-焦点图、固定定位的更多相关文章

  1. HTML四种定位-固定定位

    固定定位 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset=&q ...

  2. 理解CSS相对定位和固定定位

    × 目录 [1]相对定位 [2]固定定位 前面的话 一般地,说起定位元素是指position不为static的元素,包括relative.absolute和fixed.前面已经详细介绍过absolut ...

  3. position之fixed固定定位、absolute绝对定位和relative相对定位

    什么是层模型? 什么是层布局模型?层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样,每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧.但是在网 ...

  4. 解决ie6下不支持fix属性，模拟固定定位

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  5. Bootstrap 固定定位（Affix）

    来自:慕课网 http://www.imooc.com/code/5396 Affix 效果常见的有以下三种: ☑ 顶部固定 ☑ 侧边栏固定 ☑ 底部固定 固定定位--声明式触发固定定位 Affix ...

  6. 实现 DIV 固定定位在网页主体部分最右侧

    position:fixed 相对于窗口的固定定位,这个窗口可理解为可视窗口,除了浏览器自己的东西,剩下的就是这个可视窗口.而大部分的网页都是窄屏设计,比如说网页主体部分固定宽 1200px,或者自适 ...

  7. input固定定位后，当input框获取到焦点时，会离开手机软键盘的解决方法

    前些天做页面时候遇到这样一个问题,将input框用position:fixed固定定位在最底部的时候,当Input获取焦点的时候,input框离开了手机软键盘,而不是吸附在软键盘上,效果如下图: 找了 ...

  8. 一款基于jQuery轮播切换焦点图,可播放多张图片

    今天给大家分享一款基于jQuery轮播切换焦点图,可播放多张图片,在这个组件中,你可以任意指定8张图片,然后插件就会帮你自动生成缩略图,并且自动开始切换播放图片.当然,你也可以手动切换图片,只要点击缩 ...

  9. 基于jquery左侧带选项卡切换的焦点图

    今天给大家分享一款基于jquery左侧带选项卡切换的焦点图.这款焦点图左侧有短标题,单击切换并显示长标题.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class ...

随机推荐

  1. 【NLP】暑假课作业1 - 中文分词（前向匹配算法实现）

    作业任务: 使用98年人民日报语料库进行中文分词训练及测试. 作业输入: 98年人民日报语料库(1998-01-105-带音.txt),用80%的数据作为训练集,20%的数据作为验证集. 运行环境: ...

  2. 用记事本编辑HTML文件后保存代码全堆在一起了，记事本打开html文件格式乱了

    经常会遇到这么一个现象,记事本打开编辑html代码,保存后格式就乱了,代码全部堆在一行了.遇到这种情况有时候也很无语 因为平常工作中也经常遇到这样的情况,后来通过研究,大概找到问题的所在. 我是这么一 ...

  3. STL-queue 队列

    #include <iostream> #include <queue> using namespace std; int main() { // queue也很简单 // p ...

  4. Android电源管理基础知识整理

    前言 待机.睡眠与休眠的区别? Android开发者官网当中提到"idle states",该如何理解,这个状态会对设备及我们的程序造成何种影响? 进入Doze模式中的idle状态 ...

  5. ArcMap 导入 CGCS2000 点坐标数据

    最近开始用 ArcGIS 做管网项目,第一步就接触到 CGCS2000 坐标系数据,要把管网的数据给导入进来, 一开始不知道是哪个坐标系,试了半天,都偏到国外去了,最后在一篇博客里找到了类似的管网数据 ...

  6. Csla One or more properties are not registered for this type

    在实际运行中,好好运行的程序出现了以下问题: 2019-12-27 10:40:00,164 [DefaultQuartzScheduler_Worker-2] ERROR IBeam.BCPool. ...

  7. SYZOJP186 你猜猜是不是DP 二分+hash解法

    SYZOJP186 你猜猜是不是DP题解 题目传送门 现在给两个仅包含小写字母的字符串a,b ,求a 与b的最长公共连续子串的长度. 对于20%的数据,a,b长度 ∈ [1, 200] 对于50%的数 ...

  8. js -- 移动端pc端自动切换

    1. 判断浏览器类型 浏览器判断使用的github开源项目current-device,下面是地址: https://github.com/matthewhudson/current-device 在 ...

  9. 性能优化-css，js的加载与执行

    前端性能优化 css,js的加载与执行 javascript是单线程的 一个网站在浏览器是如何进行渲染的呢? html页面加载渲染的过程 html渲染过程的一些特点 顺序执行,并发加载 词法分析 并发 ...

  10. linux 配置compoer

    配置默认php 删除 rm -f /usr/bin/php 改到php7.3版本的composer /bin/php /usr/bin/php 多版本支持 配置php7专用composer70 cd ...