我的freeCodeCamp之旅---Day01

2018-12-27  本文已影响8人  TAsama

1. Say Hello to HTML

<h1>：一级标题
<h1>：开始标签，</h1>：结束标签

2. Headline with the h2 Element

<h2>：副标题

3. Inform with the Paragraph Element

p 表示段落

4. Uncomment HTML

注释，使用

<!--注释-->

5. Comment out HTML

同样的注释练习

6. Fill in the Blank with Placeholder Text

lorem ipsum text 的意思。
就是一些用来验证排版的占位文字，没有实际意义。

6. Delete HTML Elements

删除元素，删除h1

7. Change the Color of Text

改变文字的颜色，使用style（样式）来达到目的

<h2 style="color: red">我家的猫咪</h2>

8. Use CSS Selectors to Style Elements

上面使用样式的方法叫内联样式，内联样式是最简单的有效方式。但是为了易于维护，我们使用层叠样式表CSS
在代码的最顶端创建一个style元素

<style>
  </style>

如果你想为所有的h2元素为红色，你可以创建一个元素选择器，像这样：

<style>
  选择器 {属性名称：属性值;}
  h2 {color : red;}
</style>

注意要加分号表示结束。

9. Use a CSS Class to Style an Element

类选择器
声明一个类选择器：

<style>
  .blue-text {
    color: blue;
  }
</style>

在上面代码中，我们声明标记了一个叫做blue-text的类样式。
然后我们在h2元素上应用我们声明的类选择器：

<h2 class="blue-text">CatPhotoApp</h2>

注意：CSS中，类选择器应该添加.为前缀。而在HTML中，class属性不能添加.为前缀。如果在CSS中不添加.为前缀，CSS会误认为其是一个元素选择器。

10. Style Multiple Elements with a CSS Class

给多个元素添加类标签

11. Change the Font Size of an Element

在CSS中，通过font-size来控制字号样式

h1 {
  font-size: 30px;
}

12. Set the Font Family of an Element

在CSS中用font-family属性来设置元素的字体。

h2 {
  font-family: Sans-serif;
}

13. Import a Google Font

通过link标签导入谷歌字体

<link href="https://fonts.gdgdocs.org/css?family=Lobster" rel="stylesheet" type="text/css">

之后就可以使用新的字体了。

14. Specify How Fonts Should Degrade

当某种字体不可用时，你可以让浏览器自动降级到另一种字体。
比如，当Helvetica字体不可用时，将其降级为Sans-Serif

p {
  font-family: Helvetica, Sans-Serif;
}

15. Add Images to your Website

使用img元素来为你的网站添加图片，使用src属性指向一个图片的具体地址。
如下：

<img src="https://www.your-image-source.com/your-image.jpg">

img是自关闭元素，所以不需要结束标记。

16. Size your Images

CSS包含控制元素宽度的width属性，和控制字体一样，我们使用px（像素）来指定图片的宽度。
例如，我们创建一个larger-image的类选择器，设定其宽度为500像素：

<style>
  .larger-image {
    width: 500px;
  }
</style>

17. Add Borders Around your Elements

设置边框属性，CSS可以设置边框的颜色(color)、宽度(width)、高度(height)等

<style>
  .thin-red-border {
    border-color:red;
    border-width: 5px;
    border-style: solid;
  }
</style>

一个元素多个类选择器使用空格分开。

18. Add Rounded Corners with a Border Radius

通过设置border-radius设置边框圆角。

<style>
  .thin-red-border {
    border-color:red;
    border-width: 5px;
    border-style: solid;  
    border-radius: 10px;
  }
</style>

19. Make Circular Images with a Border Radius

除了设置px值，还可以通过设置百分比来设置边框圆角半径。

<style>
  .thin-red-border {
    border-color:red;
    border-width: 5px;
    border-style: solid;  
    border-radius: 50%;
  }
</style>

20. Link to External Pages with Anchor Elements

a 元素，也叫锚点元素，可以实现外链或者内链跳转的功能

<p>Here's a <a href="http://freecodecamp.cn"> link to FreeCodeCamp中文社区 </a> for you to follow.</p>

21. Nest an Anchor Element within a Paragraph

嵌套a标签

22. Make Dead Links using the Hash Symbol

有时你想为你的网站添加一个a元素，但此时你还不知道要将它们链接到哪儿，此时可以使用固定链接。
把你的a元素的href属性的值替换为一个#，别名hash(哈希)符号，将其变为一个固定链接。

<p>Click here for <a href="#">cat photos</a>.</p>

23. Turn an Image into a Link

将图片嵌套进a标签中

<a href="#"><img class="smaller-image thick-green-border" src="/images/relaxing-cat.jpg"></a>

24. Add Alt Text to an Image for Accessibility

alt属性，也被称为alt text, 是当图片无法加载时显示的替代文本。

