一.基本css样例
1.圆角
效果图:
设计思想,利用一组高为1px的块状元素逐行缩进,达到圆角的效果。这里使用b元素(简单只有一个字母)。圆角边框示意图:
源码如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#container{
margin:0 20%;
background: #9bd1fa;
}
b.rtop, b.rbottom{
display: block;
background:#fff; /*设置白色为背景色*/
}
b.rtop b, b.rbottom b {
display:block;
height:1px;
overflow: hidden;
background:#9bd1fa;/*在白层上涂上新的颜色*/
}
b.r1 {margin: 0 5px}
b.r2 {margin: 0 3px}
b.r3 {margin: 0 2px}
b.r4 {margin: 0 1px; height:2px;}
h2, p {padding:10px;}
h2 {text-align:center}
</style>
</head>
<body >
<div id="container">
<b class="rtop">
<b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b>
</b>
<h2>this is a title</h2>
<p>this is content of this page!</p>
<b class="rbottom">
<b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b>
</b>
</div>
</body>
</html>
2.frame排版页面
网页包含标题区,左侧导航菜单,主内容区,footer页脚区域。
效果如下:
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#container{
width:90%;
margin: 0 auto;
background-color: #fff;
border: 1px solid gray;
color: #333;
line-height: 130%;
}
#top{
padding:.5em;
background-color:#ddd;
border-bottom:1px solid gray;
}
#top h1{
padding:0;
margin:0;
}
#leftnav{
width: 160px;
margin:0;
padding:1em;
float:left;
}
#leftnav p{margin:0 0 .5em 0;}
#content{
margin-left:200px;
border-left:1px solid grey;
padding:1em;
max-width:40em;
}
#content h2{ margin:0 0 .5em 0;}
#footer{
clear:both;
margin:0;
padding: .5em;
color:#333;
background-color:#ddd;
border-top:1px solid grey;
}
#footer p{margin: 0; padding: 0;}
</style>
</head>
<body >
<div id="container">
<div id="top">
<h1>this's ad parts.</h1>
</div>
<div id="leftnav">
<ul>
<li><a href="#">menu1 </a></li>
<li><a href="#">menu2 </a></li>
<li><a href="#">menu3 </a></li>
</ul>
</div>
<div id="content">
<h2>this is the main title</h2>
<p>this is the content.</p>
<p>...</p>
</div>
<div id="footer">
<p>this is the footer parts.</p>
</div>
</div>
</body>
</html>
3,简单的导向菜单条
先上效果图了
包含四个文件:home.html,menu.html,contract.html和menu.css,其中前三个文件结构是一致的。
home.html代码:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="menu.css">
</head>
<body id="home">
<div id="menu">
<ul>
<li><a href="home.html" class="home">主页</a></li>
<li><a href="search.html" class="search">search</a></li>
<li><a href="contact.html" class="contact">contact us</a></li>
</ul>
</div>
<div id="content">
this the content of the main frame!
</div>
</body>
</html>
home.html,menu.html,contract.html的差别在于body标签的id的差异
home.html------><body id="home">
menu.html------><body id="menu">
contract.html------><body id="contract">
menu.css的代码如下:
#menu{
margin:0;
padding:0;
}
#menu li{
padding:0;
margin:0;
list-style: none; /*取消列表项符号*/
float:left; /*横向左排列 */
}
#menu li a{
display:block; /* 块状显示,以便背景色填充*/
margin:0 1px 0 0;
padding:4px 10px;
width:80px;
background:#5970B2;
color:#fff;
text-align:center;
text-decoration: none; /*取消下划线*/
}
#menu li a:hover{
background:#49A3FF;
}
#content{
clear:both; /*清除横向标识*/
margin:10px;
}
#home a.home, #search a.search, #contact a.contact{
background:#49A3ff;
text-decoration: none;
cursor:default;
}
4.简单的标签菜单
效果图:
同样包含四个文件
menu.css代码:
包含四个文件:home.html,menu.html,contract.html和menu.css,其中前三个文件结构是一致的。
home.html代码:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="menu.css">
</head>
<body id="home">
<div id="menu">
<ul>
<li class="home"><a href="home.html" >主页</a></li>
<li class="search"><a href="search.html" >search</a></li>
<li class="contact"><a href="contact.html" >contact us</a></li>
</ul>
</div>
<div id="content">
this the content of the main frame!
</div>
</body>
</html>
menu.css代码:
#menu ul{
margin:0 10px; /*起始标签缩进10px; */
padding:5px 0;
}
#menu li{
padding:5px 15px;
list-style: none; /*取消列表项符号*/
/*float:left; 横向左排列 */
display:inline; /*横向排列*/
background-color: #d5d0ba;
border-right:1px solid #666;
}
#menu li a{
/*display:block; 块状显示,以便背景色填充
margin:0 1px 0 0;
padding:4px 10px;
width:80px;
background:#5970B2;*/
color:#776655;
/*text-align:center;*/
text-decoration: none; /*取消下划线*/
}
#menu li a:hover{
background:#49A3FF;
}
body{
background: #f5deb3;
}
#content{
background:#fff;
height:500px;
padding:10px;
}
#home li.home, #search li.search, #contact li.contact{
border-bottom:1px solid #fff;
background:#fff;
}
#home li.home a, #search li.search a, #contact li.contact a{
color:#000;
}