1200字范文 > css层叠样式表基础学习笔记--第十二章我要自学网首页实战

css层叠样式表基础学习笔记--第十二章我要自学网首页实战

时间：2023-03-16 06:30:53

第十二章我要自学网首页实战

12-01 页面分析12-02 工作准备12-03 搜索区块页面结构12-04 导航条布局12-05 幻灯片布局12-06 公告栏布局12-07 远程培训班布局12-08 最新课程区块结构12-09 热门推荐结构12-10 课程分类结构12-11 名师简介区块结构12-12 页面尾部区块结构12-13 左侧快速跳转区块结构12-14 右侧微信区块结构51zxw.cssreset.css

12-01 页面分析

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>页面分析</title></head><body>页面分析：1.页面分区块2.找出相同和不同3.确定页面宽度4.确定字体大小，背景颜色5.下载页面中的图片</body></html>

12-02 工作准备

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>工作准备</title><link rel="stylesheet" type="text/css" href="css/reset.css"/><link rel="stylesheet" type="text/css" href="css/51zxw.css"/></head><body></body></html>

12-03 搜索区块页面结构

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>搜索区块页面结构</title><link rel="stylesheet" type="text/css" href="css/reset.css"/><link rel="stylesheet" type="text/css" href="css/51zxw.css"/></head><body><header><div class="content-box h-top"><a href=""> <img src="img/logo.png" width="100%" height="100%"/> </a><form action="" method="post"><input type="text" name="" id="" placeholder="课程太多？搜一搜" /><input type="submit" value="搜索"/></form><div class="user"><a href="#">帮助中心</a><a href="#">登录/注册</a></div></div></header></body></html>

12-04 导航条布局

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>导航条布局</title><link rel="stylesheet" type="text/css" href="css/reset.css"/><link rel="stylesheet" type="text/css" href="css/51zxw.css"/></head><body><header><div class="content-box h-top"><a class="logo" href=""> <img src="img/logo.png" width="100%" height="100%"/> </a><form class="search" action="" method="post"><input class="inp-l fl" type="text" name="" id="" placeholder="课程太多？搜一搜" /><input class="inp-r fr" type="submit" value="搜索"/></form><div class="user"><a href="#">帮助中心</a><a href="#">登录/注册</a></div></div><nav><div class="content-box nav-box"><div class="nav-l fl"><a href="#">电脑办公</a><a href="#">平面设计</a><a href="#">室内设计</a><a href="#">室外设计</a><a href="#">影视动画</a><a href="#">机械设计</a><a href="#">工业自动</a><a href="#">程序设计</a><a href="#">网页设计</a><a href="#">会计设计</a></div><div class="nav-r fr"><a href="#">首页</a><a href="#">商城</a><a href="#">论坛</a></div></div></nav></header></body></html>

12-05 幻灯片布局

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>幻灯片布局</title><link rel="stylesheet" type="text/css" href="css/reset.css"/><link rel="stylesheet" type="text/css" href="css/51zxw.css"/></head><body><header><div class="content-box h-top"><a class="logo" href=""> <img src="img/logo.png" width="100%" height="100%"/> </a><form class="search" action="" method="post"><input class="inp-l fl" type="text" name="" id="" placeholder="课程太多？搜一搜" /><input class="inp-r fr" type="submit" value="搜索"/></form><div class="user"><a href="#">帮助中心</a><a href="#">登录/注册</a></div></div><nav><div class="content-box nav-box"><div class="nav-l fl"><a href="#">电脑办公</a><a href="#">平面设计</a><a href="#">室内设计</a><a href="#">室外设计</a><a href="#">影视动画</a><a href="#">机械设计</a><a href="#">工业自动</a><a href="#">程序设计</a><a href="#">网页设计</a><a href="#">会计设计</a></div><div class="nav-r fr"><a href="#">首页</a><a href="#">商城</a><a href="#">论坛</a></div></div></nav><div class="hdp"><div class="content-box"><div class="hdp-img clearfix" ><a href="" class="fl"><img src="img/10101012295811.jpg" width="100%" height="100%"/></a><a href="" class="fl"><img src="img/10151003395231.jpg" width="100%" height="100%"/></a><a href="" class="fl"><img src="img/10301022055219.jpg" width="100%" height="100%"/></a></div></div></div></header></body></html>

12-06 公告栏布局

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>公告栏布局</title><link rel="stylesheet" type="text/css" href="css/reset.css"/><link rel="stylesheet" type="text/css" href="css/51zxw.css"/></head><body><header><div class="content-box h-top"><a class="logo" href=""> <img src="img/logo.png" width="100%" height="100%"/> </a><form class="search" action="" method="post"><input class="inp-l fl" type="text" name="" id="" placeholder="课程太多？搜一搜" /><input class="inp-r fr" type="submit" value="搜索"/></form><div class="user"><a href="#">帮助中心</a><a href="#">登录/注册</a></div></div><nav><div class="content-box nav-box"><div class="nav-l fl"><a href="#">电脑办公</a><a href="#">平面设计</a><a href="#">室内设计</a><a href="#">室外设计</a><a href="#">影视动画</a><a href="#">机械设计</a><a href="#">工业自动</a><a href="#">程序设计</a><a href="#">网页设计</a><a href="#">会计设计</a></div><div class="nav-r fr"><a href="#">首页</a><a href="#">商城</a><a href="#">论坛</a></div></div></nav> <div class="hdp"><div class="content-box"><div class="hdp-img clearfix" ><a href="" class="fl"><img src="img/10101012295811.jpg" width="100%" height="100%"/></a><a href="" class="fl"><img src="img/10151003395231.jpg" width="100%" height="100%"/></a><a href="" class="fl"><img src="img/10301022055219.jpg" width="100%" height="100%"/></a></div><div class="wzgg"> <h3>网站公告</h3><ul><li> <a href="">新版页面更新使用</a> </li></ul></div></div></div></header></body></html>

12-07 远程培训班布局

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>远程培训班布局</title><link rel="stylesheet" type="text/css" href="css/reset.css"/><link rel="stylesheet" type="text/css" href="css/51zxw.css"/></head><body><header><div class="content-box h-top"><a class="logo" href=""> <img src="img/logo.png" width="100%" height="100%"/> </a><form class="search" action="" method="post"><input class="inp-l fl" type="text" name="" id="" placeholder="课程太多？搜一搜" /><input class="inp-r fr" type="submit" value="搜索"/></form><div class="user"><a href="#">帮助中心</a><a href="#">登录/注册</a></div></div><nav><div class="content-box nav-box"><div class="nav-l fl"><a href="#">电脑办公</a><a href="#">平面设计</a><a href="#">室内设计</a><a href="#">室外设计</a><a href="#">影视动画</a><a href="#">机械设计</a><a href="#">工业自动</a><a href="#">程序设计</a><a href="#">网页设计</a><a href="#">会计设计</a></div><div class="nav-r fr"><a href="#">首页</a><a href="#">商城</a><a href="#">论坛</a></div></div></nav> <div class="hdp"><div class="content-box"><div class="hdp-img clearfix" ><a href="" class="fl"><img src="img/10101012295811.jpg" width="100%" height="100%"/></a><a href="" class="fl"><img src="img/10151003395231.jpg" width="100%" height="100%"/></a><a href="" class="fl"><img src="img/10301022055219.jpg" width="100%" height="100%"/></a></div><div class="wzgg"> <h3>网站公告</h3><ul><li> <a href="">新版页面更新使用</a> </li></ul></div></div></div><div class="ycpxb content-box"><a href="#" class="a1"><span>远程培训班</span> </a><a href="#" class="a2"><span class="span2">[与您同行] <br/> 校园活动 </span></a><a href="#" class="a3"><span>学习规划</span></a><a href="#" class="a4"><span>应聘讲师</span></a><a href="#" class="a5"><span>问答系统</span></a></div></header></body></html>

