- 博客(20)
- 收藏
- 关注
RSS订阅原创 当图片无法加载时，添加一个代替文本
Add Alt Text to an Image for Accessibilityalt属性，也被称为alt text, 是当图片无法加载时显示的替代文本。alt属性对于盲人或视觉损伤的用户理解一幅图片中所描绘的内容非常重要，搜索引擎也会搜索alt属性。简而言之，每一张图片都应该有一个alt属性！你可以像下面例子中一样为img元素添加一个alt属性：<img src="www.your-i...
2018-04-28 15:34:15
2982
原创 把图片变成一个链接
Turn an Image into a Link你可以通过把某元素嵌套进a元素使其变成一个链接。把你的图片嵌套进a元素。举例如下：<a href="#"><img src="/images/relaxing-cat.jpg"></a>任务：把你的小猫图片插入到一个新的锚点元素中，并把锚点元素的href属性设置为#。一旦完成，把你的光标悬停在你的图片上。你的光标...
2018-04-28 15:30:03
17261
原创 使用hash(哈希)符号生成固定链接
Make Dead Links using the Hash Symbol有时你想为你的网站添加一个a元素，但此时你还不知道要将它们链接到哪儿，此时可以使用固定链接。把你的a元素的href属性的值替换为一个#，别名hash(哈希)符号，将其变为一个固定链接。...
2018-04-28 14:48:10
4315
原创 嵌套链接元素
Nest an Anchor Element within a Paragraph作为参考，再次看一看a元素的图示：例如：<p>Here's a <a href="https://freecodecamp.cn"> link to FreeCodeCamp中文社区</a> for you to follow.</p>Nesting（嵌套）就是把一个元...
2018-04-28 14:45:19
817
原创 创建链接
Link to External Pages with Anchor Elementsa元素，也叫anchor（锚点）元素，既可以用来链接到外部地址实现页面跳转功能，也可以链接到当前页面的某部分实现内部导航功能。下面是一张a元素的图示。a元素位于段落元素的中间，这意味着链接会出现在段落的中间。这有一个例子：<p>Here's a <a href="http://freecodec...
2018-04-28 11:32:42
977
原创 使用百分比来指定border-radius边框半径的值
Make Circular Images with a Border Radius除了像素，你还可以使用百分比来指定border-radius边框半径的值。给你的猫咪图片一个50%的border-radius。
2018-04-28 11:32:34
1291
原创 添加圆角边框
Add Rounded Corners with a Border Radius猫咪图片的边框现在是尖尖的，不够可爱，我们可以通过CSS的一个叫border-radius(边框半径)的属性来让它的边框变成圆的。你同样可以使用像素来指定border-radius的属性值，现在让你的猫咪图片的边框半径为10px吧。注意：这个任务有多种解决方案。你可以添加border-radius到.thick-gre...
2018-04-28 11:32:28
330
原创 添加边框
Add Borders Around your ElementsCSS 边框的属性有style(样式)、color(颜色)、width(宽度)、height(高度)等。举个例子，如果我们想要让一个HTML元素的边框颜色为红色、边框宽度为5像素(px)、边框样式为固体(solid)，代码如下:<style> .thin-red-border { border-color: red...
2018-04-28 11:32:21
577
原创 设置图片尺寸
Size your ImagesCSS包含一个控制元素宽度的width属性。像控制字体一样，我们使用px（像素）来指定图片的宽度。例如，如果我们想要创建一个名为larger-image的类选择器，把HTML元素的宽度设定为500像素，我们使用：<style> .larger-image { width: 500px; }</style>任务：创建一个名为small...
2018-04-28 11:32:15
806
原创 添加图片
Add Images to your Website使用img元素来为你的网站添加图片，使用src属性指向一个图片的具体地址。举例如下：<img src="https://www.your-image-source.com/your-image.jpg">注意：img元素是自关闭元素，不需要结束标记。用以下图片来测试：/images/relaxing-cat.jpg...
2018-04-28 11:32:05
442
原创 指定字体如何降级
有几种默认的字体是所有浏览器都可用的，包括Monospace、Serif和Sans-Serif。当某种字体不可用时，你可以让浏览器自动降级到另一种字体。例如，如果你想让段落的字体为Helvetica，但你同时想在Helvetica字体不可用时自动降级使用Sans-Serif字体，你可以使用如下CSS样式：p { font-family: Helvetica, Sans-Serif;}现在注释掉l...
2018-04-27 11:32:01
438
原创 导入谷歌字体
现在，让我们来导入谷歌字体。首先，你需要用link标签来引入谷歌Lobster字体。复制下面的代码片断并将其粘贴到你的代码编辑器的顶部：<link href="https://fonts.gdgdocs.org/css?family=Lobster" rel="stylesheet" type="text/css">现在你可以将Lobster作为 font-family属性 的值应用到...
2018-04-27 11:27:23
1344
原创 设置字体
Set the Font Family of an Element用font-family属性来设置元素的字体。如果你想把副标题的字体设置为Sans-serif，你可以使用下面的CSS：h2 { font-family: Sans-serif;}任务：让所有的p元素都使用Monospace字体。...
2018-04-27 11:00:12
534
原创 设置字号
Change the Font Size of an Element字号是由样式属性font-size来控制的, 如下：h1 { font-size: 30px;}用下面的文本来创建第二个p元素：养动物有的时候，就是介于爱与恨之间，当你钦羡别人萌宠这么可爱的时候，你一定没有想过，狗狗和猫猫会到处拉屎，甚至会屯老鼠，啃鞋子，用爪子爬门，你不理它，它就挠你，你要对它发脾气，它会比你更来劲。所以，狗猫...
2018-04-27 10:53:21
461
转载 CSS 类选择器应用到多元素中
Style Multiple Elements with a CSS Class你可以在 HTML 元素的开始标记中通过使用class="your-class-here"来将 class 附加到相关元素中。CSS 类选择器必须添加.为前缀，如下：.blue-text { color: blue;}但在HTML中class属性的值不需要添加.为前缀，如下：<h2 class="blue-te...
2018-04-27 10:45:25
330
转载 类选择器
Use a CSS Class to Style an Element上节课我们学习了元素选择器，这节课我们学习类选择器。我们先声明一个类选择器：<style> .blue-text { color: blue; }</style>上面的代码在 <style> 标记中声明了一个叫做 blue-text 的类样式。然后在h2元素上应用我们声明的类选择器：...
2018-04-27 10:39:33
750
转载 对Style元素使用CSS元素选择器
Use CSS Selectors to Style Elements样式的属性多达几千个，但别担心，按照80-20原则，常用的也就几十个，你完全可以掌握它。当你键入<h2 style="color: red">CatPhotoApp</h2>，你就给h2元素添加了inline style(内联样式)。内联样式是为元素添加样式的最简单有效的方式，但是更易于维护的方式是使用层...
2018-04-27 10:33:28
3852
转载 修改文本颜色
Change the Color of Text现在让我们来改变某些文本的颜色。我们可以通过修改h2元素的style(样式)来达到目的。样式的属性有很多，其中color用来指定颜色。以下是将你的h2元素的文本颜色设置为蓝色的示例代码：<h2 style="color: blue">CatPhotoApp</h2>任务：修改你的h2元素的style，让文本的颜色变为红色。...
2018-04-27 10:23:57
1219
转载 删除HTML元素
Delete HTML Elements手机的屏幕空间是有限的。让我们删除不必要的元素，开始设计我们的CatPhotoApp。任务：删除你的h1元素以简化视图。
2018-04-27 10:20:00
414
原创 占位符填补空白
Fill in the Blank with Placeholder TextWeb开发者通常用lorem ipsum text来做占位符，占位符就是占着位置的一些文字，没有实际意义。为什么叫lorem ipsum text呢?是因为lorem ipsum是古罗马西塞罗谚语的前两个单词。从公元16世纪开始lorem ipsum text就被当做占位符了，这种传统延续到了互联网时代。于此同时，孙悟空...
2018-04-27 10:16:37
1021
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人