css实现模板 |css 角标文字

/*以下是一个简单的网页模板实现*/
/*定义全局字体*/
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #333;
}
/*定义整个网页的布局*/
.container {
width: 960px;
margin: 0 auto;
}
/*定义头部*/
.header {
height: 100px;
background-color: #CCC;
}
/*定义导航栏*/
.nav {
height: 40px;
background-color: #999;
}
/*定义内容*/
.content {
float: left;
width: 700px;
margin-right: 20px;
}
/*定义侧边栏*/
.sidebar {
float: left;
width: 200px;
}
/*定义底部*/
.footer {
clear: both;
height: 50px;
background-color: #666;
color: #FFF;
}

以上代码中，大家定义了一个名为.container的类，这个类用来设置整个网页的布局，包括页面宽度和居中对齐。然后分别定义了头部、导航栏、内容、侧边栏和底部的样式。

这样，大家就可以通过给不同的页面元素添加相应的类，来实现页面模板的使用和管理。例如，大家可以在HTML文档中使用以下代码：

<div class="container">
<div class="header"></div>
<div class="nav"></div>
<div class="content"></div>
<div class="sidebar"></div>
<div class="footer"></div>
</div>

这样，就可以轻松地实现一个带有统一页面布局的网站，方便维护和管理。