12-08 最新课程区块结构

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>最新课程区块结构</title><link rel="stylesheet" type="text/css" href="css/reset.css"/><link rel="stylesheet" type="text/css" href="css/51zxw.css"/></head><body><header><div class="content-box h-top"><a class="logo" href=""> <img src="img/logo.png" width="100%" height="100%"/> </a><form class="search" action="" method="post"><input class="inp-l fl" type="text" name="" id="" placeholder="课程太多？搜一搜" /><input class="inp-r fr" type="submit" value="搜索"/></form><div class="user"><a href="#">帮助中心</a><a href="#">登录/注册</a></div></div><nav><div class="content-box nav-box"><div class="nav-l fl"><a href="#">电脑办公</a><a href="#">平面设计</a><a href="#">室内设计</a><a href="#">室外设计</a><a href="#">影视动画</a><a href="#">机械设计</a><a href="#">工业自动</a><a href="#">程序设计</a><a href="#">网页设计</a><a href="#">会计设计</a></div><div class="nav-r fr"><a href="#">首页</a><a href="#">商城</a><a href="#">论坛</a></div></div></nav> <div class="hdp"><div class="content-box"><div class="hdp-img clearfix" ><a href="" class="fl"><img src="img/10101012295811.jpg" width="100%" height="100%"/></a><a href="" class="fl"><img src="img/10151003395231.jpg" width="100%" height="100%"/></a><a href="" class="fl"><img src="img/10301022055219.jpg" width="100%" height="100%"/></a></div><div class="wzgg"> <h3>网站公告</h3><ul><li> <a href="">新版页面更新使用</a> </li></ul></div></div></div><div class="ycpxb content-box"><a href="#" class="a1"><span>远程培训班</span> </a><a href="#" class="a2"><span class="span2">[与您同行] <br/> 校园活动 </span></a><a href="#" class="a3"><span>学习规划</span></a><a href="#" class="a4"><span>应聘讲师</span></a><a href="#" class="a5"><span>问答系统</span></a></div><div class="zxkc content-box"><h3 class="m-title">最新课程</h3> <div class="m-list zx-box clearfix"><a href="#"><img src="img/782.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a href="#"><img src="img/781.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a href="#"><img src="img/780.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a href="#"><img src="img/779.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a href="#"><img src="img/778.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a href="#"><img src="img/777.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a href="#"><img src="img/776.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a href="#"><img src="img/775.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a></div></div></header></body></html>

12-09 热门推荐结构

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>热门推荐结构</title><link rel="stylesheet" type="text/css" href="css/reset.css"/><link rel="stylesheet" type="text/css" href="css/51zxw.css"/></head><body><header><div class="content-box h-top"><a class="logo" href=""> <img src="img/logo.png" width="100%" height="100%"/> </a><form class="search" action="" method="post"><input class="inp-l fl" type="text" name="" id="" placeholder="课程太多？搜一搜" /><input class="inp-r fr" type="submit" value="搜索"/></form><div class="user"><a href="#">帮助中心</a><a href="#">登录/注册</a></div></div><nav><div class="content-box nav-box"><div class="nav-l fl"><a href="#">电脑办公</a><a href="#">平面设计</a><a href="#">室内设计</a><a href="#">室外设计</a><a href="#">影视动画</a><a href="#">机械设计</a><a href="#">工业自动</a><a href="#">程序设计</a><a href="#">网页设计</a><a href="#">会计设计</a></div><div class="nav-r fr"><a href="#">首页</a><a href="#">商城</a><a href="#">论坛</a></div></div></nav> <div class="hdp"><div class="content-box"><div class="hdp-img clearfix" ><a href="" class="fl"><img src="img/10101012295811.jpg" width="100%" height="100%"/></a><a href="" class="fl"><img src="img/10151003395231.jpg" width="100%" height="100%"/></a><a href="" class="fl"><img src="img/10301022055219.jpg" width="100%" height="100%"/></a></div><div class="wzgg"> <h3>网站公告</h3><ul><li> <a href="">新版页面更新使用</a> </li></ul></div></div></div><div class="ycpxb content-box"><a href="#" class="a1"><span>远程培训班</span> </a><a href="#" class="a2"><span class="span2">[与您同行] <br/> 校园活动 </span></a><a href="#" class="a3"><span>学习规划</span></a><a href="#" class="a4"><span>应聘讲师</span></a><a href="#" class="a5"><span>问答系统</span></a></div><div class="zxkc content-box"><h3 class="m-title">最新课程</h3> <div class="m-list zx-box clearfix"><a href="#"><img src="img/782.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a href="#"><img src="img/781.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a href="#"><img src="img/780.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a href="#"><img src="img/779.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a href="#"><img src="img/778.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a href="#"><img src="img/777.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a href="#"><img src="img/776.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a href="#"><img src="img/775.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a></div></div><div class="rmtj content-box"><h3 class="m-title">热门推荐</h3> <div class="rm-nav clearfix"> <a class="rm-a" href="#">电脑办公</a><a class="rm-b" href="#">平面设计</a><a class="rm-b" href="#">室内设计</a><a class="rm-b" href="#">室内设计</a><a class="rm-b" href="#">室内设计</a><a class="rm-b" href="#">室内设计</a><a class="rm-b" href="#">室内设计</a><a class="rm-b" href="#">室内设计</a><a class="rm-b" href="#">室内设计</a><a class="rm-b" href="#">室内设计</a></div><div class="m-list rm-box clearfix"><a href="#"><img src="img/354.jpg"/><p>C#入门教程</p></a><a href="#"><img src="img/649.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a href="#"><img src="img/752.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a href="#"><img src="img/676.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a href="#"><img src="img/626.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a></div></div></header></body></html>

12-10 课程分类结构

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>课程分类结构</title><link rel="stylesheet" type="text/css" href="css/reset.css"/><link rel="stylesheet" type="text/css" href="css/51zxw.css"/></head><body><header><div class="content-box h-top"><a class="logo" href=""> <img src="img/logo.png" width="100%" height="100%"/> </a><form class="search" action="" method="post"><input class="inp-l fl" type="text" name="" id="" placeholder="课程太多？搜一搜" /><input class="inp-r fr" type="submit" value="搜索"/></form><div class="user"><a href="#">帮助中心</a><a href="#">登录/注册</a></div></div><nav><div class="content-box nav-box"><div class="nav-l fl"><a href="#">电脑办公</a><a href="#">平面设计</a><a href="#">室内设计</a><a href="#">室外设计</a><a href="#">影视动画</a><a href="#">机械设计</a><a href="#">工业自动</a><a href="#">程序设计</a><a href="#">网页设计</a><a href="#">会计设计</a></div><div class="nav-r fr"><a href="#">首页</a><a href="#">商城</a><a href="#">论坛</a></div></div></nav> <div class="hdp"><div class="content-box"><div class="hdp-img clearfix" ><a href="" class="fl"><img src="img/10101012295811.jpg" width="100%" height="100%"/></a><a href="" class="fl"><img src="img/10151003395231.jpg" width="100%" height="100%"/></a><a href="" class="fl"><img src="img/10301022055219.jpg" width="100%" height="100%"/></a></div><div class="wzgg"> <h3>网站公告</h3><ul><li> <a href="">新版页面更新使用</a> </li></ul></div></div></div><div class="ycpxb content-box"><a href="#" class="a1"><span>远程培训班</span> </a><a href="#" class="a2"><span class="span2">[与您同行] <br/> 校园活动 </span></a><a href="#" class="a3"><span>学习规划</span></a><a href="#" class="a4"><span>应聘讲师</span></a><a href="#" class="a5"><span>问答系统</span></a></div><div class="zxkc content-box"><h3 class="m-title">最新课程</h3> <div class="m-list zx-box clearfix"><a href="#"><img src="img/782.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a href="#"><img src="img/781.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a href="#"><img src="img/780.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a href="#"><img src="img/779.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a href="#"><img src="img/778.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a href="#"><img src="img/777.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a href="#"><img src="img/776.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a href="#"><img src="img/775.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a></div></div><div class="rmtj content-box"><h3 class="m-title">热门推荐</h3> <div class="rm-nav clearfix"> <a class="rm-a" href="#">电脑办公</a><a class="rm-b" href="#">平面设计</a><a class="rm-b" href="#">室内设计</a><a class="rm-b" href="#">室内设计</a><a class="rm-b" href="#">室内设计</a><a class="rm-b" href="#">室内设计</a><a class="rm-b" href="#">室内设计</a><a class="rm-b" href="#">室内设计</a><a class="rm-b" href="#">室内设计</a><a class="rm-b" href="#">室内设计</a></div><div class="m-list rm-box clearfix"><a href="#"><img src="img/354.jpg"/><p>C#入门教程</p></a><a href="#"><img src="img/649.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a href="#"><img src="img/752.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a href="#"><img src="img/676.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a href="#"><img src="img/626.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a></div></div><div class="kcfl content-box"><h3 class="m-title">课程分类</h3> <div class="kc-nav clearfix">  <a class="kc-nav-a" href="#">WordExcel基础</a><a class="kc-nav-a" href="#">PPT</a><a class="kc-nav-a" href="#">WPS</a><a class="kc-nav-a" href="#">iebook</a><a class="kc-nav-a" href="#">五笔输入法86版</a><a class="kc-nav-a" href="#">电脑入门</a><a class="kc-nav-a" href="#">PDF文档</a><a class="kc-nav-a" href="#">visio</a><a class="kc-nav-a" href="#">Windows</a><a class="kc-nav-a" href="#">Acrobat</a><a class="kc-nav-a" href="#">计算机等级考试</a><a class="kc-nav-a" href="#">Excel 进阶</a><a class="kc-nav-b" href="#">更多>></a></div><div class="m-list kc-box clearfix"><a class="kc-a" href="#"><img src="img/class1.jpg"/><p>C#入门教程</p></a><a class="kc-b" href="#"><img src="img/649.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a class="kc-b" href="#"><img src="img/752.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a class="kc-b" href="#"><img src="img/676.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a class="kc-b" href="#"><img src="img/626.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a></div><div class="kc-nav clearfix">  <a class="kc-nav-a" href="#">WordExcel基础</a><a class="kc-nav-a" href="#">PPT</a><a class="kc-nav-a" href="#">WPS</a><a class="kc-nav-a" href="#">iebook</a><a class="kc-nav-a" href="#">五笔输入法86版</a><a class="kc-nav-a" href="#">电脑入门</a><a class="kc-nav-a" href="#">PDF文档</a><a class="kc-nav-a" href="#">visio</a><a class="kc-nav-a" href="#">Windows</a><a class="kc-nav-a" href="#">Acrobat</a><a class="kc-nav-a" href="#">计算机等级考试</a><a class="kc-nav-a" href="#">Excel 进阶</a><a class="kc-nav-a" href="#">Excel 进阶</a><a class="kc-nav-a" href="#">Excel 进阶</a><a class="kc-nav-a" href="#">Excel 进阶</a><a class="kc-nav-a" href="#">Excel 进阶</a><a class="kc-nav-a" href="#">Excel 进阶</a><a class="kc-nav-a" href="#">Excel 进阶</a><a class="kc-nav-b" href="#">更多>></a></div><div class="m-list kc-box clearfix"><a class="kc-a" href="#"><img src="img/class1.jpg"/><p>C#入门教程</p></a><a class="kc-b" href="#"><img src="img/649.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a class="kc-b" href="#"><img src="img/752.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a class="kc-b" href="#"><img src="img/676.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a class="kc-b" href="#"><img src="img/626.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a></div><div class="kc-nav clearfix">  <a class="kc-nav-a" href="#">WordExcel基础</a><a class="kc-nav-a" href="#">PPT</a><a class="kc-nav-a" href="#">WPS</a><a class="kc-nav-a" href="#">iebook</a><a class="kc-nav-a" href="#">五笔输入法86版</a><a class="kc-nav-a" href="#">电脑入门</a><a class="kc-nav-a" href="#">PDF文档</a><a class="kc-nav-a" href="#">visio</a><a class="kc-nav-a" href="#">Windows</a><a class="kc-nav-a" href="#">Acrobat</a><a class="kc-nav-a" href="#">计算机等级考试</a><a class="kc-nav-a" href="#">Excel 进阶</a><a class="kc-nav-a" href="#">Excel 进阶</a><a class="kc-nav-a" href="#">Excel 进阶</a><a class="kc-nav-a" href="#">Excel 进阶</a><a class="kc-nav-a" href="#">Excel 进阶</a><a class="kc-nav-a" href="#">Excel 进阶</a><a class="kc-nav-a" href="#">Excel 进阶</a><a class="kc-nav-b" href="#">更多>></a></div><div class="m-list kc-box clearfix"><a class="kc-a" href="#"><img src="img/class1.jpg"/><p>C#入门教程</p></a><a class="kc-b" href="#"><img src="img/649.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a class="kc-b" href="#"><img src="img/752.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a class="kc-b" href="#"><img src="img/676.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a class="kc-b" href="#"><img src="img/626.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a></div></div></header></body></html>

