【分享】CSS 布局:40个教程、技巧、例子和最佳实践

原文地址:http://coolshell.cn/articles/6840.html/comment-page-1

前言: 布局是WEB开发一个重要的课题,进入XHTML/CSS后,使用TABLE布局的方式逐渐淡出,CSS布局以众多优点成为主流,本文将介绍40个基于CSS的web布局的资源和教程。文章的出处在http://www.noupe.com/css/css-layouts-40-tutorials-tips-demos-and-best-practices.html。文中的不少的例子在一本经典的CSS书籍《CCS: The Missing Manual, 2nd Edition》中都可以找到,书可以在亚马逊或者当当上购买到。

正文
基于CSS的布局能提供更灵活布局方式和更强的用户视觉体验。一些重要技巧和关键点可以帮助初学者理解CSS布局的基础和本质。这也是本文成文的原因 ——找到那些完美的布局,完全灵活的,等高栏和工作完美的布局。
因此下面这个列表就是我们整理了网络上关于基于CSS布局的一些技巧,教程和最佳实践的列表。
当然你也可能对下面这些和CSS相关的主题有兴趣:

The 7 CSS Hacks that we should use
Using CSS to Do Anything: 50+ Creative Examples and Tutorials
Using CSS to Fix Anything: 20+ Common Bugs and Fixes

 

CSS 布局教程

1-使用CSS完成三栏固定布局结构- 这篇文章解释了如何实现一个基于的HTML/CSS来设计一个简单的带有基本要素(顶部的logo条,导航条,文本区,定义分类的中部栏,右边侧栏插入google的120X600的广告区)的固定三栏页面布局。

2-使用CSS设计页面布局- 如何使用CSS文件来为你的站点设计页面布局。

3-如何创建一个水平布局的站点- 创建不同于常规的水平布局的站点技术(译者注:水平布局,客户体验也就仁者见仁了)


例子查看这里 |下载

4-超级简单的两栏布局- 创建不同于常规的水平布局的站点技术(译者注:这里是原作者笔误吧和上面的内容一样).

例子查看这里 下载

5-简单两栏CSS布局- 这是一个创建简单两栏布局的教程。这种布局包含了一个标题区,一个水平导航条,主内容区,边侧栏,和页脚区。并且这个布局是水平居中的。

例子查看这里

6-圣杯布局(The holy grail layout) – 3栏布局会有一些问题 ,这篇文章讨论了一种三栏布局——两栏固定宽度边侧栏加上一栏变宽中栏布局,保证了页面的良好结构和清晰。

例子查看这里

7-CSS居中101- 如何使用CSS完成居中一个固定宽度的布局

使用CSS,通过下面两条规则完成对id为container的DIV所包含的内容居中

<body>
<div id=”container”> …entire layout goes here…
</div>
</body>

body {
text-align: center;
}
#container {
margin: 0 auto;
width: xxxpx;
text-align: left;
}

8-从头创建CSS布局- 这个指南通过创建一个全功能的 CSS布局来一步步教你入门CSS布局。

9-非主流!多栏布局- 多栏布局,等高栏(每一列的高度都相等),固定或变宽中央区,简洁标记,CSS 。(译者注:原文作者的图配的和上图一样)

例子查看这里

10- 创建天下无双的CSS布局- 高灵活性布局,等高栏,跨栏垂直摆放元素。本文告诉你通过何等手段完成这些目标,并使用它们创建天下无双的CSS布局(译者注:原文是One True Layout ,不知道怎么翻译,就天下无双吧。)

查看这里

11-从PSD到HTML,手把手完成WEB设计-从Photoshop到完整HTML,全过程手把手教会你。

例子查看这里 | 下载

12- 5个XHTML/CSS技巧 – 5个CSS技巧帮助你完成从基于表格的布局到基于CSS的布局。

13-设计一个基于CSS的模板 – 这是一个教你创建基于CSS的模板页的基础教程。这个教程由下面几个部分构成:第一部分覆盖了在Photoshop CS*中的创建导航条按钮,第二部分:创建背景接下来的清单是标题和页面布局,最后的部分在XHTML和CSS中实现。

下载

14-使用CSS布局跳出常规布局- 如果你理解了基于表格布局的工作方式,你能通过合并或拆分表格创建你随心所欲的布局。就这个目标(同时支持灵活性和可维护性),CSS能够提供比基于表格更多地东西。Jina Bolton的教程解释如何达到这个目标。

15-高级CSS教程:手把手- 这个教程的终极目标创建一个CSS布局,这个CSS布局精确地重组了原有使用table的WebReference.com的布局。

