傅凉

常用的HTML标签和属性解释、css实用小技巧_css常用技巧和经验总汇

基本结构标签:
,表示该文件为HTML文件
,包含文件的标题,使用的脚本,样式定义等
---,包含文件的标题,标题出现在浏览器标题栏中
,的结束标志
,放置浏览器中显示信息的所有标志和属性,其中内容在浏览器中显示.
,的结束标志
,的结束标志

其它主要标签,以下所有标志用在中:
,链接标志,"…"为链接的文件地址
,显示图片标志,"…"为图片的地址

,换行标志

,分段标志
,采用黑体字
,采用斜体字

,水平画线

,定义表格,HTML中重要的标志
,定义表格的行,用在

中
,定义表格的单元格,用在中
,字体样式标志

属性:
属性是用来修饰标志的,属性放在开始标志内.
例:属性bgcolor="BLACK"表示背景色为黑色.
引用属性的例子:
表示页面背景色为黑色;
表示表格背景色为黑色.

常用属性:
对齐属性,范围属性:
ALIGN=LEFT,左对齐(缺省值),WIDTH=象素值或百分比,对象宽度.
ALIGN=CENTER,居中,HEIGHT=象素值或百分比,对象高度.
ALIGN=RIGHT,右对齐.
色彩属性:
COLOR=#RRGGBB,前景色,参考色彩对照表.
BGCOLOR=#RRGGBB,背景色.

表示绝对居中.

表格标识的开始和结束.
属性:
cellpadding=数值单位是像素,定义表元内距
cellspacing=数值单位是像素,定义表元间距
border=数值单位是像素,定义表格边框宽度
width=数值单位是像素或窗口百分比,定义表格宽度
background=图片链接地址,定义表格背景图
表格中一个表格行的开始和结束;
表格中行内一个单元格的开始和结束
属性:
Colspan="",单元格跨越多列;
Rowspan="",单元格跨越多行;
Width="";定义表格宽度
Height="";定义表格高度
Align="";对齐方式
Valign="";
Border="",边框宽度;
Bgcolor="",背景色;
Bordercolor="",边框颜色;
Bordercolorlight="",边框明亮面的颜色;
Bordercolordark="",边框暗淡面的颜色;
Cellpadding="",内容与边框的距离(默认为2);
Cellspacing="",单元格间的距离(默认为2);

强制换行
文本标识的开始和结束
属性:
face=字体
color=颜色
加粗文字标识的开始和结束
属性:
style=font-size:40pt;,用样式表方式控制字体大小,这里是40点

,分区标识的开始和结束
属性:
align=|center|left|right|水平对齐方式
动态标识的开始和结束,如标识内放置贴图格式则可实现图片滚动
属性:
scrollamount=1~60,滚动速度
direction=|left|right|up|down|,滚动方向
scrolldelay=滚动延时,单位:毫秒

段落标识,
空格符,
贴图标识
属性:
src=../../图片链接地址,贴图标识必备属性
style=filter:Alpha(opacity=100,style=2);
filter:样式表滤镜;
Alpha:透明滤镜,
opacity:不透明度100(0~100);
style:样式2(0~3),
rules="none"不显示内框"
多媒体文件标识
属性:
SRC="../../FILENAME",
设定音乐文件的路径,文件类型除了可以播放.rm;.mp3;.wav等音频,还可播放.swf和.mov等视频.
AUTOSTART=TRUE/FALSE,
是否要音乐文件传送完就自动播放,TRUE是要,FALSE是不要,默认为FALSE
LOOP=,设定播放重复次数,LOOP=6表示重复6次,true或-1为无限循环,false为播放一次即停止.
STARTIME="分:秒",
设定乐曲的开始播放时间,如20秒后播放写为STARTIME=00:20
VOLUME=0-100,
设定音量的大小.如果没设定的话,就用系统的音量.
WIDTH,HEIGHT,
设定控制面板的大小,都设为0可隐藏播放器
HIDDEN=TRUE,
隐藏控制面板
CONTROLS=CONSOLE/SMALLCONSOLE,
设定控制面板的样子,
,背景音乐标识,只能用于.wav和.mp3格式.
属性:
LOOP=,设定播放重复次数,LOOP=6表示重复6次,true或-1为无限循环,false为播放一次即停止.

表单标签:

表格标识的开始和结束,表单的内容都放在这里.
下边的标签放在表单内:

属性:
Multiple,多选
,大量文字输入的编辑块
属性:
Cols="",行;
Rows="",列;
,文本框
,密码框
,提交按扭
,复选框
,单选框
,重置按扭
,图片按扭
,隐藏域
,按扭
,浏览文件
公共属性:
Name="";
Value=""
Size=""

框架标签:
...,定义框架.
,放在框架标签内,定义每个框架的内容.
属性:
Cols=""
Rows=""
Frameborder=""
Framespacing=""
src=""
Scrolling="",滚动条(No,Yes);
Noresize,框加大小不可变;
Marginhight="",高度空余空间;
Marginwidth="",宽度空余空间;
Target="",目标框架.

其他标签:
,背景音乐;
Src=""
Loop="",循环次数;
,媒体播放块;
Src=""
Loop="",循环次数;
,滚动部分;
属性:
Bgcolor=""
Behavior,设置或获取文本如何在字幕中滚动.
Direction="",滚动方向;
Height=""
Width=""
Loop="",环次数;
scrollAmount="",设置或获取介于每个字幕绘制序列之间的文本滚动像素数.
scrollDelay="",设置或获取字幕滚动的速度.
scrollHeight="",获取对象的滚动高度;
scrollLeft="",设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离.
scrollTop="",设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离.
trueSpeed="",设置或获取字幕的位置是否使用scrollDelay和scrollAmount属性计算,已过的实际时间来自于时钟计时.

,注释标记,在""之间的内容将不在浏览器中显示.

--

基本标签:
,创建一个HTML文档;
,设置文档标题和其它在网页中不显示的信息;
,设置文档的标题;

,最大的标题;

,预先格式化文本;
,下划线
,黑体字;
,斜体字;
,打字机风格的字体;
,引用,通常是斜体;
,强调文本(通常是斜体加黑体);
,加重文本(通常是斜体加黑体);
,设置字体大小从1到7,颜色使用名字或RGB的十六进制值;
,基准字体标记;
,字体加大;
,字体缩小;
,加删除线;
,程式码;
,键盘字;
,范例;
,变量;

,向右缩排;
,述语定义;

,地址标记;
,上标字;
,下标字;
...固定宽度字体(在文件中空白、换行、定位功能有效)
...</plaintext>固定宽度字体(不执行标记符号);<br><listing>...</listing>,固定宽度小字体;<br><font,color=00ff00>...</font>字体颜色;<br><font,size=1>...</font>最小字体;<br><font,style,='font-size:100,px'>...</font>无限增大.</p> <h3> </h3> <p class="p"><span style="font-family: 微软雅黑;">格式标签</span>:</p> <h3> </h3> <p class="p"><p></p>,创建一个段落;<br><p,align="">,将段落按左、中、右对齐;<br><br>,换行,插入一个回车换行符;<br><blockquote></blockquote>,从两边缩进文本;</p> <h3> </h3> <p class="p"><dl></dl>,列表标签,定义列表;<br><dt>,定义列表标题;<br><dd>,定义列表内容;<br><span style="font-family: 微软雅黑;">例</span>:<br><dl><br><dt>标题1</dt><br><dd>内容11</dd><br><dd>内容12</dd><br><dt>标题2</dt><br><dd>内容21</dd><br><dd>内容22</dd><br></dl></p> <h3> </h3> <p class="p"><ol></ol>,列表标签,定义一个标有数字的列表;</p> <h3> </h3> <p class="p"><ul></ul>,列表标签,定义一个标有圆点的列表;<br><li>,放在每个列表项之前;<br><span style="font-family: 微软雅黑;">放在</span><ol></ol>之间则每个列表项加上一个数字,放在<ul></ul>之间则每个列表项加上一个圆点;</p> <h3> </h3> <p class="p"><div,align=""></div>,分区标签,用来排版大块HTML段落,也用于格式化表;<br><MENU>,选项清单;<br><DIR>,目录清单;<br><nobr></nobr>,强行不换行;<br><hr,size='9',width='80%',color='ff0000'>水平线(设定宽度);<br><center></center>,水平居中.</p> <h3> </h3> <p class="p"><span style="font-family: 微软雅黑;">链接标签</span>:<br><a,href="URL"></a>,创建超文本链接;<br><a,href="mailtEMAIL"><br></a>,创建自动发送电子邮件的链接;<br><a,name="name"></a>,创建位于文档内部的书签;<br><a,href="#name"></a>,创建指向位于文档内部书签的链接;<br><BASE>,文档中不能被该站点辨识的其它所有链接源的URL;<br><LINK>,定义一个链接和源之间的相互关系;</p> <h3> </h3> <p class="p"><span style="font-family: 微软雅黑;">链接标签注解</span>:<br>target="...",决定链接源在什么地方显示(用户自定义的名字,_blank,_parent,_self,_top);<br>rel="...",发送链接的类型;<br>rev="...",保存链接的类型;<br>accesskey="...",指定该元素的热键;<br>shape="...",允许我们使用已定义的形状定义客户端的图形镜像(default,rect,circle,poly);<br>coord="...",使用像素或者长度百分比来定义形状的尺寸;<br>tabindex="...",使用定义过的tabindex元素设置在各个元素之间的焦点获取顺序(使用tab键使元素获得焦点).</p> <h3> </h3> <p class="p"><span style="font-family: 微软雅黑;">表格标签</span>:<br><table></table>,创建一个表格;<br><tr></tr>,表格中的每一行;<br><td></td>,表格中一行中的每一个格子;<br><th></th>,设置表格头:通常是黑体居中文字;<br><table,cellspacing="">,设置表格格子之间空间的大小;<br><table,border="">,设置边框的宽度;<br><table,cellpadding="">,设置表格格子边框与其内部内容之间空间的大小;<br><table,width="">,设置表格的宽度.用绝对像素值或总宽度的百分比;<br><table,align="">,设置表格格子的水平对齐方式(left,center,right,justify);<br><tr,align="">,设置表格格子的水平对齐方式(left,center,right,justify);<br><tr,valign="">,设置表格格子的垂直对齐方式(baseline,bottom,middle,top);<br><td,colspan="">,设置一个表格格子跨占的列数(缺省值为1);<br><td,rowspan="">,设置一个表格格子跨占的行数(缺省值为1);<br><td,nowrap>,禁止表格格子内的内容自动断行;<br><CAPTION></CAPTION>,表格的标题;<br><COLGROUP></COLGROUP>,定义多个列为一组列;<br><TABLE></TABLE>,创建一个表格;<br><THEAD></THEAD>,定义表格的页眉;<br><COL>,定义一个列组中的列，以便对它们能够同时设置有关属性;<br><TBODY></TBODY>,定义一个表格的实体;<br><TFOOT></TFOOT>,定义一个表格的页脚;</p> <h3> </h3> <p class="p"><span style="font-family: 微软雅黑;">表单标签</span>:<br><form></form>,创建表单;<br>action="...",接收数据的服务器的URL;<br>method="...",HTTP的方法(get,,post),其中get是被反对使用的;<br>enctype="...",指定MIME(Internet媒体类型);<br>οnsubmit="...",当提交表单时发生的内部事件;<br>noreset="...",在重新设置表单时发生的内部事件;<br>target="...",决定把内容显示在什么地方(_blank,_parent,_self,_top)<br><select,multiple,name="name",size=""></select>,创建滚动菜单,size设置在需要滚动前可以看到的表单项数目;<br><option>,设置每个表单项的内容;<br><select,name="name"></select>,创建下拉菜单;<br><textarea,name="name",cols=40,rows=8></textarea>,创建一个文本框区域,列的数目设置宽度,行的数目设置高度;<br><input,type="checkbox",name="name">,创建一个复选框,文字在标签后面;<br><input,type="radio",name="name",value="">,创建一个单选框,文字在标志后面;<br><input,type=text,name="foo",size=20>,创建一个单行文本输入区域,size设置以字符串的宽度;<br><input,type="submit",value="name">,创建提交(submit)按钮;<br><input,type="image",border=0,name="name",src="name.gif">,创建一个使用图象的提交(submit)按钮;<br><input,type="reset">,创建重置(reset)按钮;<br><BUTTON></BUTTON>,创建一个按钮;<br>disabled="...",把按钮的状态设置为不能;<br>name="...",按钮的控制名,value="...",按钮的值;<br>type="...",按钮的类型(button,,submit,,reset);<br><FIELDSET></FIELDSET>,把相互关联的控件组合成一组;<br><ISINDEX>,提示用户输入;<br><LABEL></LABEL>,为一个控件提供标签;<br><LEGEND></LEGEND>,为FIELDSET元素指定一标题;<br><SELECT></SELECT>,为用户做选择创建各个选项;<br><TEXTAREA></TEXTAREA>,创建一个允许用户多行输入的区域.</p> <h3> </h3> <p class="p"><span style="font-family: 微软雅黑;">表单标签注解</span>:<br>type="...",用于输入控件的类型(text,password,checkbox,radio,submit,reset,file,hidden,image,button);<br>name="...",控件的控制名(要求是除了submit和reset之外的任何名字);<br>value="...",控件的初始值;<br>checked="...",把一个单选钮设置为选中的状态;<br>disabled="...",把控件的状态设置为不能使用;<br>readonly="...",只对输入密码的文本框使用;<br>size="...",表示以像素为单位的除了文本框和密码框控件之外的其它控件的宽度,它是用来指定字符的数目;<br>src="...",一个图像控件的URL;<br>maxlength="...",指定可以输入的最多的字符数目;<br>alt="...",另外一种文本描述;<br>usemap="...",到客户端图形镜像的URL;<br>align="...",被反对.控制对齐方式(left,,center,,right,,justify);<br>tabindex="...",通过定义的tabindex值确定在不同元素之间获得焦点的顺序;<br>οnfοcus="...",当元素获得焦点时发生的事件;<br>οnblur="...",当元素失去焦点时发生的事件;<br>οnselect="...",当元素被选中时发生的事件;<br>onchang="...",当元素状态被改变时发生的事件;<br>accept="...",允许上载的文件类型.</p> <h3> </h3> <p class="p"><span style="font-family: 微软雅黑;">帧标签</span>(框架标签):<br><frameset></frameset>,放在一个帧文档的<body>标签之前,也可以嵌在其他帧文档中;<br><frameset,rows="value,value">,定义一个帧内的行数,可用像素值或高度百分比;<br><frameset,cols="value,value">,定义一个帧内的列数,可用像素值或宽度百分比;<br><frame>,定义一个帧内的单一窗或窗区域;<br><noframes></noframes>,定义在不支持帧的浏览器中显示什么提示;<br><frame,src="URL">,规定帧内显示的HTML文档;<br><frame,name="name">,命名帧或区域以便别的帧可以指向它;<br><frame,marginwidth="">,定义帧左右边缘的空白大小,必须大于等于1;<br><frame,marginheight="">,定义帧上下边缘的空白大小,必须大于等于1;<br><frame,scrolling="">,设置帧是否有滚动栏,其值可以是"yes","no",或"auto";<br><frame,noresize>,禁止用户调整一个帧的大小;<br><IFRAME></IFRAME>,创建一个内联的帧;<br>scr="...",定义在帧中显示的内容的来源;<br>frameborder="...",定义帧之间的边界(0或1);<br>align="...",被反对,控制对齐方式(left,,center,,right,,justify);<br>height="...",帧的高度,width="..."帧的宽度;<br><marquee>...</marquee>,普通卷动;<br><marquee,behavior=slide>...</marquee>,滑动;<br><marquee,behavior=scroll>...</marquee>,预设卷动;<br><marquee,behavior=alternate>...</marquee>,来回卷动;<br><marquee,direction=down>...</marquee>,向下卷动;<br><marquee,direction=up>...</marquee>,向上卷动;<br><marquee,direction=right></marquee>,向右卷动;<br><marquee,direction='left'></marquee>,向左卷动;<br><marquee,loop=2>...</marquee>,卷动次数;<br><marquee,width=180>...</marquee>,设定宽度;<br><marquee,height=30>...</marquee>,设定高度;<br><marquee,bgcolor=FF0000>...</marquee>,设定背景颜色;<br><marquee,scrollamount=30>...</marquee>,设定卷动距离;<br><marquee,scrolldelay=300>...</marquee>,设定卷动时间;<br><img,src="">,插入图片,参数有:width="宽",alt="说明文字",height="高",boder="边框".</p> <h3> </h3> <p class="p"><span style="font-family: 微软雅黑;">文档整体属性标签</span>:<br><body,bgcolor="">,设置背景颜色.使用名字或RGB的十六进制值;<br><body,background="">,设置背景图片;<br><body,bgsound="">,设置背景音乐;<br><body,bgproperties="fixed">,固定背景图片(IE适用);<br><body,text="">,设置文本颜色.使用名字或RGB的十六进制值;<br><body,link="">,设置链接颜色.使用名,字或RGB的十六进制值;<br><body,vlink="">,设置已使用的链接的颜色.使用名字或RGB的十六进制值;<br><body,alink="">,设置正在被击中的链接的颜色.使用名字或RGB的十六进制值;<br><body,topmargin="">,设置页面的上边距;<br><body,leftmargin="">,设置页面的左边距.</p> <h3> </h3> <p> </p> <h3><strong><span style="font-family: 宋体;">如何清除图片下方出现几像素的空白间隙？</span></strong></h3> <p class="p"><strong><span style="font-family: 宋体;">方法</span>1<span style="font-family: 宋体;">：</span></strong></p> <table border="0"> <tbody> <tr> <td valign="top" width="35"> <p>1</p> </td> <td valign="top" width="0"> <p>img{display:block;}</p> </td> </tr> </tbody> </table> <p class="p"><span style="font-family: 宋体;">　　</span></p> <p class="p"><strong><span style="font-family: 宋体;">方法</span>2<span style="font-family: 宋体;">：</span></strong></p> <table border="0"> <tbody> <tr> <td valign="top" width="35"> <p>1</p> </td> <td valign="top" width="0"> <p>img{vertical-align:top;}</p> </td> </tr> </tbody> </table> <p class="p"><span style="font-family: 宋体;">　　</span></p> <p class="p"><span style="font-family: 宋体;">除了</span>top<span style="font-family: 宋体;">值，还可以设置为</span><span style="font-family: Verdana;">text-top | middle | bottom | text-bottom</span><span style="font-family: 宋体;">，甚至特定的</span><span style="font-family: Verdana;"><length></span><span style="font-family: 宋体;">和</span><span style="font-family: Verdana;"><percentage></span><span style="font-family: 宋体;">值都可以</span></p> <p class="p"><strong><span style="font-family: 宋体;">方法</span>3<span style="font-family: 宋体;">：</span></strong></p> <table border="0"> <tbody> <tr> <td valign="top" width="35"> <p>1</p> </td> <td valign="top" width="0"> <p>#test{font-size:0;line-height:0;}</p> </td> </tr> </tbody> </table> <p class="p"><span style="font-family: 宋体;">　　</span></p> <p class="p">#test<span style="font-family: 宋体;">为</span><span style="font-family: Verdana;">img</span><span style="font-family: 宋体;">的父元素</span></p> <p class="p"> </p> <h3><strong><span style="font-family: 宋体;">如何让文本垂直对齐文本输入框？</span></strong></h3> <p class="p"><strong><span style="font-family: 宋体;">方法：</span></strong></p> <table border="0"> <tbody> <tr> <td valign="top" width="35"> <p>1</p> </td> <td valign="top" width="0"> <p>input{vertical-align:middle;}</p> </td> </tr> </tbody> </table> <h3><strong><span style="font-family: 宋体;">　　</span></strong><strong><span style="font-family: 宋体;">如何让单行文本在容器内垂直居中？</span></strong></h3> <p class="p"><strong><span style="font-family: 宋体;">方法：</span></strong></p> <table border="0"> <tbody> <tr> <td valign="top" width="35"> <p>1</p> </td> <td valign="top" width="0"> <p>#test{height:25px;line-height:25px;}</p> </td> </tr> </tbody> </table> <p class="p"><span style="font-family: 宋体;">　　</span></p> <p class="p"><span style="font-family: 宋体;">只需设置文本的行高等于容器的高度即可</span></p> <h3><strong><span style="font-family: 宋体;">如何让超链接访问后和访问前的颜色不同且访问后仍保留</span>hover<span style="font-family: 宋体;">和</span><span style="font-family: 'Times New Roman';">active</span><span style="font-family: 宋体;">效果？</span></strong></h3> <p class="p"><strong><span style="font-family: 宋体;">方法：</span></strong></p> <table border="0"> <tbody> <tr> <td valign="top" width="35"> <p>1</p> <p>2</p> <p>3</p> <p>4</p> </td> <td valign="top" width="0"> <p>a:link{color:#03c;}</p> <p>a:visited{color:#666;}</p> <p>a:hover{color:#f30;}</p> <p>a:active{color:#c30;}</p> </td> </tr> </tbody> </table> <p class="p"><span style="font-family: 宋体;">　按</span>L-V-H-A<span style="font-family: 宋体;">的顺序设置超链接样式即可，可速记为</span><span style="font-family: Verdana;">LoVe</span><span style="font-family: 宋体;">（喜欢）</span><span style="font-family: Verdana;">HAte</span><span style="font-family: 宋体;">（讨厌）</span></p> <h3><strong><span style="font-family: 宋体;">为什么</span>Standard mode<span style="font-family: 宋体;">下</span><span style="font-family: 'Times New Roman';">IE</span><span style="font-family: 宋体;">无法设置滚动条的颜色？</span></strong></h3> <p class="p"><strong><span style="font-family: 宋体;">方法：</span></strong></p> <table border="0"> <tbody> <tr> <td valign="top" width="35"> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p> <p>10</p> </td> <td valign="top" width="0"> <p>html{</p> <p> scrollbar-3dlight-color:#999;</p> <p> scrollbar-darkshadow-color:#999;</p> <p> scrollbar-highlight-color:#fff;</p> <p> scrollbar-shadow-color:#eee;</p> <p> scrollbar-arrow-color:#000;</p> <p> scrollbar-face-color:#ddd;</p> <p> scrollbar-track-color:#eee;</p> <p> scrollbar-base-color:#ddd;</p> <p>}</p> </td> </tr> </tbody> </table> <p class="p"><span style="font-family: 宋体;">　　</span></p> <p class="p"><span style="font-family: 宋体;">将原来设置在</span>body<span style="font-family: 宋体;">上的滚动条颜色样式定义到</span><span style="font-family: Verdana;">html</span><span style="font-family: 宋体;">标签选择符上即可</span></p> <p class="p"> </p> <h3><strong><span style="font-family: 宋体;">如何使文本溢出边界不换行强制在一行内显示？</span></strong></h3> <p class="p"><strong><span style="font-family: 宋体;">方法：</span></strong></p> <table border="0"> <tbody> <tr> <td valign="top" width="35"> <p>1</p> </td> <td valign="top" width="0"> <p>#test{width:150px;white-space:nowrap;}</p> </td> </tr> </tbody> </table> <p class="p"><span style="font-family: 宋体;">　　</span></p> <p class="p"><span style="font-family: 宋体;">设置容器的宽度和</span>white-space<span style="font-family: 宋体;">为</span><span style="font-family: Verdana;">nowrap</span><span style="font-family: 宋体;">即可，其效果类似</span><span style="font-family: Verdana;"><nobr></span><span style="font-family: 宋体;">标签</span></p> <p class="p"> </p> <h3><strong><span style="font-family: 宋体;">如何使文本溢出边界显示为省略号？</span></strong></h3> <p class="p"><strong><span style="font-family: 宋体;">方法（此方法</span>Firefox5.0<span style="font-family: 宋体;">尚不支持）：</span></strong></p> <table border="0"> <tbody> <tr> <td valign="top" width="35"> <p>1</p> </td> <td valign="top" width="0"> <p>#test{width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}</p> </td> </tr> </tbody> </table> <p class="p"><span style="font-family: 宋体;">　　</span></p> <p class="p"><span style="font-family: 宋体;">首先需设置将文本强制在一行内显示，然后将溢出的文本通过</span>overflow:hidden<span style="font-family: 宋体;">截断，并以</span><span style="font-family: Verdana;">text-overflow:ellipsis</span><span style="font-family: 宋体;">方式将截断的文本显示为省略号。</span></p> <p class="p"> </p> <h3><strong><span style="font-family: 宋体;">如何使连续的长字符串自动换行？</span></strong></h3> <p class="p"><strong><span style="font-family: 宋体;">方法：</span></strong></p> <table border="0"> <tbody> <tr> <td valign="top" width="35"> <p>1</p> </td> <td valign="top" width="0"> <p>#test{width:150px;word-wrap:break-word;}</p> </td> </tr> </tbody> </table> <p class="p"><span style="font-family: 宋体;">　　</span></p> <p class="p">word-wrap<span style="font-family: 宋体;">的</span><span style="font-family: Verdana;">break-word</span><span style="font-family: 宋体;">值允许单词内换行</span></p> <p class="p"> </p> <h3><strong><span style="font-family: 宋体;">如何清除浮动？</span></strong></h3> <p class="p"><strong><span style="font-family: 宋体;">方法</span>1<span style="font-family: 宋体;">：</span></strong></p> <table border="0"> <tbody> <tr> <td valign="top" width="35"> <p>1</p> </td> <td valign="top" width="0"> <p>#test{clear:both;}</p> </td> </tr> </tbody> </table> <p class="p"><span style="font-family: 宋体;">　　</span></p> <p class="p">#test<span style="font-family: 宋体;">为浮动元素的下一个兄弟元素</span></p> <p class="p"><strong><span style="font-family: 宋体;">方法</span>2<span style="font-family: 宋体;">：</span></strong></p> <table border="0"> <tbody> <tr> <td valign="top" width="35"> <p>1</p> </td> <td valign="top" width="0"> <p>#test{display:block;zoom:1;overflow:hidden;}</p> </td> </tr> </tbody> </table> <p class="p"><span style="font-family: 宋体;">　　</span></p> <p class="p">#test<span style="font-family: 宋体;">为浮动元素的父元素。</span><span style="font-family: Verdana;">zoom:1</span><span style="font-family: 宋体;">也可以替换为固定的</span><span style="font-family: Verdana;">width</span><span style="font-family: 宋体;">或</span><span style="font-family: Verdana;">height</span></p> <p class="p"><strong><span style="font-family: 宋体;">方法</span>3<span style="font-family: 宋体;">：</span></strong></p> <table border="0"> <tbody> <tr> <td valign="top" width="35"> <p>1</p> <p>2</p> </td> <td valign="top" width="0"> <p>#test{zoom:1;}</p> <p>#test:after{display:block;clear:both;visibility:hidden;height:0;content:'';}</p> </td> </tr> </tbody> </table> <p class="p"><span style="font-family: 宋体;">　　</span></p> <p class="p">#test<span style="font-family: 宋体;">为浮动元素的父元素</span></p> <p class="p"> </p> <h3><strong><span style="font-family: 宋体;">如何定义鼠标指针的光标形状为手型并兼容所有浏览器？</span></strong></h3> <p class="p"><strong><span style="font-family: 宋体;">方法：</span></strong></p> <table border="0"> <tbody> <tr> <td valign="top" width="35"> <p>1</p> </td> <td valign="top" width="0"> <p>#test{cursor:pointer;}</p> </td> </tr> </tbody> </table> <p class="p"><span style="font-family: 宋体;">　　若将</span>cursor<span style="font-family: 宋体;">设置为</span><span style="font-family: Verdana;">hand</span><span style="font-family: 宋体;">，将只有</span><span style="font-family: Verdana;">IE</span><span style="font-family: 宋体;">和</span><span style="font-family: Verdana;">Opera</span><span style="font-family: 宋体;">支持，且</span><span style="font-family: Verdana;">hand</span><span style="font-family: 宋体;">为非标准属性值</span></p> <h3><strong><span style="font-family: 宋体;">如何让已知高度的容器在页面中水平垂直居中？</span></strong></h3> <p class="p"><strong><span style="font-family: 宋体;">方法：</span></strong></p> <table border="0"> <tbody> <tr> <td valign="top" width="35"> <p>1</p> </td> <td valign="top" width="0"> <p>#test{position:absolute;top:50%;left:50%;width:200px;height:200px;margin:-100px 0 0 -100px;}</p> </td> </tr> </tbody> </table> <p class="p"><span style="font-family: 宋体;">　　</span></p> <h3><strong><span style="font-family: 宋体;">如何让未知尺寸的图片在已知宽高的容器内水平垂直居中？</span></strong></h3> <p class="p"><strong><span style="font-family: 宋体;">方法：</span></strong></p> <table border="0"> <tbody> <tr> <td valign="top" width="35"> <p>1</p> <p>2</p> <p>3</p> </td> <td valign="top" width="0"> <p>#test{display:table-cell;*display:block;*position:relative;width:200px;height:200px;text-align:center;vertical-align:middle;}</p> <p>#test p{*position:absolute;*top:50%;*left:50%;margin:0;}</p> <p>#test p img{*position:relative;*top:-50%;*left:-50%;vertical-align:middle;}</p> </td> </tr> </tbody> </table> <p class="p"><span style="font-family: 宋体;">　　</span></p> <p class="p">#test<span style="font-family: 宋体;">是</span><span style="font-family: Verdana;">img</span><span style="font-family: 宋体;">的祖父节点，</span><span style="font-family: Verdana;">p</span><span style="font-family: 宋体;">是</span><span style="font-family: Verdana;">img</span><span style="font-family: 宋体;">的父节点。</span></p> <p class="p"> </p> <h3><strong><span style="font-family: 宋体;">如何设置</span>span<span style="font-family: 宋体;">的宽度和高度（即如何设置内联元素的宽高）？</span></strong></h3> <p class="p"><strong><span style="font-family: 宋体;">方法：</span></strong></p> <table border="0"> <tbody> <tr> <td valign="top" width="35"> <p>1</p> </td> <td valign="top" width="0"> <p>span{display:block;width:200px;height:100px;}</p> </td> </tr> </tbody> </table> <p class="p"><span style="font-family: 宋体;">　　</span></p> <p class="p"><span style="font-family: 宋体;">要使内联元素可以设置宽高，只需将其定义为块级或者内联块级元素即可。所以方法非常多样，既可以设置</span>display<span style="font-family: 宋体;">属性，也可以设置</span><span style="font-family: Verdana;">float</span><span style="font-family: 宋体;">属性，或者</span><span style="font-family: Verdana;">position</span><span style="font-family: 宋体;">属性等等。</span></p> <p class="p"> </p> <h3><strong><span style="font-family: 宋体;">如何给一个元素定义多个不同的</span>css<span style="font-family: 宋体;">规则？</span></strong></h3> <p class="p"><strong><span style="font-family: 宋体;">方法：</span></strong></p> <table border="0"> <tbody> <tr> <td valign="top" width="35"> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> </td> <td valign="top" width="0"> <p>.a{color:#f00;}</p> <p>.b{background:#eee;}</p> <p>.c{background:#ccc;}</p> <p> </p> <p><div>测试1</div></p> <p><div>测试2</div></p> </td> </tr> </tbody> </table> <p class="p"><span style="font-family: 宋体;">　　</span></p> <p class="p"><span style="font-family: 宋体;">多个规则之间使用空格分开，并且只有</span>class<span style="font-family: 宋体;">能同时使用多个规则，</span><span style="font-family: Verdana;">id</span><span style="font-family: 宋体;">不可以</span></p> <p class="p"> </p> <h3><strong><span style="font-family: 宋体;">如何让某个元素充满整个页面？</span></strong></h3> <p class="p"><strong><span style="font-family: 宋体;">方法：</span></strong></p> <table border="0"> <tbody> <tr> <td valign="top" width="35"> <p>1</p> <p>2</p> </td> <td valign="top" width="0"> <p>html,body{height:100%;margin:0;}</p> <p>#test{height:100%;}</p> </td> </tr> </tbody> </table> <p class="p"><span style="font-family: 宋体;">　　</span></p> <p> </p> <h3><strong><span style="font-family: 宋体;">如何让某个元素距离窗口上右下左</span>4<span style="font-family: 宋体;">边各</span><span style="font-family: 'Times New Roman';">10</span><span style="font-family: 宋体;">像素？</span></strong></h3> <p class="p"><strong><span style="font-family: 宋体;">方法：</span></strong></p> <table border="0"> <tbody> <tr> <td valign="top" width="35"> <p>1</p> <p>2</p> <p>3</p> </td> <td valign="top" width="0"> <p>html,body{height:100%;margin:0;}</p> <p>html{_padding:10px;}</p> <p>#test{position:absolute;top:10px;right:10px;bottom:10px;left:10px;_position:static;_height:100%;}</p> </td> </tr> </tbody> </table> <p class="p"><span style="font-family: 宋体;">　　</span></p> <p> </p> <h3><strong><span style="font-family: 宋体;">如何去掉超链接的虚线框？</span></strong></h3> <p class="p"><strong><span style="font-family: 宋体;">方法：</span></strong></p> <table border="0"> <tbody> <tr> <td valign="top" width="35"> <p>1</p> </td> <td valign="top" width="0"> <p>a{outline:none;}</p> </td> </tr> </tbody> </table> <p class="p"><span style="font-family: 宋体;">　　</span></p> <p class="p">IE7<span style="font-family: 宋体;">及更早浏览器由于不支持</span><span style="font-family: Verdana;">outline</span><span style="font-family: 宋体;">属性，需要通过</span><span style="font-family: Verdana;">js</span><span style="font-family: 宋体;">的</span><span style="font-family: Verdana;">blur()</span><span style="font-family: 宋体;">方法来实现，如</span><span style="font-family: Verdana;"><a onfocus="this.blur();"</span></p> <p class="p"> </p> <h3><strong><span style="font-family: 宋体;">如何容器透明，内容不透明？</span></strong></h3> <p class="p"><strong><span style="font-family: 宋体;">方法</span>1<span style="font-family: 宋体;">：</span></strong></p> <table border="0"> <tbody> <tr> <td valign="top" width="35"> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> </td> <td valign="top" width="0"> <p>.outer{width:200px;height:200px;background:#000;filter:alpha(opacity=20);opacity:.2;}</p> <p>.inner{width:200px;height:200px;margin-top:-200px;}</p> <p> </p> <p><div></div></p> <p><div>我是不透明的内容</div></p> </td> </tr> </tbody> </table> <p class="p"><span style="font-family: 宋体;">　　</span></p> <p class="p"><span style="font-family: 宋体;">原理是容器层与内容层并级，容器层设置透明度，内容层通过负</span>margin<span style="font-family: 宋体;">或者</span><span style="font-family: Verdana;">position</span><span style="font-family: 宋体;">绝对定位等方式覆盖到容器层上</span></p> <p class="p"><strong><span style="font-family: 宋体;">方法</span>2<span style="font-family: 宋体;">：</span></strong></p> <table border="0"> <tbody> <tr> <td valign="top" width="35"> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> </td> <td valign="top" width="0"> <p>.outer{width:200px;height:200px;background:rgba(0,0,0,.2);background:#000\9;filter:alpha(opacity=20)\9;}</p> <p>.outer .inner{position:relative\9;}</p> <p> </p> <p><div></p> <p> <div>我是不透明的内容</div></p> <p></div></p> </td> </tr> </tbody> </table> <p class="p"><span style="font-family: 宋体;">　　</span></p> <p class="p"><span style="font-family: 宋体;">高级浏览器直接使用</span>rgba<span style="font-family: 宋体;">颜色值实现；</span><span style="font-family: Verdana;">IE</span><span style="font-family: 宋体;">浏览器在定义容器透明的同时，让子节点相对定位，也可达到效果</span></p> <p class="p"> </p> <h3><strong><span style="font-family: 宋体;">如何让整个页面水平居中？</span></strong></h3> <p class="p"><strong><span style="font-family: 宋体;">方法：</span></strong></p> <table border="0"> <tbody> <tr> <td valign="top" width="35"> <p>1</p> <p>2</p> </td> <td valign="top" width="0"> <p>body{text-align:center;}</p> <p>#test2{width:960px;margin:0 auto;text-align:left;}</p> </td> </tr> </tbody> </table> <p class="p"><span style="font-family: 宋体;">　　</span></p> <p class="p"><span style="font-family: 宋体;">定义</span>body<span style="font-family: 宋体;">的</span><span style="font-family: Verdana;">text-align</span><span style="font-family: 宋体;">值为</span><span style="font-family: Verdana;">center</span><span style="font-family: 宋体;">将使得</span><span style="font-family: Verdana;">IE5.5</span><span style="font-family: 宋体;">也能实现居中</span></p> <p class="p"> </p> <h3><strong><span style="font-family: 宋体;">如何做</span>1<span style="font-family: 宋体;">像素细边框的</span><span style="font-family: 'Times New Roman';">table</span><span style="font-family: 宋体;">？</span></strong></h3> <p class="p"><strong><span style="font-family: 宋体;">方法</span>1<span style="font-family: 宋体;">：</span></strong></p> <table border="0"> <tbody> <tr> <td valign="top" width="35"> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> </td> <td valign="top" width="0"> <p>#test{border-collapse:collapse;border:1px solid #ddd;}</p> <p>#test th,#test td{border:1px solid #ddd;}</p> <p> </p> <p><table id="test"></p> <p> <tr><th>姓名</th><td>Joy Du</td></tr></p> <p> <tr><th>年龄</th><td>26</td></tr></p> <p></table></p> </td> </tr> </tbody> </table> <p class="p"><span style="font-family: 宋体;">　　</span></p> <p class="p"><strong><span style="font-family: 宋体;">方法</span>2<span style="font-family: 宋体;">：</span></strong></p> <table border="0"> <tbody> <tr> <td valign="top" width="35"> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> </td> <td valign="top" width="0"> <p>#test{border-spacing:1px;background:#ddd;}</p> <p>#test tr{background:#fff;}</p> <p> </p> <p><table id="test" cellspacing="1"></p> <p> <tr><th>姓名</th><td>Joy Du</td></tr></p> <p> <tr><th>年龄</th><td>26</td></tr></p> <p></table></p> </td> </tr> </tbody> </table> <p class="p"><span style="font-family: 宋体;">　　</span></p> <p class="p">IE7<span style="font-family: 宋体;">及更早浏览器不支持</span><span style="font-family: Verdana;">border-spacing</span><span style="font-family: 宋体;">属性，但是可以通过</span><span style="font-family: Verdana;">table</span><span style="font-family: 宋体;">的标签属性</span><span style="font-family: Verdana;">cellspacing</span><span style="font-family: 宋体;">来替代。</span></p> <p class="p"> </p> <h3><strong><span style="font-family: 宋体;">如何使页面文本行距始终保持为</span>n<span style="font-family: 宋体;">倍字体大小的基调？</span></strong></h3> <p class="p"><strong><span style="font-family: 宋体;">方法：</span></strong></p> <table border="0"> <tbody> <tr> <td valign="top" width="35"> <p>1</p> </td> <td valign="top" width="0"> <p>body{line-height:n;}</p> </td> </tr> </tbody> </table> <p class="p"><span style="font-family: 宋体;">　　</span></p> <p class="p"><span style="font-family: 宋体;">注意，不要给</span>n<span style="font-family: 宋体;">加单位。</span></p> <p class="p"> </p> <h3><strong><span style="font-family: 宋体;">标准模式</span>Standard mode<span style="font-family: 宋体;">和怪异模式</span><span style="font-family: 'Times New Roman';">Quirks mode</span><span style="font-family: 宋体;">下的盒模型区别？</span></strong></h3> <p class="p"><strong><span style="font-family: 宋体;">方法：</span></strong></p> <p class="pre"><span style="font-family: 宋体;">标准模式下：</span>Element width = width + padding + border</p> <p class="pre"><span style="font-family: 宋体;">怪异模式下：</span>Element width = width</p> <p class="p"> </p> <h3><strong><span style="font-family: 宋体;">为什么</span>2<span style="font-family: 宋体;">个相邻</span><span style="font-family: 'Times New Roman';">div</span><span style="font-family: 宋体;">的</span><span style="font-family: 'Times New Roman';">margin</span><span style="font-family: 宋体;">只有</span><span style="font-family: 'Times New Roman';">1</span><span style="font-family: 宋体;">个生效？</span></strong></h3> <p class="p"><strong><span style="font-family: 宋体;">方法：</span></strong></p> <table border="0"> <tbody> <tr> <td valign="top" width="35"> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> </td> <td valign="top" width="0"> <p>.box1{margin:10px 0;}</p> <p>.box2{margin:20px 0;}</p> <p> </p> <p><div>box1</div></p> <p><div>box2</div></p> </td> </tr> </tbody> </table> <p class="p"><span style="font-family: 宋体;">　　</span></p> <p class="p"><span style="font-family: 宋体;">本例中</span>box1<span style="font-family: 宋体;">的底部</span><span style="font-family: Verdana;">margin</span><span style="font-family: 宋体;">为</span><span style="font-family: Verdana;">10px</span><span style="font-family: 宋体;">，</span><span style="font-family: Verdana;">box2</span><span style="font-family: 宋体;">的顶部</span><span style="font-family: Verdana;">margin</span><span style="font-family: 宋体;">为</span><span style="font-family: Verdana;">20px</span><span style="font-family: 宋体;">，但表现在页面上</span><span style="font-family: Verdana;">2</span><span style="font-family: 宋体;">者之间的间隔为</span><span style="font-family: Verdana;">20px</span><span style="font-family: 宋体;">，而不是预想中的</span><span style="font-family: Verdana;">10+20px=30px</span><span style="font-family: 宋体;">，结果是选择</span><span style="font-family: Verdana;">2</span><span style="font-family: 宋体;">者之间最大的那个</span><span style="font-family: Verdana;">margin</span><span style="font-family: 宋体;">，我们把这种机制称之为</span><span style="font-family: Verdana;">“</span><span style="font-family: 宋体;">外边距合并</span><span style="font-family: Verdana;">”</span><span style="font-family: 宋体;">；外边距合并不仅仅出现在相邻的元素间，父子间同样会出现。</span></p> <p class="p"><span style="font-family: 宋体;">简单列举几点注意事项</span>: </p> <p><span style="font-family: 宋体;">外边距合并只出现在块级元素上；</span> <br><span style="font-family: 宋体;">浮动元素不会和相邻的元素产生外边距合并；</span> <br><span style="font-family: 宋体;">绝对定位元素不会和相邻的元素产生外边距合并；</span> <br><span style="font-family: 宋体;">内联块级元素间不会产生外边距合并；</span> <br><span style="font-family: 宋体;">根元素间不会不会产生外边距合并（如</span>html与body间）； <br><span style="font-family: 宋体;">设置了属性</span>overflow且值不为visible的块级元素不会与它的子元素发生外边距合并；</p> <p class="p"> </p> <p class="p"> </p> <h3><strong><span style="font-family: 宋体;">如何在文本框中禁用中文输入法？</span></strong></h3> <p class="p"><strong><span style="font-family: 宋体;">方法：</span></strong></p> <table border="0"> <tbody> <tr> <td valign="top" width="35"> <p>1</p> </td> <td valign="top" width="0"> <p>input,textarea{ime-mode:disabled;}</p> </td> </tr> </tbody> </table> <p class="p"><span style="font-family: 宋体;">　　</span></p> <p class="p">ime-mode<span style="font-family: 宋体;">为非标准属性，写该文档时只有</span><span style="font-family: Verdana;">IE</span><span style="font-family: 宋体;">和</span><span style="font-family: Verdana;">Firefox</span><span style="font-family: 宋体;">支持</span></p> <p class="p"> </p> <h3><strong><span style="font-family: 宋体;">如何解决列表中</span>list-style-image<span style="font-family: 宋体;">不能精准定位的问题？</span></strong></h3> <p class="p"><strong><span style="font-family: 宋体;">方法：</span></strong></p> <p class="p"><span style="font-family: 宋体;">不使用</span>list-style-image<span style="font-family: 宋体;">来定义列表项目标记符号，而用</span><span style="font-family: Verdana;">background-image</span><span style="font-family: 宋体;">来代替，并通过</span><span style="font-family: Verdana;">background-position</span><span style="font-family: 宋体;">来进行定位</span></p> <p class="p"> </p> <h3><strong><span style="font-family: 宋体;">如何解决伪对象</span>:before<span style="font-family: 宋体;">和</span><span style="font-family: 'Times New Roman';">:after</span><span style="font-family: 宋体;">在</span><span style="font-family: 'Times New Roman';">input</span><span style="font-family: 宋体;">标签上的怪异表现的问题？</span></strong></h3> <p class="p"><strong><span style="font-family: 宋体;">现象：</span></strong></p> <p><span style="font-family: 宋体;">在编写本条目时，除了</span>Opera<span style="font-family: 宋体;">，在所有浏览器下</span><span style="font-family: Verdana;">input</span><span style="font-family: 宋体;">标签使用伪对象</span><span style="font-family: Verdana;">:before</span><span style="font-family: 宋体;">和</span><span style="font-family: Verdana;">:after</span><span style="font-family: 宋体;">都没有效果，即使</span><span style="font-family: Verdana;">Opera</span><span style="font-family: 宋体;">的表现也同样令人诧异。大家可以试玩一下。浏览器版本：</span><span style="font-family: Verdana;">IE6-IE10, Firefox6.0, Chrome13.0, Safari5.1, Opera11.51</span></p> <p> </p> <h3><strong><span style="font-family: 宋体;">以图换字的几种方法及优劣分析</span></strong></h3> <p class="p"><strong><span style="font-family: 宋体;">思路</span>1<span style="font-family: 宋体;">：使用</span><span style="font-family: Verdana;">text-indent</span><span style="font-family: 宋体;">的负值，将内容移出容器</span></strong></p> <table border="0"> <tbody> <tr> <td valign="top" width="35"> <p>1</p> <p>2</p> <p>3</p> </td> <td valign="top" width="0"> <p>.test1{width:200px;height:50px;text-indent:-9999px;background:#eee url(*.png) no-repeat;}</p> <p> </p> <p><div>以图换字之内容负缩进法</div></p> </td> </tr> </tbody> </table> <p class="p"><span style="font-family: 宋体;">　　</span></p> <p class="p"><span style="font-family: 宋体;">该方法优点在于结构简洁，不理想的地方：</span>1.<span style="font-family: 宋体;">由于使用场景不同，负缩进的值可能会不一样，不易抽象成公用样式；</span><span style="font-family: Verdana;">2.</span><span style="font-family: 宋体;">当该元素为链接时，在非</span><span style="font-family: Verdana;">IE</span><span style="font-family: 宋体;">下虚线框将变得不完整；</span><span style="font-family: Verdana;">3.</span><span style="font-family: 宋体;">如果该元素被定义为内联级或者内联块级，不同浏览器下会有较多的差异</span></p> <p class="p"><strong><span style="font-family: 宋体;">思路</span>2<span style="font-family: 宋体;">：使用</span><span style="font-family: Verdana;">display:none</span><span style="font-family: 宋体;">或</span><span style="font-family: Verdana;">visibility:hidden</span><span style="font-family: 宋体;">将内容隐藏；</span></strong></p> <table border="0"> <tbody> <tr> <td valign="top" width="35"> <p>1</p> <p>2</p> <p>3</p> <p>4</p> </td> <td valign="top" width="0"> <p>.test{width:200px;height:50px;background:#eee url(*.png) no-repeat;}</p> <p>.test span{visibility:hidden;/* 或者display:none */}</p> <p> </p> <p><div><span>以图换字之内容隐藏法</span></div></p> </td> </tr> </tbody> </table> <p class="p"><span style="text-decoration: underline;"><span style="font-family: 宋体;">摄图网</span></span>https://www.wode007.com/sites/73204.html <span style="text-decoration: underline;">VJ<span style="font-family: 宋体;">师网</span></span>https://www.wode007.com/sites/73287.html</p> <p class="p"><span style="font-family: 宋体;">该方法优点在于兼容性强并且容易抽象成公用样式，缺点在于结构较复杂</span></p> <p class="p"><strong><span style="font-family: 宋体;">思路</span>3<span style="font-family: 宋体;">：使用</span><span style="font-family: Verdana;">padding</span><span style="font-family: 宋体;">或者</span><span style="font-family: Verdana;">line-height</span><span style="font-family: 宋体;">将内容挤出容器之外；</span></strong></p> <table border="0"> <tbody> <tr> <td valign="top" width="35"> <p>1</p> <p>2</p> <p>3</p> <p>4</p> </td> <td valign="top" width="0"> <p>.test{overflow:hidden;width:200px;height:0;padding-top:50px;background:#eee url(*.png) no-repeat;}</p> <p>.test{overflow:hidden;width:200px;height:50px;line-height:50;background:#eee url(*.jpg) no-repeat;}</p> <p> </p> <p><div>以图换字之内容排挤法</div></p> </td> </tr> </tbody> </table> <p class="p"><span style="font-family: 宋体;">　　</span></p> <p class="p"><span style="font-family: 宋体;">该方法优点在于结构简洁，缺点在于：</span>1.<span style="font-family: 宋体;">由于使用场景不同，</span><span style="font-family: Verdana;">padding</span><span style="font-family: 宋体;">或</span><span style="font-family: Verdana;">line-height</span><span style="font-family: 宋体;">的值可能会不一样，不易抽象成公用样式；</span><span style="font-family: Verdana;">2.</span><span style="font-family: 宋体;">要兼容</span><span style="font-family: Verdana;">IE5.5</span><span style="font-family: 宋体;">及更早浏览器还得</span><span style="font-family: Verdana;">hack</span></p> <p class="p"><strong><span style="font-family: 宋体;">思路</span>4<span style="font-family: 宋体;">：使用超小字体和文本全透明法；</span></strong></p> <table border="0"> <tbody> <tr> <td valign="top" width="35"> <p>1</p> <p>2</p> </td> <td valign="top" width="0"> <p>.test{overflow:hidden;width:200px;height:50px;font-size:0;line-height:0;color:rgba(0,0,0,0);background:#eee url(*.png) no-repeat;}</p> <p><div>以图换字之超小字体+文本全透明法</div></p> </td> </tr> </tbody> </table> <p class="p"><span style="font-family: 宋体;">　　</span></p> <p class="p"><span style="font-family: 宋体;">该方法结构简单易用，推荐使用</span></p> <h3><strong><span style="font-family: 宋体;">如何解决伪对象</span>:before<span style="font-family: 宋体;">和</span><span style="font-family: 'Times New Roman';">:after</span><span style="font-family: 宋体;">无法在</span><span style="font-family: 'Times New Roman';">Chrome,Safari,Opera</span><span style="font-family: 宋体;">上定义过渡和动画的问题？</span></strong></h3> <p class="p"><strong><span style="font-family: 宋体;">现象：</span></strong></p> <p><span style="font-family: 宋体;">在编写本条目时，除了</span>Firefox<span style="font-family: 宋体;">，在所有浏览器下伪对象</span><span style="font-family: Verdana;">:before</span><span style="font-family: 宋体;">和</span><span style="font-family: Verdana;">:after</span><span style="font-family: 宋体;">无法定义过渡和动画效果。浏览器版本：</span><span style="font-family: Verdana;">IE6-IE10, Firefox6.0, Chrome13.0, Safari5.1, Opera11.51</span><span style="font-family: 宋体;">。如果这个过渡或动画效果是必须，可以考虑使用真实对象。</span></p> <p class="p"> </p> <p><strong> </strong></p> <h1>css+html 总结+归纳</h1> <p class="p"><span style="font-family: 'Segoe UI';">趁着清明的</span>3天时间，我专门看了xhtml的一套视频，虽然是xhtml但是也隐喻了很多经验，巩固了一下自己的基础，我自己也写了很多大大小小的东西，但是越写我越发觉自己基础的薄弱，果然没错！还是学到了一些我以前没理解、不知道的一些概念和一些经验之谈，这里我写一篇文章做一个总结。</p> <p class="p"> </p> <p class="p"><strong><span style="font-family: 'Segoe UI';">一、首先</span>W3C标准</strong></p> <p class="p"><span style="font-family: 'Segoe UI';">结构、表现、动作</span> 与 html、css、javascript相对应，它本意是结构表现分离，而且按照html规范编写结构。</p> <p class="p"><strong><span style="font-family: 'Segoe UI';">标签方面：</span></strong></p> <p class="p">-所有标签都要小写、关闭、并且合理嵌套，id不能重复</p> <p class="p">-标签要有属性，属性必须有值，并且用“”表示</p> <p class="p">-img标签不能忽略alt属性</p> <p class="p">-表格标签不适用height属性</p> <p class="p">-尽量减少ifream的使用会影响浏览器响应速度，虽然在html5中也能使用ifream</p> <p class="p"><strong><span style="font-family: 'Segoe UI';">内容模型：</span></strong></p> <p class="p">-body、form、blockquote仅能包含块级元素</p> <p class="p">-文本、图像、链接等内联元素不能直接暴露在body标签中，必须用其他标签包裹</p> <p class="p">-内联元素不能包含块级元素</p> <p class="p"><strong><span style="font-family: 'Segoe UI';">其他方面：</span></strong></p> <p class="p">-特殊字符用编码表示</p> <p class="p"><strong><span style="font-family: 'Segoe UI';">番外：</span></strong></p> <p class="p"><span style="font-family: 'Segoe UI';">初学者的误区：</span></p> <p class="p">1、div是万能的！</p> <p class="p">2、table是丢人的！</p> <p class="p">3、为标准而标准</p> <p class="p">1、div严格意义上称作容器，大家有一些页面的装饰可以通过嵌套div来实现，但是千万不能整个页面全都用div来编写，很多标签是有特定含义的，比如说h1~h3，p，strong等，在html5中就更加语义化了比如，footer、head、nav、article、section等标签，还有很多标签，我这里只说常用的一些标签，而且如果整个页面全都用div来写不便于搜索引擎搜索到你的网站。</p> <p class="p">2、table并不丢人，只不过很少用而已，table是用来装载数据的，所有标签只要合理应用就不会丢人。</p> <p class="p">3、我们写网站网页其实说白了是为了客户和用户来看的，根据他们的需求我们学出对应的网站，我们强调页面应该灵活编写，不能死板的来。</p> <p class="p"><strong><span style="font-family: 'Segoe UI';">二、你必须掌握的</span></strong></p> <p class="p"><strong>1、块状元素和内联元素</strong></p> <p class="p"><span style="font-family: 'Segoe UI';">（</span>1）块状元素</p> <p class="p"><span style="font-family: 'Segoe UI';">块元素一般是其他元素的的容器元素，块元素一般从新的一行开始，它可以容纳文本、内联元素和其他块状元素，通过</span>width和height属性可以设置其大小，常见的块元素有 h标签和p标签、div标签</p> <p class="p"><span style="font-family: 'Segoe UI';">番外：</span>form标签也属于块标签并且只能容纳块级标签</p> <p class="p"><span style="font-family: 'Segoe UI';">（</span>2）内联元素</p> <p class="p"><span style="font-family: 'Segoe UI';">内联元素非块级元素。内联元素只能容纳文本或者其他内联元素，不会独占一行，</span>width和height对其不起作用，常见的内联元素有 a img span 等</p> <p class="p"><span style="font-family: 'Segoe UI';">番外：</span> <span style="font-family: 'Segoe UI';">这里我提一下</span> w3c为了让开发人员更方便增加了一个 inline-block 属性值，包含块状元素的特点：能够改变元素大小，也包含内联元素的特点：大小只有盒内元素大小</p> <p class="p"><strong>2、盒子模型</strong></p> <p class="p"><span style="font-family: 'Segoe UI';">下图能代表所有，具体和深入请看各种大神技术博：</span></p> <p class="p"> </p> <p class="p"><strong>3、css页面控制样式方法</strong></p> <p class="p"><span style="font-family: 'Segoe UI';">（</span>1）行内式</p> <p class="p"><span style="font-family: 'Segoe UI';">（</span>2）内嵌式</p> <p class="p"><span style="font-family: 'Segoe UI';">（</span>3）链接式</p> <p class="p"><span style="font-family: 'Segoe UI';">（</span>4）导入式</p> <p class="p"><span style="font-family: 'Segoe UI';">优先级：</span></p> <p class="p"><span style="font-family: 'Segoe UI';">就近元素，行内</span>>内嵌>链接>导入，在国内经前端经常用的是链接式。</p> <p class="p"><strong>4、常用选择器</strong></p> <p class="p">-标签选择器（div、p）</p> <p class="p">-id选择器（#）</p> <p class="p">-类选择器（.）</p> <p class="p">-通用选择器（*）</p> <p class="p">-伪类选择器（:link,:active,:hover,:visited）</p> <p class="p"><span style="font-family: 'Segoe UI';">优先级：</span></p> <p class="p">ID>类>标签>通用</p> <p class="p"><strong>5、文本流</strong></p> <p class="p"><span style="font-family: 'Segoe UI';">文本流讲述的是一个概念性的东西，页面内的元素是：从上至下、从左自右的顺序进行排列的。</span></p> <p class="p"><span style="font-family: 'Segoe UI';">番外：</span></p> <p class="p"><span style="font-family: 'Segoe UI';">如何脱离文本流？</span></p> <p class="p"><span style="font-family: 'Segoe UI';">我们为了方便布局，通常使用浮动和定位的方式布局</span></p> <p class="p"><strong>6、命名方法</strong></p> <p class="p">-骆驼命名法</p> <p class="p">-帕斯卡命名法</p> <p class="p">-匈牙利命名法</p> <p class="p">-或者全首字母大写</p> <p class="p"><span style="font-family: 'Segoe UI';">命名规则：</span></p> <p class="p"><span style="font-family: 'Segoe UI';">头：</span>head/header</p> <p class="p"><span style="font-family: 'Segoe UI';">内容：</span>content/container</p> <p class="p"><span style="font-family: 'Segoe UI';">尾：</span>foot/footer</p> <p class="p"><span style="font-family: 'Segoe UI';">导航：</span>nav/navigation</p> <p class="p"><span style="font-family: 'Segoe UI';">侧栏</span>: sidebar</p> <p class="p"><strong><span style="font-family: 'Segoe UI';">三、</span>css的控制能力</strong></p> <p class="p"><strong>1、首行缩进</strong></p> <p class="p">text-indent:2em; </p> <p class="p"><span style="font-family: 'Segoe UI';">如果文字是英文，也是缩进</span>2个汉字的宽度</p> <p class="p"><span style="font-family: 'Segoe UI';">知识点：</span></p> <p class="p">px 像素</p> <p class="p">rem 相对浏览器的单位</p> <p class="p">% 百分比单位</p> <p class="p">cm、mm 绝对单位</p> <p class="p"><strong>2、增强页面文字灵活性</strong></p> <p class="p"><span style="font-family: 'Segoe UI';">在</span>body中设置文字大小font-size：62.5% 在需要设置12px的地方设置文字大小为1.2em以此类推14px相对1.4em</p> <p class="p"><span style="font-family: 'Segoe UI';">因为任意浏览器默认字体高度为</span>16px 1em=16px</p> <p class="p">1px=1/16em 10px=10/16em=0.625em=0.625*1em=62.5%*1em</p> <p class="p">12px=62.5%*1.2em</p> <p class="p">14px=62.5%*1.4em</p> <p class="p">16px=62.5%*1.6em</p> <p class="p"><span style="font-family: 'Segoe UI';">番外：</span></p> <p class="p">ie下设置1.2em会比12px大，为什么？怎么处理？</p> <p class="p"><span style="font-family: 'Segoe UI';">因为</span>ie浏览器总是吧 62.5 小数点换算错所以我们以后设置页面大小直接设置为63%就可以兼容所有浏览器</p> <p class="p"><strong>3、浮动和定位</strong></p> <p class="p"><span style="font-family: 'Segoe UI';">浮动：</span></p> <p class="p">float：left</p> <p class="p">float：right</p> <p class="p"><span style="font-family: 'Segoe UI';">定位：</span></p> <p class="p">position:absolute</p> <p class="p">position:relative</p> <p class="p"><span style="font-family: 'Segoe UI';">番外：</span></p> <p class="p"><span style="font-family: 'Segoe UI';">清除浮动：</span></p> <p class="p">-clear：both</p> <p class="p">-clear：left</p> <p class="p">-clear：right</p> <p class="p"><span style="font-family: 'Segoe UI';">浮动清除的并不是本元素的浮动，清除的是上级元素对于本元素的影响，我们可以讲页面整体分为三级</span></p> <p class="p"><span style="font-family: 'Segoe UI';">第一级是文本流</span> <span style="font-family: 'Segoe UI';">也就是页面默认的显示方式</span></p> <p class="p"><span style="font-family: 'Segoe UI';">第二级是浮动</span> <span style="font-family: 'Segoe UI';">它脱离文本流向上一层</span></p> <p class="p"><span style="font-family: 'Segoe UI';">第三级是定位</span> <span style="font-family: 'Segoe UI';">它是比浮动更高一级的为第三级</span></p> <p class="p"><strong>4、position</strong></p> <p class="p">-absolute</p> <p class="p">-relative</p> <p class="p">-static</p> <p class="p">-Inherit</p> <p class="p">-Fixed</p> <p class="p">Absolute：绝对定位，绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块，绝对定位比较灵活如果你想，可以定位到浏览器的任意点</p> <p class="p">Relative: 相对定位，相对与父级盒子定位</p> <p class="p">static：默认的元素定位方式</p> <p class="p">inherit：继承父级盒子的position属性这个没多大用，如果我们要继承的话，倒不如自己重写一个省的自己再找一遍元素。</p> <p class="p">Fixed：元素固定在浏览器body的一个位置，浏览器上拉下拉都不会改变位置</p> <p class="p"><span style="font-family: 'Segoe UI';">番外：一般网站都是都是以浮动为主，定位为辅，你们可以看看现在的淘宝网站。</span></p> <p class="p"><strong>5、CSS Reset </strong></p> <p class="p">css样式具有继承和重置的作用</p> <p class="p"><span style="font-family: 'Segoe UI';">常用的</span>CSS Reset</p> <p class="p">*{ margin:0,padding:0 }</p> <p class="p">body,div,p,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,input,textarea,th,td {padding:0; margin:0;}</p> <p class="p">table {border-collapse: collapse; border-spacing: 0;}</p> <p class="p">img {border: 0;}</p> <p class="p">ol,ul{list-style: none;}</p> <p class="p">h1,h2,h3,h4,h5,h6 {font-weight: normal; font-size: 100%;}</p> <p class="p"><strong><span style="font-family: 'Segoe UI';">四：页面调试</span>/纠错方法</strong></p> <p class="p">1、页面debug调试</p> <p class="p">2、排除法</p> <p class="p">3、设置背景法</p> <p class="p"><strong><span style="font-family: 'Segoe UI';">番外：</span></strong></p> <p class="p"><span style="font-family: 'Segoe UI';">网站的页面的加载顺序是按照文本流的顺序加载，</span></p> <p class="p"><span style="font-family: 'Segoe UI';">我们编写页面优先考虑：</span></p> <p class="p">1、搜索引擎加载</p> <p class="p">2、便于浏览者观察</p> <p class="p">3、页面结构简单整洁</p> <p class="p"><strong><span style="font-family: 'Segoe UI';">最后</span></strong></p> <p class="p"><span style="font-family: 'Segoe UI';">告诉大家一个调试神器：</span>http://getf5.com/</p> </div> </div> </div> </div>  <div id="SOHUCS" sid="1296095926204571648"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script>  <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad">  <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div>  <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div>  <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(常用的HTML标签和属性解释、css实用小技巧_css常用技巧和经验总汇)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1835514462770130944.htm" title="斤斤计较的婚姻到底有多难？" target="_blank">斤斤计较的婚姻到底有多难？</a> <span class="text-muted">白心之岂必有为</span> <div>很多人私聊我会问到在哪个人群当中斤斤计较的人最多？我都会回答他，一般婚姻出现问题的斤斤计较的人士会非常多，以我多年经验，在婚姻落的一塌糊涂的人当中，斤斤计较的人数占比在20～30%以上，也就是说10个婚姻出现问题的斤斤计较的人有2-3个有多不减。在婚姻出问题当中，有大量的心理不平衡的、尖酸刻薄的怨妇。在婚姻中仅斤斤计较有两种类型：第一种是物质上的，另一种是精神上的。在物质与精神上抠门已经严重的影响</div> </li> <li><a href="/article/1835514464028422144.htm" title="情绪觉察日记第37天" target="_blank">情绪觉察日记第37天</a> <span class="text-muted">露露_e800</span> <div>今天是家庭关系规划师的第二阶最后一天，慧萍老师帮我做了个案，帮我处理了埋在心底好多年的一份恐惧，并给了我深深的力量！这几天出来学习，爸妈过来婆家帮我带小孩，妈妈出于爱帮我收拾东西，并跟我先生和婆婆产生矛盾，妈妈觉得他们没有照顾好我…。今晚回家见到妈妈，我很欣赏她并赞扬她，妈妈说今晚要跟我睡我说好，当我们俩躺在床上准备睡觉的时候，我握着妈妈的手对她说:妈妈这几天辛苦你了，你看你多利害把我们的家收拾得</div> </li> <li><a href="/article/1835514335561084928.htm" title="芦花鞋一四" target="_blank">芦花鞋一四</a> <span class="text-muted">许叶晗</span> <div>又是在一个寒冷的夏日里，青铜和葵花决定今天一起去卖芦花鞋，奶奶亲手给他们做了一碗热乎乎的粥对他们说:“就靠你们两挣生活费了这碗粥赶紧趁热喝了吧！”于是青铜和葵花喝完了奶奶给她们做的粥，就准备去镇上卖卢花鞋，这回青铜和葵花穿着新的芦花鞋来到了镇上。青铜这回看到了很多人都在卖，用手势表达对葵花说:“这回有好多人在抢我们生意呢！我们必须得吆喝起来。”葵花点了点头。可是谁知他们也大声的叫，卖芦花喽！卖芦花</div> </li> <li><a href="/article/1835514207114719232.htm" title="关于沟通这件事，项目经理不需要每次都面对面进行" target="_blank">关于沟通这件事，项目经理不需要每次都面对面进行</a> <span class="text-muted">流程大师兄</span> <div>很多项目经理都会遇到这样的问题，项目中由于事情太多，根本没有足够的时间去召开会议，那在这种情况下如何去有效地管理项目中的利益相关者？当然，不建议电子邮件也不需要开会的话，建议可以采取下面几种方式来形成有效的沟通，这几种方式可以帮助你努力的通过各种办法来保持和各方面的联系。项目经理首先要问自己几个问题，项目中哪些利益相关者是必须要进行沟通的？可以列出项目中所有的利益相关者清单，同时也整理出项目中哪些</div> </li> <li><a href="/article/1835513803861749760.htm" title="机器学习与深度学习间关系与区别" target="_blank">机器学习与深度学习间关系与区别</a> <span class="text-muted">ℒℴѵℯ心·动ꦿ໊ོ꫞</span> <a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0/1.htm">深度学习</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>一、机器学习概述定义机器学习（MachineLearning,ML）是一种通过数据驱动的方法，利用统计学和计算算法来训练模型，使计算机能够从数据中学习并自动进行预测或决策。机器学习通过分析大量数据样本，识别其中的模式和规律，从而对新的数据进行判断。其核心在于通过训练过程，让模型不断优化和提升其预测准确性。主要类型1.监督学习（SupervisedLearning）监督学习是指在训练数据集中包含输入</div> </li> <li><a href="/article/1835513699826233344.htm" title="android系统selinux中添加新属性property" target="_blank">android系统selinux中添加新属性property</a> <span class="text-muted">辉色投像</span> <div>1.定位/android/system/sepolicy/private/property_contexts声明属性开头：persist.charge声明属性类型：u:object_r:system_prop:s0图12.定位到android/system/sepolicy/public/domain.te删除neverallow{domain-init}default_prop:property</div> </li> <li><a href="/article/1835513551624695808.htm" title="【iOS】MVC设计模式" target="_blank">【iOS】MVC设计模式</a> <span class="text-muted">Magnetic_h</span> <a class="tag" taget="_blank" href="/search/ios/1.htm">ios</a><a class="tag" taget="_blank" href="/search/mvc/1.htm">mvc</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a><a class="tag" taget="_blank" href="/search/objective-c/1.htm">objective-c</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a> <div>MVC前言如何设计一个程序的结构，这是一门专门的学问，叫做"架构模式"（architecturalpattern），属于编程的方法论。MVC模式就是架构模式的一种。它是Apple官方推荐的App开发架构，也是一般开发者最先遇到、最经典的架构。MVC各层controller层Controller/ViewController/VC（控制器）负责协调Model和View，处理大部分逻辑它将数据从Mod</div> </li> <li><a href="/article/1835513551142350848.htm" title="OC语言多界面传值五大方式" target="_blank">OC语言多界面传值五大方式</a> <span class="text-muted">Magnetic_h</span> <a class="tag" taget="_blank" href="/search/ios/1.htm">ios</a><a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/objective-c/1.htm">objective-c</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>前言在完成暑假仿写项目时，遇到了许多需要用到多界面传值的地方，这篇博客来总结一下比较常用的五种多界面传值的方式。属性传值属性传值一般用前一个界面向后一个界面传值，简单地说就是通过访问后一个视图控制器的属性来为它赋值，通过这个属性来做到从前一个界面向后一个界面传值。首先在后一个界面中定义属性@interfaceBViewController:UIViewController@propertyNSSt</div> </li> <li><a href="/article/1835513440525971456.htm" title="一百九十四章. 自相矛盾" target="_blank">一百九十四章. 自相矛盾</a> <span class="text-muted">巨木擎天</span> <div>唉！就这么一夜，林子感觉就像过了很多天似的，先是回了阳间家里，遇到了那么多不可思议的事情儿。特别是小伙伴们，第二次与自己见面时，僵硬的表情和恐怖的气氛，让自己如坐针毡，打从心眼里难受！还有东子，他现在还好吗？有没有被人欺负？护城河里的小鱼小虾们，还都在吗？水不会真的干枯了吧？那对相亲相爱漂亮的太平鸟儿，还好吧！春天了，到了做窝、下蛋、喂养小鸟宝宝的时候了，希望它们都能够平安啊！虽然没有看见家人，也</div> </li> <li><a href="/article/1835513424734416896.htm" title="UI学习——cell的复用和自定义cell" target="_blank">UI学习——cell的复用和自定义cell</a> <span class="text-muted">Magnetic_h</span> <a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>目录cell的复用手动（非注册）自动（注册）自定义cellcell的复用在iOS开发中，单元格复用是一种提高表格（UITableView）和集合视图（UICollectionView）滚动性能的技术。当一个UITableViewCell或UICollectionViewCell首次需要显示时，如果没有可复用的单元格，则视图会创建一个新的单元格。一旦这个单元格滚动出屏幕，它就不会被销毁。相反，它被添</div> </li> <li><a href="/article/1835512920797179904.htm" title="element实现动态路由+面包屑" target="_blank">element实现动态路由+面包屑</a> <span class="text-muted">软件技术NINI</span> <a class="tag" taget="_blank" href="/search/vue%E6%A1%88%E4%BE%8B/1.htm">vue案例</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi</div> </li> <li><a href="/article/1835512305320816640.htm" title="地推话术，如何应对地推过程中家长的拒绝" target="_blank">地推话术，如何应对地推过程中家长的拒绝</a> <span class="text-muted">校师学</span> <div>相信校长们在做地推的时候经常遇到这种情况：市场专员反馈家长不接单，咨询师反馈难以邀约这些家长上门，校区地推疲软，招生难。为什么？仅从地推层面分析，一方面因为家长受到的信息轰炸越来越多，对信息越来越“免疫”；而另一方面地推人员的专业能力和营销话术没有提高，无法应对家长的拒绝，对有意向的家长也不知如何跟进，眼睁睁看着家长走远；对于家长的疑问，更不知道如何有技巧地回答，机会白白流失。由于回答没技巧和专业</div> </li> <li><a href="/article/1835512178023690240.htm" title="谢谢你们，爱你们！" target="_blank">谢谢你们，爱你们！</a> <span class="text-muted">鹿游儿</span> <div>昨天家人去泡温泉，二个孩子也带着去，出发前一晚，匆匆下班，赶回家和孩子一起收拾。饭后，我拿出笔和本子（上次去澳门时做手帐的本子）写下了1\2\3\4\5\6\7\8\9,让后让小壹去思考，带什么出发去旅游呢？她在对应的数字旁边画上了，泳衣、泳圈、肖恩、内衣内裤、tapuy、拖鞋……画完后，就让她自己对着这个本子，将要带的，一一带上，没想到这次带的书还是这本《便便工厂》(晚上姑婆发照片过来，妹妹累得</div> </li> <li><a href="/article/1835511911769272320.htm" title="C语言如何定义宏函数？" target="_blank">C语言如何定义宏函数？</a> <span class="text-muted">小九格物</span> <a class="tag" taget="_blank" href="/search/c%E8%AF%AD%E8%A8%80/1.htm">c语言</a> <div>在C语言中，宏函数是通过预处理器定义的，它在编译之前替换代码中的宏调用。宏函数可以模拟函数的行为，但它们不是真正的函数，因为它们在编译时不会进行类型检查，也不会分配存储空间。宏函数的定义通常使用#define指令，后面跟着宏的名称和参数列表，以及宏展开后的代码。宏函数的定义方式：1.基本宏函数：这是最简单的宏函数形式，它直接定义一个表达式。#defineSQUARE(x)((x)*(x))2.带参</div> </li> <li><a href="/article/1835511912192897024.htm" title="微服务下功能权限与数据权限的设计与实现" target="_blank">微服务下功能权限与数据权限的设计与实现</a> <span class="text-muted">nbsaas-boot</span> <a class="tag" taget="_blank" href="/search/%E5%BE%AE%E6%9C%8D%E5%8A%A1/1.htm">微服务</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a> <div>在微服务架构下，系统的功能权限和数据权限控制显得尤为重要。随着系统规模的扩大和微服务数量的增加，如何保证不同用户和服务之间的访问权限准确、细粒度地控制，成为设计安全策略的关键。本文将讨论如何在微服务体系中设计和实现功能权限与数据权限控制。1.功能权限与数据权限的定义功能权限：指用户或系统角色对特定功能的访问权限。通常是某个用户角色能否执行某个操作，比如查看订单、创建订单、修改用户资料等。数据权限：</div> </li> <li><a href="/article/1835511912843014144.htm" title="理解Gunicorn：Python WSGI服务器的基石" target="_blank">理解Gunicorn：Python WSGI服务器的基石</a> <span class="text-muted">范范0825</span> <a class="tag" taget="_blank" href="/search/ipython/1.htm">ipython</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a> <div>理解Gunicorn：PythonWSGI服务器的基石介绍Gunicorn，全称GreenUnicorn，是一个为PythonWSGI（WebServerGatewayInterface）应用设计的高效、轻量级HTTP服务器。作为PythonWeb应用部署的常用工具，Gunicorn以其高性能和易用性著称。本文将介绍Gunicorn的基本概念、安装和配置，帮助初学者快速上手。1.什么是Gunico</div> </li> <li><a href="/article/1835511163450912768.htm" title="2021年12月19日，春蕾教育集团团建活动感受——黄晓丹" target="_blank">2021年12月19日，春蕾教育集团团建活动感受——黄晓丹</a> <span class="text-muted">黄错错加油</span> <div>感受:1.从陌生到熟悉的过程。游戏环节让我们在轻松的氛围中得到了锻炼，也增长了不少知识。2.游戏过程中，我们贡献的是个人力量，展现的是团队的力量。它磨合的往往不止是工作的熟悉，更是观念上契合度的贴近。3.这和工作是一样的道理。在各自的岗位上，每个人摆正自己的位置、各司其职充分发挥才能，并团结一致劲往一处使，才能实现最大的成功。新知:1.团队精神需要不断地创新。过去，人们把创新看作是冒风险，现在人们</div> </li> <li><a href="/article/1835511036317364224.htm" title="Cell Insight | 单细胞测序技术又一新发现，可用于HIV-1和Mtb共感染个体诊断" target="_blank">Cell Insight | 单细胞测序技术又一新发现，可用于HIV-1和Mtb共感染个体诊断</a> <span class="text-muted">尐尐呅</span> <div>结核病是艾滋病合并其他疾病中导致患者死亡的主要原因。其中结核病由结核分枝杆菌（Mycobacteriumtuberculosis,Mtb）感染引起，获得性免疫缺陷综合症（艾滋病）由人免疫缺陷病毒（Humanimmunodeficiencyvirustype1,HIV-1）感染引起。国家感染性疾病临床医学研究中心/深圳市第三人民医院张国良团队携手深圳华大生命科学研究院吴靓团队，共同研究得出单细胞测序</div> </li> <li><a href="/article/1835511030260789248.htm" title="c++ 的iostream 和 c++的stdio的区别和联系" target="_blank">c++ 的iostream 和 c++的stdio的区别和联系</a> <span class="text-muted">黄卷青灯77</span> <a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/iostream/1.htm">iostream</a><a class="tag" taget="_blank" href="/search/stdio/1.htm">stdio</a> <div>在C++中，iostream和C语言的stdio.h都是用于处理输入输出的库，但它们在设计、用法和功能上有许多不同。以下是两者的区别和联系：区别1.编程风格iostream（C++风格）：C++标准库中的输入输出流类库，支持面向对象的输入输出操作。典型用法是cin（输入）和cout（输出），使用>操作符来处理数据。更加类型安全，支持用户自定义类型的输入输出。#includeintmain(){in</div> </li> <li><a href="/article/1835510025561403392.htm" title="《投行人生》读书笔记" target="_blank">《投行人生》读书笔记</a> <span class="text-muted">小蘑菇的树洞</span> <div>《投行人生》----作者詹姆斯-A-朗德摩根斯坦利副主席40年的职业洞见-很短小精悍的篇幅，比较适合初入职场的新人。第一部分成功的职业生涯需要规划1.情商归为适应能力分享与协作同理心适应能力，更多的是自我意识，你有能力识别自己的情并分辨这些情绪如何影响你的思想和行为。2.对于初入职场的人的建议，细节，截止日期和数据很重要截止日期，一种有效的方法是请老板为你所有的任务进行优先级排序。和老板喝咖啡的好</div> </li> <li><a href="/article/1835509391361667072.htm" title="Linux下QT开发的动态库界面弹出操作（SDL2）" target="_blank">Linux下QT开发的动态库界面弹出操作（SDL2）</a> <span class="text-muted">13jjyao</span> <a class="tag" taget="_blank" href="/search/QT%E7%B1%BB/1.htm">QT类</a><a class="tag" taget="_blank" href="/search/qt/1.htm">qt</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/sdl2/1.htm">sdl2</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>需求：操作系统为linux，开发框架为qt，做成需带界面的qt动态库，调用方为java等非qt程序难点：调用方为java等非qt程序，也就是说调用方肯定不带QApplication::exec()，缺少了这个，QTimer等事件和QT创建的窗口将不能弹出(包括opencv也是不能弹出)；这与qt调用本身qt库是有本质的区别的思路：1.调用方缺QApplication::exec()，那么我们在接口</div> </li> <li><a href="/article/1835509266627260416.htm" title="绘本讲师训练营【24期】8/21阅读原创《独生小孩》" target="_blank">绘本讲师训练营【24期】8/21阅读原创《独生小孩》</a> <span class="text-muted">1784e22615e0</span> <div>24016-孟娟《独生小孩》图片发自App今天我想分享一个蛮特别的绘本，讲的是一个特殊的群体，我也是属于这个群体，80后的独生小孩。这是一本中国绘本，作者郭婧，也是一个80厚。全书一百多页，均为铅笔绘制，虽然为黑白色调，但并不显得沉闷。全书没有文字，犹如“默片”，但并不影响读者对该作品的理解，反而显得神秘，梦幻，給读者留下想象的空间。作者在前蝴蝶页这样写到：“我更希望父母和孩子一起分享这本书，使他</div> </li> <li><a href="/article/1835508761310097408.htm" title="店群合一模式下的社区团购新发展——结合链动 2+1 模式、AI 智能名片与 S2B2C 商城小程序源码" target="_blank">店群合一模式下的社区团购新发展——结合链动 2+1 模式、AI 智能名片与 S2B2C 商城小程序源码</a> <span class="text-muted">说私域</span> <a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a> <div>摘要：本文探讨了店群合一的社区团购平台在当今商业环境中的重要性和优势。通过分析店群合一模式如何将互联网社群与线下终端紧密结合，阐述了链动2+1模式、AI智能名片和S2B2C商城小程序源码在这一模式中的应用价值。这些创新元素的结合为社区团购带来了新的机遇，提升了用户信任感、拓展了营销渠道，并实现了线上线下的完美融合。一、引言随着互联网技术的不断发展，社区团购作为一种新兴的商业模式，在满足消费者日常需</div> </li> <li><a href="/article/1835508130268672000.htm" title="消息中间件有哪些常见类型" target="_blank">消息中间件有哪些常见类型</a> <span class="text-muted">xmh-sxh-1314</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>消息中间件根据其设计理念和用途，可以大致分为以下几种常见类型：点对点消息队列（Point-to-PointMessagingQueues）：在这种模型中，消息被发送到特定的队列中，消费者从队列中取出并处理消息。队列中的消息只能被一个消费者消费，消费后即被删除。常见的实现包括IBM的MQSeries、RabbitMQ的部分使用场景等。适用于任务分发、负载均衡等场景。发布/订阅消息模型（Pub/Sub</div> </li> <li><a href="/article/1835508131032035328.htm" title="ArcGIS栅格计算器常见公式（赋值、0和空值的转换、补充栅格空值）" target="_blank">ArcGIS栅格计算器常见公式（赋值、0和空值的转换、补充栅格空值）</a> <span class="text-muted">研学随笔</span> <a class="tag" taget="_blank" href="/search/arcgis/1.htm">arcgis</a><a class="tag" taget="_blank" href="/search/%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB/1.htm">经验分享</a> <div>我们在使用ArcGIS时通常经常用到栅格计算器，今天主要给大家介绍我日常中经常用到的几个公式，供大家参考学习。将特定值（-9999）赋值为0，例如-9999.Con("raster"==-9999,0,"raster")2.给空值赋予特定的值（如0）Con(IsNull("raster"),0,"raster")3.将特定的栅格值(如1)赋值为空值，其他保留原值SetNull("raster"==</div> </li> <li><a href="/article/1835507626276909056.htm" title="水平垂直居中的几种方法（总结）" target="_blank">水平垂直居中的几种方法（总结）</a> <span class="text-muted">LJ小番茄</span> <a class="tag" taget="_blank" href="/search/CSS_%E7%8E%84%E5%AD%A6%E8%AF%AD%E8%A8%80/1.htm">CSS_玄学语言</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a> <div>1.使用flexbox的justify-content和align-items.parent{display:flex;justify-content:center;/*水平居中*/align-items:center;/*垂直居中*/height:100vh;/*需要指定高度*/}2.使用grid的place-items:center.parent{display:grid;place-item</div> </li> <li><a href="/article/1835507105168191488.htm" title="本周第二次约练" target="_blank">本周第二次约练</a> <span class="text-muted">2cfbdfe28a51</span> <div>中原焦点团队中24初26刘霞2021.12.3约练161次，分享第368天当事人虽然是带着问题来的，但是咨询过程中发现，她是经过自己不断地调整和努力才走到现在的，看到当事人的不容易，找到例外，发现资源，力量感也就随之而来。增强画面感，或者说重温，会给当事人带来更深刻的感受。</div> </li> <li><a href="/article/1835507103909900288.htm" title="放下是一段成长的修行" target="_blank">放下是一段成长的修行</a> <span class="text-muted">小莳玥</span> <div>人来到这个世界上，只有两件事：生和死。一件事已经做完了，另一件你还急什么呢?是人，都有七情六欲。是心，都有喜怒哀乐，这些再正常不过了。别总抱怨自己活得累，过得辛苦。永远记住：舒坦是留给死人的。苦，才是生活；累，才是工作；变，才是命运；忍，才是历练；容，才是智慧；静，才是修养；舍，才会得到；做，才会拥有。人生，活得太清楚，才是最大的不明白。有些事，看得很清，却说不清；有些人，了解很深，却猜不透；有些</div> </li> <li><a href="/article/1835506996258893824.htm" title="回溯 Leetcode 332 重新安排行程" target="_blank">回溯 Leetcode 332 重新安排行程</a> <span class="text-muted">mmaerd</span> <a class="tag" taget="_blank" href="/search/Leetcode%E5%88%B7%E9%A2%98%E5%AD%A6%E4%B9%A0%E8%AE%B0%E5%BD%95/1.htm">Leetcode刷题学习记录</a><a class="tag" taget="_blank" href="/search/leetcode/1.htm">leetcode</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E8%81%8C%E5%9C%BA%E5%92%8C%E5%8F%91%E5%B1%95/1.htm">职场和发展</a> <div>重新安排行程Leetcode332学习记录自代码随想录给你一份航线列表tickets，其中tickets[i]=[fromi,toi]表示飞机出发和降落的机场地点。请你对该行程进行重新规划排序。所有这些机票都属于一个从JFK（肯尼迪国际机场）出发的先生，所以该行程必须从JFK开始。如果存在多种有效的行程，请你按字典排序返回最小的行程组合。例如，行程[“JFK”,“LGA”]与[“JFK”,“LGB</div> </li> <li><a href="/article/1835506869838376960.htm" title="Python数据分析与可视化实战指南" target="_blank">Python数据分析与可视化实战指南</a> <span class="text-muted">William数据分析</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE/1.htm">数据</a> <div>在数据驱动的时代，Python因其简洁的语法、强大的库生态系统以及活跃的社区，成为了数据分析与可视化的首选语言。本文将通过一个详细的案例，带领大家学习如何使用Python进行数据分析，并通过可视化来直观呈现分析结果。一、环境准备1.1安装必要库在开始数据分析和可视化之前，我们需要安装一些常用的库。主要包括pandas、numpy、matplotlib和seaborn等。这些库分别用于数据处理、数学</div> </li> <li><a href="/article/120.htm" title="web前段跨域nginx代理配置" target="_blank">web前段跨域nginx代理配置</a> <span class="text-muted">刘正强</span> <a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/cms/1.htm">cms</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a> <div>nginx代理配置可参考server部分 server {         listen       80;         server_name  localhost; </div> </li> <li><a href="/article/247.htm" title="spring学习笔记" target="_blank">spring学习笔记</a> <span class="text-muted">caoyong</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a> <div>一、概述     a>、核心技术 : IOC与AOP b>、开发为什么需要面向接口而不是实现     接口降低一个组件与整个系统的藕合程度，当该组件不满足系统需求时，可以很容易的将该组件从系统中替换掉，而不会对整个系统产生大的影响 c>、面向接口编口编程的难点在于如何对接口进行初始化,(使用工厂设计模式) </div> </li> <li><a href="/article/374.htm" title="Eclipse打开workspace提示工作空间不可用" target="_blank">Eclipse打开workspace提示工作空间不可用</a> <span class="text-muted">0624chenhong</span> <a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</a> <div>做项目的时候，难免会用到整个团队的代码，或者上一任同事创建的workspace， 1.电脑切换账号后，Eclipse打开时，会提示Eclipse对应的目录锁定，无法访问，根据提示，找到对应目录，G:\eclipse\configuration\org.eclipse.osgi\.manager，其中文件.fileTableLock提示被锁定。解决办法，删掉.fileTableLock文件，重</div> </li> <li><a href="/article/501.htm" title="Javascript 面向对面写法的必要性？" target="_blank">Javascript 面向对面写法的必要性？</a> <span class="text-muted">一炮送你回车库</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a> <div>现在Javascript面向对象的方式来写页面很流行，什么纯javascript的mvc框架都出来了：ember 这是javascript层的mvc框架哦,不是j2ee的mvc框架   我想说的是，javascript本来就不是一门面向对象的语言，用它写出来的面向对象的程序，本身就有些别扭，很多人提到js的面向对象首先提的是：复用性。那么我请问你写的js里有多少是可以复用的，用fu</div> </li> <li><a href="/article/628.htm" title="js array对象的迭代方法" target="_blank">js array对象的迭代方法</a> <span class="text-muted">换个号韩国红果果</span> <a class="tag" taget="_blank" href="/search/array/1.htm">array</a> <div>1.forEach 该方法接受一个函数作为参数，对数组中的每个元素使用该函数  return 语句失效 function square(num) { print(num, num * num); } var nums = [1,2,3,4,5,6,7,8,9,10]; nums.forEach(square); 2.every 该方法接受一个返回值为布尔类型</div> </li> <li><a href="/article/755.htm" title="对Hibernate缓存机制的理解" target="_blank">对Hibernate缓存机制的理解</a> <span class="text-muted">归来朝歌</span> <a class="tag" taget="_blank" href="/search/session/1.htm">session</a><a class="tag" taget="_blank" href="/search/%E4%B8%80%E7%BA%A7%E7%BC%93%E5%AD%98/1.htm">一级缓存</a><a class="tag" taget="_blank" href="/search/%E5%AF%B9%E8%B1%A1%E6%8C%81%E4%B9%85%E5%8C%96/1.htm">对象持久化</a> <div>在hibernate中session一级缓存机制中，有这么一种情况：问题描述：我需要new一个对象，对它的几个字段赋值，但是有一些属性并没有进行赋值，然后调用 session.save()方法，在提交事务后，会出现这样的情况： 1：在数据库中有默认属性的字段的值为空 2：既然是持久化对象，为什么在最后对象拿不到默认属性的值？通过调试后解决方案如下：对于问题一，如你在数据库里设置了</div> </li> <li><a href="/article/882.htm" title="WebService调用错误合集" target="_blank">WebService调用错误合集</a> <span class="text-muted">darkranger</span> <a class="tag" taget="_blank" href="/search/webservice/1.htm">webservice</a> <div> Java.Lang.NoClassDefFoundError: Org/Apache/Commons/Discovery/Tools/DiscoverSingleton 调用接口出错，一个简单的WebService import org.apache.axis.client.Call;import org.apache.axis.client.Service; 首先必不可</div> </li> <li><a href="/article/1009.htm" title="JSP和Servlet的中文乱码处理" target="_blank">JSP和Servlet的中文乱码处理</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/Java+Web/1.htm">Java Web</a> <div>JSP和Servlet的中文乱码处理前几天学习了JSP和Servlet中有关中文乱码的一些问题，写成了博客，今天进行更新一下。应该是可以解决日常的乱码问题了。现在作以下总结希望对需要的人有所帮助。我也是刚学，所以有不足之处希望谅解。一、表单提交时出现乱码：在进行表单提交的时候，经常提交一些中文，自然就避免不了出现中文乱码的情况，对于表单来说有两种提交方式：get和post提交方式。所以</div> </li> <li><a href="/article/1136.htm" title="面试经典六问" target="_blank">面试经典六问</a> <span class="text-muted">atongyeye</span> <a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>题记：因为我不善沟通，所以在面试中经常碰壁，看了网上太多面试宝典，基本上不太靠谱。只好自己总结，并试着根据最近工作情况完成个人答案。以备不时之需。以下是人事了解应聘者情况的最典型的六个问题： 1 简单自我介绍关于这个问题，主要为了弄清两件事，一是了解应聘者的背景，二是应聘者将这些背景信息组织成合适语言的能力。我的回答：(针对技术面试回答，如果是人事面试，可以就掌</div> </li> <li><a href="/article/1263.htm" title="contentResolver.query()参数详解" target="_blank">contentResolver.query()参数详解</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/query%28%29%E8%AF%A6%E8%A7%A3/1.htm">query()详解</a> <div>收藏csdn的博客,介绍的比较详细,新手值得一看 1.获取联系人姓名一个简单的例子，这个函数获取设备上所有的联系人ID和联系人NAME。 [java]  view plain copy   public void fetchAllContacts() {     &nbsp</div> </li> <li><a href="/article/1390.htm" title="ora-00054:resource busy and acquire with nowait specified解决方法" target="_blank">ora-00054:resource busy and acquire with nowait specified解决方法</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/kill/1.htm">kill</a><a class="tag" taget="_blank" href="/search/nowait/1.htm">nowait</a> <div>        当某个数据库用户在数据库中插入、更新、删除一个表的数据，或者增加一个表的主键时或者表的索引时，常常会出现ora-00054:resource busy and acquire with nowait specified这样的错误。主要是因为有事务正在执行（或者事务已经被锁），所有导致执行不成功。 1.下面的语句</div> </li> <li><a href="/article/1517.htm" title="web 开发乱码" target="_blank">web 开发乱码</a> <span class="text-muted">征客丶</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a> <div>以下前端都是 utf-8 字符集编码一、后台接收 1.1、 get 请求乱码 get 请求中，请求参数在请求头中；乱码解决方法： a、通过在web 服务器中配置编码格式：tomcat 中，在 Connector 中添加URIEncoding="UTF-8"； 1.2、post 请求乱码 post 请求中，请求参数分两部份， 1.2.1、url？参数，</div> </li> <li><a href="/article/1644.htm" title="【Spark十六】： Spark SQL第二部分数据源和注册表的几种方式" target="_blank">【Spark十六】： Spark SQL第二部分数据源和注册表的几种方式</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/spark/1.htm">spark</a> <div>Spark SQL数据源和表的Schema case class apply schema parquet json JSON数据源准备源数据 {"name":"Jack", "age": 12, "addr":{"city":"beijing&</div> </li> <li><a href="/article/1771.htm" title="JVM学习之:调优总结 -Xms -Xmx -Xmn -Xss" target="_blank">JVM学习之:调优总结 -Xms -Xmx -Xmn -Xss</a> <span class="text-muted">BlueSkator</span> <a class="tag" taget="_blank" href="/search/-Xss/1.htm">-Xss</a><a class="tag" taget="_blank" href="/search/-Xmn/1.htm">-Xmn</a><a class="tag" taget="_blank" href="/search/-Xms/1.htm">-Xms</a><a class="tag" taget="_blank" href="/search/-Xmx/1.htm">-Xmx</a> <div>  堆大小设置JVM 中最大堆大小有三方面限制：相关操作系统的数据模型（32-bt还是64-bit）限制；系统的可用虚拟内存限制；系统的可用物理内存限制。32位系统下，一般限制在1.5G~2G；64为操作系统对内存无限制。我在Windows Server 2003 系统，3.5G物理内存，JDK5.0下测试，最大可设置为1478m。典型设置： java -Xmx355</div> </li> <li><a href="/article/1898.htm" title="jqGrid 各种参数详解(转帖)" target="_blank">jqGrid 各种参数详解(转帖)</a> <span class="text-muted">BreakingBad</span> <a class="tag" taget="_blank" href="/search/jqGrid/1.htm">jqGrid</a> <div>  jqGrid 各种参数详解分类：  源代码分享  个人随笔请勿参考  解决开发问题 2012-05-09 20:29   84282人阅读   评论(22)   收藏   举报 jquery 服务器 parameters function ajax string   </div> </li> <li><a href="/article/2025.htm" title="读《研磨设计模式》-代码笔记-代理模式-Proxy" target="_blank">读《研磨设计模式》-代码笔记-代理模式-Proxy</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a> <div>声明：本文只为方便我个人查阅和理解，详细的分析以及源代码请移步原作者的博客http://chjavach.iteye.com/ import java.lang.reflect.InvocationHandler; import java.lang.reflect.Method; import java.lang.reflect.Proxy; /* * 下面</div> </li> <li><a href="/article/2152.htm" title="应用升级iOS8中遇到的一些问题" target="_blank">应用升级iOS8中遇到的一些问题</a> <span class="text-muted">chenhbc</span> <a class="tag" taget="_blank" href="/search/ios8/1.htm">ios8</a><a class="tag" taget="_blank" href="/search/%E5%8D%87%E7%BA%A7iOS8/1.htm">升级iOS8</a> <div>1、很奇怪的问题，登录界面，有一个判断，如果不存在某个值，则跳转到设置界面，ios8之前的系统都可以正常跳转，iOS8中代码已经执行到下一个界面了，但界面并没有跳转过去，而且这个值如果设置过的话，也是可以正常跳转过去的，这个问题纠结了两天多，之前的判断我是在 -(void)viewWillAppear:(BOOL)animated  中写的，最终的解决办法是把判断写在 -(void</div> </li> <li><a href="/article/2279.htm" title="工作流与自组织的关系？" target="_blank">工作流与自组织的关系？</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a><a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a> <div>  目前的工作流系统中的节点及其相互之间的连接是事先根据管理的实际需要而绘制好的，这种固定的模式在实际的运用中会受到很多限制，特别是节点之间的依存关系是固定的，节点的处理不考虑到流程整体的运行情况，细节和整体间的关系是脱节的，那么我们提出一个新的观点，一个流程是否可以通过节点的自组织运动来自动生成呢？这种流程有什么实际意义呢？   这里有篇论文，摘要是：“针对网格中的服务</div> </li> <li><a href="/article/2406.htm" title="Oracle11.2新特性之INSERT提示IGNORE_ROW_ON_DUPKEY_INDEX" target="_blank">Oracle11.2新特性之INSERT提示IGNORE_ROW_ON_DUPKEY_INDEX</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a> <div>insert提示IGNORE_ROW_ON_DUPKEY_INDEX 转自：http://space.itpub.net/18922393/viewspace-752123 在 insert into tablea ...select * from tableb中，如果存在唯一约束，会导致整个insert操作失败。使用IGNORE_ROW_ON_DUPKEY_INDEX提示，会忽略唯一</div> </li> <li><a href="/article/2533.htm" title="二叉树:堆" target="_blank">二叉树:堆</a> <span class="text-muted">dieslrae</span> <a class="tag" taget="_blank" href="/search/%E4%BA%8C%E5%8F%89%E6%A0%91/1.htm">二叉树</a> <div>    这里说的堆其实是一个完全二叉树,每个节点都不小于自己的子节点,不要跟jvm的堆搞混了.由于是完全二叉树,可以用数组来构建.用数组构建树的规则很简单:     一个节点的父节点下标为: (当前下标 - 1)/2     一个节点的左节点下标为: 当前下标 * 2 + 1   &</div> </li> <li><a href="/article/2660.htm" title="C语言学习八结构体" target="_blank">C语言学习八结构体</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/c/1.htm">c</a> <div>为什么需要结构体，看代码 # include <stdio.h> struct Student //定义一个学生类型，里面有age, score, sex, 然后可以定义这个类型的变量 { int age; float score; char sex; } int main(void) { struct Student st = {80, 66.6,</div> </li> <li><a href="/article/2787.htm" title="centos安装golang" target="_blank">centos安装golang</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/centos/1.htm">centos</a> <div>#在国内镜像下载二进制包 wget -c  http://www.golangtc.com/static/go/go1.4.1.linux-amd64.tar.gz tar -C /usr/local -xzf go1.4.1.linux-amd64.tar.gz   #把golang的bin目录加入全局环境变量 cat >>/etc/profile&lt</div> </li> <li><a href="/article/2914.htm" title="10.性能优化-监控-MySQL慢查询" target="_blank">10.性能优化-监控-MySQL慢查询</a> <span class="text-muted">frank1234</span> <a class="tag" taget="_blank" href="/search/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/1.htm">性能优化</a><a class="tag" taget="_blank" href="/search/MySQL%E6%85%A2%E6%9F%A5%E8%AF%A2/1.htm">MySQL慢查询</a> <div>1.记录慢查询配置 show variables where variable_name like 'slow%' ; --查看默认日志路径查询结果：--不用的机器可能不同 slow_query_log_file=/var/lib/mysql/centos-slow.log 修改mysqld配置文件：/usr /my.cnf[一般在/etc/my.cnf，本机在/user/my.cn</div> </li> <li><a href="/article/3041.htm" title="Java父类取得子类类名" target="_blank">Java父类取得子类类名</a> <span class="text-muted">happyqing</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/this/1.htm">this</a><a class="tag" taget="_blank" href="/search/%E7%88%B6%E7%B1%BB/1.htm">父类</a><a class="tag" taget="_blank" href="/search/%E5%AD%90%E7%B1%BB/1.htm">子类</a><a class="tag" taget="_blank" href="/search/%E7%B1%BB%E5%90%8D/1.htm">类名</a> <div>  在继承关系中，不管父类还是子类，这些类里面的this都代表了最终new出来的那个类的实例对象，所以在父类中你可以用this获取到子类的信息！   package com.urthinker.module.test; import org.junit.Test; abstract class BaseDao<T> { public void </div> </li> <li><a href="/article/3168.htm" title="Spring3.2新注解@ControllerAdvice" target="_blank">Spring3.2新注解@ControllerAdvice</a> <span class="text-muted">jinnianshilongnian</span> <a class="tag" taget="_blank" href="/search/%40Controller/1.htm">@Controller</a> <div>@ControllerAdvice，是spring3.2提供的新注解，从名字上可以看出大体意思是控制器增强。让我们先看看@ControllerAdvice的实现：   @Target(ElementType.TYPE) @Retention(RetentionPolicy.RUNTIME) @Documented @Component public @interface Co</div> </li> <li><a href="/article/3295.htm" title="Java spring mvc多数据源配置" target="_blank">Java spring mvc多数据源配置</a> <span class="text-muted">liuxihope</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a> <div>转自：http://www.itpub.net/thread-1906608-1-1.html 1、首先配置两个数据库 <bean id="dataSourceA" class="org.apache.commons.dbcp.BasicDataSource" destroy-method="close&quo</div> </li> <li><a href="/article/3422.htm" title="第12章 Ajax（下）" target="_blank">第12章 Ajax（下）</a> <span class="text-muted">onestopweb</span> <a class="tag" taget="_blank" href="/search/Ajax/1.htm">Ajax</a> <div>index.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/</div> </li> <li><a href="/article/3549.htm" title="BW / Universe Mappings" target="_blank">BW / Universe Mappings</a> <span class="text-muted">blueoxygen</span> <a class="tag" taget="_blank" href="/search/BO/1.htm">BO</a> <div>  BW Element OLAP Universe Element Cube  Dimension Class Charateristic A class with dimension and detail objects (Detail objects for key and desription) Hi</div> </li> <li><a href="/article/3676.htm" title="Java开发熟手该当心的11个错误" target="_blank">Java开发熟手该当心的11个错误</a> <span class="text-muted">tomcat_oracle</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">多线程</a><a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95/1.htm">单元测试</a> <div>#1、不在属性文件或XML文件中外化配置属性。比如，没有把批处理使用的线程数设置成可在属性文件中配置。你的批处理程序无论在DEV环境中，还是UAT（用户验收测试）环境中，都可以顺畅无阻地运行，但是一旦部署在PROD 上，把它作为多线程程序处理更大的数据集时，就会抛出IOException，原因可能是JDBC驱动版本不同，也可能是#2中讨论的问题。如果线程数目可以在属性文件中配置，那么使它成为</div> </li> <li><a href="/article/3803.htm" title="推行国产操作系统的优劣" target="_blank">推行国产操作系统的优劣</a> <span class="text-muted">yananay</span> <a class="tag" taget="_blank" href="/search/windows/1.htm">windows</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E5%9B%BD%E4%BA%A7%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/1.htm">国产操作系统</a> <div>最近刮起了一股风，就是去“国外货”。从应用程序开始，到基础的系统，数据库，现在已经刮到操作系统了。原因就是“棱镜计划”，使我们终于认识到了国外货的危害，开始重视起了信息安全。操作系统是计算机的灵魂。既然是灵魂，为了信息安全，那我们就自然要使用和推行国货。可是，一味地推行，是否就一定正确呢？先说说信息安全。其实从很早以来大家就在讨论信息安全。很多年以前，就据传某世界级的网络设备制造商生产的交</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> <strong>按字母分类：</strong> <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.  </div> </div> </footer>  <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>