css局部概念的理解:
1、DIV-Padding理解:
一直以来对div中的padding属性,一直不理解,使用最多的也就是margin,padding是div的内空间的相对距离,margin是div的外部相对位置,如果用一个箱子来标识div,那么padding就是从箱子的边缘到箱子内部需要隔离的距离,而margin这是箱子的边缘到箱子的外部所需要间隔的距离;
2、图片的相对位置,比如原理图片中嵌入一个新的图片,如要实现下图所示效果:
在普通图片上面,再叠加一个图片(预订),那么这个就需要页面图片的叠加,html5代码如下:
<div class="divlogpage">
<img height="130" width="100%" src="data:image/loginback.png"/>
<div class="divlogpageinfo">
<p>
<label for="username">账号:</label>
<input type="text" id="username" name="username" value="" placeholder="用户名" required/>
</p>
<hr/>
<p>
<label for="passwd">密码:</label>
<input type="password" id="passwd" name="passwd" value="" placeholder="密码" required/>
</p>
</div>
</div>
css代码如下:
.divlogpage{position:relative; margin:10px;height:150px;}
.divlogpage img{ position:absolute; z-index:-1;}
.divlogpageinfo {position:absolute; z-index:; margin:10px; width:92%; font-size:18px; font-weight:bold;}
主要还是通过z-index和路径的相对和绝对处理的;
css局部概念的理解:的更多相关文章
- CSS核心概念之盒子模型
盒子模型(Box Model) 关于更多CSS核心概念的文章请关注GitHub--CSS核心概念. 当对一个文档进行布局的时候,浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型(CSS basi ...
- atitit.闭包的概念与理解attilax总结v2 qb18.doc
atitit.闭包的概念与理解attilax总结v2 qb18.doc 1.1. 闭包(Closure)是词法闭包(Lexical Closure)的简称,是引用了自由变量的函数.1 2. #---- ...
- JAVA中用堆和栈的概念来理解equals() "=="和hashcode()
在学习java基本数据类型和复杂数据类型的时候,特别是equals()"=="和hashcode()部分时,不是很懂,也停留了很长时间,最后终于有点眉目了. 要理解equals() ...
- CSS设计指南之理解盒子模型
原文:CSS设计指南之理解盒子模型 一.理解盒模型 每一个元素都会在页面上生成一个盒子.因此,HTML页面实际上是由一堆盒子组成的.默认情况下,每个盒子的边框不可见,背景也是透明的,所以我们不能直接看 ...
- CSS伪类的理解
因为之前一直对css伪类没有过多的了解,在网上看到一段css代码,不能理解 a:hover span.title{ color:red; ......... } 现通过查询css手册,其实css伪类只 ...
- 对MP4一些概念的理解
首先,对视频一些基本概念的理解: I帧:i帧又称为内编码帧,是一种自带全部信息的独立帧,可独立解码,可理解为一张静态图片,视频序列中的第一个帧始终是i帧,因为它是关键帧. P帧:P帧又称为帧间预测编码 ...
- 【C/C++】对于可重入、线程安全、异步信号安全几个概念的理解
由于前段时间,程序偶尔异常挂起不工作,检查后发现时死锁了,原因就是:在信号处理函数里面调用了fprintf. printf等io函数是需要对输出缓冲区加锁,这类函数对本身是线程安全的,但是对信号处理函 ...
- css基本概念与css核心语法介绍
css基本概念 css是什么?不需要了解太多文字类介绍,记住css是层叠样式表,HTML是页面结构,css负责页面样式,javascrt负责静态页面的交互.CSS 能够对网页中元素位置的排版进行像素级 ...
- k8s中几个基本概念的理解,pod,service,deployment,ingress的使用场景
k8s 总体概览 前言 Pod 副本控制器(Replication Controller,RC) 副本集(Replica Set,RS) 部署(Deployment) 服务(Service) ingr ...
随机推荐
- 离线渲染中的不规则光源(Meshlight)
之前一直在考虑这样一个问题,在实际生活中的光源都是有体积的,但是图形学中,很多时候我们用简单的点光源,面光源,或者方向光来模拟实际生活中这些光源,势必会产生一些误差,同时导致很多效果不好做.那么在离线 ...
- <span>和<a>的margin上下和padding上下不起作用的原因和解决
使用到了<span>和<a>标签,发现在样式里面直接写margin-top.margin-bottom和padding-top.padding-bottom都不起作用,页面样式 ...
- editplus快捷键大全之editplus文件快捷键
editplus快捷键大全之editplus文件快捷键 新建普通文本 Ctrl+N 新建普通的文本文档 新建浏览器窗口 Ctrl+Shift+B 新建浏览器窗口 新建 HTML 页 Ctrl+Shif ...
- 以DDD为开发模式的设计开发步骤可以是
以DDD为开发模式的设计开发步骤可以是:1)分析需求:2)画出用例图,系统中各个角色如何使用系统,也包括外部系统如何使用系统,也包括系统中到某个时间点自动启动的某些功能(此时角色就是时间):3)针对各 ...
- show processlist 其中status详解(适用于所有概况)
mysql show processlist分析 2011-04-11 16:13:00 分类: Mysql/postgreSQL mysql> show processlist; +—–+—— ...
- [OpenJudge 3064]坠落的蚂蚁
[OpenJudge 3064]坠落的蚂蚁 试题描述 一根长度为1米的木棒上有若干只蚂蚁在爬动.它们的速度为每秒一厘米或静止不动,方向只有两种,向左或者向右.如果两只蚂蚁碰头,则它们立即交换速度并继续 ...
- 第一次学习QT
跟着大神学:http://www.cnblogs.com/tornadomeet/archive/2012/06/25/2561007.html
- Linux CPU负载
昨天查看Nagios警报信息,发现其中一台服务器CPU负载过重,机器为CentOS系统.信息如下: 2011-2-15 (星期二) 17:50 WARNING - load average: 9.73 ...
- CC MayClg 15 T3
www.codechef.com/MAY15/problems/CHAPD 一道比较神奇的题目... 看到题目后自己yy出了个傻逼算法...然后对拍都是对的...提交都是错的...然后一看" ...
- Android自定义dialogdemo
很多时候,我们需要自己去定义dialog,目前我们就遇见了这样一个需求,我的想法是自己定义一个dialog,如果有list的话就使用listview,如果有msg的话就使用msg,并且取消和确定按钮也 ...