代码:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.adv {
        /*调整广告图位置*/
position: fixed;
right: 10px;
bottom: -20px;
        /*透明度 使得可以看见下面内容*/
opacity: 0.7;
} .close {
      /*关闭按钮样式*/
position: relative;
top: -315px;
right: 50px;
background-color: transparent;
border: none;
font-size: 20px;
cursor: pointer;
} .close:active {
outline: none;
}
广告图:


效果图:

												

CSS固定定位实现右下角可关闭广告的更多相关文章

  1. CSS学习笔记10 相对定位,绝对定位与固定定位

    文档流中的元素的位置由元素在 (X)HTML 中的位置决定,这就是最原始的普通流,前面讲到的浮动CSS学习笔记08 浮动可以改变元素在文档流中的位置,除了这个我们还可以通过使用CSS的position ...

  2. JS网站右下角悬浮视窗可关闭广告

    效果体验:http://hovertree.com/texiao/js/4.htm 网站右下角悬浮视窗可关闭广告代码,可收缩.展开,关闭,内容区可自定义html,兼容IE8+.FireFox.Chro ...

  3. CSS的三种手段让元素脱离标准本文档流——浮动、绝对定位、固定定位

    1.浮动 浮动是CSS中用到的最多的一个选项,他有三个性质.关于浮动我们要强调一点,永远不是一个东西单独浮动,浮动都是一起浮动,要浮动,大家都浮动. 1.1 浮动元素脱离标准文档流 1.1.1 大概描 ...

  4. Js_网站右下角悬浮视窗可关闭广告

    站右下角悬浮视窗可关闭广告代码,可收缩.展开,关闭,内容区可自定义html,兼容IE8+.FireFox.Chrome.Safari等主流浏览器.广告图片尺寸300x250. 使用方法:在head区域 ...

  5. 【css笔记】css中的盒模型和三种定位机制(固定定位,绝对定位,浮动)

    html页面上的元素都可以看成是框组成的,框通过三种定位机制排列在一起就过程了我们看到的页面.而框就是盒模型. 盒模型 1.页面上的每个元素可以看成一个矩形框,每个框由元素的内容,内边距,边框和外边距 ...

  6. 前端学习 -- Html&Css -- 相对定位 绝对定位 固定定位

    相对定位 - 定位指的就是将指定的元素摆放到页面的任意位置,通过定位可以任意的摆放元素. - 通过position属性来设置元素的定位. -可选值: static:默认值,元素没有开启定位: rela ...

  7. 前端CSS - 相对定位,绝对定位,固定定位

    前端CSS - 相对定位,绝对定位,固定定位 1.1 相对定位 position:relative 相对定位,就是微调元素位置的.让元素相对自己原来的位置,进行位置的微调. 也就是说,如果一个盒子想进 ...

  8. CSS层定位——固定定位,相对定位,绝对定位

    主要写关于层定位的相关知识 ㈠定位概述 ⑴像图像软件中的图层一样可以对每一个layer能够精确定位操作 ⑵层定位的position属性决定了当前的一个网页元素,可以叠加到另一个网页元素上面,那么我们把 ...

  9. css定位:相对定位、绝对定位、固定定位的区别与特性

    css定位:相对定位.绝对定位.固定定位的区别与特性 原文地址:http://www.qingzhouquanzi.com/106.html css定位常用的有以下三种: 使用了定位的共同特性: 这三 ...

随机推荐

  1. Day01_课后练习题

    1.(将摄氏温度转化华氏温度)编写一个从控制台读取摄氏温度并将他转变为华氏温度并予以显示的程序.转换公式如下. Fahrenheit = (9 / 5) *  celsius + 32 这里是这个程序 ...

  2. Thread的几种方法的使用

    1:setPriority() 设置线程的优先级,从1 到10.   5是默认的.  1是最低优先级. 10是最高优先级 public class MyThread01 implements Runn ...

  3. POJ 1743 Musical Theme ( 后缀数组 && 最长不重叠相似子串 )

    题意 : 给 n 个数组成的串,求是否有多个“相似”且不重叠的子串的长度大于等于5,两个子串相似当且仅当长度相等且每一位的数字差都相等. 分析 :  根据题目对于 “ 相似 ” 串的定义,我们可以将原 ...

  4. Leetcode 4. Median of Two Sorted Arrays(中位数+二分答案+递归)

    4. Median of Two Sorted Arrays Hard There are two sorted arrays nums1 and nums2 of size m and n resp ...

  5. A - Biorhythms (第三周)

    A - Biorhythms 链接:https://vjudge.net/contest/154063#problem Description 人生来就有三个生理周期,分别为体力.感情和智力周期,它们 ...

  6. node.js运行配置(vs code非控制台输出)

    node.js运行配置(vs code非控制台输出) node  配置 简化  vs code 是非常强大的编译器,皆因它有有各种各样好用的插件. 在没有安装code runner插件之前,想要执行n ...

  7. URL里的分号';'一定要编码为%3b!!!!

    http://en.wikipedia.org/wiki/Query_string The series of pairs is separated by the ampersand, '&' ...

  8. 包管理器 - peer dependency 的安装

    npm 和 yarn 安装依赖(包)时不会自动安装 peer dependence(虽然很旧的 npm 是会自动安装的,但几乎没人用那么旧的了),而是给出如下警告: $ npm install --s ...

  9. JS 引擎

    最早的 JS 引擎是纯解释器,现代 JS 引擎已经使用 JIT(Just-in-time compilation:结合预编译(ahead-of-time compilation AOT)和解释器的优点 ...

  10. Vue知识整理4:v-html标签

    可以在数据绑定中使用html标签,这样在变量里可以使用html标签输出结果,如下所示: