HTML5设计网站结构简单设计

最新推荐文章于 2024-08-31 10:29:18 发布

冯晓如

最新推荐文章于 2024-08-31 10:29:18 发布

阅读量1.2k

点赞数 2

分类专栏： Web前端文章标签：网站结构简单设计步骤

本文链接：https://blog.csdn.net/honeygirl_/article/details/102787414

版权

Web前端专栏收录该内容

36 篇文章 2 订阅

订阅专栏

本文详细介绍了如何使用HTML5来设计网站结构，包括构建网页标题、侧边栏、主题内容和版权信息。通过遵循这些步骤，可以创建出清晰易懂的网页布局。

摘要由CSDN通过智能技术生成

一、构建网页标题

<header id="bloghead">
    <div id="blogTitle">
        <h1 id="blogname">HTML5+CSS3+JavaScript入门到精通</h1>
        <div id="bloglink">http://mysite.com/index.html</div>
    </div>
    <nav id="blognav">
        <ul id="blognavInfo">
            <li><a href="http://mysite.com/index.html" id="on">首页</a></li>
            <li><a href="http://mysite.com/list.html">博文目录</a></li>
        </ul>
    </nav>
</header>

二、构建侧边栏

<aside>
        <section id="conn1">
            <header id="connHead1">
                <h1>博主介绍</h1>
            </header>
            <div id="connBody1">
                ....
            </div>
            <div id="connFoot1"></div>
        </section>
        <section id="conn1">
            <header id="connHead1">
                <h1>分类</h1>
            </header>
            <div id="connBody1"> 
                .....
            </div>
            <div id="connFoot1"></div>
        </section>
        <section id="conn1">
            <header id="connHead1">
                <h1>评论</h1>
            </header>
            <div id="connBody1"> 
                .....
            </div>
            <div id="connFoot1"></div>
        </section>
</aside>

三、构建主题内容

该部分整体内容放在section元素中。

<div>
            <header id="bloghead">标题栏</header>
            <div id="blogbody">
                <div id="column_1">
                    <aside>侧边栏</aside>
                </div>
                <div id="column_2">
                    <section id="conn4">
                        <header id="connHead4">
                            <h1>分类</h1>
                            <span id="edit2"><a href="#">[<cite>管理</cite>]</a></span>
                        </header>
                        <div id="connBody4">
                            <div>
                                <section>
                                    <header>
                                        <div id="blog_title_h1">
                                            <h1 id="blog_title"><a href="#" target="_blank"></a></h1>
                                            <img src="../Images/微信图片_20190504220454.png" title="此博文包含图片" id="icon1">
                                            <time datetime="2019-10-09T18:30" pubdate></time>
                                        </div>
                                        <div id="articlTagl"><span id="txtbl">分类</span><a href="#"></a></div>
                                    </header>
                                    <div id="contentl"><p></p></div>
                                    <footer id="tagMorel">
											.....
                                    </footer>
                                </section>
                                。。。。
                            </div>
                        </div>
                        <div id='connFoot4'></div>
                    </section>
                </div>
            </div>

四、构建版权信息

该部分位于一个footer元素中。

  <footer id="blogfooter">
        <div>
            <p>版权所有者：HTML5+CSS3+JavaScript入门到精通&nbsp;&nbsp;Copyright 2019 All Rights Reserved</p>
        </div>
        <div>练习QQ：66668888&nbsp;&nbsp;联系电话：123456894
        </div>
  </footer>