CSS:绝对定位布局案例 position布局实例
<!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布局实例的更多相关文章
- CSS绝对定位和相对定位 position: absolute/relative
absolute(绝对定位): 会把对象拖离HTML文档流,并通过top, left, right, bottom确定对象的具体位置,这个四个位置属性至少要设置一个,否则无法激活对象的absolute ...
- DIV CSS布局中position属性用法深入探究
本文向大家描述一下DIV CSS布局中的position属性的用法,position属性主要有四种属性值,任何元素的默认position的属性值均是static,静态.这节课主要讲讲relative( ...
- CSS篇-dispaly、position、定位机制、布局、盒子模型、BFC
display常用值 参考链接英文参考链接中文 // 常用值 none:元素不显示 inline:将元素变为内联元素,默认 block:将元素变为块级元素 inline-block:将元素变为内联块级 ...
- CSS 常用的定位和布局方法汇总(已添加源码地址)
CSS-Layout 旨在打造详尽的前端布局代码学习库(自从用了框架开发,CSS生疏了不少,所以开这个库练练手)SF不能正确解析含有中文的网址,所以某些预览链接无法跳转,请访问我的博客阅读此文 常见定 ...
- CSS 实现:两栏布局(一边固定,一边自适应)
☊[实现要求]:CSS实现左边固定,右边自适应父容器宽度的两栏布局. <body> <div class="left"></div> <d ...
- DIV-CSS布局中position属性详解
本文向大家描述一下DIV CSS布局中的position属性的用法,position属性主要有四种属性值,任何元素的默认position的属性值均是static,静态.这节课主要讲讲relative( ...
- css实现div两列布局——左侧宽度固定,右侧宽度自适应(两种方法)
原文:css实现div两列布局--左侧宽度固定,右侧宽度自适应(两种方法) 1.应用场景 左侧一个导航栏宽度固定,右侧内容根据用户浏览器窗口宽度进行自适应 2.思路 首先把这个问题分步解决,需要攻克以 ...
- 【CSS】 布局之圣杯布局
在看众多大神的css布局指南时,经常看到一个布局:圣杯布局(也有称为双飞翼布局的).今天我们也来剖析一下. 其实,对于众多css布局,我们只要明确理解了3种技术,那么基本上大多数布局都难不倒我们了: ...
- CSS的flex布局和Grid布局
一.什么是 flex 布局 2009年,W3C 提出了一种新的方案----Flex 布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这 ...
随机推荐
- git命令学习
git init:把当前目录变成Git可以管理的仓库git add file:把文件添加到仓库git commit -m "描述语句":把文件提交到仓库git status:该命令 ...
- JAVA_全局配置文件(配置网址,url等等)_第二种方式
@ComponentScan主要就是定义扫描的路径从中找出标识了需要装配的类自动装配到spring的bean容器中 1.application-local.yml 配置文件 2.Service 3. ...
- tomcat 配置成服务
1.下载Zip版Tomcat;选择:32-bit Windows zip(pgp,md5)下载解压文件到指定目录,如:D:/ProgramFiles/Tomcat6 进入D:/ProgramFiles ...
- SQL server 存储过程学习
一.定义变量--简单赋值 declare @a intset @a=5 print @a --使用select语句赋值 declare @user1 nvarchar(50) select @user ...
- 路径问题 :<c:url >的作用
最近的项目一直报这样的错 可是本地启动 又没问题,xshell查看日志 没有错误日志,找了好久都没想到错误原因.一位大佬几分钟就找到原因了有点扎心. 首先说一下解决问题的思路.首先报错是4开头,说明是 ...
- 如何用DAX实现查看每个月中不同类别排名前一位,以及一个简单的svg案例
现在给大家带来的是如何用DAX实现查看每个月中不同类别的排名前一位,最终完成效果如下!!! 首先我们需要两张简单的表 基数表 和类别表 当我们创建好表之后,我们再创建一个表格,然后我们将类别表里的列值 ...
- Spring Boot 揭秘与实战(二) 数据存储篇 - Redis
文章目录 1. 环境依赖 2. 数据源 2.1. 方案一 使用 Spring Boot 默认配置 2.2. 方案二 手动创建 3. 使用 redisTemplate 操作4. 总结 3.1. 工具类 ...
- Failed to decode response: zlib_decode(): data error
/********************************************************************** * Failed to decode response: ...
- LBS推荐系统的设计方法
https://www.csdn.net/article/2015-12-24/2826554 http://www.datayuan.cn/article/14797.htm https://my. ...
- 20155208 实验四 Android开发基础
20155208 实验四 Android开发基础 实验内容 1.基于Android Studio开发简单的Android应用并部署测试; 2.了解Android.组件.布局管理器的使用: 3.掌握An ...