常见行布局：

导航使用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. 关于puremvc的几点思考

    软件框架 框架要解决的问题是什么?这个问题感觉不能一概而论,就目前我遇到的项目实际来说主要是要解决以下几个问题 复用 并行开发 跨平台 项目背景:视频监控领域下,C/S & B/S模式的PC客 ...

  2. jmeter新手学习笔记（一）

    使用jmeter做接口测试--设置线程组 1.创建线程组 2.设置线程数配置信息 线程组:常用于模拟并发用户访问,例如需要100个用户访问该接口,线程数则设置为100 Ramp-Up Period:决 ...

  3. python书籍推荐以及杂七杂八

    黄哥推荐学习Python 10本好书 Python3网络爬虫开发实战 github daily-reading 想对大家说的话 POJ 算法练习 http://openjudge.cn/ http:/ ...

  4. 搭建python运行环境

    一.下载Anaconda Anaconda是Python的包管理器和环境管理器 https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/ 参考:ht ...

  5. 数据算法 --hadoop/spark数据处理技巧 --（11.K-均值聚类 12. k-近邻）

    十一.k-均值聚类 这个需要MR迭代多次. 开始时,会选择K个点作为簇中心,这些点成为簇质心.可以选择很多方法啦初始化质心,其中一种方法是从n个点的样本中随机选择K个点.一旦选择了K个初始的簇质心,下 ...

  6. Language Model

    在某次会上的语言模型的ppt.

  7. 忘记centos的root用户密码怎么办?

    1 重置centos7管理员密码 1.1 重置centos7管理员密码的几个步骤 1)重启服务器后,在grub菜单界面,根据界面显示的提示信息,按 e 进入编辑模式.注意:是否开启selinux,重置 ...

  8. SpringCloud微服务：阿里开源组件Nacos，服务和配置管理

    源码地址:GitHub·点这里||GitEE·点这里 一.阿里微服务简介 1.基础描述 Alibaba-Cloud致力于提供微服务开发的一站式解决方案.此项目包含开发分布式应用微服务的必需组件,方便开 ...

  9. asp.net MVC项目开发之统计图echarts饼形图（二）

    上面介绍了柱状图,只有js代码后台的传递等我们介绍完饼形图的使用过程在做介绍 有了柱状图的介绍,在使用饼形图,其实很容易了,上代码 1.首先加载网页时,需要用到的加载项和事件. //打开网页加载 $( ...

  10. 双向绑定Proxy VS Object.defineProperty

    Vue3.0的双向绑定将使用Proxy代替Object.defineProperty,据尤大说,速度提升了1倍. 本文我们来探讨一下Proxy对比Object.defineProperty究竟有哪些优 ...