position | 易学教程

position 中五种位置的区别

阅读更多关于 position 中五种位置的区别

CSS中position有static（静态的）、relative（相对的）、absolute（绝对的）、fixed（固定的）、sticky(粘性)。在这里以box为例来说明其中的区别： HTML： <!DOCTYPE HTML> <html> <head> <body> <h3>注册新用户</h3> <link type="text/css" rel="stylesheet" href="mystyle.css"> <div class="classy">这是div一个特殊类</div> <div class="box" id="one">One</div> <div class="box" id="two">Two</div> <div class="box" id="three">Three</div> <div class="box" id="four">Four</div> </body> </html> CSS： h3 {color: blueviolet; } .classy{ background-color: brown; } .box{ display: inline-block; width: 100px; height: 100px; background: red; color: white; } #two{ position: static; top:

CSS元素的定位

阅读更多关于 CSS元素的定位

概述网页布局的核心就是定位，盒模型是浏览器为页面中的每个HTML元素生成的矩形盒子；所以HTML页面实际上是由一堆盒子组成的，只不过在默认情况下，这些盒子边框是不可见的，背景也是透明的而已，这些盒子按照可见版式模型在Web页面上排布。页面版式由三个属性控制：position属性、display属性、float属性 position属性:控制页面上元素间的位置关系 display属性：控制元素堆叠、并排、显示 float属性:控制组成多栏布局盒子 Web页面中的每个盒子（元素）都有：边框(border)、内边距(padding)、外边距(margin) 边距(border):控制盒子边框的宽窄、样式、颜色内边距(padding):控制盒子内容与边距间的距离外边距(margin):控制盒子与盒子间的距离每个盒子有四条边，所以与边框、内边距、外边距相关的属性也各有四个：上(top)、右(right)、下(bottom)、左(left) 边框下面是一个段落元素的盒模型：整个盒子的宽度等于我们设置的宽度300+左右内边距2*5 + 左右边距2*3=316 高度等于20+上下内边距2*5+上下边距2*3=36 边框有三个属性：宽度(border-width)、样式(border-style)、颜色(border-color) 宽度:可以使用thin、medium

css 定位

阅读更多关于 css 定位

