简单网页Layout实例

最新推荐文章于 2023-01-03 09:55:05 发布

晨识草

最新推荐文章于 2023-01-03 09:55:05 发布

阅读量806

点赞数 2

分类专栏： web 文章标签： html web 实例

本文链接：https://blog.csdn.net/lichen_yun/article/details/74998882

版权

web 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

注：来自https://www.w3schools.com。仅仅是个人学习笔记，不含过多个人思考。

题目：简单的网页layout布局

这里写图片描述
网页的简单布局如图所示

一个简单的html设置为：


<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
    <meta lang="utf-8">
    <title>My web page</title>
</head>
<body>
    <div id="container">
    <header>
    <h1>City Gallery</h1>
    </header>

    <nav>
        <ul>
        <li><a href="#">London</a></li>
        <li><a href="#">Paris</a></li>
        <li><a href="#">Tokyo</a></li>
        </ul>
    </nav>

    <article>
        <h1>London</h1>
        <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
        <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
    </article>

    <footer>
        Copyright &copy; W3Schools.com
    </footer>
    </div>
</body>
</html>

对应的css样式的设置为：

/*
注: 主要是通过css的float设置浮动窗口来实现网页布局;
 */
/*注意：此处如果是将body的设置设置为#container,显示的结果与此设置是不同的*/
#container {
    width:100%;
    border:1px solid black;
}

header,footer {
    padding:1em;
    color:white;
    background-color:black;
    text-align:center;

}

nav {
    padding:1em;
    float:left;
    width:20%;      /*尽量使用相对的设置，避免因为在不同电脑上运行显示的效果不同*/
}

nav ul {
    list-style-type:none;
}
nav ul a {
    text-decoration:none;
}

article {
    margin-left:21%;
    overflow:hidden;
    border-left:1px solid black;
    padding:1em;
}