第五十二章 变换的背景

《代码能有多难》——原地址:https://dmnydn.com/ 上一章我们说了背景相关的属性,但是不直观啊,所以这一章我们来做一个小小的练习,来使用一下这些属性,搞明白他们都是怎么回事。 首先写一个元素: <div id="bg-change"&a...

2019-04-01 13:00:46

阅读数 19

评论数 0

第五十一章 背景

《代码能有多难》——原地址:https://dmnydn.com/ 背景是一个比较有助于我们,观察元素所占用面积的属性。但这依旧不是绝对的,因为在后面的章节,我们马上就会看到例外的情况。 背景(background)本身是一个复合属性,那么我们展开来讲解: 背景色background-c...

2019-04-01 13:00:35

阅读数 14

评论数 0

第五十章 使用拐杖

《代码能有多难》——原地址:https://dmnydn.com/ 接着上一章,我们继续看右侧面板: 上面也是三个标签页,目前我们主要使用前两个,第一个表示样式,第二个表示计算以后的属性。 下面我截取了两条内容,简单的看一下,element.style的意思是元素的样式,其实是说这个元素...

2019-04-01 13:00:26

阅读数 25

评论数 0

第四十九章 一个拐杖

《代码能有多难》——原地址:https://dmnydn.com/ 虽然上一章通过给块元素设置背景色,可以非常直观的看到它的位置和大小。但是不能每次写页面,对于每一个元素都这么操作啊,那页面花花绿绿的,岂不成了马赛克? 所以我们需要一个工具去观察这些元素,不过还好,并不需要去额外安装这样的...

2019-04-01 13:00:15

阅读数 11

评论数 0

第四十八章 这个盒子

《代码能有多难》——原地址:https://dmnydn.com/ 有了盒子,自然就不缺猫了,然后就能过上幸福的生活(一只老鼠幻想猫什么的,真的好么? 我们来看看我们的盒元素吧: <div id="box-1"></div&...

2019-04-01 12:59:52

阅读数 13

评论数 0

第四十七章 id 和 class

《代码能有多难》——原地址:https://dmnydn.com/ 上一章认识了两个空白标签,感觉十分有用。不过真要动手写的话,你就会发现问题。我们只学了用标签名字选择器,虽然可以一个页面中的链接,全都是一个样式。那是因为这个标签表示一个固定的意思,一般来说,也都具有相同的样式,这样看起来比...

2019-04-01 12:59:41

阅读数 4

评论数 0

第四十六章 两个标签

《代码能有多难》——原地址:https://dmnydn.com/ 上一章说的就是一个排队的问题,因为一切比喻都是蹩脚的,所以也不要太较真。在我们还不了解这些东西的时候,能够快速的给我们一个初步的感受,对于后面的理解,多少是有帮助的。 我们可以看出来,块元素,好像就是一个方块。这倒是真的,...

2019-03-14 09:48:26

阅读数 17

评论数 0

第四十五章 讲个故事

《代码能有多难》——原地址:https://dmnydn.com/ 这里我们先简单的说一下“文档流”。就是把一个页面看做一个河流,里面的所有元素,具有向着某个特定方向流动的趋势。 打一个最简单的比方,现在页面中有三个段落,那么它们从上往下排布。如果我在代码中彻底删掉第一段,那么剩下的两段会...

2019-03-12 09:14:44

阅读数 12

评论数 0

第四十四章 两种元素

《代码能有多难》——原地址:https://dmnydn.com/ 知识是一种网状的结构,甚至是立体的网状。它们相互解释,最后形成循环。 比如在完全不懂英文的时候,给你一本英英词典,它就是解释的再浅白,再通俗易懂,你还是看不懂。于是我们开始背单词,但是最开始是不求甚解的。就这么迷迷糊糊的学...

2019-03-12 09:14:35

阅读数 12

评论数 0

第四十三章 选择器

《代码能有多难》——原地址:https://dmnydn.com/ 我想大家一定发现了,我们目前所掌握的选择器局限性太大。每一次选择,页面中所有相同的元素全都跟着变化。显然我们需要更灵活的选择方式,那么从这一章开始,我们来认识一些选择器。 a { /* 这是我们学过的,通过标签名,选择元素 ...

2019-03-10 12:50:46

阅读数 8

评论数 0

第四十二章 伪类

