position | 易学教程

css页面布局

阅读更多关于 css页面布局

在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素) 和内联块状元素。常用的块状元素有： <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form> 常用的内联元素有： <a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code> 常用的内联块状元素有：<img>、<input> 一、块状元素特点 1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。 2、元素的高度、宽度、行高以及顶和底边距都可设置。 3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。将内联元素a转换为块状元素，a{display:block;} 二、内联元素特点 1、和其他元素都在一行上； 2、元素的高度、宽度及顶部和底部边距不可设置； 3、元素的宽度就是它包含的文字或图片的宽度，不可改变。块状元素div转换为内联元素 div{ display:inline; } 三、内联块状元素特点 1、和其他元素都在一行上； 2、元素的高度、宽度、行高以及顶和底边距都可设置。四、盒子模型布局模型在网页中，元素有三种布局模型： 1、流动模型

用Jquery自己开发个代阴影的对话框吧！

阅读更多关于用Jquery自己开发个代阴影的对话框吧！

MySQL通讯协议（3）连接阶段

阅读更多关于 MySQL通讯协议（3）连接阶段

移动端position:fixed 解决方案

阅读更多关于移动端position:fixed 解决方案

相信不少人做移动端项目的时候都会遇到position:fixed 的坑。下面提供一个解决方法，不用引入任何其他的js库，纯css解决。解决问题的关键就是：fixed元素内部必须嵌套一个 position:absolute 元素，用来装载内容，目的就是为了让内容脱离fixed文档流，屏蔽一些fixed的坑 html部分 <!DOCTYPE html> <html lang="zh_cmn"> <head> <meta name="description" content="CSS position:flex in mobile" /> <meta charset=utf-8 /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" /> <title>CSS position:flex in mobile</title> </head> <body> <header> <div class="fixed"> <div class="wrap float"

平边的Select制作方法

阅读更多关于平边的Select制作方法

1: < span id ="SelectBorder" style ="border:1px solid #5884c8; position:absolute;" > < SELECT id ="objSelect" style ="position:absolute; margin:-1;" > < OPTION > 一个平边的Select </ OPTION > < OPTION > 1234567890 </ OPTION > < OPTION > DSclub </ OPTION > < OPTION > www.cnblogs.com/dsclub </ OPTION > < OPTION > 99670303 </ OPTION > </ SELECT > </ span > < SCRIPT LANGUAGE =javascript> <!-- objSelect.style.clip = 'rect(2px, ' + (objSelect.offsetWidth - 2) + 'px, ' + (objSelect.offsetHeight - 2) + 'px, 2px)'; SelectBorder.style.width = objSelect.offsetWidth; SelectBorder.style.height = objSelect

CSS补充与JavaScript基础

阅读更多关于 CSS补充与JavaScript基础

一、CSS补充 position 1.fiexd 固定在页面的某个位置; 示例将顶部菜单始终固定在页面顶部 position: fixed; 将标签固定在某个位置 right: 0; 距离右边0像素 left: 0; 距离左边0像素 top: 0; 距离上边0像素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .pg-header{ height: 48px; background-color: #2459a2; color: #DDDDDD; /* 将顶部固定 */ position: fixed; right: 0; left: 0; top: 0; } .ph-body{ background-color: #DDDDDD; height: 5000px; /* 内容要空余出上面的高度否则内容会被压在下面 */ margin-top: 48px; } </style> </head> <body style="margin: 0 auto"> <div class="pg-header">头部</div> <div class="ph-body"> 内容 </div> </body> </html> 2.relative+absolute

css 迷惑的position

阅读更多关于 css 迷惑的position

迷惑的position 小加发现实际开发中position使用频率很高,但很多人却对position不是很了解,导致开发中出现各种问题,现在让我门一起来看看这个迷惑的position吧~ static 元素未定位，默认出现在普通流中，即元素从左到右，从上到下的方式布局～ HTML <div class="section"> <h3 class="section__title">Static - 普通流</h3> <div class="section__boxes row text-center"> <div class="header-box col-xs-12"> header box </div> <div class="left-box col-xs-4"> left box </div> <div class="right-box col-xs-8"> right box </div> <div class="bottom-box col-xs-12"> bottom box </div> </div> </div> CSS .section { margin-bottom: 100px; } .section__boxes { font-size: 22px; } .header-box { background-color: #0981B2; height:

前端三贱客 -- CSS

阅读更多关于前端三贱客 -- CSS

CSS（Cascading Style Sheets）给你的html页面穿上衣服让其看起来性感，美观。 css选择器类选择器  <style type="text/css"> .cl{ background-color: blue; width: 200px; position: absolute; left: 0;top: 50px;bottom: 0; } </style> <div class="cl">class test</div> View Code ID选择器 1  2 <style type="text/css"> 3 #id1{ 4 background-color: red; 5 height: 30px; 6 font-size: 18px; 7 text-align: center; 8 line-height: 30px; 9 } 10 </style> 11 <div id="id1">好好学习，天天向上</div> View Code 标签选择器  <style type="text/css"> a { color: red; } </style> <ul>

rails 对数据库的一些操作：新增，查询等

阅读更多关于 rails 对数据库的一些操作：新增，查询等

基礎操作如何新增 ActiveRecord 提供了四種 API ，分別是save、save!、create和create!： a = Category.new( :name => 'Ruby', :position => 1 ) a.save b = Category.new( :name => 'Perl', :position => 2 ) b.save! Category.create( :name => 'Python', :position => 3 ) c = Category.create!( :name => 'PHP', :position => 4 ) 其中 create 和 create! 就等於 new 完就 save 和 save! ，有無驚嘆號的差別在於 validate 資料驗證不正確的動作，無驚嘆號版本會回傳布林值(true或false)，有驚嘆號版本則是驗證錯誤會丟出例外。何時使用驚嘆號版本呢?save和create通常用在會處理回傳布林值(true/false)的情況下(例如在 controller 裡面根據成功失敗決定 render 或 redirect)，否則在預期應該會儲存成功的情況下，請用 save!或create! 來處理，這樣一旦碰到儲存失敗的情形，才好追蹤 bug。透過 :validate => false 可以略過驗證 c

用JS写的百叶窗3

阅读更多关于用JS写的百叶窗3

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> *{margin:0;padding:0;list-style:none;} body{background:url(img/bg.gif) repeat top left;} #box{width:600px;height:400px;margin:50px auto; border:20px solid #fff; overflow:hidden; position:relative;} #box ul li{ opacity:0; width:600px; height:400px; position:absolute; top:0; left:0;} #box ul li span{ width:150px; height:400px; float:left;} #box ul .active{ opacity:1;} #box ol{width:100%; height:34px; position:absolute; bottom:20px;} #box ol li{ float:left; width:42px; height:42px; background:rgba(255,255,255,0.4);

订阅 position