常见行布局：

导航使用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. Leetcode 题目整理

    1. Two Sum Given an array of integers, return indices of the two numbers such that they add up to a ...

  2. 部署 harbor 私有仓库

    安装下载依赖包 安装docker-compose 从 docker compose 发布页面下载最新的 docker-compose 二进制文件,本文以1.25.4为例 cd /opt/k8s/wor ...

  3. Codeforces_732_D

    http://codeforces.com/problemset/problem/732/D 二分查找. #include<iostream> #include<cstring> ...

  4. ncbi-blast 本地安装

    详见:http://blog.shenwei.me/local-blast-installation/ Linux系统中NCBI BLAST+本地化教程 本文面向初学者(最好还是懂得基本的linux使 ...

  5. 《Redis5.x入门教程》正式推出

    关注公众号CoderBuff回复"redis"可抢先获取<Redis5.x入门教程>PDF完整版 在<ElasticSearch6.x实战教程>之后,又斗胆 ...

  6. NR / 5G - The Round Robin algorithm

  7. ELF文件之三——使用链接脚本-2个函数

    main.c int main() { ; } int add() { ; } main.o的比较 与之二相比,section header offset由0x90变为0xA4,增加0x14,即add ...

  8. ELF和BIN的区别，资料整理

    https://www.cnblogs.com/fah936861121/articles/8143556.html 1.Bin Bin文件是最纯粹的二进制机器代码, 或者说是"顺序格式&q ...

  9. 维基逃离MySQL 力挺开源数据库 MariaDB

    近日全球著名百科类网站维基百科宣布,将不会再用MySQL数据库,据国外媒体报道,很多年,MySQL一直是热门的开源数据库,不过在被甲骨文收购后,面临闭源的风险.因此维基百科将切换到另外一款开源数据库M ...

  10. VNC 远程桌面 连接（安装桌面程序）

    1.修改linux启动方式       # vi /etc/inittab         将3改为5     id:5:initdefault:   2.关闭防火墙(或者单独打开接口)     #s ...