《代码能有多难》——原地址:https://dmnydn.com/ 上一章大家肯定还有疑问,就是链接的下划线好像是去掉了,但当我把鼠标放在链接上的时候,下划线又出来了,这就十分难受。 因为对于链接,它本身是有几个状态的。首先是我们完全没有搭理它的状态,就是最普通的默认状态;然后当我们的鼠标...

2019-03-06 16:37:59

阅读数 10

评论数 0

第四十一章 链接的样式

《代码能有多难》——原地址:https://dmnydn.com/ 链接我们已经学习过了,不过我们写出来的链接十分具有年代感,因为它的样子还和20年前一样,蓝色的文字加个下划线。 我们现在已经学了许多关于文字的样式,那么对链接做一些修改,也是挺方便的。换一换颜色,总比那浓郁的化不开的蓝色要...

2019-03-06 16:37:50

阅读数 7

评论数 0

第四十章 关于换行

《代码能有多难》——原地址:https://dmnydn.com/ 在我们写作文的时候,这一行写到头,怎么办呢?当然是折回来,从下一行开始了。这个问题在汉字中比较简单(除非遇到标点)。但是到了英文里,因为单词长短不一,换行这个问题就稍微显得复杂一点。这一章我们要讲三个属性,并且解释一些前面所遗留...

2019-02-26 13:27:24

阅读数 8

评论数 0

第三十九章 对齐和缩进

《代码能有多难》——原地址:https://dmnydn.com/ 在上一章,我们留下了一个坑。虽然这种情况很少遇到,但是既然说到了,索性我们就解决一下吧。 这个事情其实挺简单的,当然,前提是你知道相关的属性的话。所以我非常建议大家自己去多读一读文档,了解一下都有什么功能。毕竟像我这样的教程,...

2019-02-23 08:30:19

阅读数 18

评论数 0

第三十八章 对齐方式

《代码能有多难》——原地址:https://dmnydn.com/ 我们前面所说的这些,都是文字的属性,而现在要说的是文本的属性。它们有什么区别呢?Font 主要是说文字本身,即便你只拿出一个文字来,只盯着这个文字看,它也是具有这些属性的。而 Text 是说一个群体的表现,或者文字周边的一些东西...

2019-02-22 08:44:15

阅读数 12

评论数 0

第三十七章 文字

《代码能有多难》——原地址:https://dmnydn.com/ 前面我们介绍了好多关于文字的属性,因为都是描述文字是什么样式的,所以我们也可以把它们写在一起做一条属性,就是 font,这种把许多调属性综合成为一条去写的方法,被称为复合属性或者快捷属性。 先来看一个例子: p { ...

2019-02-18 09:37:51

阅读数 18

评论数 0

第三十六章 外部字体

《代码能有多难》——原地址:https://dmnydn.com/ 上一章说到了我们选用字体的尴尬,毕竟只指定一个名称,局限性太大了。那我们能不能为用户提供字体呢?我们的网页用我们自己提供的字体来显示,想想又觉得世界很美好了。 这个事情还真的能够做到,而且难度也不大。这就是引入外部字体,我们来...

2019-02-14 21:57:02

阅读数 22

评论数 0

第三十五章 字体

《代码能有多难》——原地址:https://dmnydn.com/ 前面我们说到,关于文字的属性,好多其实是和字体相关的。这一章我们来讲如何设置字体。 我知道,大家已经开始感到很兴奋了。如果把自己的页面设置成各种奇奇怪怪的字体,一定会显得非常个性,非常好玩。这种事情别说做,光是想想,都让人觉得...

2019-02-13 21:23:26

阅读数 45

评论数 0

第三十四章 客官请自重

《代码能有多难》——原地址:https://dmnydn.com/ 标题皮了一下,小老鼠表示很开心。其实呢,我们这一章要讲的是——字重。 这个词我们日常好像也没接触过,其实就是讲的文字的粗细,你理解为文字的胖瘦,就可以接受字重这个叫法了。 属性名:font-weight。然后它可以设置的属性...

2019-02-05 20:00:09

阅读数 49

评论数 0

第三十三章 行高和样式

《代码能有多难》——原地址:https://dmnydn.com/ 行高这个属性可能是我们平常没有在意过的,它表示一行文字所占用的高度。我们写一段内容,两行文字之间会有一些空白,这样看起来很舒服。而之所以会有这些空白,是因为每一行文字所占用的高度都要比文字本身的高度更大。 你也许会说,为什么两...

2019-02-04 19:51:15

阅读数 52

评论数 1

提示
确定要删除当前文章?
取消 删除
关闭
关闭