html首页模板_01

最新推荐文章于 2025-07-11 16:09:08 发布

原创最新推荐文章于 2025-07-11 16:09:08 发布 · 5.3k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#html #模板

html 同时被 2 个专栏收录

8 篇文章

订阅专栏

模板

1 篇文章

订阅专栏

这篇博客主要探讨了如何设计和创建一个吸引人的HTML首页模板，利用CSS进行样式布局，实现页面的美观与交互效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <!--<link type="text/css" href="css/whole.css" rel="stylesheet"/>-->
</head>
<body>
<div id="header">
    <h1>23333</h1>
</div>

<div id="nav">
    1<br>
    2<br>
    3<br>
</div>

<div id="section">
    <h1>index</h1>
    <p>
        hellow
    </p>
    <p>
        word
    </p>
</div>

<div id="footer">
    footer
</div>

</body>
</html>

css

#header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}
#nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px;
}
#section {
    width:350px;
    float:left;
    padding:10px;
    overflow: auto;
}
#footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px;
}