<img alt="A cute orange cat lying on its back" src="/images/relaxing-cat.jpg">

25. Create a Bulleted Unordered List

HTML有一个特殊元素，用于创建unordered lists（无序列表）, 或带项目符号的列表。
无序列表以<ul>元素开始，并包含一个或多个<li>元素。

<ul>
  <li>milk</li>
  <li>cheese</li>
</ul>

26. Create an Ordered List

创建有序列表:

<ol>
  <li>Garfield</li>
  <li>Sylvester</li>
</ol>

27. Create a Text Field

输入文本框：

<input type="text">

input也是自关闭的。

28. Add Placeholder Text to a Text Field

为文本框添加占位符。

<input type="text" placeholder="我是占位符">

29. Create a Form Element

添加表单提交action

<form action="/url-where-you-want-to-submit-form-data"></form>

30. Add a Submit Button to a Form

添加提交按钮:

<button type="submit">this button submits the form</button>

31. Use HTML5 to Require a Field

为表单中的选项添加必选类型，这样在提交的时候如果必须类型为空则无法提交表单。

<input type="text" required>

注意，required在Safari中不起作用。

32. Create a Set of Radio Buttons

创建单选按钮：
单选按钮是input的一种类型，每一个单选按钮都应该嵌套在他自己的label标签中，所有关联的单选按钮应该使用相同的“name”属性

<label><input type="radio" name="indoor-outdoor">Indoor</label>

33. Create a Set of Checkboxes

创建复选按钮，复选按钮的类型是checkbox

<label><input type="checkbox" name="personality">1</label>

34. Check Radio Buttons and Checkboxes by Default

使用“ checked”属性，时单选或多选框默认选中：

<label><input type="radio" name="radio-btn" checked></label>

34. Nest Many Elements within a Single Div Element

使用div元素，承装所有其他元素，这样可以利用CSS的继承关系，把div上的CSS传递给其他所有子元素

35. Give a Background Color to a Div Element

设置背景颜色

.green-background {
  background-color: green;
}

36. Set the ID of an Element

除了class外，每个元素还可以使用id属性，id属性应该是唯一的。

37. Use an ID Attribute to Style an Element

和类选择器一样，CSS可以使用ID选择器：

#cat-photo-element {
  background-color: green;
}

ID选择器使用“#”开头。

38. Adjusting the Padding of an Element

通过padding（内边距）margin（外边距）border（边框）来使用布局。
padding控制元素内容content和边框border之间的距离。

39. Adjust the Margin of an Element

元素的外边距 margin 控制元素边框 border 和元素实际所占空间的距离。

40. Add a Negative Margin to an Element

元素的 margin 控制元素的 border 和元素实际所占空间的距离。
如果你将一个元素的 margin 设置为负值，元素将会变大。

41. Add Different Padding to Each Side of an Element

CSS 允许你使用 padding-top、padding-right、padding-bottom 和 padding-left来控制元素上右下左四个方向的 padding。

42. Add Different Margins to Each Side of an Element

CSS 允许你使用 margin-top、margin-right、margin-bottom 和 margin-left 来控制元素上右下左四个方向的 margin。

43. Use Clockwise Notation to Specify the Padding of an Elemen

除了分别指定元素的 padding-top、padding-right、padding-bottom 和 padding-left 属性外，你还可以集中起来指定它们，举例如下：

padding: 10px 20px 10px 20px;

这四个值以顺时针方式排列：顶部、右侧、底部、左侧，简称：上右下左。

44. Use Clockwise Notation to Specify the Margin of an Element

除了分别指定元素的 margin-top、margin-right、margin-bottom 和 margin-left 属性外，你还可以集中起来指定它们，举例如下：

margin: 10px 20px 10px 20px;

这四个值以顺时针方式排列：顶部、右侧、底部、左侧，简称：上右下左。

45. Style the HTML Body Element

每一个 HTML 页面都有一个 body 元素。
通过将其 background-color 设置为黑色，我们可以证明 body 元素的存在。

body {
  background-color: black;
}

46. Inherit Styles from the Body Element

你可以像对其他 HTML 元素一样对你的 body 元素应用样式，并且所有其他元素将继承你的 body 元素的样式。

47. Prioritize One Style Over Another

  1. 在 <style> 部分中 class 声明的顺序却非常重要，第二个声明总是比第一个具有优先权。
  2. 无论在 style 元素 CSS 的哪个位置进行声明，id 声明都会覆盖 class 声明。
  3. 行内样式将覆盖style 中定义的所有 CSS。

48. Override All Other Styles by using Important

很多情况下，你会使用 CSS 库，这些库可能会意外覆盖掉你自己的 CSS。所以当你需要确保某元素具有指定的 CSS 时，你可以使用 !important。

.pink-text {
    color: pink !important;
  }

这样你的样式就不会被覆盖掉了。