12-11 名师简介区块结构

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>名师简介结构</title><link rel="stylesheet" type="text/css" href="css/reset.css"/><link rel="stylesheet" type="text/css" href="css/51zxw.css"/></head><body><header><div class="content-box h-top"><a class="logo" href=""> <img src="img/logo.png" width="100%" height="100%"/> </a><form class="search" action="" method="post"><input class="inp-l fl" type="text" name="" id="" placeholder="课程太多？搜一搜" /><input class="inp-r fr" type="submit" value="搜索"/></form><div class="user"><a href="#">帮助中心</a><a href="#">登录/注册</a></div></div><nav><div class="content-box nav-box"><div class="nav-l fl"><a href="#">电脑办公</a><a href="#">平面设计</a><a href="#">室内设计</a><a href="#">室外设计</a><a href="#">影视动画</a><a href="#">机械设计</a><a href="#">工业自动</a><a href="#">程序设计</a><a href="#">网页设计</a><a href="#">会计设计</a></div><div class="nav-r fr"><a href="#">首页</a><a href="#">商城</a><a href="#">论坛</a></div></div></nav> <div class="hdp"><div class="content-box"><div class="hdp-img clearfix" ><a href="" class="fl"><img src="img/10101012295811.jpg" width="100%" height="100%"/></a><a href="" class="fl"><img src="img/10151003395231.jpg" width="100%" height="100%"/></a><a href="" class="fl"><img src="img/10301022055219.jpg" width="100%" height="100%"/></a></div><div class="wzgg"> <h3>网站公告</h3><ul><li> <a href="">新版页面更新使用</a> </li></ul></div></div></div><div class="ycpxb content-box"><a href="#" class="a1"><span>远程培训班</span> </a><a href="#" class="a2"><span class="span2">[与您同行] <br/> 校园活动 </span></a><a href="#" class="a3"><span>学习规划</span></a><a href="#" class="a4"><span>应聘讲师</span></a><a href="#" class="a5"><span>问答系统</span></a></div><div class="zxkc content-box"><h3 class="m-title">最新课程</h3> <div class="m-list zx-box clearfix"><a href="#"><img src="img/782.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a href="#"><img src="img/781.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a href="#"><img src="img/780.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a href="#"><img src="img/779.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a href="#"><img src="img/778.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a href="#"><img src="img/777.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a href="#"><img src="img/776.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a href="#"><img src="img/775.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a></div></div><div class="rmtj content-box"><h3 class="m-title">热门推荐</h3> <div class="rm-nav clearfix"> <a class="rm-a" href="#">电脑办公</a><a class="rm-b" href="#">平面设计</a><a class="rm-b" href="#">室内设计</a><a class="rm-b" href="#">室内设计</a><a class="rm-b" href="#">室内设计</a><a class="rm-b" href="#">室内设计</a><a class="rm-b" href="#">室内设计</a><a class="rm-b" href="#">室内设计</a><a class="rm-b" href="#">室内设计</a><a class="rm-b" href="#">室内设计</a></div><div class="m-list rm-box clearfix"><a href="#"><img src="img/354.jpg"/><p>C#入门教程</p></a><a href="#"><img src="img/649.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a href="#"><img src="img/752.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a href="#"><img src="img/676.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a href="#"><img src="img/626.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a></div></div><div class="kcfl content-box"><h3 class="m-title">课程分类</h3> <div class="kc-nav clearfix">  <a class="kc-nav-a" href="#">WordExcel基础</a><a class="kc-nav-a" href="#">PPT</a><a class="kc-nav-a" href="#">WPS</a><a class="kc-nav-a" href="#">iebook</a><a class="kc-nav-a" href="#">五笔输入法86版</a><a class="kc-nav-a" href="#">电脑入门</a><a class="kc-nav-a" href="#">PDF文档</a><a class="kc-nav-a" href="#">visio</a><a class="kc-nav-a" href="#">Windows</a><a class="kc-nav-a" href="#">Acrobat</a><a class="kc-nav-a" href="#">计算机等级考试</a><a class="kc-nav-a" href="#">Excel 进阶</a><a class="kc-nav-b" href="#">更多>></a></div><div class="m-list kc-box clearfix"><a class="kc-a" href="#"><img src="img/class1.jpg"/><p>C#入门教程</p></a><a class="kc-b" href="#"><img src="img/649.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a class="kc-b" href="#"><img src="img/752.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a class="kc-b" href="#"><img src="img/676.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a class="kc-b" href="#"><img src="img/626.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a></div><div class="kc-nav clearfix">  <a class="kc-nav-a" href="#">WordExcel基础</a><a class="kc-nav-a" href="#">PPT</a><a class="kc-nav-a" href="#">WPS</a><a class="kc-nav-a" href="#">iebook</a><a class="kc-nav-a" href="#">五笔输入法86版</a><a class="kc-nav-a" href="#">电脑入门</a><a class="kc-nav-a" href="#">PDF文档</a><a class="kc-nav-a" href="#">visio</a><a class="kc-nav-a" href="#">Windows</a><a class="kc-nav-a" href="#">Acrobat</a><a class="kc-nav-a" href="#">计算机等级考试</a><a class="kc-nav-a" href="#">Excel 进阶</a><a class="kc-nav-a" href="#">Excel 进阶</a><a class="kc-nav-a" href="#">Excel 进阶</a><a class="kc-nav-a" href="#">Excel 进阶</a><a class="kc-nav-a" href="#">Excel 进阶</a><a class="kc-nav-a" href="#">Excel 进阶</a><a class="kc-nav-a" href="#">Excel 进阶</a><a class="kc-nav-b" href="#">更多>></a></div><div class="m-list kc-box clearfix"><a class="kc-a" href="#"><img src="img/class1.jpg"/><p>C#入门教程</p></a><a class="kc-b" href="#"><img src="img/649.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a class="kc-b" href="#"><img src="img/752.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a class="kc-b" href="#"><img src="img/676.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a class="kc-b" href="#"><img src="img/626.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a></div><div class="kc-nav clearfix">  <a class="kc-nav-a" href="#">WordExcel基础</a><a class="kc-nav-a" href="#">PPT</a><a class="kc-nav-a" href="#">WPS</a><a class="kc-nav-a" href="#">iebook</a><a class="kc-nav-a" href="#">五笔输入法86版</a><a class="kc-nav-a" href="#">电脑入门</a><a class="kc-nav-a" href="#">PDF文档</a><a class="kc-nav-a" href="#">visio</a><a class="kc-nav-a" href="#">Windows</a><a class="kc-nav-a" href="#">Acrobat</a><a class="kc-nav-a" href="#">计算机等级考试</a><a class="kc-nav-a" href="#">Excel 进阶</a><a class="kc-nav-a" href="#">Excel 进阶</a><a class="kc-nav-a" href="#">Excel 进阶</a><a class="kc-nav-a" href="#">Excel 进阶</a><a class="kc-nav-a" href="#">Excel 进阶</a><a class="kc-nav-a" href="#">Excel 进阶</a><a class="kc-nav-a" href="#">Excel 进阶</a><a class="kc-nav-b" href="#">更多>></a></div><div class="m-list kc-box clearfix"><a class="kc-a" href="#"><img src="img/class1.jpg"/><p>C#入门教程</p></a><a class="kc-b" href="#"><img src="img/649.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a class="kc-b" href="#"><img src="img/752.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a class="kc-b" href="#"><img src="img/676.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a class="kc-b" href="#"><img src="img/626.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a></div></div><div style="background: #FFFFFF;"><div class="msjj content-box"><h3 class="m-title">名师简介</h3> <p style="text-align: center;font-size: 20px;">专业讲师为你带来实用易懂的视频教程</p><div class="ms-box clearfix"><a href="#"><img src="img/t_lijiang.jpg" /><p class="p1">小朱老师</p><p class="p2">尤其擅长传授吃货的修养</p></a><a href="#"><img src="img/t_huangjianbi.jpg" /><p class="p1">左老师</p><p class="p2">擅长各种技能</p></a><a href="#"><img src="img/t_tanying.jpg" /><p class="p1">高老师</p><p class="p2">大家都这样称呼</p></a><a href="#"><img src="img/t_xieling.jpg" /><p class="p1">喻老师</p><p class="p2">江湖人称飒姐姐</p></a></div></div></div></header></body></html>

