<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>咸鱼联盟</title>

    <style> /* css层叠样式表 */

        *{

            margin: 0;

            padding: 0;

        }

        .box-one{

            width: 200px;

            height: 100px;

            background-color: green;

        }

        .box-two{

            width: 200px;

            height: 100px;

            background-color: pink;

            cursor: url("img/2.gif"),pointer;

        }

        a{/* 可以通过display:block将行内元素转换为块级元素 */

            /*display: block;*/

            /*width: 200px;*/

            /*height: 100px;*/

            background-color: red;

            font-size: 16px;

        }

        body{

            font-size: 0;

        }

        .box-three{ /* 设置鼠标样式cursor */

            width: 200px;

            height: 200px;

            background-color: blue;

            cursor: url("./img/2.gif"),pointer;

        }

    </style>

</head>

<body>

    <div class="box-one">咸鱼联盟</div>

    <div class="box-two">咸鱼联盟</div>

    <a href="https://www.baidu.com">百度一下</a>

    <a href="https://www.baidu.com">百度一下</a>

    <div class="box-three"></div>

    <!--

    标签和元素的关系

    <div class="box-one">咸鱼联盟</div>

    元素 = 标签+文字内容

    标签的分类

        怎么判断元素是块级/行内/行内块 ===>选中标签开发者工具中computed模块的display属性决定

        块级元素(display=block) div p ul li h1 h2 h3 h4 h5 h6 ...

        行内元素(display=inline) a image span

        行内块元素(display=inline-block) input

        块级元素 独自占据一行;width/height/margin/padding都有效;margin:auto支持

        行内元素 不独自占据一行;width/height无效;上下margin无效;上下padding只对自身有效;margin:auto不支持

        只对自身有效的意思是不管上下的元素,padding会撑大盒子但是不会占新的空白地，而是会直接覆盖上下两边的盒子

        行内块元素 不独自占据一行;width/height/margin/padding都有效;margin:auto不支持

        在css中可以通过添加display来改变元素

        block inline inline-block none(隐藏)

        a标签如果没有输入内容:存在但是不显示

        none是不存在

        两个行内元素之间有空格的原因:第一个a标签通过回车后才有第二个a标签

        解决方案1:写在一行,但是后期可读性不高

        解决方案2:注释掉两个标签中间所有的空格

        解决方案3:css中添加

        body{

           font-size: 0;

        }

        cursor属性:设置鼠标样式

        cursor:point(小手掌)move(十字架移动)wait(正在加载)help(问号)

        cursor: url("img/2.gif"),pointer;(自定义鼠标形状)

    -->

</body>

</html>

