35、Web开发技术实践与HTML元素解析

Web开发技术实践与HTML元素解析

1. 前端样式与脚本练习

1.1 创建带样式的目录表

在这个练习中，要创建一个位于长文档顶部的有序列表形式的链接目录，并将其链接到文档主要部分的标题。对于提供的 exercise1.html 文件，需要编写样式表实现以下效果：
- 将 #contents <div> 元素的边角设置为12像素的圆角。
- 使 #contents 元素的背景颜色透明度为70%，文字保持黑色。
- 将字体更改为Inconsolata，可通过http://www.fontsquirrel.com/fonts/Inconsolata获取。

以下是实现该效果的CSS代码：

@font-face {
    font-family: 'InconsolataMedium';
    src: url('fonts/Inconsolata-webfont.eot');
    src: url('fonts/Inconsolata-webfont.eot?#iefix') 
    format('embedded-opentype'),
         url('fonts/Inconsolata-webfont.woff') format('woff'),
         url('fonts/Inconsolata-webfont.ttf') format('truetype'),
         url('fonts/In