16-了解CSS布局的6个关键要素- 本文讲述了6件基于CSS布局需要了解的事情:盒模型(Box Model),浮动栏(Floated Columns) (译者注:float是WEB布局最重要的一个属性了)。使用Em来设置尺寸(Sizing Using Ems),图片替换(Image Replacement),浮动导航和Sprintes。

17-你会犯这些常见的博客布局错误吗?-讨论4个博客布局中常见而且易修复的错误。

18-页面布局-CSS页面布局中的浮动元素和定位元素实践指导。

你可以查看这些例子:Absolute Position within a relative box two floated boxes using a border to provide the background for a column

19-Site in an Hour- 使用复杂CCS布局完成简单的工作。

关于布局的最佳资源

下面的大多数这些资源不需要许可就能直接使用,然而,其中的一些需要先发邮件确认一下是否可以使用这些资源。因此,在使用之前最好先检查资源的版权信息。

20-简单CSS页面布局- 这里有一套2栏和3栏的CSS布局。

你可以通过这里查看这些样例 Liquid three column layout, Left aligned, set width and Liquid insanity.

21-完美的三栏变宽布局(百分比定宽度)The Perfect 3 Column Liquid Layout (Percentage widths)- 没有CSS hack(译者注:不知道怎么翻译,点击这里查看解释). 良好地收索引擎优化.无图. 无Javascript. 跨浏览器 和IPHONE设备兼容

你可以通过这里查看样例 Liquid three column layout, Left aligned, set widthLiquid insanity. (译者注:这里的链接和上面重复了,哎,原文的错误吧)

22-CSS模板和样例

你可以通过这里查看这些样例 3 columns fixed centered, fixed Box totallycentered and 3 columns, alldynamic

23-IM 布局- IM 布局是一种简单地的CSS布局系统,IM布局提供了全A级的浏览器的支持。

你可以通过这里查看这些样例: The Holy Grail 3 Column Layout, The Classic Blog Layout The Multi Column Layout.

24-CSSplay - CSS布局列表

你可以通过这里查看这些样例:Cross browser FIXED, Three columns and CSS Frame – The Holy Grill.

25-Layoutgala - 基于同样的的标记l得到最大数量的不同的布局方式。没有CCS hack,没有CSS workaround ,良好的浏览器兼容性。40种不同布局。

你可以通过这里查看这些样例:Three fixed Columns, Three percentage columns and Liquid, three columns, hybrid widths (吐槽:没有等高,不好看).

26-Glish- 许多有用的跨浏览器布局技术

你可以通过这里查看这些样例: 3 columns, the holy grail, 2 columns, ALA style and 3 columns, all fluid

27-Thenoodleincident- CSS 从简单的单盒到3盒并增加一个顶部条,所有都是变宽。

28-The Layout Reservoir- 很多有用的CSS布局技术

你可以通过这里查看这些样例: 2 columns – left menu, 3 columns – flanking menus Auto-width Margins .

29-The only CSS layout you need- 在这篇文章中将会为你展现10个基于同一的HTML的不同的的布局。

你可以通过这里查看这些样例: Three column CSS layout – left and right menu, Two column CSS layout – top and left menuThree column CSS fluid layout: 100% width

30-另一个多栏布局-是一个创建当代流行的变宽的浮动布局的XHTML/CSS框架。这是一个多功能实用的布局。

点击这里下载.

31-Liquid Designs- 使用XHTML和CSS的变宽设计库。

最佳实践

如果你需要寻找一些布局灵感,你可以从下面的网站链接中找到。这些站点演示了CSS布局如何应用于不同类型的网站。查看这些网站是如何分成2栏或3栏,或混合宽栏和窄栏布局。

32-Helldesign

33-Silverbackapp

34-OS communications informatiques

35-Rockatee

36-Darrenhoyt

37-Makebetterwebsites

38-Elitetheme

39-Studio7designs

40-Brightcreative

(全文完)

【系统】某站点初始化及相关优化记录

一、搜集信息

1、服务器基本信息

操作系统:

[root@localhost ~]# cat /etc/redhat-release

Red Hat Enterprise Linux Server release 6.1 (Santiago)

[root@localhost ~]# uname -r

2.6.32-131.0.15.el6.x86_64

CPU

[root@localhost ~]# cat /proc/cpuinfo

物理cpu个数(看physical id)

[root@localhost ~]# cat /proc/cpuinfo | grep ‘physical id’ | sort |uniq| wc -l

2

有两个物理CPU

每个物理CPU的核数(cores)

[root@localhost ~]# cat /proc/cpuinfo | grep ‘cpu cores’ | sort |uniq| awk -F: ‘{print $2}’

4

每个物理CPU的核数为4个

逻辑CPU的个数(即系统所有的核数,又称逻辑CPU的个数)

[root@localhost ~]# cat /proc/cpuinfo | grep ‘processor’ | sort |wc -l

8

物理CPUX每个物理CPU的cores=逻辑CPU的个数,如果不等,说明服务器可能支持超线程技术

CPU型号

[root@www ~]# cat /proc/cpuinfo | grep ‘model name’| uniq

model name      : Intel(R) Xeon(R) CPU           E5504  @ 2.00GHz

Memory

总量(单位为M)

[root@localhost ~]# free -m |grep ‘Mem:’| awk ‘{print $2}’

7863

Swap

[root@localhost ~]# free -m |grep ‘Swap:’| awk ‘{print $2}’

10047

硬盘(Disk)

[root@jiankong ~]# fdisk -l

一块硬盘 sda 160G

分区情况

[root@localhost ~]# df -h

按照默认分区方式,使用LVM

网卡

[root@localhost ~]# lspci | grep ‘Ether’

07:00.0 Ethernet controller: Intel Corporation 82576 Gigabit Network Connection (rev 01)

07:00.1 Ethernet controller: Intel Corporation 82576 Gigabit Network Connection (rev 01)

两块intel 1000M网卡

IP地址

[root@localhost ~]# ifconfig | grep ‘inet addr:’| sed ‘s/inet addr://’| sed  ‘s/Bcast://’| awk ‘{print $1}’

或者

[root@localhost ~]#  ifconfig |  grep ‘inet addr:’| awk -F[:" "]+ ‘{print $4}’

211.xx.xx.80

127.0.0.1

hostname

[root@localhost ~]# hostname

www.xxx.cn

DNS

[root@localhost ~]# cat /etc/resolv.conf | grep ‘nameserver’ | awk ‘{print $2}’

21x.xx.xx.1

2、系统优化(因为主要提供的是http(tcp)服务)所以优化的重点在tcp

1、一些说明

因为Linux的网络通信主要通过socket(IP地址+端口)套接字抽象层,用来接收应用程序的读写数据缓冲区以及其它基础结构。在经过传输层,IP层,物理网卡传到接收端的网卡,然后网卡会向内核发送一个中断,然后内核调用内核中断处理程序将网卡中的报文传到内核的内存中,并调度网络协议栈来处理之。输入报文在一个与设备相关的队列中排队,最后经过重重验证将报文置于正确的socket的度缓冲区中。

http://www.360doc.com/content/09/0117/09/48648_2350706.shtml

 

2、内核参数调优机制

systcl 参数位于 sysctl.net.core,sysctl.net.ipv4,与之相关联的/proc项为

/proc/sys/net/core,/proc/sys/net/ipv4

有些参数可能没有是因为在内核编译的时候进行编译。

3、核心内核参数

主要针对内核socket缓冲区(读,写)。

应用程序通过socket()系统调用创建一个通信短点。每个socket都会关联一个读缓冲区和写缓冲区。

socket接收缓冲区保存了从远程主机发过来的数据,应用程序通过执行read()来读取这些数据,若缓冲区已满,则会丢弃后续的数据。

socket发送缓冲区保存了应用程序在发送到远程主机之前写入socket的数据。如果写缓冲区没有足够的大小,则会阻塞write()系统调用。

4、调整一些参数

net.core.netdev_max_backlog=50000//在ip层之下可以保存的报文数,默认1000

net.core.somaxconn=8192//默认128,允许并发的最大连接数

net.ipv4.tcp_fin_timeout =30//表示如果scoket是本端要求关闭,则在FIN_WAIT_2的时间,默认是60

net.ipv4.tcp_keepalive_time = 1200//默认为7200

net.ipv4.tcp_syncookies=1//有效防止syn洪水攻击

net.ipv4.tcp_tw_reuse=1//允许将TIME_WAIT的socket直接用于其他连接

net.ipv4.tcp_tw_recycle=1//将位于TIME_WAIT快速回收

net.ipv4.tcp_max_syn_backlog=8192//表示syn队列的长度,默认为1024

net.ipv4.tcp_max_tw_buckets=8000 //表示系统可以存在TIME_WAIT socket的数量,默认18000

net.ipv4.ip_local_port_range= 1024 65535 //可用的非特权端口的数量 默认为32768 61000

将上述值写到/etc/sysctl.conf 中

然后 sysctl -p

6、修改应用程序能打开的文件描述符的数量默认为1024

[root@www ~]# cat /usr/include/bits/typesizes.h |grep ‘__FD_SETSIZE’

#define __FD_SETSIZE            1024

3、关闭不必要的服务

这里留下crond(计划任务守护进程)

irqblance(优化中断分配,提升性能和降低能耗)

network

sshd

syslogd(日志服务守护进程)

iptables(待定)

