课程内容
1 企业新闻类整站布局原理与实现
2 javascrip 基本语法1
3 javascrip 基本语法2
7月9日作业
1. 将企业站点的: 关于我们, 联系我们, 任选其一完成它.
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞翼结构之---关于我们</title>
<link rel="stylesheet" href="static/css/about-yan.css">
<style type="text/css" >
/******************* 头部样式开始 ******************/
p{
font-size: 14px;
line-height: 35px;
}
.header{
}
/*头部内容区*/
.header .content{ /*在.header和.content之间必须有个空格,否者这个样式不生效*/
width: 1000px;
height: 60px;
background-color: #444444;
margin: 0 auto;
}
.header .content .nav{
list-style: none;
}
.header .content .nav .item a {
/* 一定要将浮动设置到链接标签<a>上面,否则无法实现导航区的点击与高亮 */
min-width: 100px;
min-height: 60px;
float: left;
color: #fff;
line-height: 60px;
text-decoration: none;
text-align: center;
}
.header .content .nav .item a:hover {
/* 当鼠标移入到导航链接上时改变背景色与文本前景色,实现当前导航高亮功能 */
background-color: red;
/* 将导航文本设置为系统根字体大小的1.2倍 */
font-size: 1.2rem;
}
/******************* 主体样式开始 ******************/
/*双飞翼由大名鼎鼎的玉但提出, 淘宝网率先使用*/
/* 使用双飞翼布局实现主体部分 */
/***** 第一步: 主体容器设置总宽度,并水平居中 *****/
.container {
width: 1000px;
margin: 5px auto;
overflow: hidden;
padding-top: 5px;
}
.banner{
width: 1000px;
height: 200px;
margin-bottom: 10px;
}
/***** 第二步: 左,右二侧固定宽度,中间区块自适应 *****/
/* 1. 中间区块宽度设置在它的容器wrap中 */
.main {
width: 800px;
min-height: 800px;
box-sizing: border-box;
background-color:#dddddd;
float: right;
margin-top: 150px;
padding: 20px;
}
.main h2{
text-align: center;
}
/* 2. 设置左,右区块的宽度和高度(因为无内容,所以设置了最小高度),并设置参考色块 */
/* 左边栏样式 */
.left {
width: 200px;
min-height: 800px;
background-color: #444444;
float: left;
margin-top: 150px;
}
.left .nav{
list-style: none;
}
.left .nav .item a {
/* 一定要将浮动设置到链接标签<a>上面,否则无法实现导航区的点击与高亮 */
min-width: 100px;
min-height: 60px;
float: left;
color: #fff;
line-height: 60px;
text-decoration: none;
text-align: center;
}
.left .nav .item a:hover {
/* 当鼠标移入到导航链接上时改变背景色与文本前景色,实现当前导航高亮功能 */
background-color: red;
/* 将导航文本设置为系统根字体大小的1.2倍 */
font-size: 1.2rem;
}
/* 右边栏样式 */
.right {
width: 200px;
min-height: 800px;
float: left;
margin-left: -200px;
}
/***** 第三步:将中间,左,右区块全部左浮动 *****/
/* 因中间区块宽度100%,所以左右会被挤压到下面 */
/******************* 主体样式开始 ******************/
/* 底部与头部的基本样式类似 */
.footer{
}
.footer .content {
width: 1000px;
height: 60px;
background-color: #444;
margin: 0 auto;
text-align: center;
line-height: 60px;
}
.footer .content p a{
color: #ffffff;
text-decoration: none;
}
.footer .content p a:hover{
background-color: red;
font-size: 1.2rem;
}
/******************* 底部样式结束 ******************/
</style>
</head>
<body>
<!--头部-->
<div class="header">
<div class="content">
<ul class="nav">
<li class="item"><a href="">首页</a> </li>
<li class="item"><a href="">公司新闻</a> </li>
<li class="item"><a href="">最新产品</a> </li>
<li class="item"><a href="">关于我们</a> </li>
<li class="item"><a href="">联系我们</a> </li>
</ul>
</div>
<!--主体部分-->
<div class="container">
<!-- banner图-->
<div class="banner">
<img src="http://www.php.cn/static/images/index_banner7.jpg" alt="php中文网">
</div>
<!--创建中间内容块-->
<!-- 中间内容区需要创建一个父级容器进行包裹 -->
<div class="main">
<h2>关于我们</h2>
<hr style="color: black;">
<p>
关于我们关于我们关于我们关于我们关于我们关于我们关于我们关于我们关于我们关于
我们关于我们关于我们关于我们关于我们关于我们关于我们关于我们关于我们关于我们
关于我们关于我们关于我们关于我们关于我们关于我们关于我们关于我们关于我们关于
我们关于我们关于我们关于我们关于我们关于我们关于我们关于我们关于我们关于我们
关于我们关于我们关于我们关于我们关于我们
</p>
</div>
<!--左侧边栏栏目-->
<div class="left">
<ul class="nav">
<li class="item"><a href="">公司新闻</a> </li>
<li class="item"><a href="">最新产品</a> </li>
<li class="item"><a href="">关于我们</a> </li>
<li class="item"><a href="">联系我们</a> </li>
</ul>
</div>
</div>
<!--底部-->
<div class="footer">
<div class="content">
<p>
<a href="">© PHP中文网版权所有</a> |
<a href="">0551-65358899</a> |
<a href="">皖ICP备18***333-1</a>
</p>
</div>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
2. 将课堂上的JS基本语法的小案例全部写一遍,对照课件, 尽可能自己想一些案例, 不要照搬, 举一反三, 活学活用….