典型的html5布局

最新推荐文章于 2022-12-20 16:46:40 发布

晨识草

最新推荐文章于 2022-12-20 16:46:40 发布

阅读量709

点赞数 1

CC 4.0 BY-SA版权

分类专栏： web 文章标签： html5 布局 web

本文链接：https://blog.youkuaiyun.com/lichen_yun/article/details/75048074

web 专栏收录该内容

29 篇文章

订阅专栏

1.典型的html5布局

index.html

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Migration</title>
    <meta lang="en" charset="UTF-8">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Monday Times</h1>
    </header>

    <nav>
        <ul>
            <li>News</li>
            <li>Sports</li>
            <li>Weather</li>
        </ul>
    </nav>

    <section>
        <h2>News Section</h2>
        <article>
            <h2>News Article</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
        </article>
        <article>
            <h2>News Article</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
        </article>
    </section>

    <section>
        <h2>Sports Section</h2>
        <article>
            <h2>Sports Article</h2>
            <p>The National Basketball Association (NBA) is North America's premier professional men's basketball league, composed of thirty teams. It is an active member[1] of USA Basketball (USAB), which is recognized by the International Basketball Federation as the National Governing Body (NGB) for basketball in the United States.</p>
        </article>
        <article>
            <h2>Sports Article</h2>
            <p>The National Basketball Association (NBA) is North America's premier professional men's basketball league, composed of thirty teams. It is an active member[1] of USA Basketball (USAB), which is recognized by the International Basketball Federation as the National Governing Body (NGB) for basketball in the United States.</p>
        </article>
    </section>

    <footer>
        <p>&copy; 2017 Monday Times. All rights reserved.</p>
    </footer>
</body>
</html>

style.css

/* 
* @Author: Lin
* @Date:   2017-07-12 19:37:58
* @Last Modified by:   Lin
* @Last Modified time: 2017-07-13 11:22:11
*/
header, footer {
    background-color:black;
    color:white;
    padding:10px;
}

nav ul {
    list-style-type:none;
}

nav ul li {
    display:inline;  /*使得list从垂直变为水平分布，因为li不能够使用float，所以使用display*/
    margin:5px;
}

section {
    background-color:lightgrey;
    padding:10px;
    margin:5px;
}

article {
    background-color:white;
    margin:5px;
    padding:10px;
}

注:display和float都是设置元素样式从垂直到水平常用的方法。
显示结果为：
这里写图片描述

2.如何设置sublime Text3的默认注释，如：

/* 
* @Author: Lin
* @Date:   2017-07-12 19:37:58
* @Last Modified by:   Lin
* @Last Modified time: 2017-07-13 11:27:27
*/

方法为：
这里写图片描述