可以通过netsysy –level 345 进行设置

4、关掉SELinux

[root@www ~]# getenforce

Enforcing

[root@www ~]# vim /etc/sysconfig/selinux

SELINUX=disabled

5、YUM源

本地YUM源

[root@www ~]# cat /etc/yum.repos.d/rhel6.repo

[yumrhel6]

name=yumrhel6

baseurl=file:///usr/src/rhel6.1/

enabled=1

gpgcheck=0

6、安装相关工具软件

yum -y install gcc gcc-c++ cmake autoconf libpng libpng-devel libjpeg libjpeg-devel freetype freetype-devel libxml2 libxml2-devel zlib zlib-devel glibc glibc-devel glib2 glib2-devel bzip2 bzip2-devel ncurses ncurses-devel curl curl-devel e2fsprogs e2fsprogs-devel libidn libidn-devel openssl openssl-devel

7、下载相关软件的源码包

[root@www ~]# cd /usr/local/src

[root@www src]# mkdir software

[root@www src]# cd software/

下载nginx的最新稳定版

[root@www software]# wget http://nginx.org/download/nginx-1.0.10.tar.gz

下载nginx URL重写所需要的正则表达式库pcre

[root@wwwsoftware]#wget http://cdnetworks-kr-1.dl.sourceforge.net/project/pcre/pcre/8.20/pcre-8.20.tar.gz

下载php-5.3.8最新稳定版

[root@wwwsoftware]#wget   http://cn2.php.net/get/php-5.3.8.tar.gz/from/this/mirror

下载mysql-5.5.19

[root@wwwsoftware]#wget http://mysql.cdpa.nsysu.edu.tw/Downloads/MySQL-5.5/mysql-5.5.19.tar.gz

下载libmcrypt

[root@wwwsoftware]#wget ftp://mcrypt.hellug.gr/pub/crypto/mcrypt/libmcrypt/libmcrypt-2.5.7.tar.gz
下载 mcrypt

[root@wwwsoftware]#wget http://cdnetworks-kr-2.dl.sourceforge.net/project/mcrypt/MCrypt/2.6.8/mcrypt-2.6.8.tar.gz

下载libiconv

[root@www software]# wget http://ftp.gnu.org/pub/gnu/libiconv/libiconv-1.14.tar.gz

下载memcache

[root@www software]# wget http://pecl.php.net/get/memcache-3.0.6.tgz

下载mhash

[root@wwwsoftware]#wget http://downloads.sourceforge.net/project/mhash/mhash/0.9.9.9/mhash-0.9.9.9.tar.bz2

下载 eaccelerator

[root@wwwsoftware]#wget http://cdnetworks-kr-1.dl.sourceforge.net/project/eaccelerator/eaccelerator/eAccelerator%200.9.6.1/eaccelerator-0.9.6.1.zip

下载 pdo_mysql

[root@www software]# wget http://pecl.php.net/get/PDO_MYSQL-1.0.2.tgz

下载 ImageMagick

[root@wwwsoftware]#wget ftp://mirror.aarnet.edu.au/pub/imagemagick/ImageMagick-6.7.3-10.tar.gz

下载 imagick-

[root@www software]# wget http://pecl.php.net/get/imagick-3.1.0b1.tgz

 

 

8、安装

安装PHP其所需的库

libiconv 字符编码转换

[root@www software]# tar -zvxf libiconv-1.14.tar.gz

[root@www software]# cd libiconv-1.14

[root@www libiconv-1.14]# ./configure –prefix=/usr/local/

[root@www libiconv-1.14]# make && make install

libmcrypt 加密函数库

[root@www libiconv-1.14]# cd ..

[root@www software]# tar -zvxf libmcrypt-2.5.7.tar.gz

[root@www software]# cd libmcrypt-2.5.7

[root@www libmcrypt-2.5.7]# ./configure

[root@www libmcrypt-2.5.7]# make && make install

[root@www libmcrypt-2.5.7]# cd libltdl/

[root@www libltdl]# /sbin/ldconfig

ldconfig命令的用途,主要是在默认搜寻目录(/lib和/usr/lib)以及动态库配置文件/etc/ld.so.conf内所列的目录下,搜索出可共享的动态链接库(格式如前介绍,lib*.so*),进而创建出动态装入程序(ld.so)所需的连接和缓存文件.缓存文件默认为/etc/ld.so.cache,此文件保存已排好序的动态链接库名字列表.
[root@www libltdl]# ./configure  –enable-ltdl-install

[root@www libltdl]# make && make install

将/usr/local/include 放入/etc/ld.so.conf

[root@www libltdl]# vim /etc/ld.so.conf

[root@www libltdl]# cat /etc/ld.so.conf

