[PHP知识库]html css js php常用网页代码合集 新手网页设计入门知识汇总

字间距、字体间距：letter-spacing:3px;

字加粗、字体粗细值：font-weight:bold;font-weight:800;

下划线粗细：border-bottom:5px;

行间距：<div style="line-height:25px; width:100px">DIV标签的行间距

行距：<p style = "line-height:1.2">文字的行距</p>

字距：<p style = "letter-spacimg:1.2">文字的间距</p>

边框为圆角：border-radius:25rem;或者border-radius:25px;

背景颜色：style="background-color:#00ff00;"

背景渐变颜色：background:linear-gradient(90deg,#1A2E4A 0,#409890 100%);

改变字体字型：style="font-family:Arial,Helvetica,sans-serif;"

改变大小：style="width: 107px; height: 50px;

改变字体大小及加粗：style="font-size:20px; color:#FF0000;font-weight:bold;

字体大小：<span style="font-size:32px;">

去掉下划线：<span style="text-decoration:none;

鼠标指针不变：<span style="cursor:default;

增加右键提升信息：<span title="标签文字提示内容" 或 <a title="标签文字提示内容"

新打开一个页面 去下划线 提示说明文字
<a style="text-decoration:none;" οnmοuseοver="this.style.text-decoration=none" title="提示说明文字" target="_blank">内容</a>

鼠标指针显示还是为鼠标指针符号
<a style="text-decoration:none;cursor:default;" οnmοuseοver="this.style.text-decoration=none" title="提示说明文字">内容</a>

第一种：改变下划线颜色代码：
<font face="宋体" size="3" color="#008000" onMouseOver="JavaScript:this.style.color='#FF0000';this.style.textDecoration='underline';" onMouseOut="JavaScript:this.style.color='#0000FF';this.style.textDecoration='none';">文本测试：鼠标通过时，文本改变颜色并显示下划线，第一次离开后又改变成另外一种颜色</font>?

第二种：放到链接上出现下划线，移开则不显示下划线（这种不错）
<a style="text-decoration:none; color:black" href="https://www.baidu.com/" target="_blank" onMouseOver="this.style.color='#FF0000';this.style.textDecoration='underline'" onMouseOut="this.style.color='#000000';this.style.textDecoration='none'">测试打开百度网站</a>

第三种：放到链接上出现下划线，，移开则不显示下划线
<a style="color:#00F; text-decoration:none" href="http://www.baidu.com/" ?onMouseOver="this.style.color='#F00';this.style.textDecoration='underline'" onMouseOut="this.style.color='#00F';this.style.textDecoration='none'">测试打开链接</a>

CSS下划线粗细及颜色：border-bottom:5px solid salmon;
<span style="font-size:0.3rem;letter-spacing:2px;color:#ffcc00;">注意每次改选线路都要重新选择集数哦！</span>

距离上面距离上边2px、距离左边距离左面3、改变自己旁边的离我的距离0.8：margin-top:2px;margin-left:3px;padding:0.8rem 0.8rem;

如果文字过长,则将过长的部分变成省略号显示
<DIV><NOBR> 就是比如有一行文字，很长，表格内一行显示不下，过长的部分变成省略号显示</NOBR></DIV>

PHP隐藏中间的字符两边只留一个字：
<a style="text-decoration:none; cursor:default;" οnmοuseοver="this.style.text-decoration=none"><?php echo str_cut($v['v_mname'],3).'***';?><?php echo substr($v['v_mname'],-3);?></a>

PHP这个是只显示前0－10个字符 <?php echo substr($rows['datetime'],0,10);?></a>
只显示最后一位字符 <?php echo substr(date("d"),1,1);?>

或者 <?php echo substr(date('d'),1,1);?>

<?php echo date('w');echo substr(date('d'),1,1);?>
<img src=\"../?? ??? ?media".date('w').substr(date('d'),1,1)."?? ??? ?/".$row["A_head"].

PHP截取英文字符或算好的固定字数的中文字符<a href=\"../?type=productinfo&id=".$row["O_pid"]."\" target=\"_blank\">[商品] ".substr($row["O_title"],0,52)."</a>
这个可以截取中英文字符串 只是加了mb_ ? ? ?<a href=\"../?type=productinfo&id=".$row["O_pid"]."\" target=\"_blank\">[商品] ".mb_substr($row["O_title"],0,50)."</a>

字符截取函数
<?=substr(“$rs[zixun_biaoti]“,0,28)?>

男女问题或单选带选择的
<input type=”radio” name=”hy_zhuangtai” value=”男” <?php if ($rs["hy_zhungtai"]===”男”) { echo “checked”;}?>>男
<input type=”radio” name=”hy_zhuangtai” value=”女” <?php if ($rs["hy_zhuangtai"]===”女”) { echo “checked”;}?>>女

PHP表单 计数 乘法 5%
<?php if ($goods['commis_rate'] != 200) { ?>
<?php echo $goods['goods_pay_price']; ?> * <?php echo $goods['commis_rate']; ?>% = <b><?php echo ncPriceFormat($goods['goods_pay_price']*$goods['commis_rate']/100); ?></b>
<?php } ?>

js代码截取字符：<td>注册日期：<script type="text/javascript">document.write('$rsdb[regdate]'.substr(3,7))</script></td>
第二种截字符方法：<script type="text/javascript">var str="Hello world!";document.write(str.substring(3,7));</script>

使其居中的代码：<div style="text-align:center;">

靠右距离多远实际是距离左边要多远 style="margin-left:12px;?? ?或者margin-left:.4em;都行
<a style="margin-left:500px;">要靠右的内容</a>

改变自己的位置：style="margin: 6px 0px -6px 0px;?? ?Margin参数图片位置说明：顶距 右距 下距 左距

改变自己旁边的位置：style="padding: 0px 0px 0px 0px;
这个是框架的上下间距：style="padding:10px;

<span>是行内元素，span只有margin-left和margin-right才有效果。要想margin-top生效就要把span转给块级元素才行。在span的css中加入以下属性即可 span标签是行内元素，margin只有左右，不能设置上下的margin

位置靠最左边：style="float:left;
位置靠最右边：style="float:right;

自己距离左边多远：style="margin-left:40px;"
自己距离右边多远：style="margin-right:30px;"
位置长宽大小：style="width:90px; height:22px;"

隐藏模块：style="display:none;

让文本换行：自动换行
<a style="white-space:normal;"
内容靠最左最右多远后，超出会自动换行：<p style="width:auto; overflow:hidden; word-break:break-all; font-size:20px; margin-left:45px; margin-right:45px;">

自动换行：style="white-space:normal;"

让文字在一行显示不了隐藏成省略号：style="width:200px; overflow:hidden; word-break:break-all; text-align:right;"

加一个分界线：<hr style="height:1px; border:none; border-top:1px dashed #dbdbdb;" size=1 />

<div style="float:left;">靠左显示</div>
<div style="float:right;">靠右显示</div>
除了使用float样式以外,通过设置text-align:right: text-align:left;也可以改变文字居右和居左.根据需要,选择以上两种方法中的一种或是组合使用,如.?
<div style="float:left; text-align:left">靠左显示<br>并且内容居左</div>
<div style="float:right; text-align:right">靠右显示<br>并且内容居右</div>
DIV居中:?
<div style="margin-left:auto;margin-right:auto;width:300px;background-color:Silver;">
DIV居中 CSS 代码 <a href="http://keleyi.com">keleyi.com</a></div>

DIV靠右：?
<div style="margin-left:auto;margin-right:2px;width:300px;background-color:Aqua;">
DIV靠右 CSS 代码 <a href="http://keleyi.com">keleyi.com</a></div>

DIV默认靠左：
<div style="width:300px;background-color:Fuchsia;">
DIV靠左代码 <a href="http://keleyi.com">keleyi.com</a></div>

禁止html5手机端双击页面放大缩小：<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">

彩色字体、彩字特效：<span style="font-size:30px;font-weight:bold;background:-webkit-linear-gradient(left,#ff0000 1.25%,#ff9900 6.58%,#ff6600 13.25%,#00cc00 17.5%,#00ccff 20.25%,#0000ff 27.5%,#ff00ff 33.75%,#ff0000 42.25%,#ff7d00 49.5%,#ffff00 51.75%,#00ff00 59.35%,#00ffff 68.25%,#0000ff 87.5%,#ff9933 92.65%,#ff00ff 99.98%);-webkit-background-clip: text;-webkit-text-fill-color:transparent;background-size: 200% 100%;">点击购买更多数据资源</span>

第二种彩色字体：style="background-image:linear-gradient(to right,Teal,yellow,yellow,orange,orange,yellow,yellow,yellow,orange,orange,yellow,yellow);-webkit-background-clip:text;animation: move 5s infinite;color:transparent;

第三种种彩色字体：style="font-size:30px;color:#FF0000;font-weight:bold;line-height:145px;text-align:center;font-size:40px;font-weight:bolder;-webkit-text-fill-color:transparent;background-image:-webkit-linear-gradient(5deg,#3399ff 16%,#cc00ff 26%,#ff0000 36%,#ff0000 38%,rgb(40, 120, 38));background-size:200%,100%;-webkit-background-clip:text;-webkit-animation:word 5s linear infinite;"

第四种彩色字体：

贯穿线代码：<span style="text-decoration:line-through;">700.00元</span>

<a href="http://www.divcss5.com/" style="color:#000; text-decoration:none" onMouseOver="this.style.color='#F00';this.style.textDecoration='underline'" onMouseOut="this.style.color='#000';this.style.textDecoration='none'">变色链接代码</a>

自动缩小图片尺寸为：70x70 <img οnlοad="javascript:DrawImage(this,70,70);" title="<?php echo $val['goods_name'];?>" src="<?php echo $val['goods_image']?UPLOAD_SITE_URL.DS.ATTACH_MALBUM.'/'.$val['member_id'].'/'.$val['goods_image']:SHOP_TEMPLATES_URL.'/images/member/default_image.png';?>" />

拉伸图片不变形:图片尺寸大小:?? ?<a class="logoico" style="margin-top:8px;margin-left:6px;padding:0.8rem 0.8rem;background: url(images/logo.gif) no-repeat center;background-size:100% 100%;" href="index.html"></a>
padding:0.8rem 0.8rem;是拉伸上下间距和左右间距值

链接字体加入背景图片<a href="http://www.divcss5.com/" style="background-image:url(http://bbs.u8l.cn/static/image/feed/magic_b.png)">道具</a>

鼠标失效:不能用鼠标选取页面上的内容，同时“编辑->全选”也没有作用。
<body οndragstart="window.event.returnvalue=false" οncοntextmenu="window.event.returnvalue=false" onselectstart="event.returnvalue=false">

禁止复制图片：<img src="/template/src/img/come_8.gif" title="{lang singcere_sign:daytips}" οndragstart=window.event.returnValue=false οncοntextmenu=window.event.returnValue=false onselectstart=event.returnValue=false>

禁止复制文本：<a style="cursor:default;" οndragstart=window.event.returnValue=false οncοntextmenu=window.event.returnValue=false onselectstart=event.returnValue=false disabled>这里放置禁止复制的文本信息</a>

禁止复制文本：<div style="cursor:default;" οndragstart=window.event.returnValue=false οncοntextmenu=window.event.returnValue=false onselectstart=event.returnValue=false disabled>这里放置禁止复制的文本信息</div>

<script type="text/javascript">document.οncοntextmenu=function(e){return false;};document.onselectstart=function(e){return false;};</script>

JS记录并显示网页的最后修改时间
<script language=JavaScript>
document.write(“最后更新时间: ” + document.lastModified + “”)
</script>

JS节日倒计时
<Script Language=”JavaScript”>
　　?var timedate= new Date(“October 1,2002″);
　　?var times= “国庆节”;
　　?var now = new Date();
　　?var date = timedate.getTime() – now.getTime();
　　?var time = Math.floor(date / (1000 * 60 * 60 * 24));
　　?if (time >= 0)
　　?document.write( “现在离”+times+”还有: “+time +”天”)
</Script>

JS打开窗口即最大化
<script language=”JavaScript”>self.moveTo(0,0);self.resizeTo(screen.availWidth,screen.availHeight) </script>

JS加入背景音乐
<bgsound src=”mid/windblue[1].mid” loop=”-1″> 只适用于IE
<embed src=”music.mid” loop=”true” hidden=”true”> 对Netscape ,IE 都适用

JS滚动
<marquee direction=up height=146 οnmοuseοut=start() οnmοuseοver=stop() scrollAmount=2>滚动信息</marquee>

JS防止点击空链接时，页面往往重置到页首端
代码“javascript:void(null)”代替原来的“#”标记

锁定代码，不能点右键，不用CTRL+A，不能复制作!
<body οncοntextmenu=”window.event.returnValue=false”
οnkeypress=”window.event.returnValue=false”
οnkeydοwn=”window.event.returnValue=false”
οnkeyup=”window.event.returnValue=false”
οndragstart=”window.event.returnValue=false”
onselectstart=”event.returnValue=false”>
</body>

随机变换背景图象（一个可以刷新心情的特效）
<Script Language=”JavaScript”>
　　?image = new Array(4); //定义image为图片数量的数组
　　?image [0] = ‘tu0.gif’ //背景图象的路径
　　?image [1] = ‘tu1.gif’
　　?image [2] = ‘tu2.gif’
　　?image [3] = ‘tu3.gif’
　　?image [4] = ‘tu4.gif’
　　?number = Math.floor(Math.random() * image.length);
　　?document.write(“<BODY BACKGROUND=”+image[number]+”>”);
</Script>

划过链接 手型鼠标
鼠标指针不变：style="cursor:hand;
鼠标指针变链接的小手：style="cursor:pointer;

禁止复制，鼠标拖动选取，禁用右键，禁止鼠标右键
<body οndragstart=window.event.returnValue=false οncοntextmenu=window.event.returnValue=false onselectstart=event.returnValue=false>

JS全文锁定鼠标右键菜单 复制 等代码哦 .js文件

<script type="text/javascript">document.οncοntextmenu=function(e){return false;};document.onselectstart=function(e){return false;};</script>

<b>简单的音乐播放器</b><br><embed src="midi3.mid" autostart="true" loop="true" width="70" height="30">

读取输入框的输入的字符：
<input type="text" id="input1" />
<input type="button" οnclick="javascript:alert(document.getElementById('input1').value);" value="点我" />

1.取消按钮按下时的虚线框,在input里添加属性值 hideFocus 或者 HideFocus=true?
<input type="submit" value="提交" hidefocus="true" />
2.只读文本框内容,在input里添加属性值 readonly?
<input type="text" readonly />?
3.防止退后清空的TEXT文档(可把style内容做做为类引用)?
<input type="text" style="behavior:url(#default#savehistory);" />?
4.ENTER键可以让光标移到下一个输入框?
<input type="text" οnkeydοwn="if(event.keyCode==13)event.keyCode=9" />
5.只能为中文(有闪动)?
<input type="text" οnkeyup="value=value.replace(/[ -~]/g,'')" οnkeydοwn="if(event.keyCode==13)event.keyCode=9" />
6.只能为数字(有闪动)?
<input type="text" οnkeyup="value=value.replace(/[^\d]/g,'') " onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))" />
7.只能为数字(无闪动)?
<input type="text" style="ime-mode:disabled" οnkeydοwn="if(event.keyCode==13)event.keyCode=9" οnkeypress="if ((event.keyCode<48 || event.keyCode>57)) event.returnValue=false" />
8.只能输入英文和数字(有闪动)?
<input type="text" οnkeyup="value=value.replace(/[\W]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))" />
9.屏蔽输入法?
<input type="text" name="url" style="ime-mode:disabled" οnkeydοwn="if(event.keyCode==13)event.keyCode=9" />?
10. 只能输入 数字，小数点，减号（-） 字符(无闪动)?
<input οnkeypress="if (event.keyCode!=46 && event.keyCode!=45 && (event.keyCode<48 || event.keyCode>57)) event.returnValue=false" />?
11. 只能输入两位小数，三位小数(有闪动)?
<input type="text" maxlength="9" οnkeyup="if(value.match(/^\d{3}$/))value=value.replace(value,parseInt(value/10)) ;value=value.replace(/\.\d*\./g,'.')" οnkeypress="if((event.keyCode<48 || event.keyCode>57) && event.keyCode!=46 && event.keyCode!=45 || value.match(/^\d{3}$/) || /\.\d{3}$/.test(value)) {event.returnValue=false}" />

......整理不易请点赞支持！感谢轶软工作室，就先写到这儿吧，后面还有很多，有时间我再把所有的都发出来。