html css js php常用网页代码汇总合集（一）网页设计入门代码知识汇总1
字間距、字體間距：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}" />
......整理不易請點贊支持！感謝軼軟工作室，就先寫到這兒吧，后面還有很多，有時間我再把所有的都發出來。
總結
以上是生活随笔為你收集整理的html css js php常用网页代码汇总合集（一）网页设计入门代码知识汇总1的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 光纤学习总结
- 下一篇： 测试环境由谁搭建？第三方软件测试环境搭建