常见行布局：

导航使用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. orcle导入大数据文件

    0,创建ctl文件  内容为 OPTIONS (skip=0) LOAD DATA  CHARACTERSET 'UTF8' INFILE 'F:\anhui_data\20180814\shangh ...

  2. Idea | Load error: undefined path variables

    Load error: undefined path variables 案例 今天打开idea项目,突然间出现如下异常: Load error: undefined path variables 类 ...

  3. Java数据类型及对应取值范围

    Java数据类型及对应取值范围 在Java中,数据类型分为两大种:基本数据类型(值类型)和包装类型(引用数据类型).基本数据类型不是对象,不能调用toString().hashCode().getCl ...

  4. used in key specification without a key length

    官方的解释: The error happens because MySQL can index only the first N chars of a BLOB or TEXT column. So ...

  5. pycharm中的快捷键

    不断更新...... 1.整行向右缩进 方法:选中要向右缩进的代码,点击一次[Tab]键,向右进行一个缩进,点击2次就缩进2个[Tab]键 2.整行向左退[缩进] 方法:选中要退缩进的代码,同时点击[ ...

  6. Open Images V4 下载自己需要的类别

    OpenImages V4数据集描述1)这个v4数据集主要有两种用途:对象检测及分类,意思是说可以用这个数据集训练出对象检测模型,用于识别图像中的对象类别及位置边框.视觉关系检测,比如你用这个v4数据 ...

  7. HDU 6602 Longest Subarray (线段树)

    题意: 1e5的数组,c(1e5)种数字求最长的子串,使得其中每个出现的数字出现的次数为0次或者大于k次 思路: 枚举右端点i,维护当前右端点时,每个左端点的可行元素数量,当且仅当可行元素为c时更新答 ...

  8. Codeforces 1011C Fly(二分+模拟)

    题意: 是有n个星球,1代表地球,然后输入一个m表示火箭的重量,然后输入了两组n个数,第一组表示在每个星球起飞时消耗一吨燃料的质量数,a[i]就表示每a[i]吨就要消耗1吨燃料,第二组就表示在每个星球 ...

  9. java设计模式7——桥接模式

    java设计模式7--桥接模式 1.桥接模式介绍 桥接模式是将抽象部分与它的实现部分分离,使他们都可以独立的变化.它是一种对象结构型模式,又称为柄体模式或接口模式. 2.解决问题 2.1.将复杂的组合 ...

  10. mongo 集群（副本）搭建过程记录

    最近搭建mongo集群,回忆总结,作以记录.整个过程主要参考以下两篇文章,但是过程并不顺利,有些问题需要记录.https://www.cnblogs.com/dba-devops/p/7130710. ...