常见行布局：

导航使用position:fixed固定住

导航会脱离文档流，不占据空间

导致下面的元素上移，因此需要将下面的元素的padding-top设置成导航的高度

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        *{

            margin:0;

            padding:0;

        }

        .header{

            width:100%;

            height:50px;

            background:#333;

            color:#fff;

            text-align: center;

            line-height:50px;

            position:fixed;

        }

        .banner{

            width:1200px;

            height:200px;

            margin:0 auto;

            background:#ccc;

            padding-top:50px;

        }

    </style>

</head>

<body>

    <div class="header">导航</div>

    <div class="banner">banner图</div>

</body>

</html>

如果行高的单位是百分比，那么是基于当前字体尺寸的百分比行间距

经典的两列布局

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        *{

            margin:0;

            padding:0;

            font-size:14px;

        }

        .header{

            width:100%;

            height:60px;

            background:#000;

            color:#fff;

            line-height:60px;

            position:fixed;

        }

        .logo img{

            float:left;

            margin-left:20px;

        }

        ul{

            list-style:none;

            float:right;

            margin-right:20px;

        }

        ul li{

            float:left;

            margin-right:20px;

        }

        ul li a{

            text-decoration: none;

            color:#fff;

        }

        .container{

            width:100%;

            height:400px;

            background:rgb(173,216,230);

            padding-top:150px;

        }

        .left{

            width:35%;

            float:left;

            padding-left:15%;

        }

        .right{

            width:35%;

            float:right;

            padding-left:15%;

        }

        .left h1,

        .right h1{

            font-size:20px;

            margin-bottom:10px;

        }

        .item{

            height:40px;

            line-height:40px;

        }

        .item span{

            background:rgb(201,98,79);

            margin-right:2em;

            color:#fff;

        }

        .footer{

            width:100%;

            height:60px;

            background:#333;

            color:#fff;

            text-align: center;

            line-height:60px;

        }

        .footer span{

            margin-right:30px;

        }

        .footer span:last-child{

            margin-right:0;

        }

    </style>

</head>

<body>

    <div class="header">

        <div class="logo"><img src="cat-little.jpg" alt="logo" height="60px"></div>

        <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>

    <div class="container">

        <div class="left">

            <h1>推荐哦</h1>

            <div class="item">

                <span>此乃路径</span>

                html5与css3实现动态网页

            </div>

            <div class="item">

                <span>此乃路径</span>

                html5与css3实现动态网页

            </div>

            <div class="item">

                <span>此乃路径</span>

                html5与css3实现动态网页

            </div>

            <div class="item">

                <span>此乃路径</span>

                html5与css3实现动态网页

            </div>

            <div class="item">

                <span>此乃路径</span>

                html5与css3实现动态网页

            </div>

        </div>

        <div class="right">

            <h1>其他相关</h1>

            <div class="item">

                HTML&nbsp;&nbsp;CSS&nbsp;&nbsp;JavaScript

            </div>

            <div class="item">

                HTML&nbsp;&nbsp;CSS&nbsp;&nbsp;JavaScript

            </div>

            <div class="item">

                HTML&nbsp;&nbsp;CSS&nbsp;&nbsp;JavaScript

            </div>

        </div>

    </div>

    <div class="footer">

        <span>友链</span>

        <span>友链</span>

        <span>友链</span>

        <span>友链</span>

        <span>友链</span>

    </div>

</body>

</html>

图文混排使用：dl dt dd

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        *{

            margin:0;

            padding:0;

            font-size:14px;

        }

        .container{

            background:#ccc;

        }

        .content{

            width:1000px;

            margin:0 auto;

        }

        dl{

            width:300px;

            float:left;

            text-align:center;

            margin-right:50px;

        }

        dl:last-child{

            margin-right:0;

        }

        dl img{

            width:300px;

        }

    </style>

</head>

<body>

    <div class="container">

        <div class="content">

            <dl>

                <dt><img src="cat.jpg"></dt>

                <dd>这是一段关于图片的简要描述</dd>

            </dl>

            <dl>

                <dt><img src="cat.jpg"></dt>

                <dd>这是一段关于图片的简要描述</dd>

            </dl>

            <dl>

                <dt><img src="cat.jpg"></dt>

                <dd>这是一段关于图片的简要描述</dd>

            </dl>

        </div>

    </div>

</body>

</html>

