Html | LixiPHP - 致力于PHP高级编程!

十 22 2011

iPhone iPad等终端HTML CSS设计

Category: CSS — lixiphp @ 2011-10-22 17:01:00

在iPhone、Smartphone 上设计网页和设计打印样式表(print stylesheet)非常相似。页面是竖排版的，所有内容均按行显示。

HTML头信息

<meta charset="utf-8" />
<link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.icon" />
<meta name="Generator" content="LIXIPHP (http://lixiphp.com)" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="MobileOptimized" content="width">
<meta name="HandheldFriendly" content="true">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="cleartype" content="on">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">

分别定义：

1、编码Unicode UTF-8

2、浏览器图标地址和类型

3、Generator 生产者

4、网页缩放比例为1:1

5、控制手机布局，width默认为屏幕大小，也可以为具体数字如240、480，Windows Mobile推荐设置为240

6、控制手机放大缩小网页显示

7、控制全屏显示(Apple Safar)

8、ClearType主要是针对LCD液晶显示器设计，可提高文字的清晰度。

9、兼容性

导入CSS样式

<link rel=”stylesheet” type=”text/css” href=”style.css” />

和普通网页一样的方式。

CSS样式表

页面的显示和手机屏幕的分辨率息息相关，分别有以下几个标准：

/* iPhone Smartphone portrait one-col-stack */
@media only screen and (max-width:320px) {
CSS content…
}

/* iPhone Smartphone landscape one-col-vert */
@media only screen and (min-width:321px) and (max-width:480px) {
CSS content…
}

/* iPad Tablet portrait one-col-vert */
@media only screen and (min-width:481px) and (max-width:768px) {
CSS content…
}

/* iPad Tablet landscape three-col-right */
@media only screen and (min-width:769px) and (max-width:1024px) {
CSS content…
}

注意：

不要使用绝对宽度如width:960px; 可以用相对宽度代替如width:100%；
不要使用float元素浮动，手机中的内容都是按行显示的；

预览效果：

标签： CSS, html, iPad, iPhone, Smartphone, Tablet, 设计

Comments (2)

四 19 2011

PHP移除指定HTML标签的方法

Category: Snippets — lixiphp @ 2011-04-19 21:03:58

PHP默认的函数有移除指定html标签，名称为strip_tags，在某些场合非常有用。

strip_tags

(PHP 3 >= 3.0.8, PHP 4, PHP 5)

strip_tags — Strip HTML and PHP tags from a string

string strip_tags ( string str [, string allowable_tags] )

弊端：

这个函数只能保留想要的html标签，就是参数string allowable_tags。

在yizero的评论中我知道了这个函数的参数allowable_tags的其他的用法。

strip_tags($source, ”); 去掉所以的html标签。

strip_tags($source, ‘<div><img><em>’); 保留字符串中的div、img、em标签。

如果想去掉的html的指定标签。那么这个函数就不能满足需求了。于是乎我用到了这个函数。

移除多个指定的html标签

/**
 * Removes specific  tags.
 */
function strip_only_tags($str, $tags, $stripContent = FALSE) {
  $content = '';

  if (!is_array($tags)) {
    $tags = (strpos($str, '>') !== false ? explode('>', str_replace('<', '', $tags)) : array($tags));
    if (end($tags) == '') {
      array_pop($tags);
    }
  }

  foreach($tags as $tag) {
    if ($stripContent) {
      $content = '(.+<!--'.$tag.'(-->|\s[^>]*>)|)';
    }

    $str = preg_replace('#<!--?'.$tag.'(-->|\s[^>]*>)'.$content.'#is', '', $str);
  }

  return $str;
}

参数说明

$str — 是指需要过滤的一段字符串，比如div、p、em、img等html标签。
$tags — 是指想要移除指定的html标签，比如a、img、p等。
$stripContent = FALSE — 移除标签内的内容，比如将整个链接删除等，默认为False，即不删除标签内的内容。

使用说明

$target = strip_only_tags($source, array(‘a’,'em’,'b’));

移除$source字符串内的a、em、b标签。
阅读更多>>

标签： html, PHP, remove, tag, 标签, 移除

Comments (3)

十 27 2010

phpDesigner 7 功能概述及配置集成工具

Category: PHP — lixiphp @ 2010-10-27 00:54:28

注意我当前使用的phpDesigner 7的版本是7.2.2，使用了一段时间的phpDesigner 7，这里对其功能做一个总结，至于好不好用，喜不喜欢用就是个人的习惯问题了。

以下是我使用phpDesigner 7的两个截图，第一个截图是版权我破解的，第二个是打开启动界面截图。大概的给了你一个phpDesigner 7的形象。

PHP开发人员用到的功能

HTML

基本HTML元素都可以直接通过菜单选择，包括表单，表格，列表，注释，HTML转换，HTML优化（它使用的是HTML Tidy），灵活的找到对应标签。

CSS菜单上经常要使用到的就是注释，链接CSS文件方式，常用字体，和定位。

Javascript

我经常用到的就是Javascript菜单栏里的注释，基本函数 alert，prompt，confirm，Document.write()，Window.open()，最经典的应用就是使用它集成的JS框架：JQuery、ExtJS、Yahoo!用户界面库(YUI)、Dojo、MooTools、prototype。

