1

私はウェブサイトをデザインしていて、このようなものにする必要があります http://www.spookycraft.net/

スライド ショーやJavaScript などを除いて、Web ページの中央に 4 つの個別のクリック可能なブロックが必要なmargin:autoだけです。興味深いことに、これが私の現在のコードです。より高い解像度の画面でも同じように見えるようにする必要があることに注意してください。margin-leftmargin-bottommargin-bottommargin:auto; 

<!DOCTYPE HTML>
<html>
<head>

<table border="10px"; class="head">
    <tr>
        <td>
            <img src="http://www3.alcatel-lucent.com/partners/hp/data-center-network-connect/images/Alliance_DCNC_700x200.jpg" > </>
        </td>
    <tr>
</table>
<style media="screen" type="text/css">
    .tone{
        margin:auto;
    }
    .ttwo{
        margin:auto;
    }
    .tthree{
        margin:auto;
    }

    .tfour{
        margin:auto;
    }
    .head{
        margin:auto;
    }
</style>
</head>

<body>
    <table border="5px"; class="tone"> 
        <tr> 
            <td>
                <a href="www.reddit.com"><img src="http://www.wilsoninfo.com/300x300.gif"> </> </a>
            </td>
        </tr>
    </table> 

    <table border="5px"; class="ttwo">
        <tr>
            <td>
                <a href="www.reddit.com"><img src="http://www.wilsoninfo.com/300x300.gif"> </> </a>
            </td>
        </tr>
    </table> 

    <table border="5px" class="tthree">
        <tr>
            <td>
                <a href="www.reddit.com"><img src="http://www.wilsoninfo.com/300x300.gif"> </> </a>
            </td>
        </tr>
    </table>

    <table border="5px" class="tfour">
        <tr>
            <td>
                <a href="www.reddit.com"><img src="http://www.wilsoninfo.com/300x300.gif"> </> </a>
            </td>
        </tr>
    </table> 
</body>
</html>

どんな助けでも大歓迎です！私は自分の問題に対する答えを見つけるために取り組んでいます。見つけたら、このスレッドを更新します。

4

3 に答える 3

0

CSS 開発を高速化するための優れたライブラリは、Twitter ブートストラップhttp://twitter.github.io/bootstrap/index.htmlです。

ブートストラップを使用した簡単な例を次に示します。

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Layout Demo</title>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-   combined.min.css" rel="stylesheet">
</head>

<body>
<div class="container-fluid" style="margin: 100px 0px; 0px; 0px;">
  <div class="row">
    <div class="offset6 span3"> <a href="www.reddit.com"><img src="http://www.wilsoninfo.com/300x300.gif"> </> </a> </div>
    <div class="span3"> <a href="www.reddit.com"><img src="http://www.wilsoninfo.com/300x300.gif"> </> </a> </div>
  </div>
  <br>
  <div class="row">
    <div class="offset6 span3"> <a href="www.reddit.com"><img src="http://www.wilsoninfo.com/300x300.gif"> </> </a> </div>
    <div class="span3"> <a href="www.reddit.com"><img src="http://www.wilsoninfo.com/300x300.gif"> </> </a> </div>
  </div>
</div>
</body>
</html>

プランカー: http://embed.plnkr.co/iKgsmZ/preview

于 2013-05-28T04:40:44.050 に答える
0

テーブルを使用しないでください。テーブルは私の本では禁止されています。最近では、表を HTML ページの構造に使用するべきではなく、表形式でデータを表示するためにのみ使用する必要があります。<div>マスターラッパーで s を使用するだけ<div>です。このようなものは完璧です：

HTML:

<div class="container">
    <div class="box spacing"><a href="www.reddit.com"><img src="http://www.wilsoninfo.com/300x300.gif" width="100%"></a></div>
    <div class="box spacing"><a href="www.reddit.com"><img src="http://www.wilsoninfo.com/300x300.gif" width="100%"></a></div>

    <div class="box spacing"><a href="www.reddit.com"><img src="http://www.wilsoninfo.com/300x300.gif" width="100%"></a></div>
    <div class="box spacing"><a href="www.reddit.com"><img src="http://www.wilsoninfo.com/300x300.gif" width="100%"></a></div>
</div>

CSS:

  body{

        margin:0;
        padding:0;
    }
    .container{
        overflow:hidden;
        width:450px;
        margin:0px auto;
    }
    .box{
        width:200px;
        height:200px;
        float:left;
        background-color:#ccc;
        margin-bottom:20px;
    }

    .spacing{
        margin-right:20px;
    }

デモはこちら: http://jsfiddle.net/aRSNh/172/

于 2013-05-28T04:18:40.803 に答える