html css js php常用网页代码汇总合集（三）网页设计入门代码知识汇总3

轶软工作室

已于 2022-02-19 23:36:12 修改

阅读量1.2k

点赞数

分类专栏：日常网络技术文章标签： html js css php 经验分享

于 2021-11-29 00:00:00 首次发布

本文链接：https://blog.csdn.net/usenk/article/details/121551899

版权

日常同时被 2 个专栏收录

35 篇文章 7 订阅

订阅专栏

网络技术

17 篇文章 0 订阅

订阅专栏

解决浏览器播放video视频自动全屏问题

有的浏览器用的是chrome的内核，播放会自动将视频全屏，要解决问题需要在video标签中添加如下内容

webkit-playsinline="true"

x-webkit-airplay="true"

playsinline="true"

解决安卓部分浏览器问题的时候需要加上 x5-playsinline

标签内的文本左右对齐 text-align: justify; 和 text-justify: inter-ideograph;

自动换行标签 word-break: normal | break-all | keep-all;

自动两行后隐藏，自动换行，只保留两行，2行，两行后.3行三行..省略
第一种：
    display: block;
   display: -webkit-box;
   color: #333;
   font-weight: normal;
   font-size: 15px;
   overflow: hidden;
   text-overflow: ellipsis;
   text-overflow: -o-ellipsis-lastline;
   -webkit-line-clamp: 2;
   line-clamp: 2;
   -webkit-box-orient: vertical;

第二种：
    display: block;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;

JS弹窗setTimeout()出现后自动多少秒后消失用的代码：
setTimeout(function(){alert("Hello"); }, 3000);

P标签内的文字占两行，多余的影藏，再加省略号

overflow: hidden;

display: -webkit-box;

-webkit-line-clamp: 2;

-webkit-box-orient: vertical;

图片连续左移实例
<marquee direction=left scrollamount=10 bgcolor="green" width="500" height="200" onMouseOver="this.stop()" onMouseOut="this.start()">
<a href="#"><img src="1.jpg" width="200" height="200" border=0/></a>
<a href="#"><img src="2.jpg" width="200" height="200" border=0/></a>
<a href="#"><img src="3.jpg" width="200" height="200" border=0/></a>
</marquee>

设置meta标签自动清除页面缓存

隐藏层

php简单的用php计算出今天在这个礼拜是星期几的实现方法,先输出今天是这个礼拜的第几天
php date("w")
$week=array("星期日","星期一","星期二","星期三","星期四","星期五","星期六"); //星期数组
echo "今天是".date("Y")."年".date("m")."月".date("d")."日 ".$week[date("w")];

<?php echo date("d");?>

<?php echo dechex(date("d"));?>

<?php echo date('Y-m-d',time());?>

<?php echo urlencode(date('d',time()));?>

<?php echo urlencode("看不懂吧?123")?>

<?php echo strrev("12345");?>

<?php echo date('w');?><?php echo substr(date('d'),1,1);?> 提取星期几的数字几，加上截取日的最后一位

<?php echo date("w");?><?php echo substr(date("d"),1,1);?> 提取星期几的数字几，加上截取日的最后一位

1.贴个图：<img src="图片地址">
2.加入连接：<a href="所要连接的相关地址">写上你想写的字</a>

3.在新窗口打开连接：<a href="相关地址" target="_blank">写上要写的字</a> 消除连接的下划线在新窗口打开连接：<a href="相关地址" style="text-decoration:none" target="_blank">写上你想写的字</a>

4.移动字体(走马灯)：<marquee>写上你想写的字</marquee>

5.字体加粗：<b>写上你想写的字</b>

6.字体斜体：<i>写上你想写的字</i>

7.字体下划线: <u>写上你想写的字</u>

8.字体删除线: <s>写上你想写的字</s>

9.字体加大: <big>写上你想写的字</big>

10.字体控制大小：<h1>写上你想写的字</h1> (其中字体大小可从h1-h5,h1最大，h5最小)