include ld.so.conf.d/*.conf

/usr/local/lib

mhash

[root@www libltdl]# cd ..

[root@www libmcrypt-2.5.7]# cd ..

[root@www software]# tar jvxf mhash-0.9.9.9.tar.bz2

[root@www mhash-0.9.9.9]# cd mhash-0.9.9.9

[root@www mhash-0.9.9.9]# ./configure

[root@www mhash-0.9.9.9]# make && make install

mcrypt 加解密

[root@www libltdl]# cd ..

[root@www software]# tar -zvxf mcrypt-2.6.8.tar.gz

[root@www software]# cd mcrypt-2.6.8

[root@www mcrypt-2.6.8]# ldconfig

[root@www mcrypt-2.6.8]# ./configure

[root@www mcrypt-2.6.8]# make && make install

安装Mysql-5.5.19

http://dev.mysql.com/doc/refman/5.5/en/installing-source-distribution.html

[root@www software]# groupadd mysql

[root@www software]# useradd -g mysql mysql

[root@www software]# tar zvxf mysql-5.5.19.tar.gz

[root@www software]# cd mysql-5.5.19

[root@www mysql-5.5.19]# cmake .(注意是个点)

[root@www mysql-5.5.19]# make && make install

安装目录在/usr/local/mysql

[root@www mysql-5.5.19]# chown mysql.mysql /usr/local/mysql

[root@www mysql-5.5.19]# cd /usr/local/mysql/

[root@www mysql]# scripts/mysql_install_db –user=mysql –group=mysql

[root@www mysql]# cp support-files/my-medium.cnf /etc/my.cnf

[root@www mysql]# chown mysql -R data/

[root@www mysql]# bin/mysqld_safe –user=mysql &

[root@www mysql]# cp support-files/mysql.server /etc/rc.d/init.d/mysqld

 

因为本机不提供mysql服务,可以将其关掉

安装php5.3

[root@www software]# tar zvxf php-5.3.8.tar.gz

[root@www software]# cd php-5.3.8

[root@www php-5.3.8]# ./configure –prefix=/usr/local/php –enable-fpm –with-config-file-path=/etc –with-libxml-dir –with-openssl –with-zlib –enable-bcmath   –with-bz2 –with-curl –with-curlwrappers –enable-ftp –with-gd –with-jpeg-dir  –with-png-dir –with-zlib-dir –with-freetype-dir –enable-gd-native-ttf –with-mhash –enable-mbstring –with-mcrypt –with-mysql=/usr/local/mysql/ –with-mysqli=/usr/local/mysql/bin/mysql_config –enable-soap –enable-sockets –enable-zip  –enable-shmop –with-iconv-dir=/usr/local

 

[root@www php-5.3.8]# make ZEND_EXTRA_LIBS=’-liconv’

[root@www php-5.3.8]# make install

安装php扩展模块

memcache

[root@www php-5.3.8]# cd ..

[root@www software]# tar zvxf memcache-3.0.6.tgz

[root@www software]# cd memcache-3.0.6

[root@www memcache-3.0.6]# /usr/local/php/bin/phpize

Configuring for:

PHP Api Version:         20090626

Zend Module Api No:      20090626

Zend Extension Api No:   220090626

[root@www memcache-3.0.6]# ./configure –with-php-config=/usr/local/php/bin/php-config

[root@www memcache-3.0.6]# make && make install

eaccelerator
[root@www memcache-3.0.6]# cd ..

[root@www software]# unzip eaccelerator-0.9.6.1.zip

[root@www software]# cd eaccelerator-0.9.6.1

[root@www eaccelerator-0.9.6.1]# /usr/local/php/bin/phpize

Configuring for:

PHP Api Version:         20090626

Zend Module Api No:      20090626

Zend Extension Api No:   220090626

[root@www eaccelerator-0.9.6.1]# ./configure –enable-eaccelerator –with-php-config=/usr/local/php/bin/php-config

[root@www eaccelerator-0.9.6.1]#make && make install

pdo_mysql

[root@www eaccelerator-0.9.6.1]# cd ..

[root@www software]# tar zvxf PDO_MYSQL-1.0.2.tgz

[root@www software]# cd PDO_MYSQL-1.0.2

[root@www PDO_MYSQL-1.0.2]# /usr/local/php/bin/phpize

Configuring for:

PHP Api Version:         20090626

Zend Module Api No:      20090626

Zend Extension Api No:   220090626

 

[root@wwwPDO_MYSQL-1.0.2]#./configure –with-php-config=/usr/local/php/bin/php-config –with-pdo-mysql=/usr/local/mysql/

[root@www PDO_MYSQL-1.0.2]# make && make install

ImageMagick

[root@www PDO_MYSQL-1.0.2]# cd ..

[root@www software]# tar zvxf ImageMagick-6.7.3-10.tar.gz

[root@wwwsoftware]#cd ImageMagick-6.7.3-10 LDFLAGS=”-L/usr/lib” CPPFLAGS=”-I/usr/include” –enable-shared

[root@www ImageMagick-6.7.3-10]# make && make install

imagick

[root@www ImageMagick-6.7.3-10]#  cd ..

[root@www imagick-3.1.0b1]# tar zvxf imagick-3.1.0RC1.tgz
[root@www software]# cd imagick-3.1.0RC1

[root@www imagick-3.1.0b1]# /usr/local/php/bin/phpize

Configuring for:

PHP Api Version:         20090626

Zend Module Api No:      20090626

Zend Extension Api No:   220090626

[root@www imagick-3.1.0b1]# ./configure –with-php-config=/usr/local/php/bin/php-config

[root@www imagick-3.1.0b1]# make && make install

编辑php.ini
[root@www php-5.3.8]# cp php.ini-production /etc/php.ini

编辑php.ini,加入

extension_dir = ” /usr/local/php/lib/php/extensions/no-debug-non-zts-20090626/”

extension=”memcache.so”

extension=”pdo_mysql.so”

 

[root@www php-5.3.8]# mkdir /www

[root@www php-5.3.8]# mkdir /www/eaccelerator_cache

在php.ini最后加入如下

[eaccerlerator]

zend_extention=”/usr/local/php/lib/php/extensions/no-debug-non-zts-20090626/”

eaccerlerator.shm_size=”64″

eaccerlerator.cache_dir=”/www/eaccerlerator_cache”

eaccerlerator.enable=”1″

eaccerlerator.optmizer=”1″

eaccerlerator.check_mtime=”1″

eaccerlerator.debug=”0″

eaccerlerator.fliter=””

eaccerlerator.shm_max=”0″

eaccerlerator.shm_ttl=”3600″

eaccerlerator.shm_only=”0″

eaccerlerator.compress=”1″

eaccerlerator.compress_level=”9″

编辑php-fpm.conf

[root@www software]# groupadd www

[root@www software]# useradd -g www www

[root@www software]# chown www.www -R /www

[root@www etc]# pwd

/usr/local/php/etc

[root@www etc]# cp php-fpm.conf.default php-fpm.conf

[root@www etc]# /usr/local/php/sbin/php-fpm

[root@www etc]# lsof -i:9000

 

安装nginx

安装pcre

[root@www software]# tar zvxf pcre-8.20.tar.gz

[root@www software]# cd pcre-8.20

[root@www pcre-8.20]# ./configure

[root@www pcre-8.20]# make && make install

安装nginx

[root@www pcre-8.20]# cd ../

[root@www software]# tar zvxf nginx-1.0.10.tar.gz

[root@www software]# cd nginx-1.0.10

[root@www nginx-1.0.10]# ./configure –prefix=/usr/local/nginx –user=www –group=www  –with-http_ssl_module –with-http_stub_status_module –with-http_flv_module

[root@www nginx-1.0.10]# make && make install

编辑nginx.conf

 

[root@www nginx-1.0.10]# cd /usr/local/nginx/conf/

[root@www conf]# grep -v ‘#’ nginx.conf | grep -v ‘^$’

user  www;

worker_processes  12;

error_log  /www/logs/error.log;

pid        /www/logs/nginx.pid;

worker_rlimit_nofile 65535;

events {

use epoll;

worker_connections  50000;

}

http {

include       mime.types;

default_type  application/octet-stream;

log_format  main  ‘$remote_addr – $remote_user [$time_local] “$request” ‘

‘$status $body_bytes_sent “$http_referer” ‘

‘”$http_user_agent” “$http_x_forwarded_for”‘;

access_log  /www/logs/access.log  main;

sendfile        on;

keepalive_timeout  65;

fastcgi_connect_timeout 300;

fastcgi_send_timeout 300;

fastcgi_read_timeout 300;

fastcgi_buffer_size 64k;

fastcgi_buffers 4 64k;

fastcgi_busy_buffers_size 128k;

gzip  on;

gzip_min_length 1k;

gzip_buffers 4 16k;

gzip_http_version 1.1;

gzip_comp_level 2;

gzip_types text/plain application/x-javascript text/css aplication/xml;

tcp_nopush     on;

tcp_nodelay   on;

server {

listen       80;

server_name  www.xxx.cn xxx.cn;

location / {

root   /www/html;

index  index.php index.html index.htm;

}

error_page   500 502 503 504  /50x.html;

location = /50x.html {

root   html;

}

location ~ \.php$ {

root           /www/html;

fastcgi_pass   127.0.0.1:9000;

fastcgi_index  index.php;

include        fastcgi.conf;

}

location ~ .*\.(jpg|png|gif|jpeg|swf|bmp)$

{

expires 20d;

}

location ~ .*\.(js|css)$

{

expires 2h;

}

}

server {

listen       80;

server_name  bbs.xxx.cn;

location / {

root   /www/bbs;

index  index.php index.html index.htm;

}

location ~ \.php$ {

root           /www/html;

fastcgi_pass   127.0.0.1:9000;

fastcgi_index  index.php;

include        fastcgi.conf;

}

location ~ .*\.(jpg|png|gif|jpeg|swf|bmp)$ {

expires 20d;

}

location ~ .*\.(js|css)$ {

expires 2h;

}

}

}

检验配置文件是否正确

[root@www nginx]# /usr/local/nginx/sbin/nginx -t

nginx: the configuration file /usr/local/nginx/conf/nginx.conf syntax is ok

nginx: configuration file /usr/local/nginx/conf/nginx.conf test is successful

启动nginx

[root@www nginx]# /usr/local/nginx/sbin/nginx

开机启动

[root@www nginx]# echo ‘ulimit -Hn 65538′>>/etc/rc.local

[root@www nginx]# echo ‘/usr/local/nginx/sbin/nginx’>>/etc/rc.local

[root@www nginx]# grep -v ‘#’ /etc/rc.local

touch /var/lock/subsys/local

ulimit -Hn 65538

/usr/local/nginx/sbin/nginx

 

压力测试

[root@jiankong src]# wget http://blog.s135.com/soft/linux/webbench/webbench-1.5.tar.gz

[root@jiankong src]#  tar zvxf webbench-1.5.tar.gz

[root@jiankong src]# cd webbench-1.5

由于安装需要ctags软件

[root@jiankong webbench-1.5]# yum -y install ctags

另外手工创建

[root@jiankong webbench-1.5]# mkdir /usr/local/man

[root@jiankong webbench-1.5]# make

ctags *.c

[root@jiankong webbench-1.5]# make install

install -s webbench /usr/local/bin

install -m 644 webbench.1 /usr/local/man/man1

install -d /usr/local/share/doc/webbench

install -m 644 debian/copyright /usr/local/share/doc/webbench

install -m 644 debian/changelog /usr/local/share/doc/webbench

 

Nginx 相关脚本

启动,关闭脚本

#!/bin/bash

#This a script for start,stop,restart nginx

# Created by chenqing

#Last modified 2011-12-11

 

if [ $# !eq 1 ] ;then

echo ‘需要一个合适的参数’

Useage

exit 1

fi

function Useage {

echo “basename($0) {start|stop| restart}”

}

【web】山东理工大学虚拟主机管理系统开发(Linux)

经过将近一周的不断写,调,测,基本的功能都实现了,下一步将实现更多的功能。

已实现功能:

1系统篇

  • cpu利用率
  • 内存使用
  • 磁盘使用
  • uptime

2、用户

3、http

  • 服务重启

4、mysql

  • 编辑
  • 集成phpmyadmin

5、FTP

  • 磁盘配额

6、日志

  • 登录
  • 操作

待实现功能

1、打印

2、文件的在线管理

3、面向多用户(类似epanel)

 

Web开发:7款非常棒的调色板工具

7款非常棒的调色板工具:

1. Kuler

Kuler

基于web的AIR应用。

2. Color Scheme Designer

Color Scheme Designer

同样也是基于web的色彩应用。

3. COPASO

COPASO

也是基于web,很值得关注的一个选择。

4. Palettes

Palettes

Palettes是一款iOS调色板应用,针对iPhone和iPad。

5. Think Ink

Think Ink

Think Ink是iPhone应用。

6. Adobe Ideas

Adobe Ideas

Adobe Ideas并不是调色应用,它是最快方法转换iPhone照片专为调色板的工具。

7. Saturation

 

通过Saturation,可以浏览Kuler调色板库。

英文来源:http://thenextweb.com/dd/2011/04/03/7-tools-for-managing-your-color-palettes

译文来源: http://www.oschina.net/news/17215/7-tools-for-managing-your-color-palettes

玉米机械化生产信息化交流平台,初步建成

系统需求:新闻系统+论坛

语言:PHP+MYSQL

已实现功能:

  1. 用户登陆注册及相应权限管理(ajax);
  2. 栏目无限分级,可定制,可排序,可批量;
  3. 文章,添加,修改,批量删除等,集成富体验的ckeditor,YUI的calender;
  4. 首页滚动新闻图片的无刷新上传(分类别);
  5. 首页新闻列表板块实现可定制;
  6. 其中还包括spry面板,jquery图片滚动,以及后台导航菜单的滑动,以及页面访问统计的一些东西;
  7. 集成discuz 7.2;
  8. 实现利用URL重写,网站伪静态;

待实现功能

  1. 实现后台栏目的拖放排序;
  2. 集成smarty,实现全站静态化;
  3. 全站更多的可定制;
  4. 走向面向对象设计;

《精通css:高级web标准解决方案》读书总结(第一章)

第一章:基础知识

1.良好的代码结构

  • 使用有意义的标记(h1~h6,ul、ol、dl,strong、em,blockquote、cite,filedset、legend、label,caption、thead、tebody);
  • 次优的解决方案就是使用现有的元素,并且通过id或类给它们赋予额外的意义,这将在文档中添加额外的结构,提供有用的钩子;
  • div和span(inline);
  • DOCTYPE(一定要在站点的所有页面添加形式完整的DOCTYPY声明,并且在使用HTML时,使用严格的DTD);

2.为样式找到目标

  • 常用的选择器:标签选择器,后代选择器(#id h1),伪类(:link,:hover),子代选择器(>)选择元素的直接后代,相邻选择器(+)选择该元素之后的第一个,属性选择器……
  • 层叠和特殊性:在主题标签(body)上添加id或者类名,可以创造“强调当前页面”的效果;

3.规划、组织、维护样式表

  • <link />
  • <style>@import();</style>
  • 注释/*~~~~~~~~~*/

