Assignment 3-CSS
Instructions
Assignment 3: CSS
In this assignment, you are to use CSS to style your assignments home page—from the [Unix assignment] —and original pages about you—from the [HTML assignment] .
Instructions
指令
Using a plain text editor, write CSS code for the web pages you've created for the first two assignments.
使用纯文本编辑器,为你为前两次作业创建的网页编写CSS代码。
Here is a list of required elements to include for the [assignments home page] .
下面是[作业主页]需要包含的元素列表。
- Create an internal style sheet (within the
section of the document) with at least two different CSS rule sets(consisting of a selector and declaration block) for your assignments home page.
为你的作业主页创建一个内部样式表(在文档的“部分”内),包含至少两个不同的 CSS 规则集(由 选择器 和 声明块 组成)。
- Your assignments home page should also include two or more different inline style rules—as
style
attributes of HTML elements.
你的作业主页还应该包括两个或更多不同的内联样式规则——作为 HTML 元素的“样式”属性。
Here is a list of required elements to include for the [website about you] .
以下是[关于你的网站]需要包含的元素列表。
- Create one external style sheet (.css document) with at least six different CSS rule sets and link it to all of your original HTML pages, about you.
创建一个外部样式表(. CSS文档),包含至少六个不同的CSS规则集,并将其链接到所有关于你的原始HTML页面。
- Your style rules should specify font family and font size for paragraph and heading text, and link states including
link
,visited
,hover
, andactive
.
你的样式规则应该指定段落和标题文本的字体族和字体大小,以及链接状态,包括' link ', ' visited ', ' hover '和' active '。
- You should specify a background image and/or background color for your pages and style some other aspect of the CSS box model, such as
border
,margin
, orpadding
.
你应该为你的页面指定一个背景图片和/或背景颜色,并样式化CSS框模型的一些其他方面,如' border ', ' margin '或' padding '。
- Create two or more
class
attributes somewhere in your HTML that are targeted and styled with CSS.
在HTML中创建两个或更多的“类”属性,这些属性是有针对性的,并使用CSS进行样式化。
- Create an
id
attribute somewhere in your HTML that is targeted and styled with CSS.
在你的HTML中创建一个“id”属性,它是有目标的,用CSS进行样式化。
Beyond these requirements, feel free to include additional CSS to design your pages as you like. Remember to test your pages locally in the web browser as you proceed.
除了这些要求之外,您还可以随意添加额外的CSS来设计您的页面。当您继续进行时,记得在web浏览器中本地测试您的页面。
Publishing Your Site
Upload your files (including the HTML, CSS, and image files) to the i6 Unix server with an FTP client. Test your files again in the web browser once they are live on the server to make sure they are accessible.
通过FTP客户端将文件(包括HTML、CSS和图像文件)上传到i6 Unix服务器。一旦文件在服务器上运行,就在浏览器中再次测试它们,以确保它们是可访问的。
Finally, create a link from the "CSS" line of your assignments directory to the home page of your newly styled website. Note: These can be the same websites (and links) you submitted for the Unix and HTML assignments, with CSS added.
最后,从作业目录的“CSS”行创建一个链接到新样式网站的主页。注意:这些可以是你为Unix和HTML作业提交的相同的网站(和链接),添加了CSS。
Submitting Your Assignment
提交作业
Submit the following via Bright Space.
通过Bright Space提交以下内容。
- The URL to your website on i6
你在i6上的网址
- A compressed archive containing all the files (HTML, CSS, and images) of your web pages
包含网页所有文件(HTML, CSS和图像)的压缩存档
Please note that you are required to submit files along with the URL in order to receive credit for your work.
请注意,您需要提交文件连同URL,以便为您的工作获得学分。
Grading
分级
This assignment is worth 10 points.
这个作业值10分。
- The assignments home page should include an internal style sheet—within the
section of the document—with at least two different CSS rule sets. (1 point)
作业主页应该包括一个内部样式表——在文档的“部分”中——至少包含两个不同的CSS规则集。(1分)
- The assignments home page should include two or more different inline style rules—as
style
attributes of HTML elements. (1 point)
作业主页应该包括两个或两个以上不同的内联样式规则——作为HTML元素的“样式”属性。(1分)
- One external style sheet (.css document) with at least six different CSS rule sets, linked to all of the studentʼs "about me" pages from the HTML assignment. (3 points)
一个外部样式表(. CSS文档),包含至少6个不同的CSS规则集,链接到HTML作业中所有学生的“关于我”页面。(3分)
- Style rules should specify font family and font size for paragraph and heading text, and link states:
link
,visited
,hover
, andactive
. (1 point)
样式规则应该指定段落和标题文本的字体族和字体大小,以及链接状态:' link '、' visited '、' hover '和' active '。(1分)
- A background image and/or background color should be specified for the pages. Some other aspect of the CSS box model, such as
border
,margin
, orpadding
, should also be styled. (1 point)
应该为页面指定背景图像和/或背景颜色。CSS框模型的一些其他方面,如' border '、' margin '或' padding ',也应该设置样式。(1分)
- Two or more HTML
class
attributes, targeted and styled with CSS (1 point)
两个或两个以上的HTML“类”属性,有针对性并使用CSS样式(1分)
- An HTML
id
attribute, targeted and styled with CSS (1 point)
一个HTML ' id '属性,目标明确,使用CSS样式(1分)
- A link from your CSS Assignment bag to your assignments home page (1 point)
一个从CSS作业包到作业主页的链接(1分)
Points may be deducted for improperly formed HTML or CSS.
*格式不正确的HTML或CSS可能被扣分
Start Date
Sep 22, 2022 7:03 AM
Due Date
Oct 6, 2022 8:00 AM
Submit Assignment
- Files to submit
- (0) file(s) to submit After uploading, you must click Submit to complete the submission.
上传文件后,您必须单击“提交”完成提交。
答案:
index.html
1. 设置背景图
style.css
/* This is my external stylesheet */
body {
background-image: url("/static/img/bg/background.jpg");
font-family: 'Open Sans', sans-serif;
}
Index.html
<link rel="stylesheet" type="text/css" href="static/css/style.css">
Style.css
/* This is my external stylesheet */
body {
background-image: url("/img/background.jpg");
font-family: 'Open Sans', sans-serif;
}
#whiteBox {
background-color: rgba(255,255,255,.85);
border: 5px solid blue;
width:85%;
margin:auto;
padding:60px;
}
h1 {
font-family: 'Bungee Spice', cursive;
font-size:80px;
text-align:center;
background-color:blue;
padding:15px;
}
h2 {
font-family: 'Bungee Spice', cursive;
font-size:50px;
text-align:center;
}
section img {
width:100%;
}
header img {
height:250px;
width: 250px;
display:block;
margin:auto;
}
/* nav */
nav {
text-align:center;
}
nav ul li {
display:inline;
}
nav ul li a {
background-color:blue;
border:3px solid red;
padding:15px 50px 15px 50px;
margin:25px;
font-family: 'Bungee Spice', cursive;
font-size:35px;
text-decoration:none;
}
nav ul li a:hover {
background-color:white;
border:3px solid blue;
}
内链「选用」
<style>
h2 {
font-family: 'Bungee Spice', cursive;
font-size: 50px;
text-align: center;
}
nav {
text-align: center;
}
nav ol li {
display: inline;
}
nav ol li a {
background-color: gray;
border: 3px solid red;
padding: 15px 50px 15px 50px;
margin: 25px;
font-family: 'Bungee Spice', cursive;
font-size: 35px;
/*text-decoration: none;*/
}
/*hover 悬停*/
nav ol li a:hover {
background-color: white;
border: 3px solid blue;
}
</style>
字体
下载
欢迎关注我公众号:AI悦创,有更多更好玩的等你发现!
公众号:AI悦创【二维码】
AI悦创·编程一对一
AI悦创·推出辅导班啦,包括「Python 语言辅导班、C++ 辅导班、java 辅导班、算法/数据结构辅导班、少儿编程、pygame 游戏开发」,全部都是一对一教学:一对一辅导 + 一对一答疑 + 布置作业 + 项目实践等。当然,还有线下线上摄影课程、Photoshop、Premiere 一对一教学、QQ、微信在线,随时响应!微信:Jiabcdefh
C++ 信息奥赛题解,长期更新!长期招收一对一中小学信息奥赛集训,莆田、厦门地区有机会线下上门,其他地区线上。微信:Jiabcdefh
方法一:QQ
方法二:微信:Jiabcdefh
- 0
- 0
- 0
- 0
- 0
- 0