常见行布局：

导航使用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. VS2013 连接 Oracle出现尝试加载 Oracle 客户端库时引发 BadImageFormatException 32位与64位问题解决方案

    摘自 :https://blog.csdn.net/similing/article/details/54318434 遇到这种问题是64位系统安装32位Oracle与VS2010的连接出现问题 解决 ...

  2. npm、node版本升级与淘宝镜像

            npm --version  ==   npm -v       查看npm版本            node -v  查看node版本         升级npm版本   npm  ...

  3. vue报错Error in v-on handler: "RangeError: Maximum call stack size exceeded"

    看下面的报错 错误 看到这个错误一脸懵逼.后面了解到,是因为程序进入了死循环,后面检查了我的代码,原来在这里自己调用自己

  4. svg图片在vue脚手架vue-cli怎么使用

    第一种 使用vue2-svg-icon npm install vue2-svg-icon --save-dev` 下载之后在mian.js引入 名字可以随便起,这里我起icon 引入svg资源 这时 ...

  5. 实验7：交换机IOS升级

    交换机IOS升级首先需要有IOS文件,如果没有备份原文件的话,可以找个同一版本的IOS来替代. 第一种方法:X-Modem 以前我曾经尝试过一种方法,就是当Flash被删除后,启动无法进入系统,可以用 ...

  6. PAT_B1002数字分类

    #include<stdio.h> #include<iostream> using namespace std; int main(){ ,a2=,a3=,a5=; ; ; ...

  7. EMC networker nmm can restore and recover sqlserver as different name to different location

    EMC networker nmm can restore and recover sqlserver as different name to different location That is ...

  8. mybatis缓存问题导致无法查询到数据

    今天查询记录时,发现重复查询结果时出现空记录的情况 查看控制台信息,只有红色框选部分有进行查询数据,而其他没有.然而上图可看出有两条数据是能展现出来的,故有可能是mybatis缓存命中的. 因此在ma ...

  9. Vsftpd: 基于PAM认证的虚拟用户和匿名用户

    目录 环境说明效果说明及截图①. 安装组件②. 系统账户建立③. 编辑vsftpd的配置文件④. 生成虚拟用户的数据库文件⑤. 生成一个使用vsftpd_login.db数据文件的PAM认证文件⑥. ...

  10. Go语言实现：【剑指offer】矩阵中的路径

    该题目来源于牛客网<剑指offer>专题. 请设计一个函数,用来判断在一个矩阵中是否存在一条包含某字符串所有字符的路径.路径可以从矩阵中的任意一个格子开始,每一步可以在矩阵中向左,向右,向 ...