1、完成企业站点的联系我们或者关于我们页面
实例
<!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/contact.css">
<title>联系我们</title>
<style>
.container {
width: 1000px;
margin: 5px auto;
/* 参考色块: 整个主体容器是灰色背景 */
/*background-color: lightgray;*/
/*包住浮动的子元素*/
overflow: hidden;
}
.wrap {
width: inherit;
min-height: 800px;
/*参考背景色*/
/*background-color: cyan;*/
}
/* 左边栏样式 */
.left {
width: 280px;
min-height: 800px;
/*background-color: lightcoral;*/
}
/* 右边栏样式 */
.right {
width: 280px;
min-height: 800px;
/*background-color: lightseagreen*/
}
.wrap, .left, .right {
float: left;
}
.left {
margin-left: -100%;
}
/*.right {*/
/* margin-left: -280px;*/
/*}*/
.main {
padding-left: 280px;
/*padding-right: 280px;*/
/*添加主体边框*/
/*border: 1px solid #444444;*/
}
.main .news-list {
/*加到中间div上不会撑大盒子的*/
padding: 0 15px;
}
.main h3 {
margin: 10px auto;
text-align: center;
border-bottom: 1px solid;
}
.main ul {
list-style: none;
margin-top: 0;
margin-bottom: 0;
padding-left: 0;
overflow: hidden;
}
.main .news-list {
padding: 0 25px;
}
.main .news-list ul {
list-style: none;
margin-top: 0;
margin-bottom: 0;
padding-left: 0;
line-height: 1.6em;
}
.main .news-list ul li a {
color: #444444;
text-decoration-line: none;
}
.main .news-list ul li a:hover {
color: red;
}
/*分页条样式*/
.main .news-list .pages{
margin: 15px auto;
}
.mani .news-list .pages ul {
margin: 0;
padding: 0;
list-style: none;
}
.main .news-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 .news-list .pages ul li a:hover,
.main .news-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;
}
.ppp {
text-indent: 35px;
line-height: 25px;
color: firebrick;
margin-left: 200px;
}
</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="news-list">
<h3>联系我们</h3>
<p class="ppp"> 张三（总经理）</p>
<p class="ppp">移动电话：18212345678</p>
<p class="ppp">固定电话：0551-5855555</p>
<p class="ppp">QQ：1349101294</p>
<p class="ppp">地址：合肥天逸新世纪商务中心</p>
</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>运行实例 »
点击 "运行实例" 按钮查看在线实例
2、本周学习总结：
从一开始的搭建学习环境，学习HTML是什么、HTTP是什么；学习了常用的标签<a><h><p><img>等；学习了ul li表格标签，表格实现跨行合并功能；
后面开始学习CSS样式，美化网页，了解了css中选择器的优先级，id>class>标签；学习了内边距padding，外边距margin以及边框border；学习了伪类选择器以及易混淆的: nth-child(), nth-of-type()；
了解四种定位方式：静态定位（浏览器默认）、相对定位、绝对定位、固定定位；
学习了大名鼎鼎的双飞翼布局与圣杯布局，两种布局方式的功能相同，都是实现一个两侧宽度固定，中间宽度自适应的三栏布局；
最后学习了制作一个简单的公司网页，讲解了在实际工作过程中通过bootstrap快速完成网页基本布局。