最近在读《CSS3 设计指南》， 反反复复看了两三遍，觉得这本书非常的不错，值得一读。 建议下载本电子书大概的看一下，或者直接购买纸质书以支持作者。下面我讲到的这个例子也是本书中的实战篇，效果如下所示。
demo01.png
我个人感觉这个效果还是非常美观的，关键是在写代码的过程中对一些属性的使用更加深刻了，也学到了一些比较实用的技巧。下面我直接将 HTML 和 CSS 代码粘贴在下方。感兴趣的可以将代码复制粘贴到自己的编译器中，看看效果。由于代码本身并不难，所以也不在此做多余的解释。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Coiny|Lato|Roboto+Slab" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="hwaphon.css">
</head>
<body>
<header>
<section id="title">
<h1>Hwaphon</h1>
<h2>This is my personal webpage</h2>
</section>
<nav class="menu">
<ul>
<li class="choice1"><a href="#">Home</a></li>
<li class="choice2"><a href="#">Book</a></li>
<li class="choice3"><a href="#">Info</a></li>
<li class="choice4"><a href="#">About</a></li>
<li class="choice5"><a href="#">Contact</a></li>
</ul>
</nav>
<form class="search">
<label for="username">Search</label>
<input type="text" name="username" id="username" placeholder="Search" />
</form>
</header>
<section id="feature_area">
<article id="blog_lead">
<div class="inner">
<h4>September 7, 2012</h4>
<a href="#"><h3>The magic of CSS</h3></a>
<img src="6.jpg" />
<p>
Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life.
Youth means a temperamental predominance of courage over timidity, of the appetite for adventure over the love of ease. This often exists in a man of 60 more than a boy of 20. Nobody grows old merely by a number of years. We grow old by deserting our ideals.
Years may wrinkle the skin, but to give up enthusiasm wrinkles the soul. Worry, fear, self-distrust bows the heart and turns the spirit back to dust.
Whether 60 or 16, there is in every human being’s heart the lure of wonders, the unfailing appetite for what’s next and the joy of the game of living. In the center of your heart and my heart, there is a wireless station; so long as it receives messages of beauty, hope, courage and power from man and from the infinite, so long as you are young.
When your aerials are down, and your spirit is covered with snows of cynicism and the ice of pessimism, then you’ve grown old, even at 20; but as long as your aerials are up, to catch waves of optimism, there’s hope you may die young at 80.
</p>
</div>
</article>
<aside>
<form class="signin" autocomplete="off" action="#" method="post">
<fieldset>
<legend><span>Sign in for Code and Updates</span></legend>
<section>
<label for="email">Email</label>
<input type="email" name="email" id="email" />
</section>
<section>
<label for="password">Password</label>
<input type="password" name="password" id="password" maxlength="20" />
<p class="direction">Wrong username or password</p>
</section>
<section>
<input type="submit" value="Sign In" />
<p class="signup">Not signed up?<a href="#"> Register now!</a></p>
</section>
</fieldset>
</form>
<nav>
<h3>Recent Articles</h3>
<ul>
<li><a href="#">CSS Guide</a></li>
<li><a href="#">The Migic Of CSS</a></li>
<li><a href="#">CSS3 Developers</a></li>
<li><a href="#">Head First CSS</a></li>
<li><a href="#">CSS + Div</a></li>
<li><a href="#">CSS3 Activity</a></li>
<li><a href="#">Unkown CSS3</a></li>
</ul>
</nav>
</aside>
</section>
<section id="book-area">
<article class="left">
<div class="inner">
<h3>Coding Web</h3>
<img src="images/1.png" />
<aside>
<ol>
<li><a href="#">Download the Code</a></li>
<li><a href="#">Table of Contents</a></li>
<li><a href="#">Buy this Book</a></li>
</ol>
</aside>
</div>
</article>
<article class="left">
<div class="inner">
<h3>JavaScript</h3>
<img src="images/2.png" />
<aside>
<ol>
<li><a href="#">Download the Code</a></li>
<li><a href="#">Table of Contents</a></li>
<li><a href="#">Buy this Book</a></li>
</ol>
</aside>
</div>
</article>
<article class="right">
<div class="inner">
<h3>Visual CSS3</h3>
<img src="images/3.png" />
<aside>
<ol>
<li><a href="#">Download the Code</a></li>
<li><a href="#">Table of Contents</a></li>
<li><a href="#">Buy this Book</a></li>
</ol>
</aside>
</div>
</article>
<article class="right">
<div class="inner">
<h3>Styling CSS</h3>
<img src="images/3.png" />
<aside>
<ol>
<li><a href="#">Download the Code</a></li>
<li><a href="#">Table of Contents</a></li>
<li><a href="#">Buy this Book</a></li>
</ol>
</aside>
</div>
</article>
</section>
<footer>
<p>This is hwaphon's webpage. Degisned by <a href="#">Hwaphon</a></p>
<nav>
<ul>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Contact me</a></li>
</ul>
</nav>
</footer>
</body>
</html>
CSS 代码如下.
/*
* @Author: hwaphon
* @Date: 2016-11-08 14:00:45
* @Last Modified by: hwaphon
* @Last Modified time: 2016-11-08 14:01:33
*/
* {
margin: 0;
padding: 0;
}
body {
background-color: #eee;
}
header {
position: relative;
height: 90px;
margin: 10px 10px;
padding: 1px;
border-radius: 20px 0 20px 0;
background-color: #fff;
box-shadow: 0 12px 8px -9px rgba(102,102,102,.6);
}
header section#title {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 90px;
}
header h1 {
font-family: 'Coiny', cursive;
font-size: 2.2em;
font-weight: 900;
line-height: 1;
margin-top: .25em;
padding: 9px 12px 0;
color: #099;
}
header h2 {
font-family: 'Roboto Slab', serif;
font-size: .9em;
line-height: 1;
margin-top: .5em;
padding: 0 12px;
letter-spacing: -.025em;
color: #333;
}
form.search {
position: absolute;
top: 39px;
right: 30px;
width: 180px;
}
.search input {
font-size: 1em;
float: right;
width: 110px;
padding: 5px 8px;
transition: width 1s ease-out;
color: #888;
border-radius: 10px 0 10px 0;
outline: none;
}
.search input:focus {
width: 160px;
transition: width 1s ease-out;
}
.search label {
display: none;
}
nav.menu {
font-size: .8em;
margin: 39px auto;
padding: 0;
text-align: center;
}
nav.menu > ul {
display: inline-block;
}
nav.menu li {
position: relative;
float: left;
list-style-type: none;
}
nav.menu li a {
font-family: 'Roboto Slab', serif;
font-size: 1.2em;
display: block;
padding: .25em .8em;
cursor: pointer;
text-align: left;
text-decoration: none;
color: #fff;
}
nav.menu li.choice1 a {
background: #f58c21;
}
nav.menu li.choice2 a {
background: #4eb8ea;
}
nav.menu li.choice3 a {
background: #d6e636;
}
nav.menu li.choice4 a {
background: #ee4c98;
}
nav.menu li.choice5 a {
background: #f58c21;
}
nav.menu li:hover a {
color: #555;
border: 0;
border-color: #fff;
}
nav.menu li:last-child a {
border-bottom-right-radius: 10px;
}
nav.menu li:first-child a {
border-top-left-radius: 10px;
}
section#feature_area {
overflow: hidden;
margin: 10px 10px;
padding: 1px;
}
section#feature_area article {
float: left;
width: 66%;
}
section#feature_area aside {
float: right;
width: 34%;
}
section#feature_area article .inner {
padding: 12px;
border-radius: 20px 0;
background: #fff;
box-shadow: 0 12px 8px -9px #555;
}
section#feature_area article a {
text-decoration: none;
}
section#feature_area article img {
float: left;
width: 148px;
height: 96px;
margin-right: 12px;
padding: 8px;
border: 1px solid rgba(102,102,102,.4);
border-radius: 10px 0;
}
section#feature_area article h4 {
font-family: 'Roboto Slab', serif;
font-size: 1em;
font-weight: 400;
letter-spacing: -.025em;
color: #f58c21;
}
section#feature_area article h3 {
font-family: 'Roboto Slab', serif;
font-size: 1.75em;
font-weight: 700;
margin: 0 0 12px 0;
letter-spacing: -.05em;
color: #555;
}
section#feature_area article p {
font-family: 'Roboto Slab', serif;
font-size: 1.1em;
font-weight: 400;
font-style: normal;
line-height: 1.5em;
margin: 0 0;
color: #616161;
}
section#feature_area article p::first-letter {
font-family: 'Roboto Slab', serif;
font-size: 4.5em;
font-weight: 700;
line-height: .5;
float: left;
margin: .05em .05em .025em .05em;
text-shadow: 1px 3px 3px #ccc;
}
form.signin {
float: right;
width: 95%;
border-radius: 20px 0 20px 0;
background-color: #fff;
box-shadow: 0 12px 8px -9px #555;
}
form.signin fieldset {
margin: 10px 14px;
border: 0;
}
form.signin fieldset legend span {
font-family: 'Roboto Slab', serif;
font-size: 1.3em;
font-weight: 700;
line-height: 1.1;
letter-spacing: -.05em;
color: #4eb8ea;
}
.signin section {
overflow: hidden;
padding: .5em 0;
}
.signin section label {
font-family: 'Lato', sans-serif;
font-weight: 400;
line-height: 1.1;
float: left;
width: 5em;
margin: .5em .3em 0 0;
color: #555;
}
.signin section input {
font-size: .8em;
float: right;
width: 10.5em;
margin: .2em 0 0 .5em;
padding: 3px 10px 2px;
color: #555;
border-radius: 10px 0 10px 0;
outline: none;
}
.signin section input[type='submit'] {
font-size: 1em;
font-weight: 700;
float: right;
width: auto;
margin: 0 2px 3px 0;
padding: 3px 8px 3px;
cursor: pointer;
color: #fff;
border: none;
background-color: #d6e636;
box-shadow: 1px 1px 2px #888;
}
.signin section p {
font-size: 1em;
line-height: 1.1;
float: right;
clear: both;
margin: .2em 0 0;
text-align: right;
}
.signin section p a {
color: #333;
}
.signin section p a:hover {
cursor: pointer;
text-decoration: none;
color: #777;
}
.signin section p.direction.error {
display: block;
color: #f00;
}
.signin section p.direction {
display: none;
}
section#feature_area nav {
float: right;
width: 95%;
margin-top: 15px;
padding: .6em 0 .75em;
border-radius: 20px 0 20px 0;
background-color: #fff;
box-shadow: 0 8px 12px -9px #555;
}
section#feature_area nav h3 {
font-family: 'Roboto Slab', serif;
font-size: 1.3em;
font-weight: 700;
padding: 0 12px 0;
text-align: left;
letter-spacing: -.05em;
color: #aaa;
}
section#feature_area nav ul {
margin: 0 0 0 2em;
}
section#feature_area nav ul li {
position: relative;
padding: .7em 0 0 2em;
list-style-type: none;
}
section#feature_area nav ul li::before {
position: absolute;
top: 14px;
left: 12px;
width: 10px;
height: 10px;
content: '';
border-radius: 5px 0 5px 0;
background-color: #d6e636;
box-shadow: 1px 1px 2px #888;
}
section#feature_area nav ul li a {
font-size: .9em;
display: block;
cursor: pointer;
text-decoration: none;
color: #616161;
}
section#feature_area nav ul li a:hover {
color: #000;
}
section#book-area {
clear: both;
overflow: hidden;
margin: 8px 10px 0 10px;
border: 1px solid #f58c21;
border-radius: 20px 0 20px 0;
}
section#book-area article {
float: left;
box-sizing: border-box;
width: 25%;
padding: 10px 0;
background: none;
}
#book-area article .inner {
position: relative;
width: 140px;
margin: 0 auto;
}
#book-area article h3 {
font-size: 1.2em;
font-weight: 700;
font-style: normal;
position: absolute;
bottom: 5px;
left: 112%;
width: 160px;
transform: rotate(-90deg);
transform-origin: left bottom;
text-align: left;
color: #ccc;
}
#book-area article img {
box-shadow: 0 8px 12px -9px #555;
}
#book-area article aside {
font-size: .8em;
line-height: 1.5em;
position: absolute;
z-index: 2;
display: none;
width: 200px;
padding: 10px 2px 5px;
color: #555;
border: 2px solid #f58c21;
border-radius: 10px 0 10px 0;
background-color: #fff;
box-shadow: 4px 4px 16px #555;
}
#book-area article:hover aside {
display: block;
}
#book-area article aside li {
line-height: 1.2em;
padding: .25em 0 0 .75em;
list-style-type: none;
}
#book-area article aside li a {
line-height: 1.2em;
text-decoration: none;
color: #616161;
}
#book-area article aside li a:hover {
color: #333;
}
#book-area article.left aside {
top: 32px;
left: 84%;
}
#book-area article.right aside {
top: 14px;
right: 84%;
}
#book-area article aside::after {
position: absolute;
top: 40%;
width: 0;
height: 0;
content: '';
border: 12px solid;
}
#book-area article.left aside::after {
right: 100%;
border-color: transparent #f58c21 transparent transparent;
}
#book-area article.right aside::after {
left: 100%;
border-color: transparent transparent transparent #f58c21;
}
#book-area article aside::before {
position: absolute;
z-index: 100;
top: 45%;
width: 0;
height: 0;
content: '';
border: 8px solid;
}
#book-area article.left aside::before {
right: 100%;
border-color: transparent #fff transparent transparent;
}
#book-area article.right aside::before {
left: 100%;
border-color: transparent transparent transparent #fff;
}
footer {
margin: 10px 10px;
padding: .5em 0 .35em 0;
text-align: center;
border-radius: 10px 0 10px 0;
background-color: #fff;
box-shadow: 0 8px 12px -9px #555;
}
footer p {
font-family: 'Roboto Slab', serif;
font-size: .85em;
font-weight: 400;
letter-spacing: -.05em;
color: #555;
}
footer p a {
font-family: 'Roboto Slab', serif;
font-size: 1em;
font-weight: 700;
font-style: italic;
color: #4eb8ea;
}
footer p a:hover {
color: #777;
}
footer ul {
display: inline-block;
margin: 4px 0 0;
}
footer ul li {
font-family: 'Roboto Slab', serif;
font-size: .85em;
font-weight: 400;
float: left;
list-style-type: none;
}
footer li a {
padding: 0 5px;
text-decoration: none;
color: #aaa;
}
footer li a:hover {
color: #777;
}
footer li + li a {
border-left: 1px solid #ccc;
}
当然代码中还使用了图片，图片资源可由自己随意指定，在此我就不再上传了。如若有疑问，可在下方留言或者直接简信我， 互相学习！
网友评论