Question

我刚刚开始学习HTML和CSS，我一直在css的网站布局上停留了一段时间。在第一张图片中，你可以看到我是如何使它看起来的，在第二张图片中，你看到它现在看起来如何...... 我尝试在线搜索，但我似乎没有掌握CSS中的布局和定位方式。有谁知道我做错了什么？

Picture here! 2nd picture here! HTML

<!DOCTYPE html>
<html>
<head>
    <link href="https://fonts.googleapis.com/css?family=Catamaran:100|Pontano+Sans|Ruda:900" rel="stylesheet">
    <link href="style.css" type="text/css" rel="stylesheet">
    <title>ALISAN'S OCCASIONS</title>
</head>
<body>
    <div class="header">
    </div>
    <div class="home_page">
        <div class="home_left">
            <ul id="social_media">
                <li><a href="https://www.facebook.com/" target="_blank"><img src="Facebook1.jpg"></a></li>
                <li><a href="https://www.instagram.com/" target="_blank"><img src="Instagram1.jpg"></a></li>
                <li><a href="https://twitter.com/?lang=en" target="_blank"><img src="twitter1.jpg"></a></li>
            </ul>
        </div>
        <div class="home_center">

        </div>
        <div class="home_right">

        </div>
    </div>
</body>
</html>

这就是CSS样式表

* {

    box-sizing: border-box;
}


body {

    padding: 0;
    margin: 0;
    background-color: #8799b7;
    overflow-y: scroll;
    max-height: 735px;

} 


.header {

    display: block;
    background-image: url("header4.jpg");
    height: 500px;
}

.home_page {

    display: block;
    margin:0;
    padding: 0;

}

.home_left {

    display: inline-block;
    height: 235px;
    width: 506px;
    margin: 0;
    padding: 0;
}


.home_center {

    display: inline-block;
    height: 235px;
    width: 506px;
    margin: 0;
    padding: 0;
}

.home_right {

    display: inline-block;
    height: 235px;
    width: 506px;
    margin: 0;
    padding: 0;

Answer 1

只要您不需要支持旧浏览器，就可以使用replace(string,stringArray1, stringArray2);简化代码。

HTML将是：

flexbox

CSS：

<html>
<head>
    <link href="https://fonts.googleapis.com/css?family=Catamaran:100|Pontano+Sans|Ruda:900" rel="stylesheet">
    <link href="style.css" type="text/css" rel="stylesheet">
    <title>ALISAN'S OCCASIONS</title>
</head>
<body>
    <div class="header">
      header
    </div>
    <div class="home_page">
        <div class="home_left">
           left
        </div>
        <div class="home_center">
center
        </div>
        <div class="home_right">
right
        </div>
    </div>
</body>
</html>

你可以看到它在行动中： https://codepen.io/anon/pen/EvqXmg

CSS中的布局和定位问题

1 个答案: