Question

嘿，我真的很陌生，所以请告诉我，如果我这样做是愚蠢的。

我正在努力使网站看起来像这样

但我最终得到的最好的是（如果我使用margin-top，它只会拖动整个身体部分）

这是HTML的正文

<div id="container">        

    <div id="header"><h1>Game Course Weekly</h1></div>

    <div id="nav">
        <ul>
            <li><a href="#"> WEEK 1 </a></li>
            <li><a href="#"> WEEK 2 </a></li>
            <li><a href="#"> WEEK 3 </a></li>
            <li><a href="#"> WEEK 4 </a></li>
            <li><a href="#"> WEEK 5 </a></li>
            <li><a href="#"> WEEK 6 </a></li>
            <li><a href="#"> WEEK 7 </a></li>
        </ul>

    </div>

    <div id="body">
        <div class="circle">
            <p> MON </p>
        </div>
        <div class="content">
            <div class="content-block">
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised </p>
            </div>
            <hr>
            <div class="content-block">
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised </p>
            </div>
            <hr>
            <div class="content-block">
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised </p>
            </div>
            <hr>
            <div class="content-block">
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised </p>
            </div>
            <hr>
            <div class="content-block">
                <p>Nothing to do here</p>
            </div>              
        </div>

    </div>

    <div id="footer">
        <div class="copyright"> Copyrights © 2014. All rights reserved </div>
    </div>

</div>

这是css

* {
    margin: 0;
    padding: 0;
}

#container {
    margin: 0 auto;
    width : 900px;
}

#header {
    text-align: center;
    margin: 20px auto;
    font-family: 'Ubuntu', Lucida Sans Console, sans-serif;
    font-size: 30px;
}

#nav {
    background: linear-gradient(to bottom, #01afa1, #106760);
    margin-top: 30px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

    #nav ul {
        list-style: none;
        text-align: center;
    }

        #nav li {
            display: inline-block;
            text-align: center;
            font-family: 'Open Sans', Lucida Sans Console, sans-serif;
            font-size: 18px;
            margin: 18px 30px;

        }

        #nav li a {
            color: #FFFFFF;
            text-decoration: none;
        }

        #nav li:hover a {
            position: relative;
            top: 1px;
            left: 1px;
            border-color: #000 #aaa #aaa #000;
            text-shadow: 4px 4px 5px #000000;
            -webkit-transition: all 0.25s linear;
            -o-transition: all 0.25s linear;
            -moz-transition: all 0.25s linear;
            -ms-transition: all 0.25s linear;
            -kthtml-transition: all 0.25s linear;
            transition: all 0.25s linear;
        }

#body {
    background: #0c0a0a;
    width: 900px;
    margin: 0 -20px 0 0;
}
    .circle {
        position: relative;
        width: 70px;
        height: 70px;
        margin-left: -35px;
        border-radius: 50%;
        background: #0ec1a1; 
        position: relative;
        line-height: 70px;
        font-size: 20px;
        color: #FFFFFF;
        text-align: center;
        font-family: 'Ubuntu', sans-serif;
    }

    .content {
        margin: 0;
    }
        .content-block {
            height: 185px;
            font-family: 'Open Sans', Lucida Sans Console, sans-serif;
            color: #FFFFFF;
            position: relative;
            font-size: 17px;
            text-align: justify;
            margin: 0 60px 0 60px;
            padding: 5px 0 5px 0;
        }

        .content-block p {
           margin: 0;
           position: absolute;               
           top: 50%;                         
           transform: translate(0, -50%) 
        }

如何在不破坏其他部分的情况下制作所需的圆形位置？

Answer 1

你需要将圆圈的位置设为绝对位置，然后用顶部/左侧/底部/右侧控制它的位置。你的脚本也充满了问题，最终会破坏。我建议你改写它。如果你有兴趣，我会提供一些关于这些问题的说明。但要回答你原来的问题

CSS

* {
    margin: 0;
    padding: 0;
}

#container {
    margin: 0 auto;
    width : 900px;
}

#header {
    text-align: center;
    margin: 20px auto;
    font-family: 'Ubuntu', Lucida Sans Console, sans-serif;
    font-size: 30px;
}

#nav {
    background: linear-gradient(to bottom, #01afa1, #106760);
    margin-top: 30px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

    #nav ul {
        list-style: none;
        text-align: center;
    }

        #nav li {
            display: inline-block;
            text-align: center;
            font-family: 'Open Sans', Lucida Sans Console, sans-serif;
            font-size: 18px;
            margin: 18px 30px;

        }

        #nav li a {
            color: #FFFFFF;
            text-decoration: none;
        }

        #nav li:hover a {
            position: relative;
            top: 1px;
            left: 1px;
            border-color: #000 #aaa #aaa #000;
            text-shadow: 4px 4px 5px #000000;
            -webkit-transition: all 0.25s linear;
            -o-transition: all 0.25s linear;
            -moz-transition: all 0.25s linear;
            -ms-transition: all 0.25s linear;
            -kthtml-transition: all 0.25s linear;
            transition: all 0.25s linear;
        }

#body {
    background: #0c0a0a;
    width: 900px;
    margin: 0 -20px 0 0;
    position:relative;
}
    .circle {
        position: relative;
        width: 70px;
        height: 70px;
        left:-35px;
        top:70px;
        border-radius:50%;
        background: #0ec1a1; 
        position: absolute;
        z-index:3;
        line-height: 70px;
        font-size: 20px;
        color: #FFFFFF;
        text-align: center;
        font-family: 'Ubuntu', sans-serif;
    }

    .content {
        margin: 0;
    }
        .content-block {
            height: 185px;
            font-family: 'Open Sans', Lucida Sans Console, sans-serif;
            color: #FFFFFF;
            position: relative;
            font-size: 17px;
            text-align: justify;
            margin: 0 60px 0 60px;
            padding: 5px 0 5px 0;
        }

        .content-block p {
           margin: 0;
           position: absolute;               
           top: 50%;                         
           transform: translate(0, -50%) 
        }

希望这有帮助

Answer 2

您应该使用相对和/或绝对定位。请参阅此处以了解其工作原理：W3schools-CSS Positioning。此外，我建议您更改您的代码，因此您的圆圈div将在内容div中。我建议你使用相对定位，因为相对定位与不依赖于其他页面元素的绝对定位形成对比。相对定位取决于它在页面上的实际位置，并通过参数从那里移动。所以在浏览器中查看你的html并更改参数以移动相对定位的圆圈。

CSS：

.circle {
    position: relative;
    left: -30px;
}

例如，上面的CSS会将你的圆圈div向左移动30px。您添加的像素数量总是添加到您给出的一侧，因此左侧为负向左移动。您也可以使用：right，top和bottom。

如何让圆圈div离开中心而不移动其他部分？

2 个答案: