前端开发

html a 事件

• 前端开发 • 暂无评论 
<a href='javascript:window.print()'> 打印</a>

//打印当前页面

<a href="###" onclick=window.close();return false)> 关闭本窗口</a>

//关闭当前页面

<a href="javascript:void(0)" onclick="location.reload(true)"></a>

//点击刷新页面

<a href="javascript:void(0);" onclick="js_method()"></a>

//点击无效

html input 动作

• 前端开发 • 暂无评论 
<input type="submit" value=" 输入值" onMouseOut=this.style.color="blue" onMouseOver=this.style.color="red" />

//鼠标激活和经过按钮颜色变换

<input type="text" value=" 输入值" onmouseover="javascript:this.focus();" />

//鼠标划过激活输入框

<input type="text" value=" 输入值" onmouseover="this.focus();this.select();" />

//鼠标划过激活并选中输入框内容

<input type="text" value=" 输入值" onfocus="this.select()" />

//选中输入框即选择内容

<input type="text" value=" 输入值" onclick="if(this.value==' 预置值')this.value=' 提示值'" />

//如果输入值等于预置值则显示提示值

<input type="text" value=" 输入值" onclick="if(this.value!=' 预置值')this.value=' 提示值'" />

//如果输入值不等于预置值则显示提示值

<input type="text" value="" onblur="if(this.value==''){this.value=' 自动填充内容';}" />

//鼠标激活并离开输入框后显示预置内容

<input type="text" value=" 输入值" onclick=javascript:this.value="" />

//激活输入框后清空内容

<input type="text" value=" 输入值" style="outline: none;" />

//去掉输入框和按钮边框默认淡蓝色框线

php Local 和 Global 作用域

• 前端开发 • 暂无评论

Local 和 Global 作用域
函数之外声明的变量拥有 Global 作用域，只能在函数以外进行访问。
函数内部声明的变量拥有 LOCAL 作用域，只能在函数内部进行访问。

php 代码

<!DOCTYPE html>
<html>
<body>

<?php
$x=5; // global scope
  
function myTest() {
   $y=10; // local scope
   echo "<p> 在函数内部测试变量：</p>";
   echo " 变量 x 是：$x";
   echo "<br>";
   echo " 变量 y 是：$y";
} 

myTest();

echo "<p> 在函数之外测试变量：</p>";
echo " 变量 x 是：$x";
echo "<br>";
echo " 变量 y 是：$y";
?>

</body>
</html>

输出结果

在函数内部测试变量：

变量 x 是：
变量 y 是：10
在函数之外测试变量：

变量 x 是：5
变量 y 是：

php include 引入 html 文件套接生成页面

• 前端开发 • 暂无评论

index.php 前端套接页面

<?php
include "header.php";
include "body.php";
include "footer.php"
?>

header.php 头部页面

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title> 这是标题</title>
  <style type="text/css">
    html,body,th{
      font-family: sans-serif;
      font-size: 12px;
      font-weight: 400;
    }
    .myPHP{
      padding: 20px 0 10px 0;
    }
  </style>
</head>

body.php 主体页面

<body>
  <div class="myPHP">
    这是 body 部分
  </div>
</body>

footer.php 页脚页面

<footer>
  这是 footer 部分
</footer>

</html>

通过 CSS 解决 HTML 页面的复选框或单选框与文字对齐问题

• 前端开发 • 暂无评论

当文字 12px 时，单（复）选框 CSS 设置 height:13px; vertical-align:bottom; margin-bottom:.5px; margin-top:5px; 兼容当前 Chrome Firefox IE EDGE 浏览器显示对齐。
CSS

.checkbox_align{height:13px; vertical-align:bottom; margin-bottom:.5px; margin-top:5px;}

HTML

<div style="font-size:12px;">
<input class="checkbox_align" type="radio" /> 单选框 <input class="checkbox_align" type="checkbox" /> 复选框
</div>

 

当文字 14px 时，单（复）选框 CSS 设置 vertical-align:text-bottom; margin-bottom:2px; 兼容当前 Chrome Firefox IE EDGE 浏览器显示对齐。

CSS

.checkbox_align{vertical-align:text-bottom; margin-bottom:2px;}

 

当文字 12px 和 14px 以及 1em 时，单（复）选框 CSS 设置 vertical-align:middle; margin-top:-2px; margin-bottom:1px; 兼容当前 Chrome Firefox IE EDGE 浏览器显示对齐。

CSS

.checkbox_align{vertical-align:middle; margin-top:-2px; margin-bottom:1px;}

 

通用型

vertical-align: -5%;

Windows & Linux Web 服务集成环境

• 前端开发 • 暂无评论

WampServer
WampServer 是集成 Apache、Mysql、PHP 于一体的 Windows Web 开发环境，即在 Windows 下的 Apache、PHP 和 Mysql 的服务器软件。同时，PhpMyAdmin 允许您轻松管理数据库。
应用环境：Windows

XAMPP/LAMPP
XAMPP（Apache+MySQL+PHP+PERL）是一个功能强大的建站集成软件包。这个软件包原来的名字是 LAMPP，但是为了避免误解，最新的几个版本就改名为 XAMPP 了。它可以在 Windows、Linux、Solaris、Mac OS X 等多种操作系统下安装使用。
应用平台：Windows、Linux、Mac OS X

phpStudy 
phpStudy 集成 Apache + Nginx + LightTPD + PHP + MySQL + phpMyAdmin + Zend Optimizer + Zend Loader，一次性安装，无须配置即可使用，是非常方便、好用的 PHP 调试环境。
应用平台：Windows、Linux、macOS

LNMP
LNMP 是一个用 Linux Shell 编写的可以为 CentOS/RHEL/Fedora/Aliyun/Amazon、Debian/Ubuntu/Raspbian/Deepin/Mint Linux VPS 或独立主机安装 LNMP(Nginx/MySQL/PHP)、LNMPA(Nginx/MySQL/PHP/Apache)、LAMP(Apache/MySQL/PHP) 生产环境的 Shell 程序。
应用平台：Linux

LAMP 
LAMP 一键安装包是一个用 Linux Shell 编写的可以为 Amazon Linux/CentOS/Fedora/Debian/Ubuntu 系统的 VPS 或服务器安装 LAMP(Linux + Apache + MySQL/MariaDB/Percona + PHP) 生产环境的 Shell 脚本。
应用平台：Linux

点击 a 链接执行动作事件

• 前端开发 • 暂无评论 
<a href="####"> 使用 2 个到 4 个 # 或 #all 表示无执行，1 个 # 代表默认锚点 #top 位置，点击后会回到顶部。</a>

// 点击 a 链接不执行任何动作事件

<a href="javascript:void(0)" onclick="window.open('https://hexingxing.cn')" > 点击链接弹出窗口且原页面不变</a>

// 点击 a 链接响应自定义动作事件

加载更多