随笔分类 -  Web

css使用运算符
摘要：前几天遇到的问题：需要迭代一个列表，把数据乘以20作为div的宽度。可惜css不支持运算符，有什么办法实现 width：var * 20px; 呢？我想到了表达式写法 width: expression(var * 20+"px");但这种写法占用资源大，而且只有ie支持..再想想，还是用javascript来处理，javascript里将数值乘以20，再给width赋值。 阅读全文
posted @ 2012-07-29 23:37 垚淼 阅读(3115) 评论(0) 推荐(0)
网页中加入百度地图（带地区搜索）
摘要：先看效果： 实现步骤： 1、到百度aip示例学习获取代码 http://api.map.baidu.com/lbsapi/creatmap/index.html 2、代码注释很详细，其中创建地图时是通过经纬度定位的。修改一下，我们通过传参的方式。 //创建地图函数： function createM 阅读全文
posted @ 2012-07-27 21:06 垚淼 阅读(21376) 评论(6) 推荐(7)
div限制字数，超出部分用省略号
摘要：div可以限制宽度，超出部分用省略号 <style> div.wid{ width:200px; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden; } </style> <div class="wid">这是很长的一段文字，这是很长的一段文字，这是很长的一段文字</div>但这种做法无法做到两行后，超出部分用省略号。后来换种思路，既然不能在css里面设置，就在文字里面截取字符，然后加上“...”我是用 阅读全文
posted @ 2012-07-23 21:38 垚淼 阅读(16784) 评论(0) 推荐(1)
div+css+html学习笔记（2）
摘要：1. 字体间距与行距：letter-spacing: 5px; （间距）line-height: 30px; (行距)2.三原色定义color:rgb(0,0,255);3. 设置透明度filter: alpha(opacity=0); opacity: 0; -moz-opacity:0;4. 表达式写法，input类型为text、radio的border:1px; 其他0px;input { border: expression(this.type == "text" || this.type =="radio"? "1px" : 阅读全文
posted @ 2012-07-22 00:07 垚淼 阅读(577) 评论(0) 推荐(0)
inupt textarea提示文字（点击消失，不输入恢复）及限制字数
摘要：效果：input： textarea: 限100字源码：input：<input name="textfield" type="text" maxlength="20" value="请输入文字.." onfocus="if (value =='请输入文字..'){value =''}" onblur="if (value ==''){value='请输入文字..'}" /><br>< 阅读全文
posted @ 2012-07-19 23:25 垚淼 阅读(40924) 评论(3) 推荐(2)
自定义浏览文件控件
摘要：先看看显示效果：（虽然有点丑，用图片代替就好看多了） 自定义浏览实现方法：用相对布局，把底图跟浏览重叠，设置input的透明度为0，看似点击了图片，其实是点击了浏览按钮。代码：<html> <head> <style> #d { width: 500px; text-align: right; } #d a { background: #ff0000; width: 100px; ... 阅读全文
posted @ 2012-07-19 00:21 垚淼 阅读(295) 评论(0) 推荐(0)
div背景图片拉伸
摘要：背景图片可以设置重复（repeat）不重复（no-repeat），但没有设置拉伸属性。这里用伪背景实现了拉伸。所谓伪背景，就是用两个重叠的div，下面一个放图片填满div,当成背景。<html><head> <style> #back { width: 200px; height: 200px; } #back img { vertical-align:top; /*解决ie浏览器背景填充时的空隙*/ w... 阅读全文
posted @ 2012-07-15 14:32 垚淼 阅读(15518) 评论(0) 推荐(0)
web前端(滚动条样式)
摘要：Body { scrollbar-face-color:#C0C0C0; （表面） scrollbar-highlight-color:#FFFFFF;（亮边） scrollbar-3dlight-color:#C0C0C0;（3D亮边） scrollbar-darkshadow-color:#000000; （3D暗边） scrollbar-Shadow-color:#808080;（阴影） scrollbar-arrow-color:#000000; （箭头） scrollbar-track-color:#E0E0E0;（滚动区） } 阅读全文
posted @ 2012-07-10 22:36 垚淼 阅读(1804) 评论(1) 推荐(0)
css语法
摘要：基础语法 body { background: blue;}body是标签名，background是属性，blue是属性值多个标签组合h1,h2,h3 { color: red;}把标题<h1><h2><h3>的字体颜色都变为红色属性综合写法 div { font:italic normal bold 11pt arial;}div的字体风格(font-style)属性值是italic，字体变量(font-variant)属性值是normal，字体浓淡(font-weight)属性值是bold，字体大小(font-size)属性值是11pt，字体名称(fon 阅读全文
posted @ 2012-07-08 23:52 垚淼 阅读(751) 评论(0) 推荐(1)
div放置图片总结
摘要：div放置图片总结：1. 图片居中2. 图片原图显示，超出部分隐藏。3. 填满div，拉伸或者缩放图片。4. div大小跟随图片变化 阅读全文
posted @ 2012-07-05 23:34 垚淼 阅读(2186) 评论(0) 推荐(2)
div 图片垂直居中
摘要：介绍两种div图片垂直居中的方法，兼容浏览器。 阅读全文
posted @ 2012-07-03 23:15 垚淼 阅读(8673) 评论(2) 推荐(2)
div+css+html学习笔记（1）
摘要：1. 导入外部css 2. 横排div 3.两个div连在一起，不留空隙 4. div外边框 5. 虚线 6. img标签 alt的作用 阅读全文
posted @ 2012-07-02 21:54 垚淼 阅读(620) 评论(0) 推荐(1)