Question

我正在尝试练习一些HTML，CSS，我试图复制这个网站： the website 但我无法实现它，任何人都有任何想法解决它？非常感谢（问题）：我不能让边框显示在中间，并且无法将页脚对齐到中心，即使我在CSS中也没有，并且冰淇淋标题没有居中。

这是我的代码，所以你可以尝试：

＆＃13;

body {
    background-color: #FFCCFF;
    font-family: Verdana, Arial, sans-serif;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
}

h1 {
    color: #006699;
    line-height: 100%;
    text-align: center;
}

footer {
    background-color: #FF6699;
    font-size: 0.7cm;
    text-align: center;
}

#table1  {
    margin-left: auto;
    margin-right: auto;
    width: 700px;
    height: 500px;
    border: 1px solid black;
    border-collapse: collapse;
}

#logo {
    background-color: #FF6699;
    height: 150px;
}

#leftCol {
    width: 20%;
    padding: 10px;
}

#midCol {
    width: 60%
}

#rightCol {
    width: 20%;
}

th,tr {
        border: 1px solid black;
            border-collapse: collapse;
}

＆＃13;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Cookies and Cups</title>
</head>

<body>
    <table id="table1">
        <tr id="logo">
            <td colspan="3">Ice Cream</td>
        </tr>
        <tr id="leftCol" valign="top">
            <td><a href="Home.html">Home</a><br/><a href="Icecream.html">Home Delivery</a><br/><a href="emailClient.html">Contact Us</a></td>
            <td id="midCol" valign="top">We serve Different Ice Creams with different flavors:
                <ul>
                    <li>Strawberry</li>
                    <li>Mint</li>
                    <li>Banana</li>
                    <li>Vanilla, and more...</li>
                </ul>
            451 9th St San <br/>
            Francisco, CA 94103, United States<br/>
            +1 415-437-2877</td>
            <td id="rightCol"><img src="url"></img></td>
        </tr>
        <tr>
            <td  colspan="3" id="footer">Copyright C 2014 (Student Name)</td>
        </tr>
    </table>
</body>
</html>

＆＃13;

非常感谢。

Answer 1

不要使用表格。表格用于表格数据。

轻松使用ID进行样式设计。尽可能使用课程。您只能在页面上拥有一个唯一的ID，因此您的代码不是真正的通用和可传输的。

我注意到的一件事：你正在为＃table1设计样式，但你的HTML中没有这样的ID，因此CSS不会做任何事情。

如果你想在另一个元素（在这种情况下是一个表格单元格）中居中使用margin auto，你需要将margin自动应用于必须居中的元素，而不是容器。

text-align应用于容器，但应谨慎使用，并且仅用于文本。

希望这可以推动你。

组织此HTML

1 个答案: