《
CSS3网页制作实例 CSS3网页页面效果》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302332452013.htm
<strong>text-shadow:1px 1px 1px #0d4f6b;
background:-webkit-gradient(linear, left top, left bottom, from(#0ba7be), to(#0079ac));
-moz-transform:scale(1.05);
-webkit-transform:scale(1.05);
-moz-box-shadow:0 0 5px #666;
-webkit-box-shadow:0 0 5px #666;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;</strong>
}</code></pre>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
<html xmlns=" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style>
/*YAHOO! RESET*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,em,strong,dfn,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym {
border:0;
}
/*---------- END RESET ----------*/
/*------------------------------------*\
MAIN
\*------------------------------------*/
html{
font-size:100%;
height:101%;
}
body{
font-size:62.5%;
font-family:Arial, Verdana, sans-serif;
background:#fff;
color:#333;
}
#wrapper{
width:940px;
margin:0 auto;
padding:10px;
}
@font-face{
font-family: "GraublauWeb";
src: url(../fonts/GraublauWeb.eot);
,CSS3网页制作实例 content属性的综合用法;src: local('GraublauWeb'), local('GraublauWeb'),
url(../fonts/GraublauWeb.otf) format('opentype');
}
@font-face{
font-family: "GraublauWebBold";
src: url(../fonts/GraublauWebBold.eot);
src: local('GraublauWebBold'), local('GraublauWebBold'),
url(../fonts/GraublauWebBold.otf) format('opentype');
}
/*------------------------------------*\
MISC
\*------------------------------------*/
hr { display:none; }
.hr { height:1px; border-top:1px solid #ccc; margin-bottom:18px; }
/*------------------------------------*\
TYPE
\*------------------------------------*/
/*--- HEADINGS ---*/
h1,h2,h3,h4,h5,h6{
font-family:"GraublauWeb",Helvetica, Arial, Verdana, sans-serif;
line-height:1.4em;
margin-bottom:18px;
font-weight:bold;
text-shadow:1px 1px 1px #999;
}
h1 { font-size:2.4em; }
h2 { font-size:2.0em; }
h3 { font-size:1.8em; }
h4 { font-size:1.6em; }
.caption{
margin-bottom:5px;
font-style:italic;
line-height:1em;
clear:both;
}
/*--- PARAGRAPHS ---*/
p{
font-size:1.2em;
line-height:1.5em;
margin-bottom:18px;
}
p#intro{
font-size:1.6em;
line-height:1.5em;
margin-bottom:1.5em;
font-family:Georgia, "Times New Roman", Times, serif;
text-align:justify;
-moz-column-count:3;
-moz-column-gap:20px;
-webkit-column-count:3;
-webkit-column-gap:20px;
column-count:3;
column-gap:20px;
}
/*--- LINKS ---*/
a{
color:#00f;
}
/*--- MISC ---*/
code{
font-family:"Courier New", "Lucida Console", Courier, monospace;
font-size:1.3em;
}
pre{
font-family:"Lucida Console", "Courier New", Courier, monospace;
padding:10px;
background:#ffc;
border:1px solid #ff8;
margin-bottom:18px;
clear:both;
}
pre strong{
font-weight:bold;
color:#000;
}
.comment{
color:#080;
}
/*------------------------------------*\
POLAROID
\*------------------------------------*/
.polaroid{
clear:both;
padding:10px 10px 50px 10px;
background:#fff;
border:1px solid #ececec; /* This border merges with the colour of the shadow in supporting browsers, but in non-supporting browsers the border acts as the edge of the image */
margin-bottom:18px;
-moz-box-shadow:1px 2px 5px #666666;
-webkit-box-shadow:1px 2px 5px #666666;
}
.small-polaroid{
clear:none;
padding:10px 10px 25px 10px;
-moz-transform:rotate(-4deg);
-webkit-transform:rotate(-4deg);
-webkit-transition: -webkit-transform 0.1s ease-in; /* Tells webkit to make a transition of a transform (defined below) */
}
.small-polaroid:hover{
z-index:100;
position:relative; /* Make the z-index work in Safari */
-moz-transform:rotate(4deg) scale(1.2);
-webkit-transform:rotate(4deg) scale(1.2);
}
/*------------------------------------*\
TABLES
\*------------------------------------*/
table{
font-size:1.2em;
width:100%;
margin-bottom:20px;
}
th{
font-weight:bold;
}
td,th{
border:1px solid #ccc;
padding:5px;
}
thead tr{
border-bottom:2px solid #ccc;
}
tbody tr:nth-of-type(odd){
background:#ffc;
}
/*--- EMPLOYEES ---*/
#employees .col{
width:25%;
}
#employees tbody tr:hover{
font-weight:bold,CSS3简单实例分析学习;
background:#ff8;
-moz-transform:scale(1.02);
-webkit-transform:scale(1.02);
-moz-box-shadow:0 0 5px #666;
-webkit-box-shadow:0 0 5px #666;
}
/*--- MATRIX ---*/
#employees .col{
width:20%;
}
#matrix tbody td:hover{
font-weight:bold;
background:#ff8;
-moz-transform:scale(1.02);
-webkit-transform:scale(1.02);
-moz-box-shadow:0 0 5px #666;
-webkit-box-shadow:0 0 5px #666;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
<div class="hr"><hr /></div>
<h2 class="caption">Box Shadow:</h2>
<p class="caption">Photos of me taken by <a href=" title="Photographer in Leeds">Suzanna Haworth</a>.</p>
<img src=" alt="An image of me riding trials" class="polaroid" />
<p class="caption clear">Hover these:</p>
<a href=" title="View this photo on Suzanna Haworth’s website"><img src=" alt="An image of me riding trials" class="polaroid small-polaroid" /></a>
<a href=" title="View this photo on Suzanna Haworth’s website"><img src=" alt="An image of me riding trials" class="polaroid small-polaroid" /></a>
<a href=" title="View this photo on Suzanna Haworth’s website"><img src=" alt="An image of me riding trials" class="polaroid small-polaroid" /></a>
<a href=" title="View this photo on Suzanna Haworth’s website"><img src=" alt="An image of me riding trials" class="polaroid small-polaroid" /></a>
<pre><code>
.polaroid{
clear:both;
padding:10px 10px 50px 10px;
background:#fff;
border:1px solid #ececec; <span class="comment">/* This border merges with the colour of the shadow in supporting browsers
but in non-supporting browsers the border acts as the edge of the image */</span>
margin-bottom:18px;
<strong>-moz-box-shadow:1px 2px 5px #666666;
-webkit-box-shadow:1px 2px 5px #666666;</strong>
}
.small-polaroid{
clear:none;
padding:10px 10px 25px 10px;
<strong>-moz-transform:rotate(-4deg);
-webkit-transform:rotate(-4deg);
-webkit-transition: -webkit-transform 0.1s ease-in; <span class="comment">/* Tells webkit to make a transition of a transform */</span></strong>
}
.small-polaroid:hover{
z-index:100;
position:relative; <span class="comment">/* Make the z-index work in Safari */</span>
<strong>-moz-transform:rotate(4deg) scale(1.2);
-webkit-transform:rotate(4deg) scale(1.2);</strong>
}
</code></pre>
</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "
document.write(unescape(",css3教程：弹性盒模型;%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-1856861-4");
pageTracker._trackPageview();
} catch(err) {}
</script>
</body>
</html>
.clear { clear:both; }
--> [
网站建设之]CSS3
网页制作实例:CSS3网页页面效果
CSS3网页制造实例：页面后果
text-shadow:1px 1px 1px #0d4f6b;
background:-webkit-gradient(linear, left top, left bottom, from(#0ba7be), to(#0079ac));
-moz-transform:scale(1.05);
-webkit-transform:scale(1.05);
-moz-box-shadow:0 0 5px #666;
-webkit-box-shadow:0 0 5px #666;
-moz-border-radius:10px;
,CSS3教程 使css3的属性在ie中正常显示;-webkit-border-radius:10px;
border-radius:10px;
}
/*------------------------------------*\
NAV
\*------------------------------------*/
#nav{
font-family:"GraublauWeb",Helvetica, Arial, Verdana, sans-serif;
width:220px;
float:left;
margin-bottom:18px;
}
#nav li a{
color:#fff;
font-size:1.6em;
font-weight:bold;
padding:10px;
display:block;
text-decoration:none;
background:#34ad4a;
text-shadow:1px 1px 1px #1c5e28;
background:-webkit-gradient(linear, left top, left bottom, from(#47b649), to(#34ad4a));
-webkit-transition: -webkit-transform 0.1s ease-in; /* Tells webkit to make a transition of a transform (defined below) */
}
#nav li:first-of-type a{
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
border-top-left-radius:10px;
border-top-right-radius:10px;
}
#nav li:last-of-type a{
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
}
#nav li a:hover{
background:#0079ac;
<div class="hr"><hr /></div>
<ul id="nav">
<li class="home-link"><a href="#">Home</a></li>
<li class="about-link"><a href="#">About</a></li>
<li class="portfolio-link"><a href="#">Portfolio</a></li>
<li class="services-link"><a href="#">Services</a></li>
<li class="contact-link"><a href="#">Contact</a></li>
</ul>
<pre><code>#nav{
font-family:"GraublauWeb",Helvetica, Arial, Verdana, sans-serif;
width:220px;
float:left;
margin-bottom:18px;
}
#nav li a{
color:#fff;
font-size:1.6em;
font-weight:bold;
padding:10px;
display:block;
text-decoration:none;
background:#34ad4a;
<strong>text-shadow:1px 1px 1px #1c5e28;
background:-webkit-gradient(linear, left top, left bottom, from(#47b649), to(#34ad4a));
-webkit-transition: -webkit-transform 0.1s ease-in; <span class="comment">/* Tells webkit to make a transition of a transform */</span></strong>
}
<strong>#nav li:first-of-type a{
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
border-top-left-radius:10px;
border-top-right-radius:10px;
}</strong>
<strong>#nav li:last-of-type a{
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px,CSS3教程 Transform-变形处理;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
}</strong>
#nav li a:hover{
background:#0079ac;
Tag：页面 效果 网页 网页制作 实例
/*------------------------------------*\
IPHONE
\*------------------------------------*/
@media screen and (max-device-width: 480px){
#wrapper { width:90%; }
pre { overflow:hidden; }
pre .comment { white-space:normal; }
}
</style>
</head>
<body id="home">
<div id="wrapper">
<h1>CSS Wizardry—CSS3 Examples & Progressive Enhancement</h1>
<p>All CSS shown corresponds to the elements directly above. The ID/class names are the same as used and all CSS3/progressive enhancement snippets are shown in bold.<br />By <a href=" title="Web Standards Design and Development">Harry Roberts—CSS Wizardry</a>. <a href=" and Progressive Enhancement by @csswizardry title="Tweet a link to this page">Please Tweet</a>.</p>
<h2 class="caption">Columns:</h2>
<p id="intro">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In accumsan diam vitae velit. Aliquam vehicula, turpis sed egestas porttitor, est ligula egestas leo, at interdum leo ante ut risus. Cras ut nunc. Phasellus imperdiet, urna in volutpat venenatis, mauris pede euismod pede, malesuada euismod turpis enim at arcu. Sed placerat accumsan mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam suscipit, quam at placerat interdum, quam turpis placerat pede, eget sagittis arcu sapien vel mauris. Nulla faucibus turpis eget tellus. Integer mattis dapibus lorem. Donec pretium lorem vel ligula. Fusce semper consequat dui. Integer ac mi. Cras faucibus nulla quis ipsum. Nunc augue turpis, tristique et, hendrerit id, hendrerit eu, lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur vulputate. Proin et erat id ipsum accumsan porttitor. Suspendisse tellus arcu, scelerisque vel, feugiat sit amet, aliquet sed, velit. Aenean eget erat id massa sodales.</p>
<pre><code>p#intro{
font-size:1,CSS3教程 pointer-events属性值详解.6em;
line-height:1.5em;
margin-bottom:1.5em;
font-family:Georgia, "Times New Roman", Times, serif;
text-align:justify;
<strong>,CSS3教程 overflow属性超过一行显示省略号;-moz-column-count:3;
-moz-column-gap:20px;
-webkit-column-count:3;
-webkit-column-gap:20px;
column-count:3;
column-gap:20px;</strong>
}</code></pre>
<script type="text/javascript"><!--
google_ad_client = "pub-0849827290095392";
/* 728x90, 创立于 09-3-19 */
google_ad_slot = "6829013231";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="
</script>
<div class="hr"><hr /></div>
<h2 class="caption">Transforms:</h2>
<h3 class="caption clear">Hover rows/cells list items…</h3>
<table id="employees">
<colgroup>
<col id="employee-name" class="col" />
<col id="employee-type" class="col" />
<col id="employee-edit" class="col" />
<col id="employee-remove" class="col" />
</colgroup>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>,CSS3教程 box-sizing属性;Edit</th>
<th>Remove</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ted Harris</td>
<td>Admin</td>
<td><a href="#">Edit details…</a></td>
<td><a href="#">Delete user…</a></td>
</tr>
<tr>
<td>Jane Peters</td>
<td>Sales</td>
<td><a href="#">Edit details…</a></td>
<td><a href="#">Delete user…</a></td>
</tr>
<tr>
<td>Sam Edwards</td>
<td>Web Developer</td>
<td><a href="#">Edit details…</a></td>
<td><a href="#">Delete user…</a></td>
</tr>
<tr>
<td>Allen Jones</td>
<td>Web Developer</td>
<td><a href="#">Edit details…</a></td>
<td><a href="#">Delete user…</a></td>
</tr>
</tbody>
</table>
<table id="matrix">
<colgroup>
<col id="matrix-title" class="col" />
<col id="matrix-ted" class="col" />
<col id="matrix-jane" class="col" />
<col id="matrix-sam" class="col" />
<col id="matrix-allen" class="col" />
</colgroup>
<thead>
<tr>
<th></th>
<th>Ted</th>
<th>Jane</th>
<th>Sam</th>
<th>Allen</th>
</tr>
</thead>
<tbody>
<tr>,CSS3改变文本选中的默认颜色;
<th>Age</th>
<td>45</td>
<td>31</td>
<td>34</td>
<td>27</td>
</tr>
<tr>
<th>Salary</th>
<td>£21,000</td>
<td>£26,000</td>
<td>£32,000</td>
<td>£29,000</td>
</tr>
,CSS3布局 灵活的盒子模型; <tr>
<th>Service</th>
<td>2 years</td>
<td>3 years</td>
<td>6 years</td>
<td>4 years</td>
</tr>
</tbody>
</table>
<pre><code>table{
font-size:1.2em;
width:100%;
margin-bottom:20px;
}
th{
font-weight:bold;
}
td,th{
border:1px solid #ccc;
padding:5px;
}
thead tr{
border-bottom:2px solid #ccc;
}
<strong>tbody tr:nth-of-type(odd){
background:#ffc;
}</strong>
<span class="comment">/*--- EMPLOYEES ---*/</span>
#employees .col{
width:25%;
}
#employees tbody tr:hover{
font-weight:bold;
background:#ff8;
<strong>-moz-transform:scale(1.02);
-webkit-transform:scale(1.02);
-moz-box-shadow:0 0 5px #666;
-webkit-box-shadow:0 0 5px #666;</strong>
}
<span class="comment">/*--- MATRIX ---*/</span>
#employees .col{
width:20%;
}
#matrix tbody td:hover{
font-weight:bold;
background:#ff8;
<strong>-moz-transform:scale(1.02);
-webkit-transform:scale(1.02);
-moz-box-shadow:0 0 5px #666;
-webkit-box-shadow:0 0 5px #666;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;</strong>
}</code></pre>
(责任编辑：网站建设)
CSS3网页制作实例 CSS3网页页面效果相关文章