div标签 | 易学教程

div里面的margin-top失效

阅读更多关于 div里面的margin-top失效

div标签中的元素margin-top失效的解决方法元素上级标签是div，已经设置了width和height等的属性，可是，在对元素使用margin进行调整的时候，无法生效，下面有个不错的解决方法，感兴趣的朋友可以参考下如题。问题很奇葩。元素上级标签是div，已经设置了width和height等的属性，可是，在对元素使用margin进行调整的时候，无法生效。同学经验提示，对该元素的父元素属性设置成 overflow:hidden; 嵌套div中margin-top转移问题的解决办法在这两个浏览器中，有两个嵌套关系的div，如果外层div的父元素padding值为0，那么内层div的margin-top或者margin-bottom的值会“转移”给外层div。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title

js弹出可拖动div

阅读更多关于 js弹出可拖动div

JS 弹出可拖动DIV 2010-09-01 18:03:37 | 分类：学习总结 | 标签： js 弹出可移动div | 字号大中小订阅文章分类: Web前端弹出DIV同时加入背景层实现方式很多，有原创也有借助js框架实现的，这些弹出的div功能都比较强悍，实际项目中有时候根本不需要如此般复杂操作，只是弹出div进行数据展现或者是有效的操作而已，以上述的方式加入无疑让简单的东西复杂化，使程序执行效率降低。繁复的东西技术含量的确挺高（EXT），同时不可避免会有其它方面的牺牲，以下弹出DIV简单高效，代码也很简洁，发出了一起看看，全部源代码如下，保存为html文件即可观看运行效果。 /** ** 源码部分开始 **/ <html> <head> <title>可拖动 DIV</title> <script type="text/javascript"> function showProc(){ message_box.style.visibility='visible'; // 创建灰色背景层 procbg = document.createElement("div"); procbg.setAttribute("id","mybg"); procbg.style.background = "#000"; procbg.style.width = "100%";

css笔记1： html页面的CSS、DIV命名规则

阅读更多关于 css笔记1： html页面的CSS、DIV命名规则

原地址： http://www.cnblogs.com/rising-fay/archive/2013/02/25/2932592.html CSS命名规则　　头：header 　　内容：content/containe 　　尾：footer 　　导航：nav 　　侧栏：sidebar 　　栏目：column 　　页面外围控制整体布局宽度：wrapper 　　左右中：left right center 　　登录条：loginbar 　　标志：logo 　　广告：banner 　　页面主体：main 　　热点：hot 　　新闻：news 　　下载：download 　　子导航：subnav 　　菜单：menu 　　子菜单：submenu 　　搜索：search 　　友情链接：friendlink 　　页脚：footer 　　版权：copyright 　　滚动：scroll 　　内容：content 　　标签页：tab 　　文章列表：list 　　提示信息：msg 　　小技巧：tips 　　栏目标题：title 　　加入：joinus 　　指南：guild 　　服务：service 　　注册：regsiter 　　状态：status 　　投票：vote 　　合作伙伴：partner XHTML文件中id的命名 (1)页面结构　　容器: container 　　页头：header 　

div、span

阅读更多关于 div、span

1.Html区块元素　　HTML可以通过<div>和<span>将元素组合起来　　大多数HTML元素被定义为块级元素或内联元素，　　而块级元素在浏览器显示时，通常会以新行来开始（或结束）。如：<h1>,<p>,<ul>,<table> 　　内联元素在显示时通常不会以新行开始。如：<b>,<td>,<a>,<img> 2.<div>元素　　HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。　　<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。　　如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。　　<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。默认情况下，浏览器通常会在<div>元素前后放置一个换行符。（可以通过css改变这种情况　　1.设置float 　　设置float:left样式让div对象靠左，这样div会失去本身的宽度样式 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>无标题文档</title> 6 <style> 7

css和div

阅读更多关于 css和div

1.css：（Cascading style sheet）使用css的原因： css能够实现内容与样式的分离。但是不容易在界面中维护，调整高度等难度系数比表格大。 css后期维护，改变背景颜色，字体颜色等比较方便。 css精确的控制，实现精美，复杂的页面。主要功能：美化网页，实现网页的布局，图片等的定位。（排版与风格设计简化的web开发） 2.使用css基本格式： <head> <style> 选择器 {对象的属性：属性值} </style> </head> 选择器：就是所要修饰的对象； 3.标签的类型：标签选择器：就是容器的名字如<p>（直接写p{；；；}）就可以了。类选择器：需要有.在修饰对象的前面。如<p class="text"> .text{;;;;} ID选择器：需要#在修饰对象的前面。如<div id="text"> #text{;;;;} 4.三种选择器的区别：标签选择器：如果在body出现标签，全都修饰。类选择器：主要有class标示。有class的地方就会被修饰。 ID选择器：ID选择器是唯一的，只能用一次。 5.选择器的优先级：ID选择器>类选择器>标签选择器 6. 标签css示例 <html> <head> <style> p{font-size:12px; color:#FFF；} </style> </head> <body>

HTML5语义化标记抛弃DIV标记

阅读更多关于 HTML5语义化标记抛弃DIV标记

曾经，设计师们经常会跟频繁运用基于table的没有任何语义的布局。不过最终还是要感谢像Jeffrey Zeldman和Eric Meyer这样的思想革新者，聪明的设计师们慢慢的接受了相对更语义化的＜div＞布局替代了table布局，并且开始调用外部样式表。但不幸的是，复杂的网页设计须要大量不同的标签结构代码，我们把它叫做“＜div＞-soup” 综合症。也许你很熟悉下面的代码: ＜div id="news"＞＜div class="section"＞＜div class="article"＞＜div class="header"＞＜h1＞Div Soup Demonstration＜/h1＞＜p＞Posted on July 11th, 2009＜/p＞＜/div＞＜div class="content"＞＜p＞Lorem ipsum text blah blah blah.＜/p＞＜p＞Lorem ipsum text blah blah blah.＜/p＞＜p＞Lorem ipsum text blah blah blah.＜/p＞＜/div＞＜div class="footer"＞＜p＞Tags: HMTL, code, demo＜/p＞＜/div＞＜/div＞＜div class="aside"＞＜div class="header"＞

div赋值,取值和input赋值，取值

阅读更多关于 div赋值,取值和input赋值，取值

一、div取值 <div id="txtXiaofei" class="txt-panel">你好</div> 获取div的值$("#txtXiaofei").text()，获取到的值是，你好， $("#txtXiaofei").html()，获取到的是整个div标签，<div id="txtXiaofei" class="txt-panel">你好</div> 二、div赋值 $("#txtXiaofei").text("哈喽！") 三、input取值 <input type="button" value="1" class="button" id="text" /> $(function(){var p = document.getElementById("text");alert(p.val());})//弹出的就是 1 四、input赋值 document.getElementById("text").value="你好"；来源： https://www.cnblogs.com/chenlihong-886/p/5704527.html

超级简单:DIV布局

阅读更多关于超级简单:DIV布局

/Files/zhuqil/DivLayout.zip 这篇文章演示在一个页面上有效的使用div元素来构建网站，而不是使用table元素。因为div元素有很多优势，所以大部分客户开发网站要求设计开发div元素，而不是table元素。上面的代码是是为了给初学者学习使用div元素开发网站的。下面解释为什么使用div元素而不是table元素 table元素的优点：大多是设计开发者使用table是为了统一的外观。table也非常容易维护。另一个表的好处是，它是与大多数浏览器兼容。 table元素的缺点：所有的这些都需要消耗成本：嵌套太多的table会增加页面的大小和下载时间。太多的table元素会使网页重要的内容占有比例下降，导致搜索蜘蛛把没用的内容添加到搜索引擎中。 DIV元素的优点：div加css，我们可以实现同样的基于table的页面结构，而且可以减少页面上的元素数目，这样使页面加载更快。这也使得更多的网页与搜索引擎匹配。 DIV 元素的缺点：主要的缺点是，并非所有的CSS元素与所有的浏览器兼容。正因为如此，我们必须写一些自定义CSS来解决问题。我已经创建了一个简单的应用程序，展示了如何轻松地就可以创建仅仅只有div元素的网页。下面的图展示了div元素的布局这里是我创建的对页面布局css样式表类的列表，让我们看看更多的细节。 divHeaderTable:

使几个DIV在同一行并排显示，有间隙的情况的处理方案

阅读更多关于使几个DIV在同一行并排显示，有间隙的情况的处理方案

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>让块级标签并排显示并且设置间隙</title> <style> *{margin:0;padding:0} .father{ height: 460px; width:460px; border: 1px solid gray; } .son{ height:100px; width: 100px; } </style> </head> <body> <div class="father"> <div style="background-color: red;" class="son">son1</div> <div style="background-color: gold;" class="son">son2</div> <div style="background-color: green;" class="son">son3</div> <div style="background-color: blue;" class="son">son4</div> </div> </body> </html> 上面的代码是没有设置时的代码。设置完成后的效果图如果只对父元素和子元素设置width和height

DIV 标签很重要的CSS的float属性

阅读更多关于 DIV 标签很重要的CSS的float属性

(通过指定CSS属性 float 的值,使元素向左或向右浮动,然后由后继元素向上移动以填补前面元素的浮动而空出的可用空间。) CSS的float属性，作用就是改变块元素(block element)对象的默认显示方式，HTML标签设置了float属性之后，它将不再独自占据一行 (从当前位置开始到这行结束,不包括标签前面的格子,即这一行包括前面标签+这个标签)。没有设置将独占一行. 浮动(float)细节： 1.左(右)浮动元素，尽量靠近父元素左(右)内边沿。 2.浮动元素尽量不去重叠交叉。 3.浮动元素尽可能高，当不会高于父元素顶内边沿。 <style type="text/css">  </style> </head> <body> <div class="t"

订阅 div标签