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

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

时间：2020-07-27 05:29:05

解决浏览器播放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>

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

隐藏层

function ShowDisplay(){

var a=document.getElementById("txt_name");

if(a.style.display=="none")//隐藏

{

a.style.display="block";//显示层

}

else

{

a.style.display="none";//隐藏层

}

</script></html>

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.让浏览器窗口永远都不出现滚动条。

没有水平滚动条

没有垂直滚动条

27.图片抖动特效

<!--

var rector=2

var stopit=0

var a=1

var count=0

function init(which){

stopit=0

shake=which

shake.style.left=0

shake.style.top=0

}

function rattleimage(){

if ((!document.all&&!document.getElementById)||stopit==1||count==100)

return

count++

if (a==1){

shake.style.top=parseInt(shake.style.top)+rector

}

else if (a==2){

shake.style.left=parseInt(shake.style.left)+rector

}

else if (a==3){

shake.style.top=parseInt(shake.style.top)-rector

}

else{

shake.style.left=parseInt(shake.style.left)-rector

}

if (a<4)

a++

else

a=1

setTimeout("rattleimage()",50)

}

function stoprattle(which){

stopit=1

count=0

which.style.left=0

which.style.top=0

}

//-->

</SCRIPT>

</style>

如何让一张图片有浅到深的渐变。

<!--

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>

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

<body>

<input type="button" name=SUB value="闪烁" id=flashit style="BORDER: 1px solid ;

</form>

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.如何让滚动条出现在左边？

<tr>

<td bgcolor="#FF0000" >是不是你的滚动条在左边啊</td>

</tr>

</table>

</body>

</html>

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

<HTML><HEAD><TITLE>如何在同一页面设置不同文字链接效果的样式</TITLE>

<!--

a:hover { font-size: 9pt; color: #FF0000; text-decoration: underline}

a:link { font-size: 9pt; color: #006699; text-decoration: underline}

a:visited { font-size: 9pt; color: #006699; text-decoration: underline}

a:active { font-size: 9pt; color: #FF0000; text-decoration: none}

a.r1:hover { font-size: 9pt; color: #FF0000; text-decoration: underline overline}

a.r1:link { font-size: 9pt; color: #000000; text-decoration: underline overline}

a.r1:visited { font-size: 9pt; color: #99CC00; text-decoration: underline overline}

a.r1:active { font-size: 9pt; color: #000000; text-decoration: underline overline}

-->

</style>

</head>

<a href="#">下划线链接 </a>

<p></p>

<a href="#" class="r1">双下划线链接</a>

</BODY>

</HTML>

补充说明：

a:hover 表示鼠标划过时的样式.

a:link 表示链接的样式.

a:active 表示当前活动连接的样式.

a:visited 表示已经访问过的连接的样式.

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

这javascript代码即可实现

【1、最基本的弹出窗口代码】

其实代码非常简单：

<!--

window.open ('page.html')

-->

</SCRIPT>

这一段代码可以加入HTML的任意位置，<head>和</head>之间可以，<body bgcolor="#003063" text="#ffffff" id=all>间</body>也可以，越前越早执行，尤其是页面代码长，又想使页面早点弹出就尽量往前放。

【2、经过设置后的弹出窗口】

下面再说一说弹出窗口的设置。只要再往上面的代码中加一点东西就可以了。

我们来定制这个弹出的窗口的外观，尺寸大小，弹出的位置以适应该页面的具体情况。

<!--

window.open ('page.html', 'newwindow', 'height=100, width=400, top=0,left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no')

//写成一行

-->

</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>

<!--

function openwin() { window.open ("page.html", "newwindow", "height=100, width=400, toolbar=

no, menubar=no, scrollbars=no, resizable=no, location=no, status=no"

//写成一行

}

//-->

</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>

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

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。