Web前端开发工程师必读的15个设计博客(分享)

导读:Web设计是一个不断变化的领域,因此掌握最新的发展趋势及技术动向对设计师来说非常重要,无论是学习新技术,还是寻找免费资源与工具,设计博客都是很不错的去处。本文向大家推荐15个非常不错的设计博客。

1. Smashing Magazine

Smashing Magazine

Smashing Magazine创建于2006年,是最好的设计博客之一,有很多Web设计和开发方面的高质量文章,内容涉及HTML5、CSS、JavaScript、Photoshop、Wordpress、壁纸和网站可用性。

2. Net Tuts

Net Tuts

Net Tuts是一个高品质的设计博客,发布技术,技巧方面的文章和教程,内容涉及HTML、CSS、 Javascript、CMS、ASP.net、PHP、Ruby以及数据库等。

3. PSD Tuts

PSD Tuts

PSD Tuts是一个非常不错的Photoshop教程博客,隶属于Tuts+网站群,是寻找有关Photoshop图形设计和效果技术教程的好去处。

4. Six Revision

Six Revision

Six Revisions由Web开发工程师Jacob Gube创建于2008年,发布Web设计和开发方面非常有用的技巧、资源和教程等内容。

5. We Function

We Function

wefunction是一个非常好的设计博客,发布非常有用的Web设计和开发方面的资源和教程,还有Wordpress主题等。

