随笔分类 -  XHtml+Css

做网站常用的XHtml+Css代码片段记录
Input鼠标经过变色(支持textarea) Js版
摘要：Html<form action="#" method="post" name="myform" id="myform"><div class="bo"><label for="name">姓名：</label><input type="text"size="20" name="name" id="name" maxlength="1 阅读全文
posted @ 2012-09-20 15:56 hm21 阅读(1115) 评论(0) 推荐(0)
Input 鼠标经过变色
摘要：Xhtml<input id="inp_name" class="input_out" name="" type="text" onfocus="this.className='input_on';this.onmouseout=''" onblur="this.className='input_off';this.onmouseout=function(){this.className='input_out'};& 阅读全文
posted @ 2012-09-20 15:48 hm21 阅读(1843) 评论(0) 推荐(0)
常用的css下拉菜单
摘要：JavaScriptfunction displaySubMenu(li) { var subMenu = li.getElementsByTagName("ul")[0]; subMenu.style.display = "block";} function hideSubMenu(li) { var subMenu = li.getElementsByTagName("ul")[0]; subMenu.style.display = "none";}Html<ul> <li><a 阅读全文
posted @ 2012-09-20 14:16 hm21 阅读(662) 评论(0) 推荐(0)
数字排行Tab效果
摘要：XHTML<div class="box"> <h3><strong>关注最多</strong> </h3> <div class="box_title"> <ul> <li id="menu1" onClick="setTab('menu',1,2)" class="hover" >本周</li> <li id="menu2" onClick=& 阅读全文
posted @ 2012-09-20 14:10 hm21 阅读(300) 评论(0) 推荐(0)
鼠标触发图片变换背景
摘要：XHtml<img border="0" src="图片路径" onmouseover="imgchange(this,'图片路径')" onmouseout="imgchange(this,'图片路径')" >JSfunction imgchange(s_img,s_scr){ s_img.src=s_scr;} 阅读全文
posted @ 2012-09-20 14:05 hm21 阅读(163) 评论(0) 推荐(0)
纯CSS滑动门页面切换效果
摘要：需要切换的页面body中加<body id="onn_1">,<body id="onn_2">,<body id="onn_3">,<body id="onn_4">,切换的菜单里加<ul> <li><a href=“/” id=“on_1”><span>网站首页</span></a></li> <li><a href=“/About” id=“on_2”>& 阅读全文
posted @ 2012-09-20 14:01 hm21 阅读(3713) 评论(0) 推荐(0)
解决ie6.0 的hover兼容问题
摘要：CSSbody {behavior:url("hover.htc");hover.htc/*解决ie6.0 的hover兼容问题*/<attach event="ondocumentready" handler="parseStylesheets" /><script>var csshoverReg = /(^|\s)(([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active)/i,currentSheet, doc = window.document, hoverEvent 阅读全文
posted @ 2012-09-20 13:54 hm21 阅读(168) 评论(0) 推荐(0)
inupt textarea提示文字（点击消失，不输入恢复）及限制字数
摘要：input：<input name="textfield" type="text" maxlength="20" value="请输入文字.." onfocus="if (value =='请输入文字..'){value =''}" onblur="if (value ==''){value='请输入文字..'}" /><br><br>textarea:<textarea 阅读全文
posted @ 2012-09-20 11:29 hm21 阅读(181) 评论(0) 推荐(0)
让背景层半透明 内容不透明 并且能兼容ie6，ie7，ie8，ff
摘要：<style>.shadeDivWrap{width:141px; margin:0px 1px; z-index:10; height:72px; padding-top:10px; position:absolute; top:172px;}.shadeDiv{ width:141px; height:72px; background-color:#777777;/*:rgba(0,0,0,0.3);*/ opacity:0.57;filter:alpha(opacity=57); z-index:-1; position:absolute; }.shadeDivWrap p{ 阅读全文
posted @ 2012-09-20 11:20 hm21 阅读(2452) 评论(0) 推荐(0)
实现网页中增加刷新按钮、链接的方法
摘要：<a href="#" onclick="history.go(0)"><font size=3 color=white>刷新</font></a>1 <input type=button value=刷新 onclick="history.go(0)">2 <input type=button value=刷新 onclick="location.reload()">3 <input type=button value=刷新 oncli 阅读全文
posted @ 2012-09-20 11:12 hm21 阅读(366) 评论(0) 推荐(0)
CSS常用bug解决方案(不定时更新)
摘要：大部分网站均有的区块给出一个命名规范 Page container 页面容器 #container Branding areas 标记（logo）区域 #branding（不要用#header） Navigation（main） 主导航 #nav_main Navigation（sub） 副导航 #nav_sub Navigation（supplementary）支持导航 ... 阅读全文
posted @ 2012-09-20 10:27 hm21 阅读(276) 评论(0) 推荐(0)
子鼠相册-V3.0 -DIV+CSS
摘要：<!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- 阅读全文
posted @ 2012-09-20 10:19 hm21 阅读(183) 评论(0) 推荐(0)
点击右侧标题左侧变换图片
摘要：xhtml<div id="ads"> <div class="block1"> <ul> <li><h3>title</h3></li> <li><a href=""><span class="b1"></span>this is title 1.</a></li> <li><a href=""><span c 阅读全文
posted @ 2012-09-20 10:13 hm21 阅读(467) 评论(0) 推荐(0)
网页点击弹出遮罩窗口(可关闭)
摘要：xhtml<body><span id="boxs"></span><a href="javascript:boxs(1);">点这里测试一下</a></body>CSS<style>*{ padding:0; margin:0; font-size:12px;}/*这里将所有HTML标签的padding和marging以及font属性全部统一*/#bg{background:#000000;opacity: 0.5;-moz-opacity:0.5; filter:al 阅读全文
posted @ 2012-09-20 10:11 hm21 阅读(1250) 评论(0) 推荐(0)
一行两列背景自适应的推荐写法
摘要：html代码<div id="box"> <div id="content"> <div id="right">right <br />right</div> <div id="left">left</div> </div></div>Css<style>*{ padding:0; margin:0; font-size:12px; line-height:1.8; font-family:Ver 阅读全文
posted @ 2012-09-20 10:07 hm21 阅读(184) 评论(0) 推荐(0)