12-12 页面尾部区块结构

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>页面尾部结构</title><link rel="stylesheet" type="text/css" href="css/reset.css"/><link rel="stylesheet" type="text/css" href="css/51zxw.css"/></head><body><header><div class="content-box h-top"><a class="logo" href=""> <img src="img/logo.png" width="100%" height="100%"/> </a><form class="search" action="" method="post"><input class="inp-l fl" type="text" name="" id="" placeholder="课程太多？搜一搜" /><input class="inp-r fr" type="submit" value="搜索"/></form><div class="user"><a href="#">帮助中心</a><a href="#">登录/注册</a></div></div><nav><div class="content-box nav-box"><div class="nav-l fl"><a href="#">电脑办公</a><a href="#">平面设计</a><a href="#">室内设计</a><a href="#">室外设计</a><a href="#">影视动画</a><a href="#">机械设计</a><a href="#">工业自动</a><a href="#">程序设计</a><a href="#">网页设计</a><a href="#">会计设计</a></div><div class="nav-r fr"><a href="#">首页</a><a href="#">商城</a><a href="#">论坛</a></div></div></nav> <div class="hdp"><div class="content-box"><div class="hdp-img clearfix" ><a href="" class="fl"><img src="img/10101012295811.jpg" width="100%" height="100%"/></a><a href="" class="fl"><img src="img/10151003395231.jpg" width="100%" height="100%"/></a><a href="" class="fl"><img src="img/10301022055219.jpg" width="100%" height="100%"/></a></div><div class="wzgg"> <h3>网站公告</h3><ul><li> <a href="">新版页面更新使用</a> </li></ul></div></div></div><div class="ycpxb content-box"><a href="#" class="a1"><span>远程培训班</span> </a><a href="#" class="a2"><span class="span2">[与您同行] <br/> 校园活动 </span></a><a href="#" class="a3"><span>学习规划</span></a><a href="#" class="a4"><span>应聘讲师</span></a><a href="#" class="a5"><span>问答系统</span></a></div><div class="zxkc content-box"><h3 class="m-title">最新课程</h3> <div class="m-list zx-box clearfix"><a href="#"><img src="img/782.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a href="#"><img src="img/781.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a href="#"><img src="img/780.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a href="#"><img src="img/779.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a href="#"><img src="img/778.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a href="#"><img src="img/777.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a href="#"><img src="img/776.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a href="#"><img src="img/775.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a></div></div><div class="rmtj content-box"><h3 class="m-title">热门推荐</h3> <div class="rm-nav clearfix"> <a class="rm-a" href="#">电脑办公</a><a class="rm-b" href="#">平面设计</a><a class="rm-b" href="#">室内设计</a><a class="rm-b" href="#">室内设计</a><a class="rm-b" href="#">室内设计</a><a class="rm-b" href="#">室内设计</a><a class="rm-b" href="#">室内设计</a><a class="rm-b" href="#">室内设计</a><a class="rm-b" href="#">室内设计</a><a class="rm-b" href="#">室内设计</a></div><div class="m-list rm-box clearfix"><a href="#"><img src="img/354.jpg"/><p>C#入门教程</p></a><a href="#"><img src="img/649.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a href="#"><img src="img/752.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a href="#"><img src="img/676.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a href="#"><img src="img/626.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a></div></div><div class="kcfl content-box"><h3 class="m-title">课程分类</h3> <div class="kc-nav clearfix">  <a class="kc-nav-a" href="#">WordExcel基础</a><a class="kc-nav-a" href="#">PPT</a><a class="kc-nav-a" href="#">WPS</a><a class="kc-nav-a" href="#">iebook</a><a class="kc-nav-a" href="#">五笔输入法86版</a><a class="kc-nav-a" href="#">电脑入门</a><a class="kc-nav-a" href="#">PDF文档</a><a class="kc-nav-a" href="#">visio</a><a class="kc-nav-a" href="#">Windows</a><a class="kc-nav-a" href="#">Acrobat</a><a class="kc-nav-a" href="#">计算机等级考试</a><a class="kc-nav-a" href="#">Excel 进阶</a><a class="kc-nav-b" href="#">更多>></a></div><div class="m-list kc-box clearfix"><a class="kc-a" href="#"><img src="img/class1.jpg"/><p>C#入门教程</p></a><a class="kc-b" href="#"><img src="img/649.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a class="kc-b" href="#"><img src="img/752.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a class="kc-b" href="#"><img src="img/676.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a class="kc-b" href="#"><img src="img/626.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a></div><div class="kc-nav clearfix">  <a class="kc-nav-a" href="#">WordExcel基础</a><a class="kc-nav-a" href="#">PPT</a><a class="kc-nav-a" href="#">WPS</a><a class="kc-nav-a" href="#">iebook</a><a class="kc-nav-a" href="#">五笔输入法86版</a><a class="kc-nav-a" href="#">电脑入门</a><a class="kc-nav-a" href="#">PDF文档</a><a class="kc-nav-a" href="#">visio</a><a class="kc-nav-a" href="#">Windows</a><a class="kc-nav-a" href="#">Acrobat</a><a class="kc-nav-a" href="#">计算机等级考试</a><a class="kc-nav-a" href="#">Excel 进阶</a><a class="kc-nav-a" href="#">Excel 进阶</a><a class="kc-nav-a" href="#">Excel 进阶</a><a class="kc-nav-a" href="#">Excel 进阶</a><a class="kc-nav-a" href="#">Excel 进阶</a><a class="kc-nav-a" href="#">Excel 进阶</a><a class="kc-nav-a" href="#">Excel 进阶</a><a class="kc-nav-b" href="#">更多>></a></div><div class="m-list kc-box clearfix"><a class="kc-a" href="#"><img src="img/class1.jpg"/><p>C#入门教程</p></a><a class="kc-b" href="#"><img src="img/649.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a class="kc-b" href="#"><img src="img/752.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a class="kc-b" href="#"><img src="img/676.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a class="kc-b" href="#"><img src="img/626.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a></div><div class="kc-nav clearfix">  <a class="kc-nav-a" href="#">WordExcel基础</a><a class="kc-nav-a" href="#">PPT</a><a class="kc-nav-a" href="#">WPS</a><a class="kc-nav-a" href="#">iebook</a><a class="kc-nav-a" href="#">五笔输入法86版</a><a class="kc-nav-a" href="#">电脑入门</a><a class="kc-nav-a" href="#">PDF文档</a><a class="kc-nav-a" href="#">visio</a><a class="kc-nav-a" href="#">Windows</a><a class="kc-nav-a" href="#">Acrobat</a><a class="kc-nav-a" href="#">计算机等级考试</a><a class="kc-nav-a" href="#">Excel 进阶</a><a class="kc-nav-a" href="#">Excel 进阶</a><a class="kc-nav-a" href="#">Excel 进阶</a><a class="kc-nav-a" href="#">Excel 进阶</a><a class="kc-nav-a" href="#">Excel 进阶</a><a class="kc-nav-a" href="#">Excel 进阶</a><a class="kc-nav-a" href="#">Excel 进阶</a><a class="kc-nav-b" href="#">更多>></a></div><div class="m-list kc-box clearfix"><a class="kc-a" href="#"><img src="img/class1.jpg"/><p>C#入门教程</p></a><a class="kc-b" href="#"><img src="img/649.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a class="kc-b" href="#"><img src="img/752.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a class="kc-b" href="#"><img src="img/676.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a class="kc-b" href="#"><img src="img/626.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a></div></div><div style="background: #FFFFFF;"><div class="msjj content-box"><h3 class="m-title">名师简介</h3> <p style="text-align: center;font-size: 20px;">专业讲师为你带来实用易懂的视频教程</p><div class="ms-box clearfix"><a href="#"><img src="img/t_lijiang.jpg" /><p class="p1">小朱老师</p><p class="p2">尤其擅长传授吃货的修养</p></a><a href="#"><img src="img/t_huangjianbi.jpg" /><p class="p1">左老师</p><p class="p2">擅长各种技能</p></a><a href="#"><img src="img/t_tanying.jpg" /><p class="p1">高老师</p><p class="p2">大家都这样称呼</p></a><a href="#"><img src="img/t_xieling.jpg" /><p class="p1">喻老师</p><p class="p2">江湖人称飒姐姐</p></a></div></div></div><footer class="content-box"><p class="f-p1"><b>网站信息</b><span>建站时间：124124</span><span>教程数量：53253</span><span>注册人数：4235325253</span></p><p class="f-p2"><b>友情链接</b><a href="#"> <img src="img/baidu.png"/> </a><a href="#"> <img src="img/360.png"/> </a><a href="#"> <img src="img/rising_51.png"/> </a><a href="#"> <img src="img/rising_51.png"/> </a><a href="#"> <img src="img/baidu.png"/> </a></p><p class="f-p3"><a href="#">大耳朵英语</a><a href="#">高分网</a><a href="#">大耳朵英语</a><a href="#">精英家教网</a><a href="#">大耳朵英语</a><a href="#">精英家教网</a><a href="#">高分网</a><a href="#">上学吧</a><a href="#">精英家教网</a><a href="#">上学吧</a><a href="#">精英家教网</a><a href="#">上学吧</a><a href="#">精英家教网</a><a href="#">上学吧</a><a href="#">上学吧</a><a href="#">精英家教网</a><a href="#">上学吧</a><a href="#">精英家教网</a><a href="#">精英家教网</a><a href="#">上学吧</a><a href="#">精英家教网</a><a href="#">上学吧</a></p><p class="f-p4"><a href="#">关于网站</a><a href="#">关于我们</a><a href="#">网站地图</a><a href="#">购买教程</a><a href="#">在线咨询</a><a href="#">业务合作</a><a href="#">建议留言</a></p><p class="f-p5"><span>我要自学网版权所有未经许可自学网版权所有未经许可自学网版权所有未经许可,本网站任何视频教程法律顾问：刘炜律师</span><img src="img/pic.gif"/></p><p class="f-p6"><a href="#"><img src="img/footPic1.png"/></a><a href="#"><img src="img/footPic2.png"/></a></p></footer></header></body></html>

