简单网页Layout实例

来源：互联网发布：移动办公软件下载编辑：程序博客网时间：2024/06/08 06:27

注：来自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;}

显示的结果为:
这里写图片描述

阅读全文

0 0