<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>绝对定位</title>

<style type="text/css">

@charset "utf-8";

/* DIVCSS5-CSS初始化 */

body, div, ul, li,h3{margin:0; padding:0;font-style: normal;font:12px/22px "\5B8B\4F53",Arial, Helvetica, sans-serif}

ol, ul ,li{list-style:none}

img {border: 0; vertical-align:middle}

body{color:#FFF;background:#FFF; text-align:center}

a{color:#000;text-decoration:none}

a:hover{color:#BA2636;text-decoration:underline}

/* 根据本实例 设置超链接字体与没有超链接字体演示为白色 */

#wrapper{ margin:0 auto;position:relative;width:610px;height:559px;background:url(http://www.divcss5.com/yanshi/2014/2014062603/images/bg.jpg) no-repeat}

/* position:relative是绝对定位关键，父级设置 */

.box1{ position:absolute; width:147px; height:140px; left:198px; top:14px}

.box2{position:absolute; width:141px; height:186px; left:31px; bottom:17px}

.box3{position:absolute; width:132px; height:188px; right:28px; bottom:67px}

/* position:absolute是绝对定位关键，子级设置同时lef right top bottom配合使用 */

h3.title{ height:32px; line-height:32px; font-size:14px; font-weight:bold; text-align:left}

/* 标题统一设置 */

ul.list{ text-align:left; width:100%; padding-top:8px}

ul.list li{ width:100%; text-align:left; height:22px;overflow:hidden}

/* 加了overflow:hidden防止内容过多后自动换行 隐藏超出内容 */

</style>

</head>

<body>

<div id="wrapper">

    <div class="box1">

        <h3 class="title">新闻动态</h3>

        <ul class="list">

            <li><a href="javascript:">不会程序能学会CSS吗？</a></li>

            <li><a href="javascript:">DIVCSS学习难吗？</a></li>

            <li><a href="javascript:">我要参加DIVCSS5的培训</a></li>

            <li><a href="javascript:">jQuery所以版本集合整理</a></li>

        </ul>

    </div>

    <div class="box2">

        <h3 class="title">DIVCSS5栏目</h3>

        <ul class="list">

            <li><a href="javascript:">CSS基础教程</a></li>

            <li><a href="javascript:">HTML基础教程</a></li>

            <li><a href="javascript:">CSS问题</a></li>

            <li><a href="javascript:">CSS制作工具</a></li>

            <li><a href="javascript:">DIV CSS技巧</a></li>

            <li><a href="javascript:">DIV+CSS+JS特效</a></li>

        </ul>

    </div>

    <div class="box3">

        <h3 class="title">网站栏目</h3>

        <ul class="list">

            <li><a href="javascript:">DIV CSS入门</a></li>

            <li><a href="javascript:">HTML入门教程</a></li>

            <li><a href="javascript:">CSS实例</a></li>

            <li><a href="javascript:">DIVCSS5首页</a></li>

            <li><a href="javascript:">DIV CSS模块模板</a></li>

            <li><a href="javascript:">DIV CSS WEB标准</a></li>

        </ul>

    </div>

</div>

</body>

</html>

CSS：绝对定位布局案例 position布局实例的更多相关文章

  1. CSS绝对定位和相对定位 position: absolute/relative

    absolute(绝对定位): 会把对象拖离HTML文档流,并通过top, left, right, bottom确定对象的具体位置,这个四个位置属性至少要设置一个,否则无法激活对象的absolute ...

  2. DIV CSS布局中position属性用法深入探究

    本文向大家描述一下DIV CSS布局中的position属性的用法,position属性主要有四种属性值,任何元素的默认position的属性值均是static,静态.这节课主要讲讲relative( ...

  3. CSS篇-dispaly、position、定位机制、布局、盒子模型、BFC

    display常用值 参考链接英文参考链接中文 // 常用值 none:元素不显示 inline:将元素变为内联元素,默认 block:将元素变为块级元素 inline-block:将元素变为内联块级 ...

  4. CSS 常用的定位和布局方法汇总(已添加源码地址)

    CSS-Layout 旨在打造详尽的前端布局代码学习库(自从用了框架开发,CSS生疏了不少,所以开这个库练练手)SF不能正确解析含有中文的网址,所以某些预览链接无法跳转,请访问我的博客阅读此文 常见定 ...

  5. CSS 实现：两栏布局（一边固定，一边自适应）

    ☊[实现要求]:CSS实现左边固定,右边自适应父容器宽度的两栏布局. <body> <div class="left"></div> <d ...

  6. DIV-CSS布局中position属性详解

    本文向大家描述一下DIV CSS布局中的position属性的用法,position属性主要有四种属性值,任何元素的默认position的属性值均是static,静态.这节课主要讲讲relative( ...

  7. css实现div两列布局——左侧宽度固定，右侧宽度自适应（两种方法）

    原文:css实现div两列布局--左侧宽度固定,右侧宽度自适应(两种方法) 1.应用场景 左侧一个导航栏宽度固定,右侧内容根据用户浏览器窗口宽度进行自适应 2.思路 首先把这个问题分步解决,需要攻克以 ...

  8. 【CSS】 布局之圣杯布局

    在看众多大神的css布局指南时,经常看到一个布局:圣杯布局(也有称为双飞翼布局的).今天我们也来剖析一下. 其实,对于众多css布局,我们只要明确理解了3种技术,那么基本上大多数布局都难不倒我们了: ...

  9. CSS的flex布局和Grid布局

    一.什么是 flex 布局 2009年,W3C 提出了一种新的方案----Flex 布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这 ...

随机推荐

  1. Day19作业及默写

    三级菜单 menu = { '北京': { '海淀': { '五道口': { 'soho': {}, '网易': {}, 'google': {} }, '中关村': { '爱奇艺': {}, '汽车 ...

  2. robotframework·WEB项目

    date:2018527 day11 一.项目分层 1.测试数据(配置变量,如网址.用户名.密码等) 2.关键字(关键字封装,要调用直接使用关键字名即可,输入内容.点击元素.滚动滑动条等等) 3.测试 ...

  3. [转]Peer-to-Peer Communication Across Network Address Translators

    Peer-to-Peer Communication Across Network Address Translators Bryan Ford Massachusetts Institute of ...

  4. linux系统nginx的https的跳转

    环境:系统ubuntu16 申请证书是腾讯云免费证书 首先我在安装nginx SSL证书的时候犯了个错误,nginx是需要安装SSl的模块不然没法配置完成.需要安装一个 http_ssl_module ...

  5. Ubuntu 12.04不能在華碩F81se系列電腦上安裝解决辦法

    本人華碩F81se系列的電腦,剛開始是裝的ubuntu 10.04的系統,周末閑的無聊,就想把系統換成ubuntu 12.04的,從ubuntu官網上下載了12.04的安裝包,下了個usb insta ...

  6. mac os x lipo 工具

    lipo是管理Fat文件的工具,可以查看平台列表,提取.重新打包 dreamdeMac-mini:test dream$ lipo -info libtest001.a Architectures i ...

  7. sizeof和strlen区别(转)

    char str[20]="0123456789"; int   a=strlen(str); /*a=10;strlen 计算字符串的长度,以\0'为字符串结束标记. int   ...

  8. 获取列表中的最大的N项和最小的N项

    获取列表中的最大的N项和最小的N项 #!/sur/bin/env python # -*- coding:utf-8 -*- # author:zengsf #time:2018/10/31 impo ...

  9. 基于hiredis,redis C客户端封装

    项目中需要用到redis就封装了一下,基于hiredis,只封装了string和哈希的部分方法.编译时加入-D__USER_LOCK__添加线程安全. suntelRedisCli.h #ifndef ...

  10. 小白入门photoscan

    1.安装 我装的是photoscanPro 1.4.5版本.[注]:刚开始是在官网上下载的,要收费就点了试用,结果当我等了一天把将近200张图片处理完后,告诉我试用版不能保存文件...(绝望-_- - ...