12-13 左侧快速跳转区块结构

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>左侧快速跳转结构</title><link rel="stylesheet" type="text/css" href="css/reset.css"/><link rel="stylesheet" type="text/css" href="css/51zxw.css"/></head><body><header><div class="content-box h-top"><a class="logo" href=""> <img src="img/logo.png" width="100%" height="100%"/> </a><form class="search" action="" method="post"><input class="inp-l fl" type="text" name="" id="" placeholder="课程太多？搜一搜" /><input class="inp-r fr" type="submit" value="搜索"/></form><div class="user"><a href="#">帮助中心</a><a href="#">登录/注册</a></div></div><nav><div class="content-box nav-box"><div class="nav-l fl"><a href="#">电脑办公</a><a href="#">平面设计</a><a href="#">室内设计</a><a href="#">室外设计</a><a href="#">影视动画</a><a href="#">机械设计</a><a href="#">工业自动</a><a href="#">程序设计</a><a href="#">网页设计</a><a href="#">会计设计</a></div><div class="nav-r fr"><a href="#">首页</a><a href="#">商城</a><a href="#">论坛</a></div></div></nav> <div class="hdp"><div class="content-box"><div class="hdp-img clearfix" ><a href="" class="fl"><img src="img/10101012295811.jpg" width="100%" height="100%"/></a><a href="" class="fl"><img src="img/10151003395231.jpg" width="100%" height="100%"/></a><a href="" class="fl"><img src="img/10301022055219.jpg" width="100%" height="100%"/></a></div><div class="wzgg"> <h3>网站公告</h3><ul><li> <a href="">新版页面更新使用</a> </li></ul></div></div></div><div class="ycpxb content-box"><a href="#" class="a1"><span>远程培训班</span> </a><a href="#" class="a2"><span class="span2">[与您同行] <br/> 校园活动 </span></a><a href="#" class="a3"><span>学习规划</span></a><a href="#" class="a4"><span>应聘讲师</span></a><a href="#" class="a5"><span>问答系统</span></a></div><div class="zxkc content-box"><h3 class="m-title">最新课程</h3> <div class="m-list zx-box clearfix"><a href="#"><img src="img/782.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a href="#"><img src="img/781.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a href="#"><img src="img/780.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a href="#"><img src="img/779.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a href="#"><img src="img/778.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a href="#"><img src="img/777.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a href="#"><img src="img/776.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a href="#"><img src="img/775.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a></div></div><div class="rmtj content-box"><h3 class="m-title">热门推荐</h3> <div class="rm-nav clearfix"> <a class="rm-a" href="#">电脑办公</a><a class="rm-b" href="#">平面设计</a><a class="rm-b" href="#">室内设计</a><a class="rm-b" href="#">室内设计</a><a class="rm-b" href="#">室内设计</a><a class="rm-b" href="#">室内设计</a><a class="rm-b" href="#">室内设计</a><a class="rm-b" href="#">室内设计</a><a class="rm-b" href="#">室内设计</a><a class="rm-b" href="#">室内设计</a></div><div class="m-list rm-box clearfix"><a href="#"><img src="img/354.jpg"/><p>C#入门教程</p></a><a href="#"><img src="img/649.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a href="#"><img src="img/752.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a href="#"><img src="img/676.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a href="#"><img src="img/626.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a></div></div><div class="kcfl content-box"><h3 class="m-title">课程分类</h3> <div class="kc-nav clearfix">  <a class="kc-nav-a" href="#">WordExcel基础</a><a class="kc-nav-a" href="#">PPT</a><a class="kc-nav-a" href="#">WPS</a><a class="kc-nav-a" href="#">iebook</a><a class="kc-nav-a" href="#">五笔输入法86版</a><a class="kc-nav-a" href="#">电脑入门</a><a class="kc-nav-a" href="#">PDF文档</a><a class="kc-nav-a" href="#">visio</a><a class="kc-nav-a" href="#">Windows</a><a class="kc-nav-a" href="#">Acrobat</a><a class="kc-nav-a" href="#">计算机等级考试</a><a class="kc-nav-a" href="#">Excel 进阶</a><a class="kc-nav-b" href="#">更多>></a></div><div class="m-list kc-box clearfix"><a class="kc-a" href="#"><img src="img/class1.jpg"/><p>C#入门教程</p></a><a class="kc-b" href="#"><img src="img/649.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a class="kc-b" href="#"><img src="img/752.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a class="kc-b" href="#"><img src="img/676.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a class="kc-b" href="#"><img src="img/626.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a></div><div class="kc-nav clearfix">  <a class="kc-nav-a" href="#">WordExcel基础</a><a class="kc-nav-a" href="#">PPT</a><a class="kc-nav-a" href="#">WPS</a><a class="kc-nav-a" href="#">iebook</a><a class="kc-nav-a" href="#">五笔输入法86版</a><a class="kc-nav-a" href="#">电脑入门</a><a class="kc-nav-a" href="#">PDF文档</a><a class="kc-nav-a" href="#">visio</a><a class="kc-nav-a" href="#">Windows</a><a class="kc-nav-a" href="#">Acrobat</a><a class="kc-nav-a" href="#">计算机等级考试</a><a class="kc-nav-a" href="#">Excel 进阶</a><a class="kc-nav-a" href="#">Excel 进阶</a><a class="kc-nav-a" href="#">Excel 进阶</a><a class="kc-nav-a" href="#">Excel 进阶</a><a class="kc-nav-a" href="#">Excel 进阶</a><a class="kc-nav-a" href="#">Excel 进阶</a><a class="kc-nav-a" href="#">Excel 进阶</a><a class="kc-nav-b" href="#">更多>></a></div><div class="m-list kc-box clearfix"><a class="kc-a" href="#"><img src="img/class1.jpg"/><p>C#入门教程</p></a><a class="kc-b" href="#"><img src="img/649.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a class="kc-b" href="#"><img src="img/752.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a class="kc-b" href="#"><img src="img/676.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a class="kc-b" href="#"><img src="img/626.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a></div><div class="kc-nav clearfix">  <a class="kc-nav-a" href="#">WordExcel基础</a><a class="kc-nav-a" href="#">PPT</a><a class="kc-nav-a" href="#">WPS</a><a class="kc-nav-a" href="#">iebook</a><a class="kc-nav-a" href="#">五笔输入法86版</a><a class="kc-nav-a" href="#">电脑入门</a><a class="kc-nav-a" href="#">PDF文档</a><a class="kc-nav-a" href="#">visio</a><a class="kc-nav-a" href="#">Windows</a><a class="kc-nav-a" href="#">Acrobat</a><a class="kc-nav-a" href="#">计算机等级考试</a><a class="kc-nav-a" href="#">Excel 进阶</a><a class="kc-nav-a" href="#">Excel 进阶</a><a class="kc-nav-a" href="#">Excel 进阶</a><a class="kc-nav-a" href="#">Excel 进阶</a><a class="kc-nav-a" href="#">Excel 进阶</a><a class="kc-nav-a" href="#">Excel 进阶</a><a class="kc-nav-a" href="#">Excel 进阶</a><a class="kc-nav-b" href="#">更多>></a></div><div class="m-list kc-box clearfix"><a class="kc-a" href="#"><img src="img/class1.jpg"/><p>C#入门教程</p></a><a class="kc-b" href="#"><img src="img/649.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a class="kc-b" href="#"><img src="img/752.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a class="kc-b" href="#"><img src="img/676.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a class="kc-b" href="#"><img src="img/626.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a></div></div><div style="background: #FFFFFF;"><div class="msjj content-box"><h3 class="m-title">名师简介</h3> <p style="text-align: center;font-size: 20px;">专业讲师为你带来实用易懂的视频教程</p><div class="ms-box clearfix"><a href="#"><img src="img/t_lijiang.jpg" /><p class="p1">小朱老师</p><p class="p2">尤其擅长传授吃货的修养</p></a><a href="#"><img src="img/t_huangjianbi.jpg" /><p class="p1">左老师</p><p class="p2">擅长各种技能</p></a><a href="#"><img src="img/t_tanying.jpg" /><p class="p1">高老师</p><p class="p2">大家都这样称呼</p></a><a href="#"><img src="img/t_xieling.jpg" /><p class="p1">喻老师</p><p class="p2">江湖人称飒姐姐</p></a></div></div></div><footer class="content-box"><p class="f-p1"><b>网站信息</b><span>建站时间：124124</span><span>教程数量：53253</span><span>注册人数：4235325253</span></p><p class="f-p2"><b>友情链接</b><a href="#"> <img src="img/baidu.png"/> </a><a href="#"> <img src="img/360.png"/> </a><a href="#"> <img src="img/rising_51.png"/> </a><a href="#"> <img src="img/rising_51.png"/> </a><a href="#"> <img src="img/baidu.png"/> </a></p><p class="f-p3"><a href="#">大耳朵英语</a><a href="#">高分网</a><a href="#">大耳朵英语</a><a href="#">精英家教网</a><a href="#">大耳朵英语</a><a href="#">精英家教网</a><a href="#">高分网</a><a href="#">上学吧</a><a href="#">精英家教网</a><a href="#">上学吧</a><a href="#">精英家教网</a><a href="#">上学吧</a><a href="#">精英家教网</a><a href="#">上学吧</a><a href="#">上学吧</a><a href="#">精英家教网</a><a href="#">上学吧</a><a href="#">精英家教网</a><a href="#">精英家教网</a><a href="#">上学吧</a><a href="#">精英家教网</a><a href="#">上学吧</a></p><p class="f-p4"><a href="#">关于网站</a><a href="#">关于我们</a><a href="#">网站地图</a><a href="#">购买教程</a><a href="#">在线咨询</a><a href="#">业务合作</a><a href="#">建议留言</a></p><p class="f-p5"><span>我要自学网版权所有未经许可自学网版权所有未经许可自学网版权所有未经许可,本网站任何视频教程法律顾问：刘炜律师</span><img src="img/pic.gif"/></p><p class="f-p6"><a href="#"><img src="img/footPic1.png"/></a><a href="#"><img src="img/footPic2.png"/></a></p></footer><div class="kstz"><h4>快速跳转</h4><a href="#">最新<br />课程</a><a href="#">热门<br />推荐</a><a href="#">课程<br />分类</a><a href="#">热门<br />职业</a><a href="#">名师<br />简介</a></div> </header></body></html>

