简单主页搭建

最新推荐文章于 2022-04-21 09:17:28 发布

Anwhere_jin

最新推荐文章于 2022-04-21 09:17:28 发布

阅读量539

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/Anwhere_jin/article/details/51794266

版权

web 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

简答主页的来源于作业的要求的一小部分

包括如下文件

• index.html, the first of two web pages (with an optional CSS style sheet file)
• pie.html, the second of two web pages
• recipe.css, the style sheet for pie.html

作业的要求

估计就是要先写一个前页，作为主界面，主界面里面提供可供选择的各个其他的网页，可以通过链接跳转到其中
所以任务1：完成index.html和style.css
任务2：完成pie.html和recipe.css

———————————任务一———————————
———————————任务二———————————

要求：

• 外观和行为细节：

所有页面上的标题应该使用

1.前景颜色（红色为164，绿色为164，蓝色= 0）或# A4A400
和背景颜色（红色为240，绿色为240，蓝色= 240）或# f0f0f0。

2.标0题的字体
Century Gothic，Futura，Verdana，或可在系统使用的无衬线字体。

3.页面的主标题
对齐到页面主体的中心，并采用22pt加粗字体。其他网页上的标题是左对齐的，18pt正常字体。所有标题都应下划线。

4.整体页面的身体
有一个白色的背景。

5.正文
应该有前景颜色（红色为64，绿色为64，蓝色= 64）或# 404040 ，使用11pt字体。对于网页文本的字体家族是Georgia，Garamond字体，或任何可用系统的字体。

6.网页上的任何链接
应该使用的颜色（红色为164，绿色为164，蓝色= 0）或# a4a400，匹配的页面标题的颜色。

7.Derection中的四个步骤
名称都要字体加粗。

8.用户的报价
斜体italic字体与出现在背景颜色块中（红色= 255 = 255，绿色，蓝色= 200）或# ffffc8。

9.馅饼的网页上的图片和底部的W3C验证器图片来自于以下的图像文件，分别：
http://courses.cs.washington.edu/courses/cse190m/09sp/homework/1/pie.jpg
http://www.w3.org/icons/valid-xhtml11
http://jigsaw.w3.org/css-validator/images/vcss
W3C验证器的图像应该是图像的链接来实现的，它将导航到以下网址，点击后分别：
http://validator.w3.org/check/referer
http://jigsaw.w3.org/css-validator/check/referer

10.页面的底部有两个链接。
“Home”的链接可以链接到您的index.html页面。使用相对URL，并假设它是位于同一个网站在同一目录pie.html。“Search for other lemon meringue pie recipes”的文字，应该链接到下面的网页
https://www.google.com.hk/search?q=lemon+meringue+pie+recipe.

11.网页的标题文本是Grandma’s Lemon Meringue Pie .

• 额外的功能：

1.Background背景：设置整体页面使用silverware.jpg背景图像（使用绝对URL链接的所有图片）。图像应在两个方向上横跨页面的重复和不动时，滚动页。

2.Favicon图标：设置页面有一个“收藏夹”图标（“图标”）的pie_icon.gif（使用绝对URL链接的所有图片）。该图标将不在Internet Explorer中正确地工作；你可以忽略这个。

3.Pie bullet派子弹：设置页上的所有项目符号列表使用图像的子弹图标而不是正常的黑圈。使用pie_icon.gif图像（使用绝对URL链接的所有图片）。

4.Wide headings大标题：拓宽网页上的所有标题设置水平间距0.2em在相邻的字母之间的所有标题。

5.Borderless image links无边界的图像链接：在页面底部，摆脱在W3C图像的黄色边框。

6.other其他：你有一个额外的功能，你想添加到你的页面，是不是在这里列出？在课程留言板上问我们，我们会让你知道，如果它是好的，以取代上面的一个。

在你的HTML文件的顶部，把评论说你已经完成了它的额外功能。
尽可能的，你应该修改你的CSS代码，而不是HTML实现这些变化。一些必要的CSS属性将不会被包括在课堂上，所以你必须学会自己。尝试使用参考书，谷歌，或看一个CSS属性参考如下网站：
http://www.w3school.com.cn/css/css_reference.asp