对于(例如元素div1)position:absolute时，是相对于已定位的最近父元素，如果没有已定位的父元素，则相对于初始包含块（html）其中这里说的"已定位的父元素"是指position属性为relative,absolute,fixed的元素，如果position的值为static或不存在，则div1则absolute则不相对于该父元素，而是相对于初始包含块。在一个一个框包含另一个框中， eg: <div class="one"> <div class="two"></div> </div> div.two相对于div.one进行定位，如果div.two为absolute定位，则不考虑div.one的padding效果。但是会考虑div.two自身的margin效果。如果div.two为relative定位，是相对与自身进行定位，要考虑div.one的padding效果。 eg:例如 <style> .one { position:relative; margin:auto; width:400px; height:400px; border:2px solid blue; box-sizing:border-box; } .two { margin:20px; top:0px; left:0px; position:absolute; width:200px;

CSS3制作各种形状图像

阅读更多关于 CSS3制作各种形状图像

圆形-椭圆形-三角形-倒三角形=左三角形-右三角形-菱形-平行四边形- 星形-六角星形-五边形-六边形-八角形-心形-蛋形-无穷符号-消息提示框不废话直接 html界面（亲测的） ------转自百度经验 http://jingyan.baidu.com/article/e52e36154226ef40c70c5148.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css3画图形</title> <style media="screen"> div{ text-align: center; display: inline-block; margin-left: 20px; } #circle {/*圆形在设置CSS时要设置宽度和高度相等，然后设置border-radius属性为宽度或高度的一半即可：*/ width: 120px; height: 120px; background: #7fee1d; -moz-border-radius: 60px; -webkit-border-radius: 60px; border-radius: 60px; } /*设置椭圆形的CSS时，高度要设置为宽度的一半，border-radius属性也要做相应的改变：*/ #oval { width: 200px

纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）

阅读更多关于纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）

1、正方形代码如下: #square { width: 100px; height: 100px; background: red; } 2、长方形 CSS代码如下： #rectangle { width: 200px; height: 100px; background: red; } 3、圆形代码如下: #circle { width: 100px; height: 100px; background: red; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; } 4、椭圆代码如下: #oval { width: 200px; height: 100px; background: red; -moz-border-radius: 100px / 50px; -webkit-border-radius: 100px / 50px; border-radius: 100px / 50px; } 5、上三角代码如下: #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom:

（七）前端基础之背景图片，图片超链接存在的问题

阅读更多关于（七）前端基础之背景图片，图片超链接存在的问题

一，background background-color和background-image可同时设置，背景颜色会作为背景图片的底色，背景图片默认在元素的左上角显示 background-position:定位背景图片在元素中的位置， 1）top ,right,left,bottom ,center。后面有2个参数，如果只写一个则第二参数默认center 2）通过xpos,ypos指定水平/垂直偏移量，值可是负数 background:position:100px 50px background-attachment:设置背景图片是否固定或随着页面的其他部分滚动 1）scroll：默认值，会随着滚动条滚动 2）fixed：不随滚动条滚动，定位永远相对浏览器窗口（不随窗口滚动的图片一般都设置给Body,不设置给其他元素）二，将图片作为超连接背景图实现按钮效果时（link，hover，active各一张曝光不同的照片），在第一次鼠标移入切换图片时会闪烁一下出现的原因：背景图片以外部资源的形式加载进网页的，浏览器每加载一个外部资源就需要单独的发送一次请求（网页中有一个外部资源就需要发送2次请求，网页本身一次+外部资源），外部资源不是同时加载的，浏览器会在资源被使用时才去加载在这个案例中，一开始浏览器只会加载link.png由于hover和active的状态没有马上触发

用css实现三级导航菜单

阅读更多关于用css实现三级导航菜单

主要使用css的hover伪类来实现该功能。主要思路：先搭出三级菜单的框架，然后使用css的：hover来实现！　　对li添加类selected，对该类添加position:relative属性，然后对其二级三级菜单添加position:absolute属性，并设置其top:-1px（因为有1像素的边框）left:-999px；使其在也页面中向左偏移出窗口。　　对li设置：hover伪类，当鼠标指针移动到li上时，改变二级三级菜单的left值，这样就可以实现一个简单的三级导航菜单！代码如下： <!doctype html> <html> <head> <meta charset="utf-8"> <title>三级导航菜单</title> <style type="text/css"> body{font-size: 12px;} .menu1, .menu1 ul { list-style: none; width: 120px; background-color: #f9f9f9; border: 1px solid #ccc; 　　 border-bottom: 0; 　　 margin: 0; 　　 padding: 0; 　　 text-align: left; 　　 text-indent: 10px; 　　} .menu1 a:hover { 　　 color

css布局

阅读更多关于 css布局

　　在css布局方式中，div 是这种布局方式的核心对象，我们的页面排版不再依赖于表格，仅从div的使用上说，做一个简单的布局只需要两样东西：div 与 css。因此我们称这种布局方式为 div + css 布局。例： <div id="header">页面头部</div> <div id="content"> <div id="left"></div> <div id="right"></div> </div> <div id="footer">页脚</div> 　　了解布局，首先要知道文档流。文档流其实就是指浏览器生成页面的顺序。它是浏览器解析网页的一个重要概念，对于一个XHTML网页，body 元素下的任意元素，根据其前后顺序，组成了一个个上下关系，这便是文档流。浏览器根据这些元素的顺序去显示它们在网页中的位置。文档流是浏览器的默认显示规则。　　下面来讲解一下布局的基础　　　　1.display(元素显示模式)，用于设置元素的显示方式。其语法如下：　　　　　　display : block | none | inline | inline-block 　　其中，block：块对象指的是元素显示为一个方块，默认显示状态下将占据整行，其它的元素只能另起一行显示。inline：行间对象与block刚好相反，它允许其它元素在同一行显示。none ：隐藏对象。　　例

仿iphone日历插件(beta)

阅读更多关于仿iphone日历插件(beta)

前言小伙伴们好，很久不见了。最近工作进入正常期了，所以慢慢的悠闲的时间久没有了，所以不能每天水一篇了。最近也在听师傅（ http://home.cnblogs.com/u/aaronjs/ ）的教导开始阅读jquery源码了，怎么说呢，阅读的效果其实不是太好。一来是时间断断续续的没有接上，今天读完明天又忘了，到第三天再读的话，就很多都忘记了；二来是jquery其实还是有一定难度，加之篇幅也很长，所以读起来还是有一点吃力（我甚至有时候有种想睡的感觉），过了2星期才陆陆续续把core读完，结果很多都无法理解，再加油吧。反正今年的目标就是把jquery读懂，时间多，不着急了。时间比较紧未做兼容处理，请使用手机/或者使用chrome开启touch功能查看，后期补上兼容方案，以及修复BUG 关于工作最近工作上需要在我们的网页上加入一些动画： ① 页面的切入切出的转场动画 ② 模仿一个iphone的日历控件转场动画做的时候其实碰到了很多坑，而且最后做出的效果也一般，因为既有的框架与dom结构已经出来了好久了，改不得，而且就算改了效果也不能保证好，所以暂时放下这里说的仿iphone日历控件，不如说模仿一个单选框来的实在，而且我这里说是插件，完全就算标题党了，各位可以忽视，所以今日正题吧。 iphone的感觉第一步我们要找到iphone的感觉，那么iphone是个什么感觉呢

How to style a div content after fixed div header with dynamic height

阅读更多关于 How to style a div content after fixed div header with dynamic height

问题 following situation: <body> <div style="position:fixed; width:100%">[place holder for header]</div> <div style="position:relative;width:100%;margin-top:100px">[content]</div> </body> I need the header always visible and at the top, so this one should be with position:fixed. A problem occurs after self adjustments of the header - height. If the header is higher than 100px a part of the content is hidden. How can I (CSS) dynamically set the start position of the content div regarding the end of

订阅 position