1、完善“关于我们”页面
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>关于我们</title>
<link rel="stylesheet" href="static/css/header.css">
<link rel="stylesheet" href="static/css/footer.css">
<style>
.container .wrap .main .toux-list .item .toux{
width: 50px;
height: 50px;
background-color: lightgreen;
}
.container {
width: 1000px;
margin: 5px auto;
overflow: hidden; /*因为子级浮动了*/
}
/*内容区中间部分，也就是头像与工号，此时没有右边部分*/
.wrap {
width: inherit;
min-height: 800px;
}
/*内容区左边部分，也就是栏目列表，此时没有右边部分*/
.left {
width: 280px;
min-height: 800px;
}
.wrap, .left{
float: left;
}
.left {
margin-left: -100%;
}
/*内容区中间部分的 头像工号部分*/
.main {
padding-left: 280px;
}
.main .toux-list {
padding: 0 15px;
}
.main h3 {
margin: 10px auto;
text-align: center;
border-bottom: 1px solid;
}
.main .toux-list ul {
padding: 0;
margin: 0;
list-style: none;
}
/*使用伪类在最后一个ul后面清除掉浮动,让分页条正常显示*/
.main .toux-list ul:last-of-type::after {
content: '';
display: table;
clear:both;
}
/*每个头像水平排列 */
.main .toux-list ul li.item {
float: left;
margin: 0 20px;
}
/*将a标签设置为块元素让它垂直排列*/
.main .toux-list ul li a {
display: table;
text-decoration-line: none;
color:#444;
}
.main .toux-list ul li a:hover {
color: red;
}
/*分页条样式*/
.main .toux-list .pages{
margin: 15px auto;
}
.mani .toux-list .pages ul {
margin: 0;
padding: 0;
list-style: none;
}
.main .toux-list .pages ul li a {
float: left;
display: inline-block;
height: 26px;
line-height: 26px;
min-width: 26px;
padding: 0 5px;
border: 1px solid black;
text-align: center;
margin: 0 2px;
}
/*鼠标移入与激活时的样式*/
.main .toux-list .pages ul li a:hover,
.main .toux-list .pages ul li a.active{
background-color: red;
color: white;
}
/*左侧样式*/
.left h3 {
margin: 10px auto;
text-align: center;
border-bottom: 1px solid;
}
.left ul {
margin: 0;
padding: 0;
list-style: none;
}
.left li a {
display: inline-block;
width: 100%;
height: 50px;
background-color: black;
color: white;
text-decoration-line: none;
line-height: 50px;
text-align: center;
}
.left li a:hover {
background-color: red;
font-size: 1.1em;
}
</style>
</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="news.html">公司新闻</a></li>
<li class="item"><a href="products.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">
<img src="static/images/banner.jpg" alt="">
</div>
<!-- 1. 中间内容区块 -->
<div class="wrap">
<div class="main">
<div class="toux-list">
<h3>员工介绍</h3>
<ul>
<li class="item">
<a href="" class="toux">员工头像</a>
<a href="">工号: 001</a>
</li>
<li class="item">
<a href="" class="toux">员工头像</a>
<a href="">工号: 002</a>
</li>
<li class="item">
<a href="" class="toux">员工头像</a>
<a href="">工号: 003</a>
</li>
</ul>
<ul>
<li class="item">
<a href="" class="toux">员工头像</a>
<a href="">工号: 004</a>
</li>
<li class="item">
<a href="" class="toux">员工头像</a>
<a href="">工号: 005</a>
</li>
<li class="item">
<a href="" class="toux">员工头像</a>
<a href="">工号: 006</a>
</li>
</ul>
<ul>
<li class="item">
<a href="" class="toux">员工头像</a>
<a href="">工号: 007</a>
</li>
<li class="item">
<a href="" class="toux">员工头像</a>
<a href="">工号: 008</a>
</li>
<li class="item">
<a href="" class="toux">员工头像</a>
<a href="">工号: 009</a>
</li>
</ul>
<ul>
<li class="item">
<a href="" class="toux">员工头像</a>
<a href="">工号: 010</a>
</li>
<li class="item">
<a href="" class="toux">员工头像</a>
<a href="">工号: 011</a>
</li>
<li class="item">
<a href="" class="toux">员工头像</a>
<a href="">工号: 012</a>
</li>
</ul>
<div class="pages">
<ul>
<li><a href="">上一页</a></li>
<li><a href="" class="active">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
<li><a href="">下一页</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- 2. 左侧分为上下二 -->
<div class="left">
<h3>栏目</h3>
<div class="category">
<ul>
<li><a href="">公司新闻</a></li>
<li><a href="">最新产品</a></li>
<li><a href="">关于我们</a></li>
<li><a href="">联系我们</a></li>
</ul>
</div>
</div>
</div>
<!-- 底部 -->
<div class="footer">
<div class="content">
<p>
<a href="">© PHP中文网版权所有</a> |
<a href="">0551-88889999</a> |
<a href="">皖ICP2016098801-1</a>
</p>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例