49. Use Hex Code for Specific Colors

使用16进制表示颜色。

<style>
  body {
    background-color: #000000;
  }
</style>

50. Use RGB values to Color Elements

使用RGB表示颜色：

<style>
  body {
    background-color: rgb(255, 255, 255);
  }
</style>

51. Use Responsive Design with Bootstrap Fluid Containers

Bootstrap将会根据你的屏幕的大小来调整HTML元素的大小 —— 强调 响应式设计的概念。
通过响应式设计，你无需再为你的网站设计一个手机版的。它在任何尺寸的屏幕上看起来都会不错。
你仅需要通过添加下列代码到你的HTML开头来将Bootstrap添加到任意应用中：

<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css"/>

然后确定div为container-fluid类型

<div class="container-fluid">

52. Make Images Mobile Responsive

通过Bootstrap，我们要做的只是给图片添加 img-responsive class属性。这样图片的宽度就能完美地适配你的页面的宽度了。

53. Center Text with Bootstrap

使用text-center class属性使文字居中。

<h2 class="red-text text-center">CatPhotoApp</h2>

54. Create a Bootstrap Button

Bootstrap的按钮样式：

<button class="btn">Like</button>

55. Create a Block Element Bootstrap Button

使按钮成为块级元素：

<button class="btn-block">Like</button>

56. Taste the Bootstrap Button Color Rainbow

给按钮添加主要颜色：

<button class="btn-primary">Like</button>

57. Call out Optional Actions with Button Info

Bootstrap自带了一些预定义的按钮颜色。浅蓝色 btn-info 被用在那些用户可能会采取的操作上。

<button class="btn-info">Info</button>

58. Warn your Users of a Dangerous Action

Bootstrap自带了一些预定义的按钮颜色。红色btn-danger被用来提醒用户该操作具有“破坏性”，例如删除一张猫的图片。

<button class="btn-danger">Delete</button>

59. Use the Bootstrap Grid to Put Elements Side By Side

Bootstrap 使用一种响应式网格布局——可轻松实现将多个元素放入一行并指定各个元素的相对宽度的需求。Bootstrap 中大多数的class属性都可以设置于 div 元素中。


Bootstraps的12列网格布局是怎样起作用的

请注意，在这张图表中，class属性 col-md-* 正被使用。在这里，md 表示 medium (中等的)，* 代表一个数字，它指定了这个元素所占的列宽。通过此图表的属性设置可知，在中等大小的屏幕上(例如笔记本电脑)，元素的列宽被指定了。
在我们创建的 Cat Photo App 中，将会使用 col-xs-* ，其中 xs 是 extra small 缩写（应用于较小的屏幕，比如手机屏幕），* 是你需要填写的数字，代表在一行中,各个元素应该占的列宽。

<div class="row">
    <div class="col-xs-4">
      <button class="btn btn-block btn-primary">Like</button>
    </div>
    <div class="col-xs-4">
      <button class="btn btn-block btn-info">Info</button>
    </div>
    <div class="col-xs-4">
      <button class="btn btn-block btn-danger">Delete</button>
    </div>
  </div>

当div被设置class为row时，多个元素就可以并排放入一行了。

60. Ditch Custom CSS for Bootstrap

"text-primary"设置主标题
“img-responsive”设置图片自适应

<h2 class="text-primary text-center">CatPhotoApp</h2>

  <a href="#"><img class="img-responsive thick-green-border" src="/images/relaxing-cat.jpg"></a>

61. Use Spans for Inline Elements

通过使用 span 元素，你可以把几个元素放在一起。你甚至可以用此为一个元素的不同部分指定样式。

<p>Things cats <span class="text-danger">love:</span></p>

62. Add Font Awesome Icons to our Buttons

Font Awesome 是一个非常方便的图标库。这些图标都是矢量图形，被保存在 .svg 的文件格式中。这些图标就和字体一样，你可以通过像素单位指定它们的大小，它们将会继承其父HTML元素的字体大小。

<link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css"/>

i 元素起初一般是让其它元素有斜体(italic)的功能，不过现在一般用来指代图标。你可以将 Font Awesome 中的 class 属性添加到 i 元素中，把它变成一个图标，比如：

<i class="fa fa-thumbs-up"></i>
<i class="fa fa-info-circle"></i>
<i class="fa fa-trash"></i>

63. Responsively Style Radio Buttons

你还可以将 Bootstrap 的 col-xs-*用在 form 元素中。这样的话，我们的单选按钮就可以均匀地在页面上展开，不需要知道屏幕的分辨率有多宽。

64. Style Text Inputs as Form Controls

你可以在你的 button 提交按钮上添加 Font Awesome的 fa-paper-plane 图标，方法是在元素中增加 <i class="fa fa-paper-plane"></i> 。

上一篇 下一篇

猜你喜欢

热点阅读