我一直在努力完成這個作業。我已經完成了大部分,但我的DJ4E標志卡住了。如果你使用下面的鏈接,你會看到它應該是什么樣子。
我堅持的細節:
如何從DJ4E文本中刪除紫色(這是一個鏈接)所以現在紫色的鏈接已經被訪問過了。 DJ4E應該就在盒子上面(見圖片鏈接) 這是作業的鏈接:https://www.dj4e.com/assn/css/index.php
HTML代碼(無意更改):
<!DOCTYPE html>
<html>
<head>
<title>Blocks</title>
<!-- Do not change this file - add your CSS styling
rules to the blocks.css file included below -->
<link type="text/css" rel="stylesheet" href="blocks.css">
</head>
<body>
<div id="one">
Turns out you have a really fun time if you
go to work every day and focus on being
silly and funny and happy! - Hannah Murray
</div>
<div id="two">
All you need in this life is ignorance and confidence,
and then success is sure. - Mark Twain
</div>
<div id="three">
Well, if crime fighters fight crime and fire fighters
fight fire, what do freedom fighters fight? They never
mention that part to us, do they? - George Carlin
</div>
<div id="four">
Great minds discuss ideas; average minds discuss events;
small minds discuss people. - Eleanor Roosevelt
</div>
<p id="link">
<a href="https://www.dj4e.com/" target="_blank">
DJ4E
</a>
</p>
</body>
</html>
我開發的可以編輯的CSS代碼:
#one {
/*correct*/
position: fixed;
width: 25%;
bottom: 5px;
right: 5px;
padding: 5px;
margin: 5px;
border: 5px solid blue;
}
#two {
/*correct*/
position: fixed;
width: 25%;
top: 5px;
right: 5px;
padding: 5px;
margin: 5px;
border: 5px solid green;
}
#three {
/*correct*/
position: fixed;
width: 25%;
top: 5px;
left: 5px;
padding: 5px;
margin: 5px;
border: 5px solid orange;
}
#four {
/*correct*/
position: fixed;
width: 25%;
bottom: 5px;
left: 5px;
padding: 5px;
margin: 5px;
border: 5px solid yellow;
}
#link {
position: absolute;
top: 0;
left: 50%;
font-size: 1.64rem;
background-color: #0A4B33;
box-sizing: border-box;
font-family: 'Roboto', Corbel, Avenir, 'Lucida Grande', 'Lucida Sans', sans-serif;
color: white;
height: 50px;
padding: 15px 15px;
line-height: 20px;
margin: -15 ;
text-decoration: none;
text-decoration-line: none;
text-decoration-thickness: initial;
text-decoration-style: initial;
text-decoration-color: initial;
}
我的進步如畫:
對于鏈接顏色,你真的想影響& lta & gt標簽而不是周圍的div,所以創建一個新的樣式鏈接:
#link a, #link a:visited {
color:white;
text-decoration:none;
}
同時使用a和a:visited,這樣第一次點擊鏈接時和點擊鏈接后顏色都是白色的。您可以從#link集合中刪除顏色樣式,因為它現在是多余的。
要使頂部的框低于鏈接,只需使它們的頂部值為50px而不是5,例如
#two {
/*correct*/
position: fixed;
width: 25%;
top: 50px;