Question

我需要这种网站的css代码：

SITE LOOK

用我的代码我得到了这个：

SITE FOR NOW

这是我的索引页代码：

<html>

<head>

<link type="text/css" rel="stylesheet" href="index.css"/>

    <title>
        Home Page
    </title>

</head>

<body>

    <div id=header>

    <h1>THIS IS HEADER</h1>

    </div>

    <div id=account>

    THIS IS ACCOUNT<br>
    oasdjasdj<br>
    asdkasd<br>
    asdpasod<br>
    </div>

    <div id=navigation>

    THIS IS NAVIGATION

    </div>

    <div id=content>

    THIS IS CONTENT

    </div>

    <div id=right_side>

    THIS IS RIGHT SIDE

    </div>

    <div id=footer>

    THIS IS FOOTER

    </div>

</body>

这是css文件：

    h1{
    font-family: Verdana;
    font-weight: bold;
    text-align: center;
    padding-top: 25px;
    padding-bottom: 25px;
    color: #acd1b2;
}

#header{
    margin : 0px;
    position: relative;
    width:80%;
    background-color: red;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

#navigation{
    margin : 0px;
    width:80%;
    background-color:blue;
}

#right_side{
    width: 20%;
    float: right;
    background-color: #green;
}

#footer{
    clear: both;
    position: relative;
    width:80%;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    background-color: gray;
}

#account{
    position: relative;
    width: 20%;
    float: right;
    background-color: #yellow;
}

#content{
    width:80%;
    float:left;
    background-color:#black;
    color: white;
}

如果有人知道如何在我的第一张照片上放置div，请。当我尝试一些东西时，总会得到奇怪的结果。谢谢你的帮助！

Answer 1

好吧，您编写HTML的方式存在一些问题。首先，ID标签应始终在ID名称周围加引号。我只想制作一个容器div，左边是div，右边是div。

我制作了一个使用浮动来控制布局的演示。 div包含在一个大的div中，限制为800像素。

Here's the demo that I made on JS Bin

HTML：

<body>
    <div id="container"> <!-- Make a container to hold everything. Centered in CSS -->
        <div id="left-side">

            <div id="header">Header</div>
            <div id="navigation">Navigation</div>
            <div id="content">Content Here</div>
            <div id="footer">Footer</div>

        </div> <!-- End of the left side div -->


        <div id="right-side">

            <div id="account">Account</div>
            <div id="right_side">Right Side</div>

        </div> <!-- End of the right side div -->
    </div>  <!-- End of the container div -->

</body>

CSS：

*{
  font-family:sans-serif;
}

#container{
  max-width:800px;
  margin: 0 auto;
}

#left-side{
    float:left;
    width:60%;
  }

#right-side{
  float:right;
  width:37%;
}

#left-side div{
  text-align:center;
  margin-bottom:10px;

}
#right-side div{
  text-align:center;
  margin-bottom:10px;
}

#header{
    background-color: yellow;
  text-align:center;
  padding:20px 0px;
}

#navigation{
  padding:10px 0px;
  border: 1px black solid;
}

#right_side{
    background-color: cyan;
    padding:50px 0px;
}

#footer{
    background-color: gray;
    padding:5px 0px;
}

#account{
    background-color: green;
  padding: 10px 0;
}

#content{
    background-color:black;
    color: white;
    padding:100px 0px;
}

Answer 2

更改HTML，如下所示，因为您需要容器div：

<head>

<link type="text/css" rel="stylesheet" href="index.css"/>

    <title>
        Home Page
    </title>

</head>

<body>
<div class="left_container">
    <div id=header>

    <h1>THIS IS HEADER</h1>

    </div>

    <div id=account>

    THIS IS ACCOUNT<br>
    oasdjasdj<br>
    asdkasd<br>
    asdpasod<br>
    </div>

    <div id=navigation>

    THIS IS NAVIGATION

    </div>

    <div id=content>

    THIS IS CONTENT

    </div>



    <div id=footer>

    THIS IS FOOTER

    </div>

</div>
<div class="right_container">
 <div id=right_side>

    THIS IS RIGHT SIDE

    </div>
</div>

</body>

在CSS文件中添加

.left_container{float:left;width:80%;margin:0px}
.right_container{float:left;width:20%;margin:0px}
.clr{clear:both}

Answer 3

也许是这样的事情？，了解CSS类可以重复使用（如果您可能需要多个右侧框，它会缩短CSS代码，因为您不需要为每个元素创建一个选择器

Pictures are always a good selling point ;p

复制并粘贴来源 - 更改为适合...

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
* {
    margin:0;
    padding:0;
}

#wrapper {
    width:800px;
    height:100%;
    margin:0 auto;
}

#wrap-left {
    width:75%;
    height:100%;
    float:left;
}

#wrap-right {
    width:25%;
    height:100%;
    float:right;
}

#header,#navigation,#footer,.right-small {
    height:45px;
    margin:10px;
}

#content,.right-tall {
    height:230px;
    margin:10px;
}

.round-corners {
    -webkit-border-radius:25px;
    -moz-border-radius:25px;
    border-radius:25px;
    padding:20px;
}

.bg-yellow {
    background:#FEF200;
}

.bg-red {
    background:#ED1B24;
}

.bg-blueish {
    background:#3F47CC;
}

.bg-green {
    background:#23B14D;
}

.bg-grey {
    background:#C3C3C3;
}

.border {
    border:5px solid #000;
}

</style>
</head>

<body>

    <div id="wrapper">

        <div id="wrap-left">
            <div id="header" class="bg-red round-corners">
                <h1>THIS IS HEADER</h1>
            </div>

            <div id="navigation"  class="bg-blueish round-corners">
                THIS IS NAVIGATION
            </div>

            <div id="content" class="border round-corners">
                THIS IS CONTENT
            </div>

            <div id="footer" class="bg-grey round-corners">
                THIS IS FOOTER
            </div>
        </div>

        <div id="wrap-right">
            <div class="right-small bg-yellow round-corners">
                ACCOUNT
            </div>
            <div class="right-tall bg-green round-corners">
                left side
            </div>
        </div>

    </div>

</body>
</html>

Answer 4

为什么不使用表

<body>
<table width="100%" cellspacing=5 cellpadding=5 border =0 >

    <tr><td bgcolor=red width="80%" height=200px> header </td> <td bgcolor=yellow>account</td> </tr>
    <tr><td bgcolor=blue height=100px> navigation </td> <td bgcolor=green rowspan=2>Left side</td> </tr>
    <tr><td bgcolor=cyan height=400px> content </td></tr>
    <tr><td bgcolor=grey height=100px> footer </td></tr>


</table>
</body>

你不需要css ...

需要这种div的CSS代码

4 个答案: