-4

投稿した写真のレイアウトのレスポンシブ CSS コードを考え出そうとしています。基本的にfront picture、画像ギャラリーの上に<div>、相対および絶対テクニックを使用する必要があります。また<divs>、ナビゲーション付きのロゴは、相対絶対テクニックを使用して実装する必要があります。
どうもありがとうございました。

CSS と HTML コードは次のとおりです。画像のレイアウトを実現するために、どの div が絶対的で、どの div が相対的であるかを誰かが知ることができますか? どうもありがとう

<body>
    <div id="wrapper">
<header>
<div id="nav">
    <ul>
        <li><a href="default.asp">Home</a></li>
        <li><a href="news.asp">News</a></li>
        <li><a href="contact.asp">Contact</a></li>
        <li><a href="about.asp">About</a></li>
    </ul>
</div>
<div id="logo">
    <h1>Welcome to Origin Cards!</h1>
    <img src="images/Logo.jpg" width="150" height="100"/>
</div>    
</header>
<div id="paragraph">
<p>
    <img src="images/Logo.jpg" />
</p>
</div>
<div id="paragraph2">
    <p>
  It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
  The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here,
   content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum 
   as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions
   have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like
   </p>
   </div>
<footer>
<ul>
    <li><a href="default.asp">Home</a></li>
    <li><a href="news.asp">News</a></li>
    <li><a href="contact.asp">Contact</a></li>
    <li><a href="about.asp">About</a></li>
</ul>
 </footer>
</div>


</body>
</html>

そしてCSS：

body {
font-size: 1em;
border: solid red;
width: 80%; 
margin: 0 auto;
border-radius: 6px; 
list-style: none;   
}

#wrapper{
width: 100%;
background: yellow; 
position: relative;
}



#logo {
float: right;
}


#nav {
list-style: none;
}

#nav li {
float: left;
list-style: none;
}

#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
}

#nav li a:hover {
color: #c00;
background-color: #fff; 
}


#paragraph {
width: 30%;
top: 10%;
left: 20%;
z-index: 1;
position: absolute;
}

#paragraph2 {
width: 80%; 
background: #332211;
top: 20%;
left: 10%;
position: absolute;
}

img {
max-width: 100%;
}

footer {

margin: 0 auto;
width: 100%;
background: #123456;
}

私

4

1 に答える 1

1

'relative'が2つのプロパティセットのベースを設定することを理解する必要があります。1：zIndexと2：positionsです。'front'を高いzindexにして、比較的配置します。

要素を相対的なblock-divでラップし、子の幅をそのblock-divの幅で計算します。また、ラッパーの左/上にあるparentOffsetを使用して要素を配置します。

<div style="position:relative; display: inline; display:block; overflow: hidden; clear: both;">
  <div class=front style="position:absolute;left:XXX %; width: 15%; z-index: 100;"></div>
  <div class=other style="width: 100%; z-index: 10">
    <span />         <!-- ,,,, -->
    <ol><li /></ol>
  </div>
</div>
于 2012-09-26T18:32:11.733 に答える