CSS | 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)

四 16 2011

DIV+CSS公司网站模板源码免费下载

Category: CSS,Opensource — lixiphp @ 2011-04-16 21:05:59

此模板是国外公司网站的通用框架，主要提供给学习DIV+CSS的童鞋们学习研究使用。请勿用于任何商业应用。

模板首页预览

特征如下：

Columns: 1,Columns: 2,
Compatible Browsers: IE8, IE9, FireFox 2, FireFox 3, Firefox 3.5, Firefox 3.6, Firefox 4, Safari 4, Safari 5, Opera, Chrome 4, Chrome 5
Valid HTML: Yes

模板说明及下载

包含文件列表：

首页 index.html
案例 project.html
服务 services.html
联系 contact.html
主样式表 style.css

图片轮播特效文件列表：

jQuery JavaScript Library v1.3.2
Easy Slider 1.5 – jQuery plugin

Comments (0)

十二 10 2010

如何实现网页特殊字体显示

Category: CSS,Web 2.0 — lixiphp @ 2010-12-10 09:42:59

如何让特殊字体（比如华文仿宋）在网页客户端显示，服务器上无特殊字体，客户端无特殊字体。

特殊字体显示方案

客户打开网页的时候，提示客户安装该字体。
通过服务器端代码，生成图片格式的文件。
通过上传字体文件到指定目录，让CSS获取然后显示。

第一种方案明显存在弊端，用脚本程序去识别客户端是否含有该字体，加重程序的负载量。而且严重影响用户的体验。效果最次！

第二种方案生成图片，网页加载慢，不利于SEO，效果差！

第三种方案的弊端就是不符合CSS2.0标准，效果好！

@font-face样式

@font-face允许作者使用指定的字体来显示在线在其网页上的文字。通过允许作者提供自己的字体，@font-face无需依赖于用户在其计算机上安装的数量有限的字体。

语法

@font-face {
  font-family: <a-remote-font-name>;
  src: <source> [,<source>]*;
    [font-weight: <weight>];
    [font-style: <style>];
}

参数说明

<a-remote-font-name>

指定字体名称，字体可以使用于字体属性。

网址为远程的字体文件的位置，或对用户的形式在本地（“字体名称”）的计算机字体的名称。

一个字体粗细的值。

<style>

一种字体样式值。

通过CSS的@font-face属性来实现在网页中嵌入任意字体

.TTF经过我的测试，适用于Firefox 3.5+、Safari、Opera、IE8+、Chrome。

我们在手头上（或在设计资源站点已经找到）有该字体的最常见格式 .TTF 文件。

使用Google提供的在线字体

在谷歌字体目录，您可以浏览所有的字体字型，通过谷歌API可使用。由谷歌服务器的服务。关于使用说明请参考官方的文档。

http://code.google.com/webfonts，缺点是没有中文字体库。

引用Google字体：

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">

body {
  font-family: 'Tangerine', serif;
  font-size: 48px;
  text-shadow: 4px 4px 4px #aaa;
}

Comments (0)

十 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)

十 19 2010

Firefox Web Developer 工具栏使用教程

Category: CSS,Web 2.0 — lixiphp @ 2010-10-19 00:18:24

这篇文章主要一步一步教你如何使用 Firefox Web Developer Toolbar，高手请飘过，适合新手，这是一篇入门级教程，不足之处请多包涵！

The Web Developer extension 增加了一个菜单和工具栏到各种Web浏览器。the Firefox Web Developer Toolbar 是最有用的网页设计工具之一。这篇简短的介绍将告诉你一些可以使用方法，当你制作网站时。要使用工具栏你必须要使用免费的Mozilla Firefox浏览器。在您的Firefox浏览器，您可以下载Firefox扩展名为Web Developer Toolbar 的工具。

Web Developer Toolbar 概述

当您安装Web Developer Toolbar，你必须关闭所有的Firefox浏览器窗口并重新启动Firefox浏览器。然后，您会看到Web开发工具栏在Firefox下导航按钮。工具栏的一部分，上面写着“Disable”，“Cookies”，“CSS”，“Forms”，“Images”等等。这篇博文描述的是使用Web Developer Toolbar的1.1.8版本，即使你使用的是不同的版本，但它应该是相似的。在截图我用的Firefox默认主题，Firefox版本是Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.10) Gecko/20100914 Firefox/3.6.10。如果你的版本不同，不用担心，其功能是相同的。

使用 Web Developer Toolbar

在您安装Web开发工具栏完成后，您会看到对面的浏览器上方的菜单项从左至右：

Disable（禁用）:

这些菜单项可以让您禁用功能在网页上，如缓存，Java，JavaScript，HTML重定向，页面颜色，反向链接，代理甚至更多。在这两个菜单项是特别有用的是禁用从哪里来，它给你增加关于网络隐私权，并禁用缓存，它是有用的当您正在更新网页时，并需要确保您正在查看的是最新的，当你在浏览器中观看它时。

Cookies:Cookies菜单让你选择是非常有用的，当你在编程网站使用Cookie时。例如禁用所有cookie，禁止外部网站的Cookie，会话cookie清除，删除域的Cookie，删除路径的Cookie，查看cookie信息，并添加cookie。

CSS（样式表）:

此菜单包含了我最喜欢的Web开发工具栏功能：编辑CSS。当你激活这个功能，您可以编辑一个网页中的CSS实时栏，看看当你键入更新，这些网页上就会看到的您的变更。例如，也许你想看什么不同的网站颜色和字体就看你的网站一样。在下面的图片，我迅速检查了这个页面看起来就像一个绿色头背景只需在补充工具栏的CSS编辑。只要关闭边栏，更改将被丢弃。

CSS菜单中的另一项有用的功能是禁用方式，允许你删除所有从网页上的CSS。

Comments (0)

五 24 2010

CSS去掉点击留下的虚框

Category: CSS — lixiphp @ 2010-05-24 22:37:34

在这里给大家介绍一个方法用CSS去掉点击时留下的虚框。

特点：

兼容所有浏览器
CSS简单方便

代码：

a,area { blr:expression(this.onFocus=this.blur()) }
:focus { -moz-outline-style: none; }

PS：以上方法是从前台设计师那儿得到的，在此与大家分享。如果这篇文章对你有好处，请转载！

标签： area, CSS, focus, 虚框

Comments (1)

一 14 2010

IE6 IE7 IE8 Firefox CSS Hack

Category: CSS — lixiphp @ 2010-01-14 20:37:01

今天在做浏览器兼容时上网搜索解决方法：

顺序依次为：Firefox、IE8、IE7和IE6

selector{ property:value; /* 所有浏览器 */ property:value\9; /* 所有IE浏览器 */ +property:value; /* IE7 */ _property:value; /* IE6 */ }

HTML兼容性调用

<!–[if IE 8]>IE8，褐色文字！<![endif]–>
<!–[if IE 7]>IE7，红色文字！<![endif]–>
<!–[if IE 6]>IE6，绿色文字！<![endif]—>

最后总结一个表格出来应该是这样吧！

property	IE6	IE7	IE8	FF
_	√	×	×	×
*	√	√	×	×
+	√	√	×	×
!important	×	√	√	√

结束语

本文是http://www.happinesz.cn/archives/1064/ 幸福收藏夹和 http://www.div-css.com/html/XHTML-CSS/hack/1136667.html DIV+CSS 二者的结合。

希望对你来说本文是有用的！

标签： CSS, Firefox, Hack, IE, IE6, IE7, IE8

Comments (2)

十二 31 2009

JS和CSS实现自动根据分辨率设置页面宽度

Category: CSS,JavaScript — lixiphp @ 2009-12-31 10:49:59

为了实现自动根据分辨率设置页面宽度，首先我们要先知道一个JavaScript脚本document.documentElement.clientWidth获取页面宽度。

为了说明在IE和FireFox等浏览器中都能实现兼容效果，我说明两种情况支持W3C和不支持W3C，当然从标准的角度讲建议支持W3C。

支持W3C

1、DOCTYPE设置

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

2、IE和FireFox中

document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度

3、在Opera中

document.body.clientWidth ==> 可见区域宽度
document.body.clientHeight ==> 可见区域高度
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）
document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）

没有定义W3C的标准

1、IE为：

document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0

2、FireFox为：

document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）
document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）

3、Opera为：

document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）
document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）

CSS设置页面宽度

<style type="text/css" media="screen">
     .MainFrame,.cont_navbar,.HeaderBanner { width: expression((documentElement.clientWidth < 1003) ? "1003px" : "auto" ); }
 </style>

这个兼容浏览器特别麻烦，期待有一天都能统一成标准。

标签： CSS, js

Comments (0)

十二 19 2009

漂亮的TABLE CSS来自PHPMyAdmin

Category: CSS — lixiphp @ 2009-12-19 17:41:30

今天看了PHPMyAdmin的查询结果 TABLE 的CSS效果不错，所以就 cut 下来：


th {
    font-weight:        bold;
    color:              #000000;
    background:         #D3DCE3;
}

table caption,
table th,
table td {
    padding:            0.1em 0.5em 0.1em 0.5em;
    margin:             0.1em;
    vertical-align:     top;
}
/* odd items 1,3,5,7,... */
table tr.odd th,
.odd {
    background: #E5E5E5;
}

/* even items 2,4,6,8,... */
table tr.even th,
.even {
    background: #D5D5D5;
}

/* odd table rows 1,3,5,7,... */
table tr.odd th,
table tr.odd,
table tr.even th,
table tr.even {
    text-align:         left;
}

/* marked table rows */
table tr.marked th,
table tr.marked {
    background:   #FFCC99;
    color:   #000000;
}

/* hovered items */
.odd:hover,
.even:hover,
.hover {
    background: #CCFFCC;
    color: #000000;
}

/* hovered table rows */
table tr.odd:hover th,
table tr.even:hover th,
table tr.hover th {
    background:   #CCFFCC;
    color:   #000000;
}

/**
 * marks table rows/cells if the db field is in a where condition
 */
tr.condition th,
tr.condition td,
td.condition,
th.condition {
    border: 1px solid #FFCC99;
}

table .value {
    text-align:         right;
    white-space:        normal;
}
/* IE doesnt handles 'pre' right */
table [class=value] {
    white-space:        normal;
}

可以实现TABLE的奇偶行的不同背景和鼠标放上去后背景变换，而且边距设置也相当合适，个人特别喜欢

效果可以参照：http://blog.lixiphp.com/mysql-always-sql/

TABLE的主要class包括 .odd、.even，不用class的话，HTML代码可以通过JQuery的addClass和removeClass的实现。

标签： class, CSS, JQuery, PHPMyAdmin, TABLE

Comments (0)