css 绝对定位整页布局演示

最新推荐文章于 2022-10-16 18:38:34 发布
最新推荐文章于 2022-10-16 18:38:34 发布
阅读量349 收藏
点赞数
html 同时被 2 个专栏收录
26 篇文章 0 订阅
订阅专栏
css
19 篇文章 0 订阅
订阅专栏 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<title>绝对定位整页布局演示</title>
<link rel="stylesheet" href="absolute.css">
<style>
body { font-family: 'microsoft yahei'; }
</style>
</head>

<body>
<div class="page">
    <div class="header">
        <h1>慕课网</h1>
        <a href="javascript:" class="icon-add">添加</a>
        <a href="javascript:" class="icon-search">搜索</a>
    </div>
    <div class="content">
    	<div class="">
        	<a href="http://www.imooc.com/learn/192" class="wechat-list">
            	<img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
                <div class="cell">
                	<div class="wechat-h-time"><h5>张鑫旭</h5><time>早上09:51</time></div>
                    <p>CSS深入理解值绝对定位</p>
                </div>
            </a>
        	<a href="http://www.imooc.com/learn/192" class="wechat-list">
            	<img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
                <div class="cell">
                	<div class="wechat-h-time"><h5>张鑫旭</h5><time>早上09:38</time></div>
                    <p>如果高度不够，可以手动缩小浏览器高度</p>
                </div>
            </a>
            <a href="http://www.imooc.com/learn/192" class="wechat-list">
            	<img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
                <div class="cell">
                	<div class="wechat-h-time"><h5>张鑫旭</h5><time>早上08:47</time></div>
                    <p>此demo是本系列最后一个demo</p>
                </div>
            </a>
            <a href="http://www.imooc.com/learn/192" class="wechat-list">
            	<img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
                <div class="cell">
                	<div class="wechat-h-time"><h5>张鑫旭</h5><time>早上08:36</time></div>
                    <p>此demo需要在高级浏览器中查看</p>
                </div>
            </a>
            <a href="http://www.imooc.com/learn/192" class="wechat-list">
            	<img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
                <div class="cell">
                	<div class="wechat-h-time"><h5>张鑫旭</h5><time>昨天</time></div>
                    <p>重在原理展示，结构可多变。例如，header放在page外面~~</p>
                </div>
            </a> 
            <a href="https://github.com/zhangxinxu/mobilebone" class="wechat-list">
            	<img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
                <div class="cell">
                	<div class="wechat-h-time"><h5>张鑫旭</h5><time>昨天</time></div>
                    <p>最近鄙人整了个名叫Mobilebone的开源项目</p>
                </div>
            </a>
            <a href="https://github.com/zhangxinxu/mobilebone" class="wechat-list">
            	<img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
                <div class="cell">
                	<div class="wechat-h-time"><h5>张鑫旭</h5><time>星期三</time></div>
                    <p>就是依赖绝对定位整体布局，大家可以前去围观</p>
                </div>
            </a>
            <a href="http://www.imooc.com/learn/192" class="wechat-list">
            	<img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
                <div class="cell">
                	<div class="wechat-h-time"><h5 class="business">慕课网</h5><time>星期三</time></div>
                    <p><img src="http://img.mukewang.com/547d33a00001299b00320033.jpg" width="16" height="16"></p>
                </div>
            </a>
            <a href="http://www.imooc.com/learn/121" class="wechat-list">
            	<img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
                <div class="cell">
                	<div class="wechat-h-time"><h5>张鑫旭</h5><time>星期三</time></div>
                    <p>CSS深入理解之浮动</p>
                </div>
            </a>
            <a href="http://www.imooc.com/learn/121" class="wechat-list">
            	<img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
                <div class="cell">
                	<div class="wechat-h-time"><h5>张鑫旭</h5><time>上周</time></div>
                    <p>同样精彩，欢迎支持~</p>
                </div>
            </a>
        </div>
    </div>
    
    <div class="footer">
        <a href="http://www.imooc.com/course/list">
            <i class="icon-wechat"></i>课程
        </a>
        <a href="http://www.imooc.com/wenda">
            <i class="icon-contacts"></i>问答
        </a>
        <a href="http://www.imooc.com/seek/index">
            <i class="icon-finds"></i>求课
        </a>
        <a href="http://www.imooc.com/space/course" class="active">
            <i class="icon-mes"></i>我的课程
        </a>
    </div>
</div>
</body>
</html>

qq_27084325
关注
专栏目录
CSS基础(19)_绝对定位元素的水平或垂直布局
no15870678621的博客
04-12 981
绝对定位元素的水平或垂直布局
css-绝对定位的参考对象
03-05
在CSS布局中，绝对定位（absolute positioning）是一种强大的定位机制，允许元素脱离其正常文档流，并根据相对于某个特定祖先元素的位置进行布局。这篇博客“css-绝对定位的参考对象”深入探讨了这一主题，让我们一...
绝对定位布局
saygoodto的博客
10-23 596
绝对定位布局 1.    static：静态布局，无特殊定位，处于元素没有设定定位的默认状态， 如： 2.    relative：相对定位，顾名思义相对定位是相对于默认位置的定位，且在设置偏移量之后， 会产生z-index（空间偏移量），自身也会脱离文本流，值得注意的是在设置的相对定位之后，虽然自身脱离了文档流，但在文档流中还保留着其原始位置且不会被其他元素占用。如：
使用absolute实现的后台布局，包括小图标定位，菜单弹出等完整版
weixin_30902675的博客
04-06 150
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="font-awesome-4.7.0/css/font-a...
css——完整网页
weixin_45323349的博客
04-21 595
目标样式： 第一步设置基本边框 观察整个网页布局，在此基础上安排好框架 代码： <html> <head> <title>万豪</title> <style type="text/css"> /*设置整个网页的大小*/ .over{ width:800px; height: 1000px;
CSS-使整个页面上的全部元素可编辑
anleng6817的博客
01-01 696
# [在线预览](https://jsfiddle.net/1010543618/6zu1gush/) ## 方法一 - 使用 html 的 contenteditable 属性： [HTML 5 全局 contenteditable 属性](http://www.w3school.com.cn/html5/att_global_contenteditable.asp...
CSS布局深入理解：绝对定位与相对定位
本文是一篇关于CSS网页布局的教程，重点讲解了相对定位和绝对定位的概念、用法和区别。同时，介绍了如何利用CSS的Left、Right、Top、Bottom偏移属性以及Margin外边距属性来对块级元素进行布局。 在CSS中，定位是...
CSS相对定位与绝对定位详解：布局与影响深度
总结来说，CSS的相对定位和绝对定位提供了丰富的布局手段，理解它们的工作原理，结合实际场景中的left、right、top、bottom和margin属性使用，可以有效地创建出富有层次感和动态效果的网页布局。通过实例演示和详细...
CSS定位详解：浮动、绝对与固定布局深入解析
本文档详细讲解了三种基本的CSS定位机制：普通流、浮动和绝对定位。 1. **CSS定位和浮动**：CSS提供了position属性来管理元素的位置，包括static（默认值）、relative、absolute和fixed。浮动允许元素脱离普通文档...
css选择器归纳
m0_61384067的博客
10-16 527
css选择器归纳 通配，元素，id,类，并集，交集，后代，子元素，伪类选择器
前端——如何用绝对定位(position:absolute)完美定位布局及其注意事项
热门推荐
Searchin_R的博客
10-12 2万+
在布局的过程中我们经常用到绝对定位，很多初学者在一开始用绝对定位经常会达不到预期的效果，因为它们往往会忽略使用绝对定位的两个条件。 什么？使用绝对定位还要条件？？？ 当然要啦！代码又没有脑子，没法自己思考应该定位到哪里。为了使用的时候方便，使用绝对定位的时候要满足两个条件。 在讲这两个条件的之前，我们要先提一个概念——标准流。 什么是标准流呢？ 标准流（normal flow），也被称为...
css实现元素充满整个页面
总柴的博客
12-16 2454
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { padding: 0; margin: 0; }
CSS position静态定位、相对定位、绝对定位、固定定位
qq_46241430的博客
08-16 386
参考原文链接： CSS相对定位和绝对定位 | 菜鸟教程 关于position:fixed的注意点-天天向上吧-博客园 CSS position 属性 属性 说明 static 静态定位，默认值，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 relative 相对定位，相对于其正常位置进行定位。 absolute 绝对定位，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "
mysql cmd全屏_CSS全屏布局的5种方式
weixin_39571938的博客
01-27 135
思路一: float【1】float + calc通过calc()函数计算出.middle元素的高度，并设置子元素高度为100%body,p{margin:0;}body,html,.parent{height:100%;}.middle{overflow:hidden;height:calc(100%-100px);}.left{float:left;width:100px;ma...
css样式实现整个页面背景使用一张图片
业精于勤荒于嬉;行成于思，毁于随。
08-19 3811
现在很多网站的小图标都是共享的
css布局方式
weixin_43948136的博客
07-04 162
前端常见的几种布局方式 1.BFC和float 左边元素设置浮动和宽度，右边元素触发BFC，使其不与浮动盒子区域重叠并充满剩下空间。代码如下： <div class="container"> <div class="left"></div> <div class="right"><...
相对定位和绝对定位
qq_45418844的博客
12-10 118
1、relative：相对于原来位置移动，元素设置此属性之后仍然处在文档流中，不影响其他元素的布局，元素的宽高不变，设置偏移量也不会影响其他元素的位置。 2.absolute：设置了absolute的元素脱了了文档流，元素在没有设置宽度的情况下，宽度由元素里面的内容决定。 父元素如果没有定位，子元素定位了，则子元素相对html定位； 父元素如果定位了，子元素也定位了，元素会相对于离自己最近的设置了相对或绝对定位的父元素进行定位。 如果想要实现一个盒子覆盖另外一个盒子，上面的盒子可以用z-i.
css完整总结：第一篇（定位和布局）
古语静水流深
02-07 445
这次对CSS中所有的语法进行一次综合性的总结，后续的文章，将侧重与JavaScript和PHP，微信开发（小程序），以及Linux运维方面。css中设计到定位，布局，尺寸，外补白，内补白，边框，背景，颜色，字体，文本，文本装饰，书写模式，伸缩盒，装换，过渡，动画，媒体查询，伪类等等。我会集中对上述所说的方面进行详细的书写和说明，结合实例，让大家更好更快的掌握css3.0.那下面我们闲话少啥，拿起键
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值