FreeCodeCamp学习笔记（1）

22.Size your Images 改变宽度

改变宽度

<style>

  .larger-image {

    width: 500px;

  }

</style>

 

23.Add Borders Around your Elements
改变边框

如果我们想要让一个HTML元素的边框颜色为红色、边框宽度为5像素(px)、边框样式为固体(solid)，代码如下:

<style>

  .thin-red-border {

    border-color: red;

    border-width: 5px;

    border-style: solid;

  }

</style>

提示：你可以应用多个class到一个元素，只需要在多个class之间用空格分开即可。例如：

<img class="class1 class2">

 

24.Add Rounded Corners with a Border Radius
四角圆

border-radius(边框半径)

 

25.Make Circular Images with a Border Radius
圆形边框

border-radius：50%圆形边框

 

26.Link to External Pages with Anchor Elements 创建链接

创建一个链接到http://freecatphotoapp.com的a元素，并用cat photos作为其anchor
text（锚点文本）。

<a href="http://freecatphotoapp.com">cat photos</a>

 

27.Nest an Anchor Element within a Paragraph
链接嵌套进p中

任务：把你的a元素嵌套进一个新的p元素（紧邻已有的h2元素之后），让段落的文本为View
more cat photos，但是其中仅cat photos是一个链接，其余的是普通文本。

<p> View more <a href="http://www.freecatphotoapp.com">cat photos</a>.</p>

 

28.Make Dead Links using the Hash Symbol
固定链接

把你的a元素的href属性的值替换为一个#，别名hash(哈希)符号，将其变为一个固定链接

 

29.Turn an Image into a Link 嵌套进a元素

把你的图片嵌套进a元素。举例如下：

<a href="#"><img src="/images/relaxing-cat.jpg"></a>

 

30.Add Alt Text to an Image for Accessibility
图片的alt属性

alt属性，也被称为alt text,是当图片无法加载时显示的替代文本。alt属性对于盲人或视觉损伤的用户理解一幅图片中所描绘的内容非常重要，搜索引擎也会搜索alt属性。

简而言之，每一张图片都应该有一个alt属性！

你可以像下面例子中一样为img元素添加一个alt属性：

<img src="www.your-image-source.com/your-image.jpg" alt="your alt text">

 

31.Create a Bulleted Unordered List无序列表

无序列表

<ul>

  <li>milk</li>

  <li>cheese</li>

</ul>

 

32.Create an Ordered List创建有序列表

有序列表

<ol>

  <li>Garfield</li>

  <li>Sylvester</li>

</ol>

 

33.Create a Text Fieldc创建表单

<input type="text">