07-img和a标签
<!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标签的更多相关文章
- HTML标签和属性二
五.文本标记 7.文本样式 <b></b> <strong></strong> 加粗 <i></i> <em> ...
- Golang友团无闻Go语言Web基础视频教程
教程内容:GO语言资料Golang友团无闻Go语言编程基础Golang友团无闻Go语言Web基础教程 Go语言Web基础教程列表:[Go Web基础]12Go Web 扩展学习.mp4[Go Web基 ...
- js正则表达式实例(汇总)
来源:如何用JAVASCRIPT 正则表达式取出字符串最后一组数字,谢谢 如 30CAC0040 取出40 3SFASDF92 取出92 正则如下://d+$/g 统一空格个数 来源:正 ...
- DDD 领域驱动设计-谈谈 Repository、IUnitOfWork 和 IDbContext 的实践(转)
http://www.cnblogs.com/xishuai/p/ddd-repository-iunitofwork-and-idbcontext.html 好久没写 DDD 领域驱动设计相关的文章 ...
- Go视频教程整理
[Go Web基础]01博客项目设计 |Go视频教程|Go语言基础 http://www.tudou.com/programs/view/gXZb9tGNsGU/ [Go Web基础]02初窥 Web ...
- [ZZ] Cache
http://blog.sina.com.cn/s/blog_6472c4cc0102duzr.html 处理器微架构访问Cache的方法与访问主存储器有类似之处.主存储器使用地址编码方式,微架构可以 ...
- java工厂类与反射机制
java 简单工厂类 2012-04-22 15:44:07| 分类: java | 标签:java工厂类 简单工厂类 |举报|字号 订阅 简单工厂模式需要由以下角色组成: 接口 ...
- 工厂类分离与java反射机制
网易 博客 发现 小组 风格 手机博客 玩LOFTER,免费冲印20张照片!> 创建博客登录 加关注 黙言-在路上 奋斗 首页 日志 相册 音乐 收藏 博友 关于我 黙 ...
- JUC.Condition学习
JUC.Condition学习笔记[附详细源码解析] 目录 Condition的概念 大体实现流程 I.初始化状态 II.await()操作 III.signal()操作 3个主要方法 Conditi ...
- JUC锁机制
JUC锁机制(Lock)学习笔记,附详细源码解析 JUC锁机制(Lock)学习笔记,附详细源码解析 2013-08-22 20:03 by CM4J, 56 阅读, 0 评论,收藏, 编辑 锁机制学习 ...
随机推荐
- vue使用axios提交formdata格式的数据
参考: https://www.cnblogs.com/qwert1/p/8909455.html https://blog.csdn.net/qq_42984640/article/details/ ...
- Task ProgressBar模拟现实完成后显示TextBox
private async void Form1_Load(object sender, EventArgs e) { progressBar1.Maximum = ; progressBar2.Ma ...
- gradle 随记
gradle项目下添加jar包 compile fileTree(dir: './src/main/resources/lib', include: '*.jar') 将jar包放到这个目录下./sr ...
- 登录操作(方法二:for与else搭配)
登录操作(方法二:for与else搭配) user_name="star"passwoed='123' count=0for i in range(3): u_username=i ...
- android gradle 和gradle plugin
android gradle 和gradle plugin 1.安装完AS3.5.2创建完项目一运行,报了如下错误 Error:Could not find com.android.tools.bui ...
- C++访问sqlite3的初体验
Sqlite确实是一个比较好的本地数据库,从接触它的时候就喜欢上了它,它可以在很多情况下简化应用.不过以前都是在Java里面使用,或者Linux C下使用的,现在有个项目(C++)可能我会用到sqli ...
- Django项目:堡垒机(Linux服务器主机管理系统)--03--03堡垒机在Linux系统里记录会话日志02/02
#main.py #本文件写所有的连接交互动作程序 # ————————————————03堡垒机在Linux系统里记录会话日志 开始———————————————— from Fortress im ...
- csp-s模拟测试90
csp-s模拟测试90 考场发明$Spfa$祭. $T1$按照题意模拟,然后我就发现我死了.一气之下删掉了$priority$,拍了几下发现贼jb快而且还是对的就开心地交了.$T2$的差分状态定义很棒 ...
- VS2010-MFC(常用控件:树形控件Tree Control 下)
转自:http://www.jizhuomi.com/software/203.html 前面一节讲了树形控件Tree Control的简介.通知消息以及相关数据结构,本节继续讲下半部分,包括树形控件 ...
- VS2010-MFC(对话框:字体对话框)
转自:http://www.jizhuomi.com/software/175.html 字体对话框的作用是用来选择字体.我们也经常能够见到.MFC使用CFontDialog类封装了字体对话框的所有操 ...