您的位置：首页 > Web前端 > CSS

《CSS Web设计高级教程（第2版）》读书笔记（前两章）

2013-07-13 15:16 295 查看

第1章有关XHTML和CSS的最佳实践

1、CSS：当几个规则共享相同的声明时，可把这些选择符聚合到一个以逗号分隔的列表中。例如：

h1, h2, h3{
color:#36C;
}

2、使用CSS的列表实现导航条的功能

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>使用CSS的列表实现导航条的功能</title>
<!-- 例子参考：CSS Web设计高级教程（第2版） -->
<style type="text/css">
ul#nav,ul#nav li {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
ul#nav {
font-family: Verdana, Geneva, Helvetica, sans-serif;
font-size: .82em;
background-color: #DDD;
}
ul#nav li a {
border-color: #000;
border-width: 1px 1px 1px 0;
border-style: solid;
display: block;
float: left;
padding: 3px;
}
ul#nav li.first a {
border-width: 1px;
}
</style>
</head>
<body>
<ul id="nav">
<li class="first"><a href="">Home</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Our Products</a></li>
</ul>
</body>
</html>

运行效果：

第2章 Google的blogger.com翻转器和设计思想

1、开发人员常常要给链接添加样式使之变为明亮的颜色，这样链接就可以从周围的文本中突出显示。如果每一页只有少许几个链接，这个做法当然最好。但如果站点每个页面包含上百个链接，又会这样呢？由于有数百个这样的链接，大量明亮色彩将伤害用户的眼睛。解决方案是先将这些链接的明亮颜色隐藏起来，直到用户移动鼠标掠过该页的相关部分，这样用户第一眼看到站点就比较平和一些。只有在用户移动鼠标悬停在他感兴趣的部分时，该链接才被突出显示。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>链接明亮颜色隐藏的例子</title>
<!-- 例子参考：CSS Web设计高级教程（第2版） -->
<style type="text/css">
div#links {
color: #333;
border: 2px solid #ddd;
padding: 10px;
width: 240px;
}
html>body div#links {
width: 220px;
}
div#links ul {
margin: 0 0 0 19px;
padding: 0;
}
div#links ul li {
list-style-image: url('list-dot.gif');
margin: 0 0 .5em 0;
}
html>body div#links ul li a {
color: #333;
text-decoration: none;
}
div#links:hover ul li a {
color: #0000ff;
text-decoration: underline;
}
div#links ul li a:hover {
background-color: #ffff66;
color: #000;
text-decoration: none;
}
</style>
</head>
<body>
<div id="links">
<h3>Blogmarks</h3>
<p>A collection of miscellaneous links that don't merit a main
blog posting, but which are interesting none-the-less.</p>
<ul>
<li><a href="">What WordPress is currently doing to combat
comment spam</a>.</li>
<li><a href="">Mobile web tools</a>, from <a href="">Pukupi</a>.</li>
<li><a href="">The photography of E.J. Peiker</a>.</li>
<li><a href="">Some handy tips for advanced Google use</a>.</li>
<li><a href="">Make your own church signs</a>, or <a href="">view
some real ones</a>.</li>
<li><a href="">Michael Heilemann</a> is doing a great job with
his new <a href="">WordPress</a> theme, <a href="">Kubrick</a>.</li>
<li>I'm late to the party, but <a href="">Dan</a> has a <a
href="">book out</a>.
</li>
<li><a href="">A crazy concept for laying our housing
estates</a>.</li>
<li><a href="">Spiderman reviews crayons</a>.</li>
<li>Some <a href="">beautiful images</a> from photographer <a
href="">Greg Downing</a>.
</li>
<li><a href="">Lots of links from the Link Bunnies</a>.</li>
<li>Nice <a href="">“when I was a child”</a> sort of
post frin Stuart.
</li>
<li><a href="">How much does SafariSorter cost?</a></li>
<li>Some handy <a href="">maintenance tips for Mac owners
running Panther</a>.
</li>
<li><a href="">Ming Jung</a>, <a href="">Anil Dash</a>, and I
get <a href="">interviewed for HBO's Real Sex</a>.</li>
</ul>
</div>
</body>
</html>

运行效果：1）、默认隐藏颜色：

2）、鼠标掠过时突出显示：

本文出自 “stevenyang7” 博客，请务必保留此出处http://stevenyang7.blog.51cto.com/7556281/1248145

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航