CSS-锚点笔记
注意点:
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-锚点笔记的更多相关文章
- CSS揭秘读书笔记 (一)
CSS揭秘读书笔记 (一) 一.半透明边框 要想实现半透明边框可以使用border: border: 10px solid hsla(0,0%,100%,.5); background: ...
- css居中学习笔记
css居中学习笔记 一.水平居中 以下面的代码为例: <body> <div class="parent"> <div class="chi ...
- css锚点ios不兼容的方法
css锚点的正常方法: <a href="#1f"></a> <a name="1f"></a> ios出现的问 ...
- 《CSS揭秘》笔记(一)
前言 我们在现代 CSS 中所面临的挑战已经不在于如何绕过这些转瞬即逝的浏览器 bug.如今的挑战是,在保证 DRY ① .可维护.灵活性.轻量级并且尽可能符合标准的前提下,把我们手中的这些CSS特性 ...
- CSS 3 学习笔记
css 3 学习笔记 文本: word-wrap : normal | break-word取值:normal: 控制连续文本换行.break-word: 内容将在边界内换行.如果需要,词 ...
- CSS锚伪类顺序需注意的几点
CSS锚伪类有以下几种: a:link{color:pink} /*未访问的链接*/ a:visited{color:red} /*已访问的链接*/ a:hover{color:blue} /*鼠标移 ...
- css随堂笔记(三)
Css随堂笔记(三) 1 关于背景图片 A 设置背景图片:background-image:url(“图片的路径”): B 背景图片位置: background-position:1 方位名词 ...
- (2)《Head First HTML与CSS》学习笔记---img与基于标准的HTML5
1.浏览器处理图像的过程: 1.服务器获取文件,显示出文本结构,以及预留默认的大小给<img>(如果该<img>有width-1值和height-1值,则根据这个值提前设好页面 ...
- 《CSS世界》笔记二:盒模型四大家族
上一篇:<CSS世界>笔记一:流/元素/尺寸下一篇:<CSS世界>笔记三:内联元素与对齐 写在前面 在读<CSS世界>第四章之前,粗浅的认为盒模型无非是margin ...
- 《精通CSS》读书笔记(一)
最近新添16本书,目前开始看陈剑瓯翻译的<精通CSS——高级Web标准解决方案>(Andy Budd, CSS Mastery -- Advanced Web Standards Solu ...
随机推荐
- CAS单点登录源码解析之【客户端】
cas 3.5.3服务器搭建+spring boot集成+shiro模拟登录(不修改现有shiro认证架构).因为我们属于供应商,所以有些客户那里会需要接对方的CAS,所以没有使用shiro和cas的 ...
- 【转发】SqlServer数据库表生成C# Model实体类SQL语句
已知现有表T1 通过运行下面的sql即可,先配置表名. declare @TableName sysname = 'T1' declare @Result varchar(max) = ' /// & ...
- vs2015 如何更改背景主题颜色
打开vs2015 步骤:工具--> 选项 -->环境-->常规-->主题设置
- 《Effective Java》第2章 对所有对象都通用的方法
第10条:覆盖equals时,请遵守通用约定 1.使用==来比较两个对象的时候,比较的是两个对象在内存中的地址是否相同(两个引用指向的是否为同一个对象):Object中定义的equals方法也是这样比 ...
- vs查找替换功能打不开!
其实解决办法很简单啊 vs--窗口--重置窗口布局
- Content-Type四种常见取值
一.application/x-www-form-urlencoded 最常见 POST 提交数据的方式.浏览器的原生 form 表单,如果不设置 enctype 属性,那么最终就会以 applica ...
- svn"重新定位"提示版本库uuid不匹配
svn"重新定位"提示版本库 uuid不匹配: 版本库 "https://wolfcome110/svn/andon" 的 uuid是 "d52648 ...
- 【计算机视觉基础】IPM
IPM code #if 0 void xyp2ipmp(cv::Mat& xyp, cv::Mat& ipmp, cv::Mat& xylim, Size& sz){ ...
- U盘安装Windows Server2008 R2
安装Windows 2008 r2 提示windows 无法安装到这个磁盘.选中的磁盘采用GPT分区形式 利用U盘装系统的步骤 第一 进入BIOS,找SECURITY—SECURE BOOT中的SEC ...
- Apache Kafka® is a distributed streaming platform
Kafka Connect简介 我们知道过去对于Kafka的定义是分布式,分区化的,带备份机制的日志提交服务.也就是一个分布式的消息队列,这也是他最常见的用法.但是Kafka不止于此,打开最新的官网. ...