6. Smashing Apps

Smashing Apps

Smashing apps主要向Web设计和开发者分享非常有用的免费在线工具,另外还有很多其它的免费教程和资源。

7. Fuel Your Creativity

Fuel Your Creativity

Fuelyourcreativity顾名思义是重点关注创意的一个设计博客,内容主要有创意工具、技术发展趋势以及免费资源等。

8. Think Vitamin

Think Vitamin

Think vitamin创建于2006年,内容涉及JavaScript、HTML、CSS和Ruby on Rails等方面。

9. Instant Shift

Instant Shift

Instant shift是Web开发人员最喜欢去的网站,内容涉及网页设计、图标、免费工具、壁纸、Wordpress等等。

10. Web Designer Wall

Web Designer Wall

Web designer的作者是Nick La,拥有丰富的设计经验,其博客内容涉及设计思想、教程和现代设计趋势等方面。

11. Noupe

Noupe

Noupe由Noura Yehia创建于2007年,内容涉及CSS、Ajax、JavaScript、Photoshop、Wordpress以及网页设计等。

12. Web Design Ledger

Web Design Ledger

Web Design Ledger是一个分享设计技巧、教程和设计工具的平台,是一个非常好的设计博客。

13. Designm.ag

Design Mag

DesignM.ag成功的为Web设计和开发人员建立了一个基于社区的平,和其它博客一样有很多很多吸引力的内容。

14. Abduzeedo

Abduzeedo

Abuzeedo由Fabio sasso创建于2006年,是最流行的设计博客之一,内容主要是关于设计教程、壁纸以及访谈。

15. Specky Boy

Specky Boy

Speckyboy创建于2007,经过多年发展成为了流行的设计博客,发布的内容涉及网页设计教程、免费资源、平面设计以及移动开发等。

编译来源:梦想天空

英文来源:15 Awesome Web Design Blogs Every Web Designer Should Follow