网页分栏设计和不同的CSS样式

网页分栏设计

写网页的时候,我们可能觉得自己做出来的东西和真正的网页有所差别,总是“少了点什么”。这很有可能是因为我们的网页没有注意分栏哦。
这里是天猫主页的截图,大家可以观察一下它的分栏设计。


右上角是搜索栏,页眉是导航栏,中间是促销广告,分栏十分清晰。
我们将用CSS来实现一个基本的分栏页面,大致分布如下。


导航栏

导航栏的制作我们在前面一篇文章中已经讲过了,这里只贴代码。
CSS样式:

            ul { /*设置导航栏的框框*/
        margin: 100px auto; /*框框整体的位置,30px是指离网页的顶部和下部的距离,auto控制的是左右距离为自动调节*/
        margin-bottom: 10px auto;
        width: 530px; /*框框的宽度*/
        height: 0px auto; /*框框的长度*/
        padding: 0px; /*将框框的padding设置为零,不然会导致框框里的内容与框边缘有间隔*/
        /*border:1px solid #000;/*添加边框*/
    }

    li {
        list-style-type: none; /* 去掉li前的点 */
        float: left; /*将li设置成做浮动,变为联动*/
    }

    a {
        display: block; /*将a变成块状*/
        width: 100px; /*设置块的宽度*/
        height: 50px; /*设置块的长度*/
        font-family: Microsoft Yahei;
        line-height: 50px; /*设置字体在块中的高度*/
        background-color: #2f4f4f;
        margin: 0px 0px; /*块里的高宽通过margin设置*/
        color: #fff;
        text-align: center; /*字体居中*/
        text-decoration: none; /*去掉下划线*/
        font-size: 15px;
    }

        a:hover {
            background-color: #2f6f4f;
        }

HTML引用

           <ul class=daohang>
        <li><a href="">首页</a></li>
        <li><a href="">经典美文</a></li>
        <li><a href="">名家诵读</a></li>
        <li><a href="">了解更多</a></li>
    </ul>

效果


分栏实现

基本的分栏代码框架是这样的

            <div>
                 <div id="left"> ...
                               </div>
                <div id="middle">...
                             </div>
            </div>

这意味着,我们要定义两个ID名称为left 和middle的CSS类选择器

      #left {
        width: 120px;
        background-color: pink;
        /* position:relative; */
        margin-left: 100px auto;
        float: left;
        margin-top: 10px;
    }

    #middle {
        width: 260px;
        background-color: gray;
        margin-left: 320px auto;
        margin-top: 10px;
    }

之后在html中引用。
效果如下图:


表格实现

大家看到我们在中间一栏中插入了表格,这到底是如何实现的呢?
HTML

         <table border="1" align="center" style="margin-top:20px;bottom:30px;height:40px;width:80px;">
            <!---------------------border="1",表格有边框-->
            <tr>
                <th>title</th>
                <th>author</th>
            </tr>
            <tr>
                <td>背影</td>
                <td>
                   朱自清
                </td>
            </tr>
          
        </table>

<table> 标签定义 HTML 表格。简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
tr 元素定义表格行
th元素定义表头
td元素定义表格单元。

页脚实现

CSS

       footer {
        width: 90%;
        max-width: 430px;
        margin-top: 30px;
        bottom: 0px;
        height: 50px;
        background: #111;
        color: white;
        position: fixed;
    }

HTML

     <footer>这是一个快乐的页脚</footer>


position: fixed 不论我们如何拉动浏览器的滚动条,页脚在浏览器中的位置都是不会变化的

固定的标题和右下边框

标题

CSS

       h1 {
        position: fixed;
        top: 0;
        width: 500px;
        margin: 0 auto;
        background: white;
        padding: 10px;
    }        

HTML

      <h1>An example</h1>

效果



可以看到,当下拉浏览器滚动条的时候,标题固定在页面框不动

右下

用这个我们也可以实现右下角有一个小框框,固定不动的效果


      <aside style="position:fixed ;bottom : 0;float :right;height:60px;width:150px;
    background-color:aquamarine;color:black;margin-left:450px">
            联系方式:13529502940</aside>

整体页面效果如下:


不同的CSS样式

如何轻易地改变一个网页的风格,又不改变它的内容呢?
答案当然是使用不同的CSS样式啦。

      <link rel="stylesheet" type="text/css" href="StyleSheet2.css" />
    <link rel="stylesheet" type="text/css" href="StyleSheet1.css" />
StyleSheet2
StyleSheet1

只要改变不同CSS文件中设定的样式,将同一个HTML文件绑上不同的CSS样式就会有不同的效果。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,815评论 1 92
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,750评论 1 45
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 4,084评论 0 0
  • CSS 指层叠样式表(Cascading Style Sheets),是一种用来为结构化文档(如 HTML 文档或...
    神齐阅读 2,134评论 0 14
  • 本文主要是起笔记的作用,内容来自慕课网. 认识CSS样式 CSS全称为“层叠样式表 (Cascading Styl...
    0o冻僵的企鹅o0阅读 2,664评论 0 30