11.更改字体颜色：<font color="#value">写上你想写的字</font>(其中value值在000000与ffffff(16位进制)之间

12.消除连接的下划线：<a href="相关地址" style="text-decoration:none">写上你想写的字</a>

13.贴音乐：<embed src=音乐地址 width=300 height=45 type=audio/mpeg autostart="false">

14.贴flash: <embed src="flash地址" width="宽度" height="高度">
15.贴影视文件：<img dynsrc="文件地址" width="宽度" height="高度" start=mouseover>

16.换行：<br>

17.段落：<p>段落</p>

18.原始文字样式：<pre>正文</pre>

19.换帖子背景：<body background="背景图片地址">

20.固定帖子背景不随滚动条滚动：<body background="背景图片地址" body
bgproperties=fixed>

21.定制帖子背景颜色：<body bgcolor="#value">(value值见10)

22.帖子背景音乐：<bgsound="背景音乐地址" loop=infinite>

23.贴网页：<iframe src="相关地址" width="宽度" height="高度"></iframe>

24.各种样式的光标：auto ：标准光标，default ：标准箭头，hand ：手形光标，wait ：等待光标，text ：I形光标，vertical-text ：水平I形光标，no-drop ：不可拖动光标，not-allowed ：无效光标，help ：?帮助光标，all-scroll ：三角方向标，move ：移动标，crosshair ：十字标。

25.改变滚动条的颜色CSS代码

BODY {
scrollbar-face-color:#99CC33;//(立体滚动条凸出部分的颜色)
scrollbar-highlight-color:#A8CBF1;//(滚动条空白部分的颜色)
scrollbar-shadow-color:#A8CBF1;//(立体滚动条阴影的颜色)
scrollbar-arrow-color:#FF9966;//(上下按钮上三角箭头的颜色)
scrollbar-base-color:#A8CBF1; //(滚动条的基本颜色)
scrollbar-darkshadow-color:#A8CBF1; //(立体滚动条强阴影的颜色)
scrollbar-track-color:#99CC33;
scrollbar-3dlight-color:#A8CBF1;
}

CSS给图片定义颜色边框。
img { border: 1px solid red}

26.让浏览器窗口永远都不出现滚动条。
<body style="overflow-x:hidden;overflow-y:hidden">或<body style="overflow:hidden"> 或<body scroll=no>
没有水平滚动条
<body style="overflow-x:hidden">
没有垂直滚动条
<body style="overflow-y:hidden">

27.图片抖动特效

<SCRIPT language=javascript1.2>

</SCRIPT>
<style>.shakeimage {POSITION: relative}
</style>
<img src="图片的路径" οnmοuseοut=stoprattle(this) οnmοuseοver=init(this);rattleimage() class="shakeimage">

如何让一张图片有浅到深的渐变。
<SCRIPT language=javascript1.2>
<!--
function high(which2){
theobject=which2
highlighting=setInterval("highlightit(theobject)",50)
}
function low(which2){
clearInterval(highlighting)
which2.filters.alpha.opacity=40
}
function highlightit(cur2){
if (cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=10
else if (window.highlighting)
clearInterval(highlighting)
}
</script>
<img οnmοuseοut=low(this) οnmοuseοver=high(this) style="FILTER: alpha(opacity=40)"src="logo.gif" >

28.用javascript代码来实现闪烁按钮

<body>
<form method="POST" action="--WEBBOT-SELF--">
<input type="button" name=SUB value="闪烁" id=flashit style="BORDER: 1px solid ;
</form>
<script>
if (document.all&&document.all.flashit)
{
var flashelement=document.all.flashit
if (flashelement.length==null)
flashelement[0]=document.all.flashit
function changecolor(which)
{
if (flashelement[which].style.color=='#800000')
flashelement[which].style.color="#0063A4"
else
flashelement[which].style.color="#800000"
}
if (flashelement.length==null)
setInterval("changecolor(0)",1000)
else
for (i=0;i<flashelement.length;i++)
{
var tempvariable='setInterval("changecolor('+i+')",'+'1000)'
eval(tempvariable)
}
}
</script>
</body>

29.如何让滚动条出现在左边？
<html dir="rtl">
<body bgcolor="#000000" text="#FFFFFF">
<table height=18 width=212 align=center bgcolor=#FFFFFF dir="ltr" cellspacing="1" 　cellpadding="0">
<tr>
<td bgcolor="#FF0000" >是不是你的滚动条在左边啊</td>
</tr>
</table>
</body>
</html>

30.如何在同一页面设置不同文字链接效果的样式.

<HTML><HEAD><TITLE>如何在同一页面设置不同文字链接效果的样式</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">

</style>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<a href="#">下划线链接 </a>
<p></p>
<a href="#" class="r1">双下划线链接</a>
</BODY>
</HTML>
补充说明：
a:hover 表示鼠标划过时的样式.
a:link 表示链接的样式.
a:active 表示当前活动连接的样式.
a:visited 表示已经访问过的连接的样式.

经常上网的朋友可能会到过这样一些网站，一进入首页立刻会弹出一个窗口，怎么做呢！

这javascript代码即可实现
【1、最基本的弹出窗口代码】
其实代码非常简单：
<SCRIPT LANGUAGE="javascript">

</SCRIPT>
这一段代码可以加入HTML的任意位置，<head>和</head>之间可以，<body bgcolor="#003063" text="#ffffff" id=all>间</body>也可以，越前越早执行，尤其是页面代码长，又想使页面早点弹出就尽量往前放。
【2、经过设置后的弹出窗口】
下面再说一说弹出窗口的设置。只要再往上面的代码中加一点东西就可以了。
我们来定制这个弹出的窗口的外观，尺寸大小，弹出的位置以适应该页面的具体情况。
<SCRIPT LANGUAGE="javascript">

</SCRIPT>
参数解释：
<SCRIPT LANGUAGE="javascript"> js脚本开始；
window.open 弹出新窗口的命令；
'page.html' 弹出窗口的文件名；
'newwindow' 弹出窗口的名字（不是文件名），非必须，可用空''代替；
height=100 窗口高度；
width=400 窗口宽度；
top=0 窗口距离屏幕上方的象素值；
left=0 窗口距离屏幕左侧的象素值；
toolbar=no 是否显示工具栏，yes为显示；
menubar，scrollbars 表示菜单栏和滚动栏。
resizable=no 是否允许改变窗口大小，yes为允许；
location=no 是否显示地址栏，yes为允许；
status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许；
</SCRIPT> js脚本结束
【3、用函数控制弹出窗口】
下面是一个完整的代码。
<html>
<head>
<script LANGUAGE="javascript">

</script>
</head>
<body>
…任意的页面内容…
</body>
</html>

补充内容：JS时间带格式代码

一个简单的后台管理登陆页面，禁用了一些按键，不需要请自行去除，支持手机版访问：

<html><title>后台管理登陆</title><body style="text-align:center;background-color:#000"><form action="" method="post" id="form"><br/><input style="font-size:132px;letter-spacing:10px;width:920px;height:300px;text-align:center;color:#FFF;font-weight:bold;border-radius:150px;background-color:#00003C;border:20px solid #FF8C00;box-shadow: 0 20px 30px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.20);cursor:pointer;outline:0;" type="number" name="password" autofocus="autofocus" maxlength="8" placeholder="输入密码" οninput="if(value.length>7)value=value.slice(0,8)" /><br/><br/><br/><input style="font-size:132px;letter-spacing:10px;width:920px;height:300px;text-align:center;color:#FFF;font-weight:bold;border-radius:150px;background:linear-gradient(45deg,red,blue 100%);border:20px solid #FF8C00;box-shadow: 0 20px 30px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.20);cursor:pointer;outline:0;" type="submit" value="点击打开"/></form><br/><br/><a style="font-size:92px;letter-spacing:10px;width:920px;height:300px;text-align:center;color:#EEE;font-weight:bold;cursor:default;">输入密码 点击打开</a><br/><br/><body οnlοad="getTime()"><div style="font-size:50px;font-family:Arial;color:#fff;" id="times"></div><script type="text/javascript">window.onload = function() { document.onkeydown = function() { var e = window.event || arguments[0];if (e.keyCode == 123) { return false } else if ((e.ctrlKey) && (e.shiftKey) && (e.keyCode == 73)) { return false } else if ((e.shiftKey) && (e.keyCode == 121)) { return false } else if ((e.ctrlKey) && (e.keyCode == 85)) { return false } };document.oncontextmenu = function() { return false } };document.οncοntextmenu=function(e){return false;};document.onselectstart=function(e){return false;};function getTime(){var dateObj=new Date();var year=dateObj.getFullYear();var month=dateObj.getMonth()+1;var date=dateObj.getDate();var day=dateObj.getDay();var weeks=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];var week=weeks[day];var hours=dateObj.getHours();var minutes=dateObj.getMinutes();var seconds=dateObj.getSeconds();if(month<10){month="0"+month}if(date<10){date="0"+date}if(hours<10){hours="0"+hours}if(minutes<10){minutes="0"+minutes}if(seconds<10){seconds="0"+seconds}var newDate=year+"年"+month+"月"+date+"日"+"&nbsp"+week+"&nbsp"+hours+":"+minutes+":"+seconds;document.getElementById("times").innerHTML=newDate;setTimeout("getTime()",500)};</script><noscript><iframe src='*.htm'></iframe></noscript></body></html>

好了，就先写到这儿吧，这三篇都是之前用到过随手记录的，我不知道有没有人喜欢看上面的内容，所以暂时就先写这三篇吧，如果你喜欢看，请点赞评论留言告诉我，我这还有大量实例代码可以继续贴出来，如果无人问津，我就不继续写第四篇了，下周开始，写其他的内容了，感谢点赞关注支持轶软工作室。