07-img和a标签的更多相关文章

  1. HTML标签和属性二

    五.文本标记 7.文本样式 <b></b>  <strong></strong> 加粗 <i></i>   <em> ...

  2. Golang友团无闻Go语言Web基础视频教程

    教程内容:GO语言资料Golang友团无闻Go语言编程基础Golang友团无闻Go语言Web基础教程 Go语言Web基础教程列表:[Go Web基础]12Go Web 扩展学习.mp4[Go Web基 ...

  3. js正则表达式实例（汇总）

    来源:如何用JAVASCRIPT 正则表达式取出字符串最后一组数字,谢谢  如  30CAC0040 取出40  3SFASDF92 取出92  正则如下://d+$/g   统一空格个数  来源:正 ...

  4. DDD 领域驱动设计－谈谈 Repository、IUnitOfWork 和 IDbContext 的实践(转)

    http://www.cnblogs.com/xishuai/p/ddd-repository-iunitofwork-and-idbcontext.html 好久没写 DDD 领域驱动设计相关的文章 ...

  5. Go视频教程整理

    [Go Web基础]01博客项目设计 |Go视频教程|Go语言基础 http://www.tudou.com/programs/view/gXZb9tGNsGU/ [Go Web基础]02初窥 Web ...

  6. [ZZ] Cache

    http://blog.sina.com.cn/s/blog_6472c4cc0102duzr.html 处理器微架构访问Cache的方法与访问主存储器有类似之处.主存储器使用地址编码方式,微架构可以 ...

  7. java工厂类与反射机制

    java 简单工厂类 2012-04-22 15:44:07|  分类: java |  标签:java工厂类  简单工厂类  |举报|字号 订阅     简单工厂模式需要由以下角色组成: 接口    ...

  8. 工厂类分离与java反射机制

    网易 博客 发现 小组 风格 手机博客 玩LOFTER,免费冲印20张照片!> 创建博客登录  加关注 黙言-在路上 奋斗 首页 日志 相册 音乐 收藏 博友 关于我             黙 ...

  9. JUC.Condition学习

    JUC.Condition学习笔记[附详细源码解析] 目录 Condition的概念 大体实现流程 I.初始化状态 II.await()操作 III.signal()操作 3个主要方法 Conditi ...

  10. JUC锁机制

    JUC锁机制(Lock)学习笔记,附详细源码解析 JUC锁机制(Lock)学习笔记,附详细源码解析 2013-08-22 20:03 by CM4J, 56 阅读, 0 评论,收藏, 编辑 锁机制学习 ...

随机推荐

  1. js 本地预览图片和得到图片实际大小

    //填充预览图片 function adpter(file, upfile) { var imgName = new Date().getTime() + file.name.substr(file. ...

  2. MQTT--笔记

    一.MQTT协议基本介绍 1.1.MQTT是什么? MQTT,全称为Message Queue Telemetry Transport.在1999年,由IBM的Andy Stanford-Clark和 ...

  3. RabbitMQ探索之路（二）：RabbitMQ在Linux下的安装

    引言 消息队列现在在互联网项目中应用的还是非常多的,在接下来的博客中小编会深入的了解MQ的实现过程,在此博客中将介绍如何在centos7下面安装MQ以及遇到的问题. 第一步:安装Erlang 因为ra ...

  4. jmeter遇到的问题：java.net.ConnectException: Connection refused: connect

    1.使用jmeter执行脚本,在察看结果树的的响应数据中看到的错误提示如下: java.net.ConnectException: Connection refused: connect at jav ...

  5. [JZOJ3234] 阴阳

    题目 题目大意 有一棵树,每条边有\(0\)或\(1\)两种颜色. 求满足存在\((u,v)\)路径上的点\(x\)使得\((u,x)\)和\((x,v)\)路径上的两种颜色出现次数相同的点对\((u ...

  6. luoguP1029 最大公约数和最小公倍数问题 [gcd][数论]

    题目描述 输入二个正整数x0,y0(2<=x0<100000,2<=y0<=1000000),求出满足下列条件的P,Q的个数 条件: 1.P,Q是正整数 2.要求P,Q以x0为 ...

  7. LUOGU P1039 侦探推理 (字符串+模拟)

    传送门 解题思路 一道%你神题,\(string\)好强大啊..首先枚举一个周几,再枚举一个罪犯是谁,然后判断的时候就是枚举所有人说的话.定义\(fAKe[i]\)表示第\(i\)个人说的是真话还是假 ...

  8. LUOGU P4159 [SCOI2009]迷路(矩阵乘法)

    传送门 解题思路 以前bpw讲过的一道题,顺便复习一下矩阵乘法.做法就是拆点,把每个点拆成\(9\)个点,然后挨个连边.之后若\(i\)与\(j\)之间的边长度为\(x\),就让\(i\)的第\(x\ ...

  9. PHP 统计数组中所有的值出现的次数 array_count_values 函数

    array_count_values() 函数用于统计数组中所有的值出现的次数. array_count_values() PHP array_count_values() 函数用于统计数组中所有的值 ...

  10. linux 命令 find与rm实现查找并删除目录或文件

    504  find /Volumes/WD/data/data/sg3d/server -type d |grep .svn 505  find /Volumes/WD/data/data/sg3d/ ...