Django for Everybody CSS Autograder作业卡在尝试制作复制页面上。

huangapple
go评论91阅读模式
英文:

Django for Everybody CSS Autograder assignment stuck on trying to make replica page

问题

I have been trying to complete this assignment. I have completed the majority of it but I am stuck of the DJ4E sign. If you use the link below you will see what it is meant to look like.

我一直在尝试完成这项任务。我已经完成了大部分工作，但我卡在了DJ4E标志上。如果您使用下面的链接，您将看到它应该是什么样子的。

Specifics I am stuck on:

  1. How to remove the purple from from DJ4E text ( it is a link ) so now purple since the link has been visited.
  2. DJ4E should be just above the boxes ( see link for pic)

我卡住的具体问题是：

  1. 如何去掉DJ4E文本中的紫色（它是一个链接），因为链接已被访问而变成了紫色。
  2. DJ4E应该位于方框的正上方（请参见图片链接）。

Here is the link to the assignment: https://www.dj4e.com/assn/css/index.php

这是任务的链接：https://www.dj4e.com/assn/css/index.php

HTML code (not meant to change):

HTML代码（不应更改）：

  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.   <title>Blocks</title>
  6.   <!-- Do not change this file - add your CSS styling
  7.        rules to the blocks.css file included below -->
  8.   <link type="text/css" rel="stylesheet" href="blocks.css">
  9. </head>
  11. <body>
  12. <div id="one">
  13. Turns out you have a really fun time if you
  14. go to work every day and focus on being
  15. silly and funny and happy! - Hannah Murray
  16. </div>
  18. <div id="two">
  19. All you need in this life is ignorance and confidence,
  20. and then success is sure. - Mark Twain
  21. </div>
  23. <div id="three">
  24. Well, if crime fighters fight crime and fire fighters
  25. fight fire, what do freedom fighters fight? They never
  26. mention that part to us, do they? - George Carlin
  27. </div>
  29. <div id="four">
  30. Great minds discuss ideas; average minds discuss events;
  31. small minds discuss people. - Eleanor Roosevelt
  32. </div>
  34. <p id="link">
  35. <a href="https://www.dj4e.com/" target="_blank">
  36. DJ4E
  37. </a>
  38. </p>
  39. </body>
  40. </html>

My CSS code that I have developed and can be edited:

我开发的可以编辑的CSS代码如下：

  1. #one {
  2. /*correct*/
  3.   position: fixed;
  4.   width: 25%;
  5.   bottom: 5px;
  6.   right: 5px;
  7.   padding: 5px;
  8.   margin: 5px;
  9.   border: 5px solid blue;
  10. }
  12. #two {
  13. /*correct*/
  14.   position: fixed;
  15.   width: 25%;
  16.   top: 5px;
  17.   right: 5px;
  18.   padding: 5px;
  19.   margin: 5px;
  20.   border: 5px solid green;
  21. }
  23. #three {
  24.     /*correct*/
  25.   position: fixed;
  26.   width: 25%;
  27.   top: 5px;
  28.   left: 5px;
  29.   padding: 5px;
  30.   margin: 5px;
  31.   border: 5px solid orange;
  32. }
  34. #four {
  35.     /*correct*/
  36.   position: fixed;
  37.   width: 25%;
  38.   bottom: 5px;
  39.   left: 5px;
  40.   padding: 5px;
  41.   margin: 5px;
  42.   border: 5px solid yellow;
  43. }
  45. #link {
  46.   position: absolute;
  47.   top: 0;
  48.   left: 50%;
  49.   font-size: 1.64rem;
  50.   background-color: #0A4B33;
  51.   box-sizing: border-box;
  52.   font-family: 'Roboto', Corbel, Avenir, 'Lucida Grande', 'Lucida Sans', sans-serif;
  53.   color: white;
  54.   height: 50px;
  55.   padding: 15px 15px;
  56.   line-height: 20px;
  57.   margin: -15 ;
  58.   text-decoration: none;
  59.   text-decoration-line: none;
  60.   text-decoration-thickness: initial;
  61.   text-decoration-style: initial;
  62.   text-decoration-color: initial;
  63. }

My progress as a picture:
Django for Everybody CSS Autograder作业卡在尝试制作复制页面上。

我的进度如下图片所示：Django for Everybody CSS Autograder作业卡在尝试制作复制页面上。

英文:

I have been trying to complete this assignment. I have completed the majority of it but I am stuck of the DJ4E sign. If you use the link below you will see what it is meant to look like.

Specifics I am stuck on:

  1. How to remove the purple from from DJ4E text ( it is a link ) so now purple since the link has been visited.
  2. DJ4E should be just above the boxes ( see link for pic)

Here is the link to the assignment: https://www.dj4e.com/assn/css/index.php

