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">