Collection
Collection
企业站点的创建：
采用双飞翼布局，头部(header)、中间主体(.wrap里面套嵌.main，.left .right)和底部(footer)。
头部和底部作为公共样式，每次创建页面时导入头部和底部的css样式即可。
给导航栏里面的a标签添加href属性，实现各个页面的跳转。
<div class="header"> <div class="content"> <ul class="nav"> <li class="item"><a href="index.html">首页</a></li> <li class="item"><a href="products.html">产品简介</a></li> <li class="item"><a href="news.html">新闻动态</a></li> <li class="item"><a href="about.html">关于我们</a></li> <li class="item"><a href="contact.html">联系我们</a></li> </ul> </div> </div>
点击 "运行实例" 按钮查看在线实例
例图：
关于我们和联系我们页面：
设置共用一个样式
关于我们页面：
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--<link rel="stylesheet" href="static/css/header.css">-->
<!--<link rel="stylesheet" href="static/css/footer.css">-->
<!--<link rel="stylesheet" href="static/css/single.css">-->
<style>
/******************* 头部样式开始 ******************/
.header{
background-color: limegreen;
}
.header .content{
width:1000px;
height: 60px;
background-color:limegreen;
margin:0 auto;
}
.header .content .nav{
margin-top:0;
margin-bottom:0;
padding-left:0;
}
.header .content .nav .item{
list-style: none;
}
/*设置导航内容*/
.header .content .nav .item a{
float:left;
min-width:100px;
min-height:60px;
text-decoration: none;
font-size:1.1rem;
color:white;
line-height: 60px;
text-align:center;
padding:0 35px;
}
/*设置鼠标悬浮效果*/
.header .content .nav .item a:hover{
background-color: yellowgreen;
font-size:1.5rem;
color:yellow;
}
/******************* 头部样式结束 ******************/
/******************* 中间主体样式开始 ******************/
/*********中间内容开始*********/
.container{
width:1000px;
margin:5px auto;
/*background-color: lightgray;*/
overflow: hidden;
}
.container .wrap{
width:inherit;
min-height:800px;
/*background-color: yellowgreen;*/
float:left;
}
.container .wrap .main{
padding-left: 260px;
/*padding-right: 260px;*/
/*border:1px solid red;*/
}
.main .text-img{
padding:0 15px;
}
.main h3{
margin:10px auto;
text-align: center;
border-bottom: 1px solid black;
}
/*给a设为块，使图片水平居中*/
.main .text-img a{
display: block;
text-align: center;
margin-bottom: 30px;
}
/*给联系方式加个边框*/
.main .text-img .border{
border:1px solid #dcdada;
width:400px;
height: 200px;
padding:10px 10px;
margin:0 auto;
box-shadow: 5px 5px 10px 1px #888888;
}
/*********中间内容结束*********/
/*********左侧内容开始*********/
.left{
width:260px;
min-height: 800px;
/*background-color: yellow;*/
float:left;
margin-left: -100%;
}
.left h3{
margin:10px auto;
text-align: center;
border-bottom: 1px solid black;
}
.left ul {
margin: 0;
padding: 0;
list-style: none;
}
.left li a {
display: inline-block;
width: 100%;
height: 50px;
background-color: limegreen;
color: white;
text-decoration-line: none;
line-height: 50px;
text-align: center;
border-bottom: 1px solid lightgray;
}
.left li a:hover {
background-color: yellow;
font-size: 1.1em;
color:red;
}
/*********左侧内容结束*********/
/******************* 中间主体样式结束 ******************/
/******************* 底部样式开始 ******************/
.footer{
/*background-color: lightsteelblue;*/
}
.footer .content{
width:1000px;
height: 60px;
background-color:limegreen;
margin:0 auto;
}
.footer .content p{
text-align:center;
line-height:60px;
color:white;/*设置 | 分割线颜色为白色*/
}
/*设置a标签字体样式*/
.footer .content a{
text-decoration:none;
color:white;
}
/*设置a标签鼠标悬浮效果*/
.footer .content a:hover{
color:yellow;
}
/******************* 底部样式结束 ******************/
</style>
<title>关于我们</title>
</head>
<body>
<!--头部-->
<div class="header">
<div class="content">
<ul class="nav">
<li class="item"><a href="index.html">首页</a></li>
<li class="item"><a href="products.html">产品简介</a></li>
<li class="item"><a href="news.html">新闻动态</a></li>
<li class="item"><a href="about.html">关于我们</a></li>
<li class="item"><a href="contact.html">联系我们</a></li>
</ul>
</div>
</div>
<!--中间主体-->
<div class="container">
<!--banner图部分-->
<div class="banner">
<a href=""><img src="static/images/banner图.jpg" alt="banner图" width="1000px" height="400px"></a>
</div>
<div class="wrap">
<div class="main">
<div class="text-img">
<h3>关于我们</h3>
<a href=""><img src="static/images/关于我们.jpg" alt="关于我们"></a>
<p>各种新鲜水果：苹果、雪梨、桃儿、香蕉、橙子、橘子、葡萄、黑加仑、西瓜、草莓…………等等</p>
<p>各种新鲜水果：苹果、雪梨、桃儿、香蕉、橙子、橘子、葡萄、黑加仑、西瓜、草莓…………等等</p>
<p>各种新鲜水果：苹果、雪梨、桃儿、香蕉、橙子、橘子、葡萄、黑加仑、西瓜、草莓…………等等</p>
<p>各种新鲜水果：苹果、雪梨、桃儿、香蕉、橙子、橘子、葡萄、黑加仑、西瓜、草莓…………等等</p>
<p>各种新鲜水果：苹果、雪梨、桃儿、香蕉、橙子、橘子、葡萄、黑加仑、西瓜、草莓…………等等</p>
</div>
</div>
</div>
<!--左侧栏目区块-->
<div class="left">
<h3>栏目</h3>
<div class="category">
<ul>
<li><a href="products.html">产品简介</a></li>
<li><a href="news.html">新闻动态</a></li>
<li><a href="about.html">关于我们</a></li>
<li><a href="contact.html">联系我们</a></li>
</ul>
</div>
</div>
</div>
<!--底部-->
<div class="footer">
<div class="content">
<p>
<a href="">© 新鲜水果***版权所有</a> |
<a href="">0755-66668888</a> |
<a href="">粤ICP2018092201-1</a>
</p>
</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
例图：
联系我们页面：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="static/css/header.css"> <link rel="stylesheet" href="static/css/footer.css"> <link rel="stylesheet" href="static/css/single.css"> <title>联系我们</title> </head> <body> <!--头部--> <div class="header"> <div class="content"> <ul class="nav"> <li class="item"><a href="index.html">首页</a></li> <li class="item"><a href="products.html">产品简介</a></li> <li class="item"><a href="news.html">新闻动态</a></li> <li class="item"><a href="about.html">关于我们</a></li> <li class="item"><a href="contact.html">联系我们</a></li> </ul> </div> </div> <!--中间主体--> <div class="container"> <!--banner图部分--> <div class="banner"> <a href=""><img src="static/images/banner图.jpg" alt="banner图" width="1000px" height="400px"></a> </div> <div class="wrap"> <div class="main"> <div class="text-img"> <h3>联系我们</h3> <a href=""><img src="static/images/地图.jpg" alt="地图" width="600px" height="350px"></a> <div class="border"> <p>名称：新鲜水果***</p> <p>地址：广东省深圳市南山区深南大道aaa号</p> <p>电话：0755-66668888</p> <p>邮箱：zzz@123.com</p> <p>邮编：518000</p> </div> </div> </div> </div> <!--左侧栏目区块--> <div class="left"> <h3>栏目</h3> <div class="category"> <ul> <li><a href="products.html">产品简介</a></li> <li><a href="news.html">新闻动态</a></li> <li><a href="about.html">关于我们</a></li> <li><a href="contact.html">联系我们</a></li> </ul> </div> </div> </div> <!--底部--> <div class="footer"> <div class="content"> <p> <a href="">© 新鲜水果***版权所有</a> | <a href="">0755-66668888</a> | <a href="">粤ICP2018092201-1</a> </p> </div> </div> </body> </html>
点击 "运行实例" 按钮查看在线实例
例图：
