JavaWeb学习之路(53)–CSS应用实例之布局

1. 前言

本篇是JavaWeb学习之路,CSS部分的最后一章。


从第24章初识CSS,到第53章CSS应用实例之布局,CSS部分正好写了30篇。


如果大家一直在跟随我的脚步,想必获益匪浅吧,恭喜你们,在学习之路上又迈出了坚实的一步。


我也会继续努力,把后面的JavaScript/jQuery/Java/MySQL等内容讲好,从而培养真正掌握JavaWeb开发技能的技能人才。


2. 本章任务

本章介绍如何实现一个包含标题栏、导航栏、内容区域、底部版权区域,且内容区域左右分列的标准网站,如下图:



3. 开发过程

3.1 设定全局样式

通过CSS的通用选择器(*)设置所有元素内外边距为0px,然后设置body区域背景色为白色。


   /* 全局 */

       * {

           margin: 0px;

           padding: 0px;

       }


       body {

           background: white;

       }


3.2 头部标题栏样式

头部标题栏包含标题:


<div class="header">

       <h1>熊猫诗歌网</h1>

   </div>


为标题设置背景色、文字水平居中、标题栏高度控制在80px,且通过line-height高度等于标题栏高度使文字垂直居中。


 /* 头部 */

       .header {

           /* 标题栏高度 */

           height: 80px;

           /* 垂直居中 */

           line-height: 80px;

           background: white;

           /* 水平居中 */

           text-align: center;

       }


此时效果如下:



3.3 导航栏样式

在JavaWeb学习之路(51)–CSS应用实例之导航栏中,我们详细介绍了如何实现一个导航栏,此处我们直接复用第51章中编写的导航栏。之前文章讲的很详细了,此处不再具体讲解如何实现导航栏。


注意我们修改了一个地方,就是去掉了nav的margin,这样让导航栏宽度占满屏幕。


   <ul class="nav">

       <li><a href="#">唐诗</a></li>

       <li><a href="#">宋词</a></li>

       <li><a href="#">元曲</a></li>

       <li><a href="#">现代诗</a></li>

   </ul>


CSS:


 /* 导航 */

       .nav {

           height: 44px;

           background-color: #1479D7;

           padding: 0;

           list-style-type: none;

       }

       .nav li {

           height: 44px;

           float: left;

       }

       .nav li a {

           font-family: SimSun, Arial, "Arial Narrow", HELVETICA;

           font-size: 1.1em;

           color: white;

           text-decoration: none;

           line-height: 44px;

           margin: 0 18px;

       }

       .nav li a:hover {

           color: #14539A;

           background-color: #CBE1ED;

       }


此时效果如下:



3.4 内容区域

内容区域分为左右两部分,所以代码如下:


<div class="row">

       <div class="left-area">

           

       </div>

       <div class="right-area">

         

       </div>

   </div>


我们通过float,使左右两部分从左至右横向排列,然后设置左右测比例分别为70%、25%,注意加起来要比100%少一些,不然margin或padding占据的空间会使整个宽度超过100%。


    /* 左侧 */

       .left-area {

           min-height: 750px;

           float: left;

           width: 70%;

           margin-left: 16px;

       }

       /* 右侧 */

       .right-area {

           float: left;

           width: 25%;

           margin-left: 24px;

       }


在左侧区域添加诗歌:


 <div class="left-area">

           <div class="poem-box">

               <h2>凉州词</h2>

               <p>

                   黄河远上白云间,一片孤城万仞山,羌笛何须怨杨柳,春风不度玉门关

               </p>

           </div>

           <div class="poem-box">

               <h2>将进酒</h2>

               <p>

                   君不见黄河之水天上来,奔流到海不复回。

                   君不见高堂明镜悲白发,朝如青丝暮成雪。

                   人生得意须尽欢,莫使金樽空对月。

                   天生我材必有用,千金散尽还复来。

                   烹羊宰牛且为乐,会须一饮三百杯。

                   岑夫子,丹丘生,将进酒,杯莫停。

                   与君歌一曲,请君为我倾耳听。

                   钟鼓馔玉不足贵,但愿长醉不愿醒。

                   古来圣贤皆寂寞,惟有饮者留其名。

                   陈王昔时宴平乐,斗酒十千恣欢谑。

                   主人何为言少钱,径须沽取对君酌。

                   五花马、千金裘,呼儿将出换美酒,与尔同销万古愁。

               </p>

           </div>

           <div class="poem-box">

               <h2>春江花月夜</h2>

               <p>

                   春江潮水连海平,海上明月共潮生。

                   滟滟随波千万里,何处春江无月明!

                   江流宛转绕芳甸,月照花林皆似霰;

                   空里流霜不觉飞,汀上白沙看不见。

                   江天一色无纤尘,皎皎空中孤月轮。

                   江畔何人初见月?江月何年初照人?

                   人生代代无穷已,江月年年望相似。

               </p>

           </div>

       </div>


为诗歌添加简单的样式:


  /* 诗歌 */

       .poem-box {

           background-color: #E9EBEC;

           padding: 10px;

           margin: 24px 0px;

       }


为右侧区域添加作者:


  <div class="right-area">

           <div class="author-box">

               <h3>诗人</h3>

               <p>李白</p>

               <p>杜甫</p>

               <p>白居易</p>

           </div>

       </div>


为作者区域添加简单的样式:


 /* 作者 */

       .author-box {

           background-color: #E9EBEC;

           padding: 8px;

           margin: 24px 0px;

       }


       /* 条目 */

       .author-box p {

           padding: 16px 0px;

       }


此时效果如下:



3.5 底部版权区域

在底部添加版权区域:


 <div class="footer">

       版权所有:熊猫大哥大

   </div>


为底部区域添加简单样式,需要注意的是由于内容区域使用了float浮动,到底部的时候需要通过clear: both;清除浮动,从而继续往下占据正常的空间。


 /* 底部 */

       .footer {

           clear: both;

           background: #5576BD;

           height: 48px;

           line-height: 48px;

           text-align: center;

       }


最终效果如下:



4. 小结

整体还是从上到下,依次编写。中间内容区域通过浮动分为两栏,整体还是比较简单的。


上一篇:JavaWeb学习之路(50)–CSS应用实例之图片


下一篇:Python Flask 简明教程(12)--Flask获取Ajax传输的JSON数据