css的网页布局案例的更多相关文章

  1. DIV+CSS常用网页布局技巧！

    以下是我整理的DIV+CSS常用网页布局技巧,仅供学习与参考! 第一种布局:左边固定宽度,右边自适应宽度 HTML Markup <div id="left">Left ...

  2. PHP.4-DIV+CSS标准网页布局准备工作（下）

    DIV+CSS标准网页布局准备工作 区块属性(区块模型) 属 性 描 述 Margin(注) 是定义区块外边界与上级元素距离的属性,用1到4个值来设置元素的边界,每个值都是长度.百分比或者auto,百 ...

  3. PHP.3-DIV+CSS标准网页布局准备工作（上）

    DIV+CSS标准网页布局准备工作(上) 概述 使用"DIV+CSS"对网站进行布局符合W3C标准,采用这种方式布局通常是为了说明与HTML表格定位方式的区别.因为现在的网站设计标 ...

  4. 一、HTML和CSS基础--网页布局--网页布局基础

    W3C标准: 由万维网联盟制定的一系列标准,包括: 结构化标准语言(HTML和XML) 表现标准语言(CSS) 行为标准语言(DOM和ECMAScript) 倡导结构.样式.行为分离. CSS 规定的 ...

  5. 一、HTML和CSS基础--网页布局--如何用css进行网页布局

    什么叫做布局? 又称版式布局,是网页UI设计师将有限的视觉元素进行有机的排列组合. 网页设计的特点 网页可以自适应宽度 网页的高度理论上可以无限延长 网页分栏 分栏又称为分列,常见的布局分为:一列布局 ...

  6. 利用css进行网页布局

    网页布局: 又称版式布局,是网页UI设计师将有限的视觉元素进行有机的排列组合,将理性的思维个性的化的表现出来,是一种具有个人艺术特色的视觉传达方式.传达信息的同时有美感.网页设计特点(相对纸媒来说). ...

  7. css基础-定位+网页布局案例

    position:static 忽略top/bottom/left/right或者z-index position:relative 设置相对定位的元素不会脱离文档流 position:fixed 不 ...

  8. 一、HTML和CSS基础--网页布局--网页简单布局之结构与表现原则

    结构.表现和行为分离,不仅是一项技术,更主要的是一种思想,当我们拿到一个网页时,先考虑设计图中的文字内容和内容模块之间的关系,重点放在编写html结构和语义化,然后考虑布局和表现形式.,减少HTML与 ...

  9. 一、HTML和CSS基础--网页布局--实践--导航条菜单的制作

    案例一:导航菜单的制作 垂直菜单

随机推荐

  1. Java爬虫框架之WebMagic

    一.介绍 WebMagic是一个简单灵活的Java爬虫框架.基于WebMagic,你可以快速开发出一个高效.易维护的爬虫. 二.如何学习 1.查看官网 官网地址为:http://webmagic.io ...

  2. 安卓开发实战-记账本APP（四）

    今天实现的内容有:添加账本信息,个人头像的切换,密码的修改,退出登录. 添加账本信息有三个功能: ①记一笔支出项目 ②记一笔收入项目 ③清空所有项目 在此期间遇到的困难有:Activity与Fragm ...

  3. 倒转数组 Leetcode189

    倒转数组 Leetcode189 记录调整数组顺序而不需要另加内存的一种方法: 题目 189. 旋转数组 给定一个数组,将数组中的元素向右移动 k 个位置,其中 k 是非负数. 示例 1: 输入: [ ...

  4. C++ 类模板详解(一)：概念和基本使用方式

    与函数模板类似地(C++函数模板详解(一):概念和特性) ,类也可以被一种或多种类型参数化.例如,容器类就是一个具有这种特性的典型例子,它通常被用于管理某种特定类型的元素.只要使用类模板,我们就可以实 ...

  5. ros机器人之小乌龟仿真－路径记录

    ------------恢复内容开始------------ 通过自己不断地摸索,对ros系统有了一定的了解,首先装系统,这一过程中也遇到了很多问题,但通过不断地尝试,经过一天一夜的倒腾,总算是把系统 ...

  6. 如何在国内下载Eclipse及其插件

    北京理工大学 http://mirror.bit.edu.cn/eclipse/ 中国科学技术大学 http://mirrors.ustc.edu.cn/eclipse/ 大连东软信息学院 http: ...

  7. Java中的代码点与代码单元

    在Java中,什么是代码点与代码单元? 代码点(Code Point):在 Unicode 代码空间中的一个值,取值 U+0000 至 U+10FFFF,代表一个字符. 其中U+0000到U+FFFF ...

  8. LeetCode227：基本计算器II

    感觉自己的思路还不错,比较简单清晰,代码量也比较少,没有用到记录运算符的变量或栈,就想把这个思路发一下博客. 题目: 实现一个基本的计算器来计算一个简单的字符串表达式的值. 字符串表达式仅包含非负整数 ...

  9. Java 中序列化与反序列化

    一. 序列化和反序列化概念 Serialization(序列化)是一种将对象以一连串的字节描述的过程:反序列化deserialization是一种将这些字节重建成一个对象的过程.将程序中的对象,放入文 ...

  10. 使用github--stanfordnlp--glove训练自己的数据词向量

    1.准备语料 准备好自己的语料,保存为txt,每行一个句子或一段话,注意要分好词.将分好词的语料保存为×××.txt 2.准备源码 下载地址:https://github.com/stanfordnl ...