写洛杉矶快船css代码html用dw写找六个分页加模板
时间: 2023-07-29 11:06:08 浏览: 55
以下是使用Dreamweaver编写的HTML和CSS代码示例,包含六个分页和基本模板:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>洛杉矶快船</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">比赛</a></li>
<li><a href="#">球员</a></li>
<li><a href="#">历史</a></li>
</ul>
</nav>
<h1>洛杉矶快船</h1>
</header>
<main>
<section>
<h2>新闻</h2>
<p>最新消息...</p>
</section>
<section>
<h2>比赛</h2>
<p>最近比赛...</p>
</section>
<section>
<h2>球员</h2>
<p>球员介绍...</p>
</section>
<section>
<h2>历史</h2>
<p>历史背景...</p>
</section>
</main>
<footer>
<p>© 2021 洛杉矶快船</p>
</footer>
</body>
</html>
```
CSS代码:
```
/* 基本样式 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: navy;
color: white;
padding: 20px;
text-align: center;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
margin-right: 20px;
}
nav a {
color: white;
text-decoration: none;
}
main {
margin: 20px;
}
section {
margin-bottom: 40px;
}
h2 {
color: navy;
margin-bottom: 20px;
}
footer {
background-color: navy;
color: white;
padding: 10px;
text-align: center;
}
/* 分页样式 */
.pagination {
display: inline-block;
border: 1px solid #ddd;
border-radius: 5px;
}
.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color .3s;
}
.pagination a.active {
background-color: navy;
color: white;
}
.pagination a:hover:not(.active) {
background-color: #ddd;
}
```
模板代码:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面标题</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<!-- 导航栏代码 -->
</header>
<main>
<!-- 主要内容代码 -->
</main>
<footer>
<!-- 版权声明及其他信息 -->
</footer>
</body>
</html>
```
以上代码可以作为基础模板,根据需要进行修改和扩展。分页样式可以通过在HTML中添加类名"pagination"来调用。