一、position：fixed 锁定位置（相对于浏览器的位置），例如有些网站的右下角的弹出窗口。 示例：二、position：absolute 绝对位置： 1.外层没有position：absolute（或relative）；那么div相对于浏览器定位，如下图中b（距离浏览器右边框为50像素，距离下边框为20像素）。 2.外层有position：absolute（或relative）；那么div相对于外层边框定位，如下图中bb（距离d的右边框50像素，距离d的下边框为20像素）。 示...
关于type="file"的input是啥？ 这个是啥我觉得没必要再说了，反正大家都知道，然后在现在有各种手机的时代，还可以通过直接拍照的方式来上传，反正比以前好玩多了。 并且以前是只能上传一个文件，现在的话，只要增加multiple属性就可以上传多个文件，并且还有很多的文件格式支持，废话不多说，具体请看http://www.w3.org/html/ig/zh/wiki/HTML5/number-state#.E6.96.87.E4.BB.B6.E4.B8.8A.E4.BC.A0.E7.8A.B6.E6.80.81 上传按钮的样...
之前一直看到有人在问，单选按钮和多选按钮怎么加样式、怎么把按钮变大？下面把我做的一个例子分享出来。 1.首先把按钮做成图片 2.html页面 代码如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="jquery-1.10.2.min.js"></script> <script type="text/javascript"> $(function(){ $("input[type=checkbox]").click(function(){ ...
HTML的checkbox和radio样式美化的简单实例 checkbox：XML/HTML Code复制内容到剪贴板<style type="text/css"> input[type="checkbox"] { display: none; } input[type="checkbox"] + label { display: inline-block; position: relative; border: solid 2px #99a1a7; width: 35px; height: 35px; ...
效果截图： 实现代码： 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title></title> <style type="text/css"> .linear{ width:100%; height:600px; FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=##15A216,endColorStr=#fafafa); /*IE*/ background:-moz-linear-gradient(top,#1...
一、动态加载脚本 当网站需求变大，脚本的需求也逐步变大。我们就不得不引入太多的 JS 脚本而降低了整站的性能，所以就出现了动态脚本的概念，在适时的时候加载相应的脚本。比如：我们想在需要检测浏览器的时候，再引入检测文件。 代码如下:<script type="text/javascript"> window.onload = function(){ alert(typeof BrowserDetect); } var flag = true; //设置 true 再加载 if (flag) { load...
css样式： 代码如下: <style type="text/css"> #login{ position:absolute; top:50%; left:50%; margin-left:-标签一半宽度; margin-top:-标签一半高度; } </style> html部分： 代码如下: <div id="login"></div >
代码如下: <hr style="width:490px;" /> <hr size=8 style="COLOR: #ffd306;border-style:outset;width:490px;color:#CCC"> <hr size=1 style="COLOR:#ff9999;border-style:double;width:490px;color:#CCC"> <hr size=1 style="color: blue;border-style:dotted;width:490px;color:#CCC"> <hr size=1 style="width:490px;height:3px;border:none;border-top:3px double red;"> <HR align=center width=1 color=red size=100>
今天设计一个发表动态的窗口样式，发现当鼠标点击input时浏览器自动加上的样式和网站整体风格很不一致，虽然浏览器这种智能功能很先进但是有时候不免会影响设计整体的一致性。 然后就想着不用input作为输入框是不是可以，换成了 代码如下: <div class="content" contenteditable="true"></div> 以为可以避免浏览器的“智能”功能，没想到浏览器太智能了，效果是一摸一样的，我只能去找度娘了，后来发现是我的css还是储备不够啊可怜...
直接给span标记的样式设定width属性，会发现不会产生效果。 如果设置display:block，width属性生效，但是此时的span跟div一样了。 如果设置display:inline-block，则span并列在同行，而且width属性生效。 元素display属性的常见值说明： 1）block：块对象的默认值。将对象强制作为块对象呈递，为对象之后添加新行。 2）inline：内联对象的默认值。将对象强制作为内联对象呈递，从对象中删除行。 3）inline-block：将对象呈递为内联...
先贴出效果图: 局部出现滚动条,这样就不会破坏整体的样式和布局了. 范例代码: 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>html页面内加横向滚动条</title> </head> <body> <DIV style=" OVERFLOW-X: scroll; scrollbar-face-color:#B3DDF7;scrollbar-shadow-color:#B3DDF7;scrollbar-highlight-color:#B3DDF7;scrollbar-3dlight-color:#EBEBE4;scrollbar-darkshadow-...
一、链接 在HTML中超文本的链接非常重要，基本格式如下： <A HREF="资源地址">链接文字</A> 1、本地链接 ①绝对路劲： <A HREF="C:\images\article.jpg">绝对路劲链接到本地图片</A> ②相对路劲 <A HREF ="article2.jpg"> 相对路劲链接到本地图片</A> ③链接到上一级目录 <A HREF="../test.htm">链接到上一级目录</A> 2、URL链接 形式：协议名：//主机.域名/路劲/文件名 协议包括： file 本地系统文件 http WWW服务器 ftp ftp服务器...
DIV背景半透明，DIV中的字不半透明 代码如下: <body bgcolor="#336699"> <div style="filter:alpha(opacity=50);background:#ffffff;width:600;"><span style="color:yellow"> 图层背景半透明，字体颜色也半透明 代码如下: </span></div> <div style="filter:alpha(opacity=50);background:#ffffff;width:600"><span style="position:relative;color:yellow">图层背景半透明，字体颜色不半透明</span></div> *******带filter的层一...
代码如下:<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>表单文件选择框样式</title><style type="text/css">body{font-family:Arial,Verdana,sans-serif; margin:100px;}</style><style type="text/css">.uploader{position:relative;display:inline-block;overflow:hidden;cursor:default;padding:0;margin:10px 0px;-moz-box-shadow:0px 0px 5px #ddd;-webkit-box-sh...
html, address,blockquote,body, dd, div,dl, dt, fieldset, form,frame, frameset,h1, h2, h3, h4,h5, h6, noframes,ol, p, ul, center,dir, hr, menu, pre { display: block }/*以上列表元素默认状态下以块状显示，未显示的将以内联元素显示，该列表针对HTML4版本，部分元素在XHTML1中将废弃*/ li { display: list-item }/*默认以列表显示*/ head { display: none }/*默认不显示*/ table { display: table }/*默认为表格显示*/ t...