HTML/CSS
会编程的阿强
Java小学员。
展开
-
52-table中cellspacing、cellpadding的css替代写法
table{border:0;margin:0;border-collapse:collapse;border-spacing:0;}/*控制cellspacing*/table td{padding:0;}/*控制cellpadding*/原创 2016-11-30 20:00:30 · 377 阅读 · 0 评论 -
45-段落的设置字间距,行间距,段落间距,设置首行缩进,设置首字母大写,设置大写,设置小写,设置意大利体
1.设置首行缩进:text-indent:2em;2.设置段落之间的距离:margin:20px 0px;3.设置行间距:line-height4.设置文字之间的距离:letter-spacing5.设置字母之间的距离:letter-spacing6.设置单词之间的距离:word-spacing7.原创 2013-09-28 00:45:33 · 2815 阅读 · 0 评论 -
44-首字下沉效果的设置
无标题文档span{ font-size:2em; float:left; margin:5px; font-weight:bolder; } img{ float:right; width:80px; height:100px; margin:5px; } body{ font-family:幼圆; font-weight:bold; }祖冲原创 2013-09-28 00:37:49 · 1527 阅读 · 0 评论 -
48-荧光灯菜单
New Document #menu{ font-family:Arial; font-size:14px; font-weight:bold; width:120px; padding:8px; background:#000; margin:0 auto; border原创 2013-10-09 11:36:39 · 939 阅读 · 0 评论 -
47-超链接按钮
New Document a{ font-family:Arial; text-align:center; margin:3px; background-color:#ddd; padding:10px 15px; text-decoration:none; } a:link,a:act原创 2013-10-09 11:35:33 · 833 阅读 · 0 评论 -
46-html滤镜效果
无标题文档body{filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#a2e06a,endcolorstr=#fafafa,gradientType=0);}原创 2013-10-09 11:25:27 · 755 阅读 · 0 评论 -
43-HTML中选择器优先级比较
选择器优先级的比较 p{ color:red;}.green{ color:green;}#red{ color:red;} 1.类选择器优先于标签选择器 2.ID选择器优先于类选择器和标记选择器 3.行内式样式优先于ID选择器原创 2013-09-19 10:54:23 · 952 阅读 · 0 评论 -
42-弹框式登录代码
效果展示:点击用户登录超链接:弹出用户登录对话框test.html#qlogin-con { display: none; position: absolute; z-index: 5000; left: 450px;}#div1 { display: none; position: absolute; z-index: 10原创 2013-09-15 00:46:39 · 1551 阅读 · 0 评论 -
41-在Dreamweaver中快速设置样式的方法
使用DreamWeaver 设置样式的方法:格式----》css样式---》新建 然后在里面设置相对应的具体样式。如果是设置html标签的,直接在里面选择标签选择器就可以了。如果要用类选择器或者是ID选择器设置,设置好样式之后,选中要设置的文本,然后在属性里面设置ID或者是选择已经创建的类选择器。原创 2013-09-13 10:07:40 · 1244 阅读 · 0 评论 -
40-css嵌入Html的4种方法和复合选择器
嵌入html代码的四种方法:1.在标签中嵌入2.内嵌式使用style标签3.链接式使用link标签4.导入式@import sheet.css复合选择器:1.交集选择器: 实例:这是交集选择器 选中为 p.special如果是id选择器则为:p#special22.并集选择原创 2013-09-12 02:57:14 · 1061 阅读 · 0 评论 -
39-textarea自动截取控制输入的长度
<textarea class="sendleavemessagetextarea" rows="5" cols="100" name="lContent" onkeyup="this.value = this.value.slice(0, 80)">原创 2013-08-31 21:34:08 · 818 阅读 · 0 评论 -
38-设置html文档编辑范围从0,0开始
*{ margin:0; padding:0; }原创 2013-08-26 23:21:37 · 605 阅读 · 0 评论 -
36-盒子模型设置的超链接->形状像个按钮
超链接背景颜色的设置 a{ /*设置背景颜色*/ BACKGROUND-COLOR: 74B500;COLOR: #ffffff; /*设置超链接的下划线样式为无*/ text-decoration:none; /*设置为圆角边框*/ border-radius: 4px; /* Old Firefox */ -moz-border-ra原创 2013-08-24 01:29:36 · 1404 阅读 · 1 评论 -
35-盒子模型
超链接背景颜色的设置 a{ /*设置背景颜色*/ BACKGROUND-COLOR: 74B500;COLOR: #ffffff; /*设置超链接的下划线样式为无*/ text-decoration:none; /*设置为圆角边框*/ border-radius: 4px; /* Old Firefox */ -moz-border-ra原创 2013-08-24 01:24:26 · 661 阅读 · 0 评论 -
49-玻璃效果菜单
效果演示:实现代码: body{ margin:0; margin-top:20px; } ul#menu { font-family:Arial; font-size:14px; background:url(under.gif); padding:0 0 0 8px; m原创 2013-10-14 20:00:52 · 971 阅读 · 0 评论 -
50-简单的竖直排列的菜单
简单的数值排列菜单/*设置背景颜色为浅色*/body{ background-color:#dee0ff;}/*设置整个Div块的宽度为150像素,并设置文字的字体*/#navigation{ width:150px; font-family:Arial; font-size:14px; text-align:right;}/*不显示项目符号*/#navig原创 2013-10-15 21:59:55 · 1377 阅读 · 0 评论 -
51-设置单元格的边框-border-collapse(边框线合并)
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">无标题文档.record{ font:14px 宋体; border:2px #777 solid; text-align:center; border-collapse:coll原创 2013-10-16 10:06:05 · 1846 阅读 · 0 评论 -
51-制作点击输入框时默认文字消失的效果
1.概要:方法用的是onfocus和onblur的相互切换。2.实现代码:(直接复制到.jsp页面即可 )******************************************************** 鼠标点击输入框,默认信息消失输入内容:原创 2015-09-07 11:36:54 · 821 阅读 · 0 评论 -
50-网站默哀样式(愿遇难者一路走好)
最近天津滨海新区发生了严重的爆炸事故,导致许多人伤亡,各大网站变灰纷纷默哀遇难者,在这里愿遇难者一路走好。希望灾情尽早的平息了,人民生活回归正常。现在记录一下下面这个效果是如何实现的。就是一个css样式代码:html {filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: g原创 2015-08-14 16:57:10 · 1748 阅读 · 0 评论 -
59-网页版时钟JS代码
function startTime(){ $("#currentTime").text(new Date().toLocaleString()); setTimeout("startTime()",1000); }原创 2015-06-14 11:20:31 · 655 阅读 · 0 评论 -
58-body中的onload方法不起作用
原因是因为浏览器加载完所有的dom元素之后,才进行调用onload方法。如果加载dom元素的时间过长,如果是图片等元素,那么这个onload方法就不会调用了。可以解决的方法:使用jquery的: $(function(){query(1);});为$(document).ready()的简写。原创 2014-12-11 16:36:00 · 1647 阅读 · 0 评论 -
56-解决网页特殊字体问题
许多漂亮的字体因为如果用户的电脑中没有安装的话,就会按照默认的字体宋体显示。导致原创 2014-04-26 22:07:55 · 1049 阅读 · 0 评论 -
57-HTML转义符
转换字串中的字符.字符 实体名称 实体数字 描述♠ ♠ ♠ 黑桃♣ ♣ ♣ 梅花♥ ♥ ♥ 红桃,心♦ ♦ ♦ 方块牌◊ ◊ ◊ 菱形† † † 匕首‡ ‡ ̶原创 2014-05-08 20:34:04 · 1336 阅读 · 0 评论 -
37-iframe自适应高度
使用方法,在桌面上创建两个html文件,一个叫做test.html一个叫做1.html然后将对应的下面的代码复制进去,然后运行test.html在浏览器中这个是在IE浏览器中的效果图。如果要是在EditPlus中也可以出现效果,但是在谷歌浏览器中就不会出现这样的效果。还在研究》。。。。。。。test.html fun原创 2013-08-26 22:56:02 · 1230 阅读 · 0 评论 -
19-textarea知识
转载:http://blog.sina.com.cn/s/blog_641d569301011naz.htmlHTML 标签 textarea 在大部分浏览器中只要指定行(rows)和列(cols)属性,就可以规定 textarea 的尺寸,大小就不会改变,不过更好的办法是使用 CSS 的 height 和 width 属性,但是Chrome,Safari和FireFox渲染的效果原创 2013-07-09 01:33:05 · 919 阅读 · 0 评论 -
03-iframe属性src的使用
src如果写成jsp页面,将会访问jsp页面,如果写成某个Action,会在访问该页面的时候自动的调用这个Action。 管理中心<body style="background:rgb(46, 110, 17) url(img/bg.png) repeat-x scroll 0% 0%"> indexAction_visitMenus" width=原创 2013-06-09 17:23:14 · 3544 阅读 · 0 评论 -
55-html显示天气预报信息
心知天气http://www.thinkpage.cn/然后点击获取网页插件,然后获取iframe代码,粘贴到html页面中合适的位置即可。原创 2013-12-21 14:40:23 · 1956 阅读 · 0 评论 -
54-html页面小项目------------新疆行之书
html代码:<!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"><hea...原创 2013-12-06 09:01:40 · 15916 阅读 · 4 评论 -
53-表格设置日历实例
无标题文档.month { border-collapse:collapse; table-layout:fixed; width:780px;}.month caption { text-align:left; font-family:Arial, Helvetica, sans-serif; font-size:20px; font-weight:normal; pad原创 2013-10-18 10:29:56 · 749 阅读 · 0 评论 -
52-设置斑马纹效果的表格
无标题文档table { background-color:#fff; border:1px solid #000; color:#565; font:12px arial; text-align:center;}table caption { font-size:24px; border-bottom:2px solid #b3de94; bord原创 2013-10-16 10:16:36 · 4493 阅读 · 0 评论 -
34-改变网页页面宽度的方法
如果在iframe中插入一个页面,但是因为这个页面的宽度实在是太宽了,所以不得不将这个页面的宽度改小,然后可以能去掉iframe下面的滚动条,为此出此下策,这样试,结果确实是有用。就是会报黄。原创 2013-08-24 00:05:41 · 997 阅读 · 0 评论 -
33-定位
一、定位的种类1.static 静态定位(默认的定位方式)2.relative 相对定位3.absolute. 绝对定位4.fixed 固定定位相对定位:相对于原来的地方定位,图中的红点处,虽然离开了原来的地方,但是他的位置不能被别的地方占用 New Document .div1{ width:70px; height:30px;原创 2013-07-27 08:50:14 · 636 阅读 · 0 评论 -
14-在文字上方标注说明标记(文字及列表样式)
在文字上方标注说明标记 Silence is gold. 沉默是金原创 2013-06-22 13:43:02 · 1237 阅读 · 0 评论 -
13-应用删除线标记商品特价(文字及列表样式)
应用删除线样式标记商品特价font { font-size: 12px; color: red; text-decoration: line-through;}table { font-size: 12px; background-color: threedface; border: 1px solid;} 98.00元原创 2013-06-22 13:40:10 · 1613 阅读 · 0 评论 -
12-动画光标(鼠标样式)
动画光标 图书编号 图书名称 作者 图书价格 001 《JavaWeb范例大全》 明日科技 98.00元 002 《JavaWeb范例大全》 明日科技 98.00元原创 2013-06-22 13:35:41 · 1645 阅读 · 0 评论 -
09-表格外边框具有霓虹灯效果(表格样式)
测试表格样式 var i = 0; //定义颜色值得数组 var Color = new Array("#0000ff", "#99ff00", "#660033", "#cc66cc", "#ffff33"); function change() { if (i > Color.length - 1) //如果i的值大于数组的元素数,将I的值为0 i = 0; //原创 2013-06-21 21:02:13 · 1209 阅读 · 0 评论 -
11-显示自定义的鼠标形状(鼠标样式)
My JSP 'DemoCursor.jsp' starting pagetable { font-size: 12px; background-color: activecaption; cursor: crosshair;}a { cursor: help;}td { cursor: text}.btn { font-size: 12px; cursor:原创 2013-06-21 23:38:08 · 1240 阅读 · 0 评论 -
10-鼠标经过表格显示提示信息(表格样式)
测试表格样式 图书编号 图书名称 作者 图书价格 001 《JavaWeb范例大全》 明日科技 98.00元原创 2013-06-21 22:04:23 · 1928 阅读 · 0 评论 -
08-单元格的边框颜色(表格样式)
测试表格样式 function over(id) { document.getElementById(id).style.borderLeftColor = "green"; document.getElementById(id).style.borderRightColor = "green"; document.getElementById(id).style.borderTo原创 2013-06-21 19:56:52 · 1119 阅读 · 0 评论 -
07-彩色外边框的表格(表格样式)
测试表格样式.table1 { border-bottom-color: #00ffff; border-left-color: #ffff00; border-top-color: #ff0000; border-right-color: #00ff00; border-style: double;} <table align="center" width="64原创 2013-06-21 19:42:33 · 961 阅读 · 0 评论