適切な場所で背景色が得られない

-2

私はウェブサイトの設計と開発を初心者にも理解しています。初心者として私は古いBBCのニュースサイトであるサイトを作成しています。次のアーカイブリンクからhttp://web.archive.org/web/20140402131524/http://www.bbc.co.uk/news/uk 私は腕時計に叱られています/バックグラウンドカラーのオレンジはビデオの下にリンクしています。私のコード以下は適切な場所で背景色が得られない

body { 
 
    margin: 0; 
 
    line-height: 15px; 
 
} 
 
.watch { 
 
    position: relative; 
 
    top: 50px; 
 
    right: 50px; 
 
    color: #505050; 
 
    line-height: 24px; 
 
    background-color: #eeeeee; 
 
    float: right; 
 
    width: 336px; 
 
} 
 
#videoa { 
 
    float: left; 
 
    background-color: #d1700e; 
 
    position: relative; 
 
    top: -84px; 
 
    left: 25px; 
 
} 
 
#videoa a { 
 
    float: left; 
 
    color: white; 
 
    position: relative; 
 
    top: 2px; 
 
    left: 5px; 
 
} 
 
.watchhead { 
 
    font-size: 24px; 
 
    font-weight: bolder; 
 
    position: relative; 
 
    top: 10px; 
 
    left: 8px; 
 
} 
 
#WatchListenlogo { 
 
    float: right; 
 
    position: relative; 
 
    top: 22px; 
 
    right: 10px; 
 
} 
 
#rightarrow { 
 
    float: left; 
 
    border-right: solid white 1px; 
 
    position: relative; 
 
    top: 40px; 
 
} 
 
a { 
 
    text-decoration: none; 
 
} 
 
a:hover { 
 
    text-decoration: underline; 
 
}

<div class="watch"> 
 
    <img src="http://s9.tinypic.com/2hd45fp_th.jpg" id="WatchListenlogo" /> 
 
    <span class="watchhead">Watch/Listen</span> 
 
    <img src="http://s9.tinypic.com/35c03yr_th.jpg" id="rightarrow" /> 
 
    <div id="videoa"> 
 
    <img src="http://s9.tinypic.com/j64ufl_th.jpg" /> 
 
    <a href="">Titanic letter could fetch &pound; 100,000</a> 
 
    </div> 
 
</div>

出典

2016-06-17 Mandar Sant

ポジショニングは、非常に**ウェブページをレイアウトする方法が貧弱です。これは非常に柔軟性がなく、より優れた応答性の高いオプションがあります。チェックアウト[** LearnLayout.com **]（http://learnlayout.com/） –

背景色は、全体のdivすなわち videoaに適用され...私のコードである{背景色：＃1 d1700e;}背景のみ適用されるべきであるリンク先はビデオa {背景色：＃d1700e;}

<html> 
<head> 
<title>Untitled Document</title> 
<style type="text/css"> 
body{ 
margin:0; 
line-height:15px; 
} 
.watch{ 
position:relative; 
top:50px; 
right:50px; 
color:#505050; 
line-height:24px; 
background-color:#eeeeee; 
float:right; 
width:336px; 
} 
#videoa{      
float:left; 
/*background-color:#d1700e;*/ 
position:relative; 
top:-84px; 
left:25px; 
} 
#videoa a{ 
background-color:#d1700e; 
float:left; 
color:white; 
position:relative; 
top:2px; 
left:5px; 
} 
.watchhead{ 
font-size:24px; 
font-weight:bolder; 
position:relative; 
top:10px; 
left:8px; 
} 
#WatchListenlogo{ 
float:right; 
position:relative; 
top:22px; 
right:10px; 
} 
#rightarrow{ 
float:left; 
border-right:solid white 1px; 
position:relative; 
top:40px; 
} 
a{ 
text-decoration:none; 
} 
a:hover{ 
text-decoration:underline; 
} 


</style> 
</head> 
<body> 
<div class="watch"> 
<img src="http://s9.tinypic.com/2hd45fp_th.jpg" id="WatchListenlogo"/> 
<span class="watchhead">Watch/Listen</span> 
<img src="http://s9.tinypic.com/35c03yr_th.jpg" id="rightarrow"/> 
<div id="videoa"> 
<img src="http://s9.tinypic.com/j64ufl_th.jpg"/> 
<a href="" class="link">Titanic letter could fetch &pound; 100,000</a> 
</div> 
</div> 
</body> 
</html>

出典

2016-06-19 04:03:21

適切な場所で背景色が得られない

答えて

関連する問題