12-14 右侧微信区块结构

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>右侧微信区块结构</title><link rel="stylesheet" type="text/css" href="css/reset.css"/><link rel="stylesheet" type="text/css" href="css/51zxw.css"/></head><body><header><div class="content-box h-top"><a class="logo" href=""> <img src="img/logo.png" width="100%" height="100%"/> </a><form class="search" action="" method="post"><input class="inp-l fl" type="text" name="" id="" placeholder="课程太多？搜一搜" /><input class="inp-r fr" type="submit" value="搜索"/></form><div class="user"><a href="#">帮助中心</a><a href="#">登录/注册</a></div></div><nav><div class="content-box nav-box"><div class="nav-l fl"><a href="#">电脑办公</a><a href="#">平面设计</a><a href="#">室内设计</a><a href="#">室外设计</a><a href="#">影视动画</a><a href="#">机械设计</a><a href="#">工业自动</a><a href="#">程序设计</a><a href="#">网页设计</a><a href="#">会计设计</a></div><div class="nav-r fr"><a href="#">首页</a><a href="#">商城</a><a href="#">论坛</a></div></div></nav> <div class="hdp"><div class="content-box"><div class="hdp-img clearfix" ><a href="" class="fl"><img src="img/10101012295811.jpg" width="100%" height="100%"/></a><a href="" class="fl"><img src="img/10151003395231.jpg" width="100%" height="100%"/></a><a href="" class="fl"><img src="img/10301022055219.jpg" width="100%" height="100%"/></a></div><div class="wzgg"> <h3>网站公告</h3><ul><li> <a href="">新版页面更新使用</a> </li></ul></div></div></div><div class="ycpxb content-box"><a href="#" class="a1"><span>远程培训班</span> </a><a href="#" class="a2"><span class="span2">[与您同行] <br/> 校园活动 </span></a><a href="#" class="a3"><span>学习规划</span></a><a href="#" class="a4"><span>应聘讲师</span></a><a href="#" class="a5"><span>问答系统</span></a></div><div class="zxkc content-box"><h3 class="m-title">最新课程</h3> <div class="m-list zx-box clearfix"><a href="#"><img src="img/782.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a href="#"><img src="img/781.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a href="#"><img src="img/780.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a href="#"><img src="img/779.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a href="#"><img src="img/778.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a href="#"><img src="img/777.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a href="#"><img src="img/776.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a href="#"><img src="img/775.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a></div></div><div class="rmtj content-box"><h3 class="m-title">热门推荐</h3> <div class="rm-nav clearfix"> <a class="rm-a" href="#">电脑办公</a><a class="rm-b" href="#">平面设计</a><a class="rm-b" href="#">室内设计</a><a class="rm-b" href="#">室内设计</a><a class="rm-b" href="#">室内设计</a><a class="rm-b" href="#">室内设计</a><a class="rm-b" href="#">室内设计</a><a class="rm-b" href="#">室内设计</a><a class="rm-b" href="#">室内设计</a><a class="rm-b" href="#">室内设计</a></div><div class="m-list rm-box clearfix"><a href="#"><img src="img/354.jpg"/><p>C#入门教程</p></a><a href="#"><img src="img/649.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a href="#"><img src="img/752.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a href="#"><img src="img/676.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a href="#"><img src="img/626.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a></div></div><div class="kcfl content-box"><h3 class="m-title">课程分类</h3> <div class="kc-nav clearfix">  <a class="kc-nav-a" href="#">WordExcel基础</a><a class="kc-nav-a" href="#">PPT</a><a class="kc-nav-a" href="#">WPS</a><a class="kc-nav-a" href="#">iebook</a><a class="kc-nav-a" href="#">五笔输入法86版</a><a class="kc-nav-a" href="#">电脑入门</a><a class="kc-nav-a" href="#">PDF文档</a><a class="kc-nav-a" href="#">visio</a><a class="kc-nav-a" href="#">Windows</a><a class="kc-nav-a" href="#">Acrobat</a><a class="kc-nav-a" href="#">计算机等级考试</a><a class="kc-nav-a" href="#">Excel 进阶</a><a class="kc-nav-b" href="#">更多>></a></div><div class="m-list kc-box clearfix"><a class="kc-a" href="#"><img src="img/class1.jpg"/><p>C#入门教程</p></a><a class="kc-b" href="#"><img src="img/649.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a class="kc-b" href="#"><img src="img/752.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a class="kc-b" href="#"><img src="img/676.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a class="kc-b" href="#"><img src="img/626.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a></div><div class="kc-nav clearfix">  <a class="kc-nav-a" href="#">WordExcel基础</a><a class="kc-nav-a" href="#">PPT</a><a class="kc-nav-a" href="#">WPS</a><a class="kc-nav-a" href="#">iebook</a><a class="kc-nav-a" href="#">五笔输入法86版</a><a class="kc-nav-a" href="#">电脑入门</a><a class="kc-nav-a" href="#">PDF文档</a><a class="kc-nav-a" href="#">visio</a><a class="kc-nav-a" href="#">Windows</a><a class="kc-nav-a" href="#">Acrobat</a><a class="kc-nav-a" href="#">计算机等级考试</a><a class="kc-nav-a" href="#">Excel 进阶</a><a class="kc-nav-a" href="#">Excel 进阶</a><a class="kc-nav-a" href="#">Excel 进阶</a><a class="kc-nav-a" href="#">Excel 进阶</a><a class="kc-nav-a" href="#">Excel 进阶</a><a class="kc-nav-a" href="#">Excel 进阶</a><a class="kc-nav-a" href="#">Excel 进阶</a><a class="kc-nav-b" href="#">更多>></a></div><div class="m-list kc-box clearfix"><a class="kc-a" href="#"><img src="img/class1.jpg"/><p>C#入门教程</p></a><a class="kc-b" href="#"><img src="img/649.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a class="kc-b" href="#"><img src="img/752.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a class="kc-b" href="#"><img src="img/676.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a class="kc-b" href="#"><img src="img/626.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a></div><div class="kc-nav clearfix">  <a class="kc-nav-a" href="#">WordExcel基础</a><a class="kc-nav-a" href="#">PPT</a><a class="kc-nav-a" href="#">WPS</a><a class="kc-nav-a" href="#">iebook</a><a class="kc-nav-a" href="#">五笔输入法86版</a><a class="kc-nav-a" href="#">电脑入门</a><a class="kc-nav-a" href="#">PDF文档</a><a class="kc-nav-a" href="#">visio</a><a class="kc-nav-a" href="#">Windows</a><a class="kc-nav-a" href="#">Acrobat</a><a class="kc-nav-a" href="#">计算机等级考试</a><a class="kc-nav-a" href="#">Excel 进阶</a><a class="kc-nav-a" href="#">Excel 进阶</a><a class="kc-nav-a" href="#">Excel 进阶</a><a class="kc-nav-a" href="#">Excel 进阶</a><a class="kc-nav-a" href="#">Excel 进阶</a><a class="kc-nav-a" href="#">Excel 进阶</a><a class="kc-nav-a" href="#">Excel 进阶</a><a class="kc-nav-b" href="#">更多>></a></div><div class="m-list kc-box clearfix"><a class="kc-a" href="#"><img src="img/class1.jpg"/><p>C#入门教程</p></a><a class="kc-b" href="#"><img src="img/649.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a class="kc-b" href="#"><img src="img/752.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a class="kc-b" href="#"><img src="img/676.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a><a class="kc-b" href="#"><img src="img/626.jpg"/><p>Excel VBA编程宝典1---初战篇</p></a></div></div><div style="background: #FFFFFF;"><div class="msjj content-box"><h3 class="m-title">名师简介</h3> <p style="text-align: center;font-size: 20px;">专业讲师为你带来实用易懂的视频教程</p><div class="ms-box clearfix"><a href="#"><img src="img/t_lijiang.jpg" /><p class="p1">小朱老师</p><p class="p2">尤其擅长传授吃货的修养</p></a><a href="#"><img src="img/t_huangjianbi.jpg" /><p class="p1">左老师</p><p class="p2">擅长各种技能</p></a><a href="#"><img src="img/t_tanying.jpg" /><p class="p1">高老师</p><p class="p2">大家都这样称呼</p></a><a href="#"><img src="img/t_xieling.jpg" /><p class="p1">喻老师</p><p class="p2">江湖人称飒姐姐</p></a></div></div></div><footer class="content-box"><p class="f-p1"><b>网站信息</b><span>建站时间：124124</span><span>教程数量：53253</span><span>注册人数：4235325253</span></p><p class="f-p2"><b>友情链接</b><a href="#"> <img src="img/baidu.png"/> </a><a href="#"> <img src="img/360.png"/> </a><a href="#"> <img src="img/rising_51.png"/> </a><a href="#"> <img src="img/rising_51.png"/> </a><a href="#"> <img src="img/baidu.png"/> </a></p><p class="f-p3"><a href="#">大耳朵英语</a><a href="#">高分网</a><a href="#">大耳朵英语</a><a href="#">精英家教网</a><a href="#">大耳朵英语</a><a href="#">精英家教网</a><a href="#">高分网</a><a href="#">上学吧</a><a href="#">精英家教网</a><a href="#">上学吧</a><a href="#">精英家教网</a><a href="#">上学吧</a><a href="#">精英家教网</a><a href="#">上学吧</a><a href="#">上学吧</a><a href="#">精英家教网</a><a href="#">上学吧</a><a href="#">精英家教网</a><a href="#">精英家教网</a><a href="#">上学吧</a><a href="#">精英家教网</a><a href="#">上学吧</a></p><p class="f-p4"><a href="#">关于网站</a><a href="#">关于我们</a><a href="#">网站地图</a><a href="#">购买教程</a><a href="#">在线咨询</a><a href="#">业务合作</a><a href="#">建议留言</a></p><p class="f-p5"><span>我要自学网版权所有未经许可自学网版权所有未经许可自学网版权所有未经许可,本网站任何视频教程法律顾问：刘炜律师</span><img src="img/pic.gif"/></p><p class="f-p6"><a href="#"><img src="img/footPic1.png"/></a><a href="#"><img src="img/footPic2.png"/></a></p></footer><div class="kstz"><h4>快速跳转</h4><a href="#" class="active">最新<br />课程</a><a href="#">热门<br />推荐</a><a href="#">课程<br />分类</a><a href="#">热门<br />职业</a><a href="#">名师<br />简介</a></div> <div class="ycwx"><a href="#" class="wx"><span>官方<br />微信</span><img src="img/wx.png"/></a><a href="#" class="qq"><span>官方<br />QQ</span></a><a href="#" class="app"><span>APP<br />下载</span></a><a href="#" class="top"><span>返回<br />顶部</span></a></div></header></body></html>

