下面是zborder主题自适应网页设计CSS源码，值得学习！
/*pagenavi*//*
Theme Name:zBorder
Theme URI:http://zww.me/wordpress-theme-zborder.z-turn
Description:It is a simple WordPress theme without any plugin needed, little images, custom-menu, widgets, threaded-comments. For WordPress version 3.7+
Version:0.9.5
Author:zwwooooo
Author URI:http://zww.me/
Tags:custom-menu, threaded-comments, two-columns, fixed-layout, right-sidebar, theme-options, responsive-layoutLicense:GNU General Public License, v2 (or newer)
License URI:http://www.gnu.org/licenses/old-licenses/gpl-2.0.html*/
/* RESET -------- */
*{
margin:0;
padding:0;
}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{
margin:0;
padding:0;
border:0;
font-size:100%;
vertical-align:baseline;
}/* BASIC -------- */
abbr[title], acronym[title]{
border-bottom:thin solid;
cursor:help;
}
body{
background:#e2e1e0;
font-size:12px;
font-family:"Century Gothic",Verdana,Tahoma,Arial,Helvetica,sans-serif;
color:#333;
text-align:left;
}
h1,h2,h3,h4,h5,h6{
font-weight:bold;
font-family:"Century Gothic",Verdana,Tahoma,Arial,"Microsoft Yahei";
}
h1{
font-size:24px;
line-height:30px;
}
h2{
font-size:20px;
line-height:26px;
}
h3{
font-size:16px;
line-height:24px;
}
h4{
font-size:14px;
line-height:20px;
}
h5{
font-size:14px;
line-height:20px;
}
h6{
font-size:14px;
line-height:20px;
}
small{
font-size:10px;
line-height:16px;
}
dl{
font-size:12px;
}
dt{
font-weight:bold;
}
a{
color:#3f6c18;
text-decoration:none;
outline:none;
}
a:hover{
color:#000;
text-decoration:none;
}
fieldset,img{
border:none;
}
hr{
color:#ddd;
background-color:#ddd;
height:1px;
border:0px;
}
.clear{
clear:both;
margin:0;
padding:0;
}
.hidden{
display:none;
}/* #header -------- */
#header{
}
/* navi and search */
.navi_and_search{
background:#666;
border-top:1px solid #777;
border-bottom:1px solid #777;
}
.navi_and_search_inner{
max-width:980px;
margin:0 auto -2px;
}
/* #navi */
#navi{
float:left;
max-width:730px;
margin:0 auto;
font-size:14px;
text-shadow:0 1px 0 #000;
}
#navi ul{
list-style:none;
}
#navi ul.navi_mobile{
display:none;
}
#navi li{
float:left;
position:relative;
}
#navi li a,
#navi ul.navi_mobile li{
display:inline-block;
line-height:42px;
height:42px;
margin-right:28px;
color:#eee;
text-shadow:0 1px 0 #222,1px 2px 0 #555;
}
#navi li a.home,
#navi ul.navi_mobile li{
height:26px;
line-height:24px;
margin-top:7px;
padding: 0 15px;
color:#fff;
font-weight:bold;
letter-spacing:3px;
background:#555;
border:1px solid #444;
border-radius:3px 3px 32px 3px;
}
#navi ul.navi_mobile li{
cursor:pointer;
margin-bottom:7px;
}
#navi li:hover a.home{
text-shadow:0 1px 0 #555,1px 2px 3px #000;
}
#navi ul li.current_page_item > a,
#navi ul li.current-menu-ancestor > a,
#navi ul li.current-menu-item > a,
#navi ul li.current-menu-parent > a,
#navi ul.navi-mobile li{
color:#a2c187;
}
#navi ul li:hover > a{
background:url(imgs/icons.png) no-repeat center 34px;
}
#navi ul li:hover > ul{
display:block;
}
#navi ul ul{
z-index:999;
display:none;
position:absolute;
top:42px;
left:0;
padding-top:1px;
background:#e2e1e0;
border:1px solid #bfbebe;
border-top:none;
box-shadow:0 3px 3px rgba(0,0,0,0.1);
}
#navi ul ul li{
float:none;
}
#navi ul ul li a{
display:block;
min-width:180px;
height:auto;
line-height:20px;
margin-right:0;
padding:5px 10px;
background:#e2e1e0;
color:#000;
text-shadow:none;
white-space:nowrap;
}
#navi ul ul li:hover > a{
background:#d9d8d7;
}
#navi ul ul ul{
z-index:9999;
left:100%;
top:-1px;
padding-top:0;
border-top:1px solid #bfbebe;
border-left:1px solid #f2f2f2;
}
/* #search */
#search{
position:relative;
float:right;
margin-top:8px;
width:230px;
height:24px;
font-size:12px;
background:#e2e1e0;
}
#search input#s{
width:165px;
height:24px;
line-height:24px;
background:#e2e1e0;
border:none;
color:#999;
padding:0 4px;
font-family:"Lucida Grande";
}
#search input#searchsubmit{
cursor:pointer;
position:absolute;
right:0;
top:-2px;
width:50px;
line-height:28px;
height:28px;
background:#333 url(imgs/icons.png) no-repeat 0 -30px;
border:none;
text-indent:-9999px;
}
#search input#searchsubmit:hover{
color:#fff;
background:#000 url(imgs/icons.png) no-repeat 0 -30px;
}
#search,#search input#s,
#search input#searchsubmit{
border-radius:6px;
}
/* search form in other area */
#sidebar .widget #searchform{
padding:10px 0;
}
.entry #searchform #s,
#sidebar .widget #searchform #s{
width:240px;
height:16px;
padding:5px 3px;
border:1px solid #c2c1c0;
background:#fff;
}
#sidebar .widget #searchform #s{
width:200px;
}
.entry #searchsubmit,
#sidebar .widget #searchsubmit{
cursor:pointer;
height:28px;
width:50px;
line-height:26px;
height:26px;
border:none;
background:#333 url(imgs/icons.png) no-repeat 0 -30px;
text-indent:-9999px;
}
.entry input#searchsubmit:hover,
#sidebar .widget input#searchsubmit:hover{
color:#fff;
background:#000 url(imgs/icons.png) no-repeat 0 -30px;
}1 2