注意点：

　　position属性

　　　　定义建议元素布局所用的定位机制

　　　　{position:static/absolute/relative/fixed;}

　　　　static：默认值，没有定位

　　　　absolute：绝对定位元素，相对于static定位以外的第一个父元素进行定位。可以通过left、top、right、bottom属性进行规定

　　　　relative：生成相对定位的元素，相对于其正常位置进行定位

　　　　fixed：生成绝对定位元素，相对于浏览器窗口进行定位。可以通过left、top、right、bottom属性进行规定

　　z-index属性

　　　　检索或设置对象的层叠顺序

　　　　{z-index:auto/number;}

　　　　auto：默认值，遵从其父对象

　　　　number：无单位的整数值，可为负数，数值越大越靠前显示。如果两个元素数值相同

将依据他们在html文档中声明的顺序层叠

　　　　z-index 仅仅作用于 position 属性值为 relative 或 absolute 的对象

　　锚点链接

　　　　网页制作中超链接的一种，像定位器一样是一种页面内的超链接

　　　　设置锚点链接的方法：

　　　　　　给元素定义命名锚点名：<标记 id=“命名锚记名”></标记>

　　　　　　命名锚记链接 <a href="#命名锚记名称"></a>

轮播图练习

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

     <style type="text/css">

         * {margin: 0; padding: 0;}

         .banner {width: 450px; height: 297px; margin: 0 auto; border: black 1px solid; position: relative;}

             .banner .btn {position: absolute; right: 5px; bottom: 10px;}

                 .banner .btn a {float: left; width: 25px; height: 25px; background: rgba(0, 0, 0, .5); margin-right: 5px;

                                 text-align: center; line-height: 25px; text-decoration: none; color: #fff;}

             .list {width: 450px; height: 297px; overflow: hidden;}

             img {display: block;}

     </style>

 </head>

 <body>

     <div class="banner">

         <div class="btn">

             <a href="#img1">1</a>

             <a href="#img2">2</a>

             <a href="#img3">3</a>

             <a href="#img4">4</a>

             <a href="#img5">5</a>

         </div>

         <div class="list">

             <img src="img/img1.jpg"  id="img1">

             <img src="img/img2.jpg"  id="img2">

             <img src="img/img3.jpg"  id="img3">

             <img src="img/img4.jpg"  id="img4">

             <img src="img/img5.jpg"  id="img5">

         </div>

     </div>

 </body>

 </html>

结果

CSS-锚点笔记的更多相关文章

  1. CSS揭秘读书笔记 （一）

    CSS揭秘读书笔记      (一) 一.半透明边框 要想实现半透明边框可以使用border: border: 10px  solid  hsla(0,0%,100%,.5); background: ...

  2. css居中学习笔记

    css居中学习笔记 一.水平居中 以下面的代码为例: <body> <div class="parent"> <div class="chi ...

  3. css锚点ios不兼容的方法

    css锚点的正常方法: <a href="#1f"></a> <a name="1f"></a> ios出现的问 ...

  4. 《CSS揭秘》笔记（一）

    前言 我们在现代 CSS 中所面临的挑战已经不在于如何绕过这些转瞬即逝的浏览器 bug.如今的挑战是,在保证 DRY ① .可维护.灵活性.轻量级并且尽可能符合标准的前提下,把我们手中的这些CSS特性 ...

  5. CSS 3 学习笔记

    css 3 学习笔记 文本: word-wrap : normal | break-word取值:normal:    控制连续文本换行.break-word:    内容将在边界内换行.如果需要,词 ...

  6. CSS锚伪类顺序需注意的几点

    CSS锚伪类有以下几种: a:link{color:pink} /*未访问的链接*/ a:visited{color:red} /*已访问的链接*/ a:hover{color:blue} /*鼠标移 ...

  7. css随堂笔记（三）

    Css随堂笔记(三) 1 关于背景图片   A 设置背景图片:background-image:url(“图片的路径”):   B 背景图片位置: background-position:1 方位名词 ...

  8. （2）《Head First HTML与CSS》学习笔记---img与基于标准的HTML5

    1.浏览器处理图像的过程: 1.服务器获取文件,显示出文本结构,以及预留默认的大小给<img>(如果该<img>有width-1值和height-1值,则根据这个值提前设好页面 ...

  9. 《CSS世界》笔记二：盒模型四大家族

    上一篇:<CSS世界>笔记一:流/元素/尺寸下一篇:<CSS世界>笔记三:内联元素与对齐 写在前面 在读<CSS世界>第四章之前,粗浅的认为盒模型无非是margin ...

  10. 《精通CSS》读书笔记（一）

    最近新添16本书,目前开始看陈剑瓯翻译的<精通CSS——高级Web标准解决方案>(Andy Budd, CSS Mastery -- Advanced Web Standards Solu ...

随机推荐

  1. APISIX系列 | 使用 docker-apisix 安装APISIX服务

    官方仓库:https://github.com/iresty/docker-apisix 官方仓库 拉取 git clone git@github.com:iresty/docker-apisix.g ...

  2. jdk8 stream实现sql单表select a,b,sum(),avg(),max() from group by a,b order by a,b limit M offset N及其性能

    之所以要测该场景,是因为merge多数据源结果的时候,有时候只是单个子查询结果了,而此时采用sql数据库处理并不一定能够合理(网络延迟太大). 测试数据10万行,结果1000行 limit 20 of ...

  3. MLflow系列2：MLflow追踪

    英文链接:https://mlflow.org/docs/latest/tracking.html 本文链接:https://www.cnblogs.com/CheeseZH/p/11945089.h ...

  4. unix_timestamp 时间戳函数用法（hive）

    pandas和SQL数据分析实战 https://study.163.com/course/courseMain.htm?courseId=1006383008&share=2&sha ...

  5. jeecg数据库切换至mysql8.0方式

    1.修改pom.xml   mysql版本 <mysql.version>8.0.11</mysql.version> 2.修改dbconfig.properties文件 hi ...

  6. x264 b_annexb格式和多slice

    实际应用环境:iOS,Android x264_param_t中有下面两个参数值得注意下int i_threads;        /* encode multiple frames in paral ...

  7. 什么是依赖注入 IoC

    设计原则:依赖注入原则 依赖倒置原则,是一种程序设计模式的原则 高层模块不应该依赖底层模块,二者都应该依赖其抽象. 抽象不应该依赖细节,细节应该依赖抽象.依赖导致原则很好的体现了“面向接口编程”的思想 ...

  8. centos 6.8操作系统安装arcgis server 10.4-后续篇

    ./Setup //执行安装 (运行安装脚本后会进行安装环境检测,会检查检查软件包和主机名,检测通过才可以开始安装.)如果检查不通过,会提示和报错,并中断安装过程.(1) 解决 hostname 问题 ...

  9. 全文搜索引擎Elasticsearch详细介绍

    我们生活中的数据总体分为两种:结构化数据 和 非结构化数据. 结构化数据:也称作行数据,是由二维表结构来逻辑表达和实现的数据,严格地遵循数据格式与长度规范,主要通过关系型数据库进行存储和管理.指具有固 ...

  10. nginx入门系列之应用场景介绍

    目录 HTTP服务器 反向代理服务器 作为一个虚拟主机下多个应用的反向代理 作为多个虚拟主机的反向代理 负载均衡器 简单轮训策略 最小连接数策略 客户端IP哈希策略 服务器权重策略 邮件代理服务器 官 ...