51zxw.css

body{background: #f3f3f3;font-size: 14px;}/*公共样式*/.content-box{width: 1200px;margin: 0 auto;}.m-title{/*标题模块:如最新课程*/width: 100%;height: 80px;line-height: 80px;text-align: center;font-size: 30px;font-weight: 400;background: url(../img/redline.png) no-repeat center;}.m-list a{float: left;display: block;border-radius: 10px;overflow: hidden;box-shadow: 0 0 10px #CCCCCC;}.m-list a img{width: 100%; /*和父级a标签保持一致*/-webkit-filter: opacity(85%);filter: opacity(85%);}.m-list a:hover img{-webkit-filter: opacity(100%);filter: opacity(100%);}.m-list a:hover p{color: #0000FF;}.m-list a p{/*课程名:如Excel VBA编程宝典1---初战篇*/width: 100%;height: 30px;line-height: 30px;padding: 0 10px;overflow: hidden;}/*公共样式*//*logo,搜索,用户信息开始*/.h-top{/*logo,搜索,用户信息总盒子*/height: 88px;position: relative;}.h-top .logo{width: 214px; height: 58px;display: block; /*转化成块级元素*/position: absolute; /*绝对定位*/left: 0;top: 15px; /*(88px-58px)/2=15px 上部和下部的间距各15px*/}.h-top .search{/*search表单总盒子*/width: 330px;height: 36px;border: 1px solid #CCCCCC;border-radius: 18px; /*圆角边框*/ overflow: hidden;/*必须要加上overflow才会显示出圆角，因为设置了圆角后，前直角放不下溢出了，必须处理才能正常显示圆角*/background: #FFFFFF;position: absolute;left: 50%; margin-left: -150px;top: 26px; /*(88px-36px)/2=26px 上部和下部的间距各26px*/}.h-top .search .inp-l{/*左边输入框input*/width: 260px;height: 36px;border: none;padding: 0 20px;}.h-top .search .inp-r{/*右边提交框input*/width: 58px;height: 34px;border: none;border-radius: 18px;background: #acce22;}.h-top .user{/*帮助中心注册/登录的总盒子 */width: 180px;height: 28px;line-height: 28px;position: absolute;right: 0;top: 30px;}.h-top .user a{/*帮助中心注册/登录 */display: inline-block; width: 76px;height: 28px;text-align: center;font-size: 16px;color: #000000;}/*logo,搜索,用户信息结束*//*导航开始*/nav{background: #363636;}nav .nav-box{height: 44px;line-height: 44px;text-align: center;}.nav-box .nav-l{width: 800px;}.nav-box a{display: block;width: 80px;height: 44px;float: left;color: #FFFFFF;}.nav-box .nav-r{width: 240px;}.nav-box .nav-r a{font-size: 16px;}.nav-box .nav-l a:hover{font-size: 16px;color: #00AEFF;}.nav-box .nav-r a:hover{background: #CA3333;}/*导航结束*//*幻灯片开始*/.hdp{/*最外面的div*/background: #FF9000;}.hdp .content-box{/*装内容的div*/ /*height: 330px; 如果相对定位的父级不设定高度的话，使用绝对定位的子级是完全脱离文档流的，会导致看不到子级内容*/height: 330px;overflow: hidden;position: relative;}.hdp-img {/*装图片的div*/width: 3600px;position: absolute;left: 0px; /*通过js可以控制left值，实现幻灯片轮播，即-1200(第二张图)，-2400(第三张图)*/}.hdp-img a{display: block;width: 1200px;height: 330px;}.hdp .content-box .wzgg{position: absolute;right: 0;top: 10px;height: 310px;width: 250px;background: rgba(0,0,0,0.7);border-radius: 10px;padding: 20px;}.wzgg h3{text-align: center;color: #FFFFFF;padding-bottom: 10px;}.wzgg ul{color: #FFFFFF;}.wzgg ul li{list-style: inside disc; /*不加inside的话,列表前的小圆点显示不出来,原因是wzgg类使用了绝对定位,所以完全脱离文档流.左浮动会使盒模型一个挨一个横向排练,列表符号的位置在盒模型之外*/}.wzgg ul li a{color: #FFFFFF;font-size: 12px;}/*幻灯片结束*//*远程培训班开始*/.ycpxb{height: 160px; /*宽度就是1200px*/background: #FFFFFF;padding-top: 23px;}.ycpxb a{display: block;width: 210px;height: 114px;float: left;background: no-repeat 0 0/100% 100%; /*背景定位(0 0)/背景尺寸(100% 100%)*/margin: 0 15px;border-radius: 15px;overflow: hidden; /*overflow: hidden;目的是为了隐藏掉,由于span元素弄乱的圆角部分*/font-size: 24px;color: #FFFFFF;font-weight: 700; /*不能写700px,否则不能加粗*/text-align: center;line-height: 114px;}.ycpxb a:hover{background-size: 110% 110%;}.ycpxb .a1{background-image: url(../img/otherFun1.jpg);}.ycpxb .a2{background-image: url(../img/otherFun2.jpg);}.ycpxb .a3{background-image: url(../img/otherFun3.jpg);}.ycpxb .a4{background-image: url(../img/otherFun4.jpg);}.ycpxb .a5{background-image: url(../img/otherFun5.jpg);}.ycpxb a span{/*设置span元素的目的在此: 为了让span元素变成块级元素,设置宽高,设置透明度*/display: block;width: 100%;height: 100%;background: rgba(0,0,0,0.3);text-shadow: 4px 2px 5px #000000;}.ycpxb a .span2{line-height: normal;padding-top: 20px;}/*远程培训班结束*//*最新课程区块开始*/.zx-box a{width: 270px;height: 240px;margin: 20px 15px;}.zx-box a img{height: 210px;}/*最新课程区块结束*//*热门推荐开始*/.rm-box a{width: 210px;height: 190px;margin: 20px 15px;}.rm-box a img{width: 100%;height: 160px;}.rm-nav a{display: block;width: 70px;height: 30px;line-height: 30px;text-align: center;float: left;margin: 0 25px;}.rm-nav .rm-a{background: #0000FF;color: #FFFFFF;border-radius: 4px;}.rm-nav .rm-b:hover{color: #0000FF;}/*热门推荐结束*//*课程分类区块开始*/.kc-box .kc-b{width: 210px;height: 190px;margin: 20px 15px;}.kc-box .kc-b img{width: 100%;height: 160px;}.kc-box .kc-a{width: 190px;height: 170px;margin: 30px 35px 0px 15px;}.kc-box .kc-a img{width: 100%;height: 170px;}.kcfl .kc-nav{padding: 50px 100px 0 15px;position: relative;word-break: keep-all;border-bottom: 1px solid #CCCCCC;padding-bottom: 6px;}.kcfl .kc-nav .kc-nav-a{line-height: 20px;margin-right: 10px;}.kc-nav .kc-nav-a:hover{color: #0000FF;}.kcfl .kc-nav .kc-nav-b{display: block;width: 60px;height: 20px;line-height: 20px;background: #00AEFF;border-radius: 4px;text-align: center;color: #FFFFFF; position: absolute;right: 15px;bottom: 6px;}/*课程分类区块结束*//*名师简介开始*/.msjj {padding-top: 20px;padding-bottom: 40px;}.ms-box a{display: block;width: 270px;height: 310px;background: #E7E7E7;float: left;margin: 30px 15px;padding-top: 40px;text-align: center;}.ms-box a img{width: 150px;height: 150px;border-radius: 50%;}.ms-box a .p1{font-size: 20px;line-height: 40px;padding-top: 20px;}.ms-box a .p2{color: #6B6B6B;}/*名师简介结束*//*页面尾部开始*/footer{padding: 20px 0;}footer p{padding: 8px 0;}footer .f-p1 b{/*建站时间这四个字*/display: inline-block;width: 80px;text-align: center;margin: 0 20px;}footer .f-p1 span{margin: 0 10px;}footer .f-p2 b{/*友情链接这四个字*/display: inline-block;width: 80px;text-align: center;margin: 0 20px;}footer .f-p2 a{margin: 0 10px;}footer .f-p2 a img{height: 30px;}footer .f-p3 {padding-left: 120px;padding-right: 100px;word-break: keep-all;}footer .f-p3 a{margin:0 10px;font-size: 12px;}footer .f-p3 a:hover{color: blue;}footer .f-p4{text-align: center;}footer .f-p4 a{display: inline-block;width: 70px;height: 20px;line-height: 20px;color: #FFFFFF;background: #3899DD;border-radius: 4px;overflow: hidden;margin: 0 4px;}footer .f-p5{text-align: center;font-size: 12px;}footer .f-p5 img{vertical-align: middle; /*放在父元素的中部*/}footer .f-p6 {text-align: center;}/*页面尾部结束*//*左侧快速跳转开始*/.kstz{width: 66px;text-align: center;position: fixed;top: 150px;left: 50%;margin-left: -686px;}.kstz h4{color: #5A98DE;margin-bottom: 10px;}.kstz a{display: block;width: 66px;height: 66px;border-radius: 50%;box-shadow: 0 0 8px #CCCCCC;margin-bottom: 16px;padding-top: 15px;}..active:hover{color: blue;}.active{background: #00AEFF;color: #FFFFFF;}/*左侧快速跳转结束*//*右侧微信区块开始*/.ycwx{position: fixed;top: 275px;right: 50%;margin-right: -686px;}.ycwx a{display: block;width: 50px;height: 50px;border-radius: 4px;box-shadow: 0 0 8px #CCCCCC;text-align: center;margin-bottom:10px ;padding-top: 8px;}.ycwx a span{display: none;/*先隐藏掉span元素*/}.ycwx .wx{background: no-repeat url(../img/wxIcon.png) center;position: relative;}.ycwx .qq{background: no-repeat url(../img/qqIcon.png) center;}.ycwx .app{background: no-repeat url(../img/mobileIcon.png) center;}.ycwx .top{background: no-repeat url(../img/upArrowIcon.png) center;}.ycwx .wx img{display: none;position: absolute;left: -180px;top: -10px;}.ycwx a:hover span{display: block;}.ycwx a:hover{background: none;}.ycwx .wx:hover img{display: block;}/*右侧微信区块结束*/

reset.css

*{margin: 0;padding: 0;/*重置内边距和外边距*/-moz-box-sizing: border-box; /*火狐浏览器老版本*/-webkit-box-sizing: border-box; /*webkit内核浏览器*/box-sizing: border-box;} body{font-size: 14px;font-family: "微软雅黑";color: #333333;background: #f3f3f3fon;}b{font-weight: normal;}i{font-style: normal;}a,a:hover,a:active{text-decoration: none;color: #333333;}textarea,input,select{outline: none;}img{border: none;vertical-align: top;} /*解决img元素和相邻元素之间下方有空隙的问题*/li{list-style: none;} /*把列表前面的样式圈圈去掉*/.fl{float: left;}.fr{float: right;}/*使用伪元素，防止父元素高度塌陷*/.clearfix::after{content: "";display: table;clear: both;}

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。