您现在的位置是:首页 > 前端学习 > Web前端Web前端

制作主流网站界面(第十九章)(图文)

第十三双眼睛2020-03-17【Web前端】人已围观

简介本章中,将综合一些基本的知识技能,详细介绍一下一个页面是如何从构思到计划,最终展示在互联网上的,本章的知识点如下:
1构思页面的布局
2制作页面的顺序
3理解制作页面的基本思路

构思基础的布局
从前面的知识中,已经了解到设计一个页面。首先设计师心中需要明确摆放哪些内容的时候,接着就是去构思如何去布局这样的页面。可以把页面分成4部分,页面的顶部,底部,中间部分。中间部分又可以分成侧边栏和主要部分。所以在写代码的时候,它的结构看上去应该是这样的。如下:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>页面布局</title>
        <style type="text/css">
            body{
                padding: 0;
                margin: 0;
            }
            #container{
                width: 100%;
                height: 700px;
                background-color: red;
            }
            #header{
                width: 100%;
                height: 120px;
                background-color: blue;
            }
            #aside{
                width: 20%;
                height: 500px;
                background-color: green;
            }
            #footer{
                width: 100%;
                height: 80px;
                background-color: #f90;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="header"></div>
            <div id="main">
                <div id="aside"></div>
            </div>
            <div id="footer"></div>
        </div>
    </body>
</html>
完善网站的子模块
接下来的工作,基于已经创建好的页面结构,之后的任务就是一点一点的细化完成各个部分,如头部,底部,侧栏和页面主题部分。只要按部就班,这些都不难。
导航栏
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>导航栏</title>
        <style type="text/css">
            li{
                float: left;
                display: inline-block;
                width: 100px;
                border: 1px solid red;
                margin: 0 50px;
                text-align: center;
                background-color: #ccc;
            }
            a{
                text-decoration: none;
            }
        </style>
    </head>
    <body>
        <div id="tabs">
            <ul>
                <li><a href="#">菜单1</a></li>
                <li><a href="#">菜单2</a></li>
                <li><a href="#">菜单3</a></li>
                <li><a href="#">菜单4</a></li>
                <li><a href="#">菜单5</a></li>
            </ul>
        </div>
    </body>
</html>

页面的侧边栏
页面的侧边栏是一个浮动层,它的中间可以放入任何页面对象,通常,一些简单的条目适合放在这里,作为目录使用,而页面中的主题部分,放入一些具体对象的问题本描述,最好再添加一些图像,这样页面就会更加生动,
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>aside</title>
        <style type="text/css">
            #container{
                width: 100%;
                height: 600px;
                background-color: red;
            }
            #aside{
                width: 20%;
                height: 400px;
                background-color: green;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <aside id="aside"></aside>
        </div>
    </body>
</html>




 

Tags:HTML   HTML网页

很赞哦! ()

随机图文

文章评论

    共有条评论来说两句吧...

    用户名:

    验证码:

本站推荐

站点信息

  • 网站名称:JavaStudy
  • 建站时间:2019-1-14
  • 网站程序:帝国CMS7.5
  • 文章统计64篇文章
  • 标签管理标签云
  • 统计数据百度统计
  • 微信公众号:扫描二维码,关注我们