点击它们中的任何一个链接到库，就会自动生成如下代码，这里只演示JQuery。

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js”></script>

PHP里最常用的菜单无非就是注释，Smarty模板，代码美化（代码格式化）。

PHP开发人员用到的配置

打开工具 > 配置，就可以看到我们整个phpDesigner 7会使用到的配置。我们最常用的就是配置phpDesigner 7的调试工具和集成工具。

phpDesigner 7 集成 XDebug 调试工具

[XDebug]
xdebug.profiler_output_dir=”C:\ProgramData\Application Data\phpDesigner\XDebugCache”
;; Only Zend OR (!) XDebug
;zend_extension_ts=”D:\xampp\php\ext\php_xdebug.dll”
;xdebug.remote_enable=true
;xdebug.remote_host=127.0.0.1
;xdebug.remote_port=9000
;xdebug.remote_handler=dbgp
;xdebug.profiler_enable=1
;xdebug.profiler_output_dir=”D:\xampp\tmp”

这里关于在windows中xampp安装xdebug的教程请查看：解决xampp xdebug安装失败

phpDesigner 7 集成 WinCacheGrind 调试分析工具

WinCacheGrind is a viewer for cachegrind.out files generated by xdebug 2. WinCacheGrind is functionally similar to KCacheGrind。更多信息及下载请到http://sourceforge.net/projects/wincachegrind/，将下载好的WinCacheGrind.exe保存到 D:\xampp\WinCacheGrind\WinCacheGrind.exe 。输入到 phpDesigner 7 配置中如下图；

打开WinCacheGrind可以通过调试菜单下的WinCacheGrind 进入其界面。

Comments (8)

十 21 2010

PHP程序员-CSS笔记一

Category: CSS — lixiphp @ 2010-10-21 13:37:44

本文主要记录开发过程中遇到的CSS问题与大家一起分享！首先说明本人的CSS不是很好，以下是在开发过程中总结出来的。好的，我们将介绍以下几个部分：

转换HTML到CSS
CSS浮动层
CSS圆角

转换HTML到CSS

你习惯使用HTML作为视觉的格式,并设法想进入CSS吗？但不完全知道如何影响你已经做了很多年的HTML的吗？嗯…

CSS实现字体变粗和倾斜

HTML从被创造以来就一直在使用B和I来实现字体变粗和倾斜,事实上它还是仍然存在，他们还没有被废弃直到现在的XHTML 1.1。

代替HTML <b> 标签，使用： font-weight: bold;代替HTML <i> 标签，使用： font-style: italic;

然而,值得注意的是,如果你使用粗体或斜体高亮字体的话，你还是应该使用正确的HTML元素,即em和strong。这样屏幕阅读器可以改变他们的读音，在读单词的时候，并有文件更有意义。

CSS实现字体下划线(底线)

首先，在网页中带有下划线的字体不是带有链接是一件非常糟糕的事情，即使你认为对一个字体下划线看起来不像网页中其它的链接，也不要做它。一个也没使用不同的链接风格，几乎每个人都有这个想法在刚刚进入一个页面 “底线=链接”。

所以我不完全知道为什么我这样说，但是CSS是这样实现的：

text-decoration: underline

我想这HTML 的<u>标签更好…

CSS移除表格单元格之间的间隙（cellpadding, cellspacing）

唯一的一个处理单元格间隙的属性是：border-collapse，支持IE5 +。所以简单地设置为collapse，就像这样：

border-collapse: collapse;

如果你想从网页上删除所有表的所有单元格边距，这样做：

table {
  border-collapse: collapse;
}

CSS浮动层

要使一个层浮动，使用CSS的实现方法就是：

将父级的层 position属性定义为这样：

position: relative;

需要浮动的层定义为这样：

position: absolute;
top: 8px;
left: 12px;

这里的top和left属性值可以由你自定义。

CSS圆角

Firefox（Safari）CSS圆角技术

在Firefox和Safari浏览器的专有属性圆角效果。

如果在Firefox和Safari中，可以使用这样的代码实现左上角40像素的圆角：

/* top-left corner */
 border-top-left-radius: 40px;
 -moz-border-radius-topleft: 40px;
 -webkit-border-top-left-radius: 40px;

想实现更多的圆角就参考上图中的属性。

标签： CSS, Firefox, Float, html, IE, notebook, PHP, Rounding Corners, safari

Comments (0)

五 25 2010

ypSlideOutMenus一款实用的下拉菜单

Category: JavaScript — lixiphp @ 2010-05-25 00:10:58

最近在做一个项目用到了ypSlideOutMenus，它是一款兼容主流浏览器的简单实用的下拉菜单，只要简单在前台设置好CSS后就能达到效果，在这里推荐给大家。

A small, efficient DHTML script for creating animated sliding panels on web pages.

It was written in early 2001 and has been used since then on everything from personal journals to major corporate websites.

Please note that the code is very old and not officially supported by anyone. It is offered completely free, for any purpose, under the Academic Free License.

ypSlideOutMenus are compatible with many DHTML browsers including: Netscape 4+, IE4+ (windows and mac), Mozilla-based browsers, and Safari.