HTML code (not meant to change):

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html&gt;
  3. &lt;head&gt;
  4. &lt;title&gt;Blocks&lt;/title&gt;
  5. &lt;!-- Do not change this file - add your CSS styling
  6. rules to the blocks.css file included below --&gt;
  7. &lt;link type=&quot;text/css&quot; rel=&quot;stylesheet&quot; href=&quot;blocks.css&quot;&gt;
  8. &lt;/head&gt;
  9. &lt;body&gt;
  10. &lt;div id=&quot;one&quot;&gt;
  11. Turns out you have a really fun time if you
  12. go to work every day and focus on being
  13. silly and funny and happy! - Hannah Murray
  14. &lt;/div&gt;
  15. &lt;div id=&quot;two&quot;&gt;
  16. All you need in this life is ignorance and confidence,
  17. and then success is sure. - Mark Twain
  18. &lt;/div&gt;
  19. &lt;div id=&quot;three&quot;&gt;
  20. Well, if crime fighters fight crime and fire fighters
  21. fight fire, what do freedom fighters fight? They never
  22. mention that part to us, do they? - George Carlin
  23. &lt;/div&gt;
  24. &lt;div id=&quot;four&quot;&gt;
  25. Great minds discuss ideas; average minds discuss events;
  26. small minds discuss people. - Eleanor Roosevelt
  27. &lt;/div&gt;
  28. &lt;p id=&quot;link&quot;&gt;
  29. &lt;a href=&quot;https://www.dj4e.com/&quot; target=&quot;_blank&quot;&gt;
  30. DJ4E
  31. &lt;/a&gt;
  32. &lt;/p&gt;
  33. &lt;/body&gt;
  34. &lt;/html&gt;

My CSS code that I have developed and can be edited:

  2. #one {
  3. /*correct*/
  4. position: fixed;
  5. width: 25%;
  6. bottom: 5px;
  7. right: 5px;
  8. padding: 5px;
  9. margin: 5px;
  10. border: 5px solid blue;
  11. }
  12. #two {
  13. /*correct*/
  14. position: fixed;
  15. width: 25%;
  16. top: 5px;
  17. right: 5px;
  18. padding: 5px;
  19. margin: 5px;
  20. border: 5px solid green;
  21. }
  22. #three {
  23. /*correct*/
  24. position: fixed;
  25. width: 25%;
  26. top: 5px;
  27. left: 5px;
  28. padding: 5px;
  29. margin: 5px;
  30. border: 5px solid orange;
  31. }
  32. #four {
  33. /*correct*/
  34. position: fixed;
  35. width: 25%;
  36. bottom: 5px;
  37. left: 5px;
  38. padding: 5px;
  39. margin: 5px;
  40. border: 5px solid yellow;
  41. }
  42. #link {
  43. position: absolute;
  44. top: 0;
  45. left: 50%;
  46. font-size: 1.64rem;
  47. background-color: #0A4B33;
  48. box-sizing: border-box;
  49. font-family: &#39;Roboto&#39;, Corbel, Avenir, &#39;Lucida Grande&#39;, &#39;Lucida Sans&#39;, sans-serif;
  50. color: white;
  51. height: 50px;
  52. padding: 15px 15px;
  53. line-height: 20px;
  54. margin: -15 ;
  55. text-decoration: none;
  56. text-decoration-line: none;
  57. text-decoration-thickness: initial;
  58. text-decoration-style: initial;
  59. text-decoration-color: initial;
  60. }

My progress as a picture:
Django for Everybody CSS Autograder作业卡在尝试制作复制页面上。

答案1

得分: 1

对于链接颜色，你确实想要影响&lt;a&gt;标签而不是周围的div，所以创建一个新的样式链接：

  1. #link a, #link a:visited {
  2.    color:white;
  3.    text-decoration:none;
  4. }

同时使用a和a:visited，这样颜色在第一次点击链接后会变为白色。您可以从#link设置中删除颜色样式，因为它现在是多余的。

要将顶部框放置在链接以下位置，只需将它们的top值设置为50px，而不是5px，例如：

  1. #two {
  2.   /*正确*/
  3.   position: fixed;
  4.   width: 25%;
  5.   top: 50px;
  6. }
英文:

For the link colour, you are really wanting to affect the &lt;a&gt; tag rather than the surrounding div, so make a new style link:

  1. #link a, #link a:visited {
  2. color:white;
  3. text-decoration:none;
  4. }

Use both a and a:visited so the color is white the first time and after you have clicked the link. You can remove the color style from the #link set as it is now redundant.

To place the top boxes lower than the link, simply make their top values 50px rather than 5, eg

  1. #two {
  2. /*correct*/
  3. position: fixed;
  4. width: 25%;
  5. top: 50px;

huangapple
  • 本文由 发表于 2023年5月11日 01:22:10
  • 转载请务必保留本文链接：https://go.coder-hub.com/76221098.html
  • css
  • css-selectors
  • django
  • dom
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定