Web前端静态页面示例

目录结构：

Web25\

|—css\ reset.css、common.css、index.css、login.css、reg.css

|—js\ jquery-3.3.1.js、index.js、login.js、reg.js

|—index.html、course.html、pay.html、search.html、login.html、reg.html

源码：

HTML

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>首页</title>

     <link rel="stylesheet" href="css/reset.css">

     <link rel="stylesheet" href="css/common.css">

     <link rel="stylesheet" href="https://at.alicdn.com/t/font_791124_pbr311n1o2.css">

     <link rel="stylesheet" href="css/index.css">

     <script src="js/jquery-3.3.1.js"></script>

 </head>

 <body>

     <!--header start-->

     <div class="header">

         <div class="header-contain">

             <div class="logo"><a href="javascript:void(0);" class="logo-title"></a></div>

             <ul class="menu">

                 <li class="active"><a href="javascript:void(0);">首&emsp;&emsp;页</a></li>

                 <li><a href="course.html">在线课堂</a></li>

                 <li><a href="pay.html">付费课程</a></li>

                 <li><a href="search.html">搜&emsp;&emsp;索</a></li>

             </ul>

             <div class="login-box">

                 <i class="iconfont icon-user"></i>

                 <span><a href="reg.html">注册</a></span>&nbsp;/

                 <span><a href="login.html">登录</a></span>

             </div>

         </div>

     </div>

     <!--header end-->

     <!--middle start-->

     <div class="main">

         <div class="main-box clearfix">

             <div class="main-contain">

                 <!--轮播图-->

                 <div class="banner">

                     <ul class="pic">

                         <li><a href="javascript:void(0)"><img src="https://res.shiguangkey.com//file/201806/19/20180619142252602590185.jpg" alt="图片1"></a></li>

                         <li><a href="javascript:void(0)"><img src="https://res.shiguangkey.com//file/201806/19/20180619141337485823895.jpg" alt="图片2"></a></li>

                         <li><a href="javascript:void(0)"><img src="https://res.shiguangkey.com//file/201806/21/20180621150342030454625.jpg" alt="图片3"></a></li>

                         <li><a href="javascript:void(0)"><img src="https://res.shiguangkey.com//file/201805/17/20180517113424433990524.jpg" alt="图片4"></a></li>

                     </ul>

                     <ul class="tab">

                         <li></li>

                         <li></li>

                         <li></li>

                         <li></li>

                     </ul>

                     <ul class="btn">

                         <!--<li class="left">&lt;</li>-->

                         <!--<li class="right">&gt;</li>-->

                         <li class="left"><i class="iconfont icon-BAI-zuojiantou"></i></li>

                         <li class="right"><i class="iconfont icon-BAI-youjiantou"></i></li>

                     </ul>

                 </div>

                 <!--三个框-->

                 <div class="content">

                     <ul class="recommend-news">

                         <li>

                             <a href="javascript:void(0)"><img src="https://res.shiguangkey.com//file/201806/04/20180604235838752491899.png!mall_course_a" alt="图片1"></a>

                             <p><a href="https://www.shiguangkey.com/course/830">SEO优化，最新快速排名技巧解答分享</a></p>

                         </li>

                         <li>

                             <a href="javascript:void(0)"><img src="https://res.shiguangkey.com//file/201805/26/20180526105323340886406.png!mall_course_c" alt="图片2"></a>

                             <p><a href="https://www.shiguangkey.com/course/1767">web前端零基础入门</a></p>

                         </li>

                         <li>

                             <a href="javascript:void(0)"><img src="https://res.shiguangkey.com//file/201805/03/20180503165311843004082.png!mall_course_c" alt="图片3"></a>

                             <p><a href="https://www.shiguangkey.com/course/2191">韩语小白变大神</a></p>

                         </li>

                     </ul>

                 </div>

                 <!--新闻-->

                 <div class="news clearfix">

                     <ul class="nav clearfix">

                         <li class="active">语言</li>

                         <li>前端</li>

                         <li>Python</li>

                         <li>C++</li>

                     </ul>

                     <ul class="content">

                         <li>

                             <div class="clearfix">

                                 <div class="left">

                                     <img src="https://res.shiguangkey.com//file/201805/03/20180503165311843004082.png!mall_course_a" alt="">

                                 </div>

                                 <div class="right">

                                     <p><span>可里：</span>大学韩国语专业 亚篮锦标赛韩语随同翻译 3年线上韩语教育经验</p>

                                     <p><span>小美：</span>大学韩语专业 韩语TOPIK6级 三年线上教学经验</p>

                                     <p><span>鸭梨：</span>大学韩国语专业 2年线上韩语教学经验 多年韩国漫画翻译经验</p>

                                     <p><span>可可：</span>韩语随同翻译 牙科医疗反映 丰富口译经验 多年爱豆站姐翻译经验</p>

                                 </div>

                             </div>

                             <div class="clearfix">

                                 <div class="left">

                                     <img src="https://res.shiguangkey.com//file/201807/23/20180723165649433839624.png!mall_course_a" alt="">

                                 </div>

                                 <div class="right">

                                     <p><span>Kayee：</span>口语水平优秀 语言表达能力强 教学经验丰富 对学员有耐心</p>

                                     <p><span>Celin：</span>课堂活泼有趣 注重和学员互动 轻轻松松帮大家理解英语知识</p>

                                     <p><span>Molly：</span>商务英语专业 对学员耐心 喜欢发掘不同类型的英语应用</p>

                                     <p><span>Zoey：</span>口语水平优秀 语言表达能力强 注重培养学员的口语能力和书写能力</p>

                                 </div>

                             </div>

                         </li>

                         <li>

                             <div class="clearfix">

                                 <div class="left">

                                     <img src="https://res.shiguangkey.com//file/201805/26/20180526105323340886406.png!mall_course_a" alt="">

                                 </div>

                                 <div class="right">

                                     <p><span>PC+移动开发班</span></p>

                                     <p>html + css</p>

                                     <p><span>移动网站开发内容</span></p>

                                     <p>html5 + css3</p>

                                 </div>

                             </div>

                             <div class="clearfix">

                                 <div class="left">

                                     <img src="https://res.shiguangkey.com//file/201804/11/20180411113302019932295.jpg!mall_course_a" alt="">

                                 </div>

                                 <div class="right">

                                     <p><span>javascript</span></p>

                                     <p>操作DOM 面向对象 Jquery ECMAScript6</p>

                                     <p><span>前端框架</span></p>

                                     <p>vue Angular React</p>

                                 </div>

                             </div>

                         </li>

                         <li>

                             <div class="clearfix">

                                 <div class="left">

                                     <img src="https://res.shiguangkey.com//file/201807/02/20180702141502580115367.png!mall_course_a" alt="">

                                 </div>

                                 <div class="right">

                                     <p><span>基础阶段</span></p>

                                     <p>python基础 python进阶 web前端</p>

                                     <p><span>实战阶段</span></p>

                                     <p>框架 项目</p>

                                 </div>

                             </div>

                             <div class="clearfix">

                                 <div class="left">

                                     <img src="https://res.shiguangkey.com//file/201807/02/20180702153723740596415.png!mall_course_a" alt="">

                                 </div>

                                 <div class="right">

                                     <p><span>Python数据分析与机器学习</span></p>

                                     <p>numpy pandas matplotlib seaborn</p>

                                     <p>K邻近算法 线性回归与逻辑回归算法</p>

                                     <p>决策树算法 集成算法与随机森林 贝叶斯算法 支持向量机</p>

                                 </div>

                             </div>

                         </li>

                         <li>

                             <div class="clearfix">

                                 <div class="left">

                                     <img src="https://res.shiguangkey.com//file/201804/19/20180419103002769224662.jpg!mall_course_a" alt="">

                                 </div>

                                 <div class="right">

                                     <p><span>c++课程体系</span></p>

                                     <p>C语言核心 C++语言核心</p>

                                     <p>Windows核心编程 Linux核心编程</p>

                                     <p>QT核心编程 服务器核心编程</p>

                                 </div>

                             </div>

                             <div class="clearfix">

                                 <div class="left">

                                     <img src="https://res.shiguangkey.com//file/201807/02/20180702153645933550456.png!mall_course_a" alt="">

                                 </div>

                                 <div class="right">

                                     <p><span>罗伯特:</span>十年项目开发经验 精通C/C++、Windows游戏编程</p>

                                     <p><span>九夏老师:</span>七年企业级项目实战经验，擅长Windows/Linux平台</p>

                                     <p><span>Danny:</span>八年大型项目开发经验，精通C/C++编程语言，擅长WindowsAPI</p>

                                     <p><span>强森老师:</span>五年企业级IT项目开发经验，三年线下教学经验</p>

                                 </div>

                             </div>

                         </li>

                     </ul>

                 </div>

                 <div class="more">加载更多</div>

             </div>

             <div class="aside">

                 <div class="course">

                     <p>公开课<span>更多</span></p>

                     <div><img src="https://res.shiguangkey.com/file/201804/19/20180419161303876645368.png!mall_course_b" alt=""></div>

                     <p>Python 零基础入门到项目实战开发</p>

                     <hr>

                 </div>

                 <div class="course">

                     <p>VIP课<span>更多</span></p>

                     <div><img src="https://res.shiguangkey.com//file/201804/19/20180419103636100353500.jpg!mall_course_a" alt=""></div>

                     <p>Python基础</p>

                     <p>Python进阶</p>

                     <p>Python web</p>

                     <p>框架(Django Tornado)</p>

                     <p>项目实战</p>

                     <hr>

                 </div>

                 <div class="about">

                     <h2>关注我</h2>

                     <p><i class="iconfont icon-weixin21" style="color: green;"></i>&nbsp;微信号</p>

                     <p><i class="iconfont icon-qq1" style="color: blue;"></i>&nbsp;QQ号</p>

                     <p><i class="iconfont icon-weibo21" style="color: red;"></i>&nbsp;微博号<span>扫描关注</span></p>

                     <hr>

                 </div>

                 <div class="recommend">

                     <h2>热门推荐</h2>

                     <div class="hot clearfix">

                         <div class="left">

                             <p class="upper">湖南信息技术类中高职衔接培训班来访潭州，探索互联网+教育新模式</p>

                             <p class="lower">热点<span>8月16日</span></p>

                         </div>

                         <div class="right">

                             <img src="http://a1.qpic.cn/psb?/V13Pc4324LdOaJ/EaLrCUqB.T14wh*zo.6jalz0OlnGr7k*Ka5MzNoWnsY!/b/dAgBAAAAAAAA" alt="">

                         </div>

                     </div>

                     <div class="hot clearfix">

                         <div class="left">

                             <p class="upper">湖南信息技术类中高职衔接培训班来访潭州，探索互联网+教育新模式</p>

                             <p class="lower">热点<span>8月16日</span></p>

                         </div>

                         <div class="right">

                             <img src="http://a1.qpic.cn/psb?/V13Pc4324LdOaJ/EaLrCUqB.T14wh*zo.6jalz0OlnGr7k*Ka5MzNoWnsY!/b/dAgBAAAAAAAA" alt="">

                         </div>

                     </div>

                     <div class="hot clearfix">

                         <div class="left">

                             <p class="upper">湖南信息技术类中高职衔接培训班来访潭州，探索互联网+教育新模式</p>

                             <p class="lower">热点<span>8月16日</span></p>

                         </div>

                         <div class="right">

                             <img src="http://a1.qpic.cn/psb?/V13Pc4324LdOaJ/EaLrCUqB.T14wh*zo.6jalz0OlnGr7k*Ka5MzNoWnsY!/b/dAgBAAAAAAAA" alt="">

                         </div>

                     </div>

                 </div>

             </div>

         </div>

     </div>

     <!--middle end-->

     <!--footer start-->

     <div class="footer">

         <div class="footer-content">

             <p>

                 <span><a href="javascript:void(0);">关于python</a></span> |

                 <span><a href="javascript:void(0);">python开发</a></span> |

                 <span><a href="javascript:void(0);">数据分析</a></span>&emsp;&emsp;

                 <span>关于我：<a href="javascript:void(0);"><i class="iconfont icon-weixin2"></i>&nbsp;你猜</a></span>

             </p>

             <p>

                 <span><a href="javascript:void(0);">地址:湖南省长沙市岳麓区&emsp;&emsp;</a></span>

                 <span><a href="javascript:void(0);">联系方式:400-1567-315</a></span>

             </p>

         </div>

         <div class="footer-bottom">

             <p class="bottom-content"> Copyright &copy; 2015 - 2018 潭州Python学院. All Rights Reserved</p>

         </div>

     </div>

     <!--footer end-->

     <script src="js/index.js"></script>

 </body>

 </html>

index.html

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>在线课堂</title>

     <link rel="stylesheet" href="css/reset.css">

     <link rel="stylesheet" href="css/common.css">

     <link rel="stylesheet" href="https://at.alicdn.com/t/font_791124_pbr311n1o2.css">

 </head>

 <body>

     <!--header start-->

     <div class="header">

         <div class="header-contain">

             <div class="logo"><a href="javascript:void(0);" class="logo-title"></a></div>

             <ul class="menu">

                 <li><a href="index.html">首&emsp;&emsp;页</a></li>

                 <li class="active"><a href="javascript:void(0);">在线课堂</a></li>

                 <li><a href="pay.html">付费课程</a></li>

                 <li><a href="search.html">搜&emsp;&emsp;索</a></li>

             </ul>

             <div class="login-box">

                 <i class="iconfont icon-user"></i>

                 <span><a href="reg.html">注册</a></span>&nbsp;/

                 <span><a href="login.html">登录</a></span>

             </div>

         </div>

     </div>

     <!--header end-->

     <!--footer start-->

     <div class="footer">

         <div class="footer-content">

             <p>

                 <span><a href="javascript:void(0);">关于python</a></span> |

                 <span><a href="javascript:void(0);">python开发</a></span> |

                 <span><a href="javascript:void(0);">数据分析</a></span>&emsp;&emsp;

                 <span>关于我：<a href="javascript:void(0);"><i class="iconfont icon-weixin2"></i>&nbsp;你猜</a></span>

             </p>

             <p>

                 <span><a href="javascript:void(0);">地址:湖南省长沙市岳麓区&emsp;&emsp;</a></span>

                 <span><a href="javascript:void(0);">联系方式:400-1567-315</a></span>

             </p>

         </div>

         <div class="footer-bottom">

             <p class="bottom-content"> Copyright &copy; 2015 - 2018 潭州Python学院. All Rights Reserved</p>

         </div>

     </div>

     <!--footer end-->

 </body>

 </html>

course.html

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>付费课程</title>

     <link rel="stylesheet" href="css/reset.css">

     <link rel="stylesheet" href="css/common.css">

     <link rel="stylesheet" href="https://at.alicdn.com/t/font_791124_pbr311n1o2.css">

 </head>

 <body>

     <!--header start-->

     <div class="header">

         <div class="header-contain">

             <div class="logo"><a href="javascript:void(0);" class="logo-title"></a></div>

             <ul class="menu">

                 <li><a href="index.html">首&emsp;&emsp;页</a></li>

                 <li><a href="course.html">在线课堂</a></li>

                 <li class="active"><a href="javascript:void(0);">付费课程</a></li>

                 <li><a href="search.html">搜&emsp;&emsp;索</a></li>

             </ul>

             <div class="login-box">

                 <i class="iconfont icon-user"></i>

                 <span><a href="reg.html">注册</a></span>&nbsp;/

                 <span><a href="login.html">登录</a></span>

             </div>

         </div>

     </div>

     <!--header end-->

     <!--footer start-->

     <div class="footer">

         <div class="footer-content">

             <p>

                 <span><a href="javascript:void(0);">关于python</a></span> |

                 <span><a href="javascript:void(0);">python开发</a></span> |

                 <span><a href="javascript:void(0);">数据分析</a></span>&emsp;&emsp;

                 <span>关于我：<a href="javascript:void(0);"><i class="iconfont icon-weixin2"></i>&nbsp;你猜</a></span>

             </p>

             <p>

                 <span><a href="javascript:void(0);">地址:湖南省长沙市岳麓区&emsp;&emsp;</a></span>

                 <span><a href="javascript:void(0);">联系方式:400-1567-315</a></span>

             </p>

         </div>

         <div class="footer-bottom">

             <p class="bottom-content"> Copyright &copy; 2015 - 2018 潭州Python学院. All Rights Reserved</p>

         </div>

     </div>

     <!--footer end-->

 </body>

 </html>

pay.html

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>搜索</title>

     <link rel="stylesheet" href="css/reset.css">

     <link rel="stylesheet" href="css/common.css">

     <link rel="stylesheet" href="https://at.alicdn.com/t/font_791124_pbr311n1o2.css">

 </head>

 <body>

     <!--header start-->

     <div class="header">

         <div class="header-contain">

             <div class="logo"><a href="javascript:void(0);" class="logo-title"></a></div>

             <ul class="menu">

                 <li><a href="index.html">首&emsp;&emsp;页</a></li>

                 <li><a href="course.html">在线课堂</a></li>

                 <li><a href="pay.html">付费课程</a></li>

                 <li class="active"><a href="javascript:void(0);">搜&emsp;&emsp;索</a></li>

             </ul>

             <div class="login-box">

                 <i class="iconfont icon-user"></i>

                 <span><a href="reg.html">注册</a></span>&nbsp;/

                 <span><a href="login.html">登录</a></span>

             </div>

         </div>

     </div>

     <!--header end-->

     <!--footer start-->

     <div class="footer">

         <div class="footer-content">

             <p>

                 <span><a href="javascript:void(0);">关于python</a></span> |

                 <span><a href="javascript:void(0);">python开发</a></span> |

                 <span><a href="javascript:void(0);">数据分析</a></span>&emsp;&emsp;

                 <span>关于我：<a href="javascript:void(0);"><i class="iconfont icon-weixin2"></i>&nbsp;你猜</a></span>

             </p>

             <p>

                 <span><a href="javascript:void(0);">地址:湖南省长沙市岳麓区&emsp;&emsp;</a></span>

                 <span><a href="javascript:void(0);">联系方式:400-1567-315</a></span>

             </p>

         </div>

         <div class="footer-bottom">

             <p class="bottom-content"> Copyright &copy; 2015 - 2018 潭州Python学院. All Rights Reserved</p>

         </div>

     </div>

     <!--footer end-->

 </body>

 </html>

search.html

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>登录</title>

     <link rel="stylesheet" href="css/reset.css">

     <link rel="stylesheet" href="css/common.css">

     <link rel="stylesheet" href="https://at.alicdn.com/t/font_791124_pbr311n1o2.css">

     <link rel="stylesheet" href="css/login.css">

     <script src="js/jquery-3.3.1.js"></script>

 </head>

 <body>

     <!--header start-->

     <div class="header">

         <div class="header-contain">

             <div class="logo"><a href="javascript:void(0);" class="logo-title"></a></div>

             <ul class="menu">

                 <li><a href="index.html">首&emsp;&emsp;页</a></li>

                 <li><a href="course.html">在线课堂</a></li>

                 <li><a href="pay.html">付费课程</a></li>

                 <li class="active"><a href="javascript:void(0);">搜&emsp;&emsp;索</a></li>

             </ul>

             <div class="login-box">

                 <i class="iconfont icon-user"></i>

                 <span><a href="reg.html">注册</a></span>&nbsp;/

                 <span><a href="login.html">登录</a></span>

             </div>

         </div>

     </div>

     <!--header end-->

     <!--reg start-->

     <div class="page">

         <div class="main">

             <div class="top clearfix">

                 <h2>请登录</h2>

                 <a href="reg.html">立即注册&nbsp;&gt;</a>

             </div>

             <form action="">

                 <div class="inp">

                     <input type="text" name="mobile" placeholder="请输入手机号">

                 </div>

                 <div class="inp">

                     <input type="password" name="pw" placeholder="请输入密码">

                 </div>

                 <div class="addition clearfix">

                     <input type="checkbox" name="auto" value="auto">七天内自动登录

                     <a href="javascript:void(0)">忘记密码？</a>

                 </div>

                 <input type="submit" value="登录">

             </form>

         </div>

     </div>

     <!--reg end-->

     <!--footer start-->

     <div class="footer">

         <div class="footer-content">

             <p>

                 <span><a href="javascript:void(0);">关于python</a></span> |

                 <span><a href="javascript:void(0);">python开发</a></span> |

                 <span><a href="javascript:void(0);">数据分析</a></span>&emsp;&emsp;

                 <span>关于我：<a href="javascript:void(0);"><i class="iconfont icon-weixin2"></i>&nbsp;你猜</a></span>

             </p>

             <p>

                 <span><a href="javascript:void(0);">地址:湖南省长沙市岳麓区&emsp;&emsp;</a></span>

                 <span><a href="javascript:void(0);">联系方式:400-1567-315</a></span>

             </p>

         </div>

         <div class="footer-bottom">

             <p class="bottom-content"> Copyright &copy; 2015 - 2018 潭州Python学院. All Rights Reserved</p>

         </div>

     </div>

     <!--footer end-->

     <script src="js/login.js"></script>

 </body>

 </html>

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>注册</title>

     <link rel="stylesheet" href="css/reset.css">

     <link rel="stylesheet" href="css/common.css">

     <link rel="stylesheet" href="https://at.alicdn.com/t/font_791124_pbr311n1o2.css">

     <link rel="stylesheet" href="css/reg.css">

     <script src="js/jquery-3.3.1.js"></script>

 </head>

 <body>

     <!--header start-->

     <div class="header">

         <div class="header-contain">

             <div class="logo"><a href="javascript:void(0);" class="logo-title"></a></div>

             <ul class="menu">

                 <li><a href="index.html">首&emsp;&emsp;页</a></li>

                 <li><a href="course.html">在线课堂</a></li>

                 <li><a href="pay.html">付费课程</a></li>

                 <li class="active"><a href="javascript:void(0);">搜&emsp;&emsp;索</a></li>

             </ul>

             <div class="login-box">

                 <i class="iconfont icon-user"></i>

                 <span><a href="reg.html">注册</a></span>&nbsp;/

                 <span><a href="login.html">登录</a></span>

             </div>

         </div>

     </div>

     <!--header end-->

     <!--reg start-->

     <div class="page">

         <div class="main">

             <div class="top clearfix">

                 <h2>请注册</h2>

                 <a href="login.html">立即登录&nbsp;&gt;</a>

             </div>

             <form action="">

                 <div class="inp">

                     <input type="text" name="mobile" placeholder="请输入手机号">

                 </div>

                 <div class="inp clearfix">

                     <input class="left" type="text" name="mobile-code" placeholder="请输入手机验证码">

                     <a class="sendcode" href="javascript:void(0)">发送验证码</a>

                 </div>

                 <div class="inp">

                     <input type="text" name="user" placeholder="请输入用户名">

                 </div>

                 <div class="inp">

                     <input type="password" name="pw" placeholder="请输入密码">

                 </div>

                 <div class="inp">

                     <input type="password" name="pw2" placeholder="请再次输入密码">

                 </div>

                 <div class="inp">

                     <input class="left" type="text" name="pic-code" placeholder="请输入图形验证码">

                     <a href="javascript:void(0)">图形验证码</a>

                 </div>

                 <input type="submit" value="注册">

             </form>

         </div>

     </div>

     <!--reg end-->

     <!--footer start-->

     <div class="footer">

         <div class="footer-content">

             <p>

                 <span><a href="javascript:void(0);">关于python</a></span> |

                 <span><a href="javascript:void(0);">python开发</a></span> |

                 <span><a href="javascript:void(0);">数据分析</a></span>&emsp;&emsp;

                 <span>关于我：<a href="javascript:void(0);"><i class="iconfont icon-weixin2"></i>&nbsp;你猜</a></span>

             </p>

             <p>

                 <span><a href="javascript:void(0);">地址:湖南省长沙市岳麓区&emsp;&emsp;</a></span>

                 <span><a href="javascript:void(0);">联系方式:400-1567-315</a></span>

             </p>

         </div>

         <div class="footer-bottom">

             <p class="bottom-content"> Copyright &copy; 2015 - 2018 潭州Python学院. All Rights Reserved</p>

         </div>

     </div>

     <!--footer end-->

     <script src="js/reg.js"></script>

 </body>

 </html>

reg.html

CSS

 /* http://meyerweb.com/eric/tools/css/reset/

    v2.0 | 20110126

    License: none (public domain)

 */

 html, body, div, span, applet, object, iframe,

 h1, h2, h3, h4, h5, h6, p, blockquote, pre,

 a, abbr, acronym, address, big, cite, code,

 del, dfn, em, img, ins, kbd, q, s, samp,

 small, strike, strong, sub, sup, tt, var,

 b, u, i, center,

 dl, dt, dd, ol, ul, li,

 fieldset, form, label, legend,

 table, caption, tbody, tfoot, thead, tr, th, td,

 article, aside, canvas, details, embed,

 figure, figcaption, footer, header, hgroup,

 menu, nav, output, ruby, section, summary,

 time, mark, audio, video {

     margin:;

     padding:;

     border:;

     font-size: 100%;

     font: inherit;

     vertical-align: baseline;

 }

 /* HTML5 display-role reset for older browsers */

 article, aside, details, figcaption, figure,

 footer, header, hgroup, menu, nav, section {

     display: block;

 }

 body {

     line-height:;

 }

 ol, ul {

     list-style: none;

 }

 blockquote, q {

     quotes: none;

 }

 blockquote:before, blockquote:after,

 q:before, q:after {

     content: '';

     content: none;

 }

 table {

     border-collapse: collapse;

     border-spacing:;

 }

 /*以下为自己新增样式*/

 a{

     /*去下划线*/

     text-decoration: none;

     /*不变色,继承父级字体颜色*/

     color: inherit;

 }

 /*清除塌陷*/

 .clearfix::after{

     display: block;

     /*左右都没有浮动元素*/

     clear: both;

     content: "";

 }

reset.css

 .header{

     width: 100%;

     height: 69px;

     background: black;

     color: white;

 }

 .header .header-contain{

     width: 1200px;

     height: 69px;

     margin: auto;

     line-height: 69px;

     background: black;

 }

 .header .header-contain .logo{

     float: left;

     width: 260px;

     height: 100%;

 }

 .header .header-contain .logo .logo-title{

     display: block;

     width: 100%;

     height: 100%;

     background: url("https://www.python.org/static/img/python-logo.png") no-repeat;

 }

 .header .header-contain .menu{

     margin-left: 50px;

     /*不设float,margin-left不生效*/

     float: left;

 }

 .header .header-contain .menu li{

     /*不设width 保持最大行宽,设了width 鼠标移动时li位置会改变*/

     width: 120px;

     height: 69px;

     float: left;

     text-align: center;

     /*padding: 0 20px;*/

 }

 .header .header-contain .menu li:hover {

     border-bottom: 5px solid greenyellow;

     box-sizing: border-box;

 }

 .header .header-contain .menu .active{

     border-bottom: 5px solid greenyellow;

     box-sizing: border-box;

 }

 .header .header-contain .login-box{

     float: right;

 }

 .header .header-contain .login-box i{

     font-size: 25px;

     color: greenyellow;

     vertical-align: -3px;

 }

 .footer{

     width: 100%;

     background: rgb(83,94,103);

 }

 .footer .footer-content{

     width: 1200px;

     margin: auto;

     text-align: center;

     color: #c1c1c1;

     line-height: 35px;

     padding: 20px 0px;

     background: rgb(83,94,103) url("https://www.python.org/static/img/python-logo.png") no-repeat 50px 15px;

 }

 .footer .footer-content i{

     font-size: 25px;

     vertical-align: -2px;

     color: yellowgreen;

 }

 .footer .footer-bottom{

     width: 100%;

     background: black;

 }

 .footer .footer-bottom .bottom-content{

     width: 1200px;

     background: black;

     line-height: 50px;

     margin: auto;

     text-align: center;

     color: #c1c1c1;

 }

common.css

 body{

     background: antiquewhite;

 }

 .main{

     width: 100%;

     padding: 30px 0px;

 }

 .main .main-box{

     width: 1200px;

     /*height: 2000px;*/

     background: antiquewhite;

     margin: auto;

 }

 .main .main-box .main-contain{

     float: left;

     width: 800px;

 }

 /*banner轮播图*/

 .main .main-box .main-contain .banner{

     width: 800px;

     height: 200px;

     position: relative;

     background: aquamarine;

 }

 .main .main-box .main-contain .banner .pic li{

     /*不加absolute,fadein/out切换时会占用下一行空间*/

     position: absolute;

     display: none;

 }

 .main .main-box .main-contain .banner .pic li a img{

     width: 800px;

     height: 200px;

 }

 .main .main-box .main-contain .banner .tab{

     position: absolute;

     bottom: 10px;

     left: 50%;

     margin-left: -78px;

 }

 .main .main-box .main-contain .banner .tab li{

     width: 15px;

     height: 15px;

     border: 2px solid white;

     border-radius: 50%;

     float: left;

     margin: 0 10px;

     cursor: pointer;

 }

 .main .main-box .main-contain .banner .tab .active {

     background: white;

 }

 .main .main-box .main-contain .banner .tab li:hover{

     background: white;

 }

 .main .main-box .main-contain .banner .btn li{

     position: absolute;

     height: 200px;

     line-height: 200px;

     cursor: pointer;

     display: none;

 }

 .main .main-box .main-contain .banner .btn li i{

     font-size: 50px;

     color: white;

 }

 .main .main-box .main-contain .banner .btn .left{

     left: 10px;

 }

 .main .main-box .main-contain .banner .btn .right{

     right: 10px;

 }

 .main .main-box .main-contain .banner:hover .btn li{

     display: block;

 }

 /*三个框*/

 .main .main-box .main-contain .content{

     width: 800px;

     background: lightgrey;

     font-size: 14px;

     color: black;

 }

 .main .main-box .main-contain .content .recommend-news{

     display: flex;

     justify-content: space-between;

     /*如果设置margin,由于oontent没有border而无法显示上边距*/

     padding: 20px 15px 10px 15px;

 }

 .main .main-box .main-contain .content .recommend-news li a img{

     width: 250px;

     height: 180px;

     /*1s慢动作 结合transform: scale*/

     transition: all 1s;

 }

 .main .main-box .main-contain .content .recommend-news li p{

     text-align: center;

     margin-top: 10px;

     margin-bottom: 5px;

 }

 /*overflow必须设置大小,因此不能设置在li，否则影响p*/

 /*设在a就需要置block*/

 /*>是子代选择器,不会影响p里面的a*/

 .main .main-box .main-contain .content .recommend-news li>a{

     display: block;

     width: 250px;

     height: 180px;

     overflow: hidden;

 }

 .main .main-box .main-contain .content .recommend-news li:hover a img{

     transform: scale(1.2);

 }

 /*新闻*/

 .main .main-box .main-contain .news .nav{

     width: 800px;

     height: 50px;

     line-height: 50px;

     background: darkgrey;

 }

 .main .main-box .main-contain .news .nav li{

     float: left;

     margin-right: 30px;

     width: 80px;

     height: 50px;

     text-align: center;

     cursor: pointer;

 }

 .main .main-box .main-contain .news .nav .active{

     border-bottom: 4px solid yellow;

     box-sizing: border-box;

 }

 .main .main-box .main-contain .news .content{

     width: 800px;

     background: lightgrey;

 }

 .main .main-box .main-contain .news .content .left{

     float: left;

     width: 260px;

     height: 200px;

     margin: 10px 10px 10px 10px;

     overflow: hidden;

     border-radius: 20px;

 }

 .main .main-box .main-contain .news .content .right{

     float: left;

     margin: 10px 0 10px 0;

     line-height: 50px;

     font-size: 15px;

 }

 .main .main-box .main-contain .news .content .right span{

     color: red;

 }

 .main .main-box .main-contain .news .content li{

     display: none;

 }

 .main .main-box .main-contain .news .content li .left img{

     width: 260px;

     height: 200px;

     transition: all 1s;

 }

 .main .main-box .main-contain .news .content li .left:hover img{

     transform: scale(1.2);

 }

 .main .main-box .main-contain .more{

     width: 400px;

     height: 50px;

     line-height: 50px;

     text-align: center;

     border-radius: 20px;

     background: darkgrey;

     margin: 20px auto;

     color: blue;

     cursor: pointer;

 }

 /*右边*/

 .main .main-box .aside{

     float: right;

     width: 360px;

     /*height: 800px;*/

     background: lightgrey;

 }

 .main .main-box .aside .course div img{

     width: 320px;

     /*height: 192px;*/

     margin-left: 20px;

 }

 .main .main-box .aside .course p{

     width: 360px;

     height: 30px;

     line-height: 30px;

     text-indent: 20px;

 }

 .main .main-box .aside .course p span{

     float: right;

     margin-right: 20px;

     color: blue;

 }

 .main .main-box .aside .about{

     width: 360px;

     background: url("http://onj3s3zfw.bkt.clouddn.com/o_1cggt7lvb1ovi1l1g1ucu8nl1spc7.jpg") no-repeat 170px 20px/100px 100px;

 }

 .main .main-box .aside .about h2{

     text-indent: 2em;

     margin-top: 20px;

     margin-bottom: 20px;

 }

 .main .main-box .aside .about p{

     width: 360px;

     line-height: 40px;

     text-indent: 20px;

 }

 .main .main-box .aside .about p i{

     font-size: 24px;

     vertical-align: -3px;

 }

 .main .main-box .aside .about p span{

     float: right;

     margin-right: 108px;

     font-size: 95%;

 }

 .main .main-box .aside .recommend h2{

     text-indent: 2em;

     margin-top: 20px;

     margin-bottom: 20px;

 }

 .main .main-box .aside .recommend .hot{

     margin-bottom: 10px;

 }

 .main .main-box .aside .recommend .hot .left{

     float: left;

     width: 200px;

     height: 90px;

     margin-left: 20px;

 }

 .main .main-box .aside .recommend .hot .right{

     float: right;

     margin-right: 20px;

     margin-top: 10px;

 }

 .main .main-box .aside .recommend .hot .left .upper{

     width: 200px;

     height: 56px;

     line-height: 28px;

     overflow: hidden;

     margin-bottom: 10px;

     text-overflow: ellipsis;

     display: -webkit-box;

     -webkit-box-orient: vertical;

     -webkit-line-clamp:;

 }

 .main .main-box .aside .recommend .hot .left .lower{

     width: 200px;

     font-size: 95%;

     margin-bottom: 10px;

 }

 .main .main-box .aside .recommend .hot .left .lower span{

     float: right;

     margin-right: 10px;

 }

 .main .main-box .aside .recommend .hot img{

     width: 110px;

     height: 70px;

 }

index.css

 body{

     background: antiquewhite;

 }

 .page{

     width: 100%;

     height: 500px;

     background: antiquewhite;

 }

 .page .main{

     width: 440px;

     background: white;

     border: 1px solid darkgray;

     margin: 30px auto;

     border-radius: 5px;

 }

 .page .main .top{

     width: 400px;

     height: 40px;

     line-height: 40px;

     margin: 5px auto;

     border-bottom: 1px solid darkgray;

 }

 .page .main .top h2{

     height: 40px;

     border-bottom: 3px solid blue;

     box-sizing: border-box;

     float: left;

 }

 .page .main .top a{

     display: block;

     height: 40px;

     float: right;

     color: blue;

 }

 .page .main form{

     width: 400px;

     margin: auto;

 }

 .page .main form .inp{

     width: 400px;

     height: 40px;

     line-height: 40px;

     margin: 15px auto;

 }

 .page .main form .inp input{

     width: 400px;

     height: 40px;

     border: 1px solid darkgray;

     box-sizing: border-box;

     border-radius: 5px;

     text-indent: 1em;

     font-size: 16px;

 }

 .page .main form .addition{

     width: 400px;

     height: 30px;

     font-size: 14px;

 }

 .page .main form .addition input[type=checkbox]{

     width: 15px;

     height: 15px;

     float: left;

     color: white;

     vertical-align: -300px;

 }

 .page .main form div a{

     float: right;

     color: blue;

     font-size: 15px;

 }

 .page .main form input[type=submit]{

     width: 400px;

     height: 40px;

     margin: auto;

     margin-bottom: 20px;

     line-height: 40px;

     text-align: center;

     border-radius: 5px;

     font-size: 18px;

     background: lightskyblue;

     border-style: none;

     color: white;

     cursor: pointer;

 }

 /*当内容较短时,让footer固定在底部,不会跟着登录框后面 横在页面中间*/

 .footer{

     position: fixed;

     left:;

     bottom:;

 }

 body{

     background: antiquewhite;

 }

 .page{

     width: 100%;

     height: 800px;

     background: antiquewhite;

 }

 .page .main{

     width: 440px;

     background: white;

     border: 1px solid darkgray;

     margin: 30px auto;

     border-radius: 5px;

 }

 .page .main .top{

     width: 400px;

     height: 40px;

     line-height: 40px;

     margin: 5px auto;

     border-bottom: 1px solid darkgray;

 }

 .page .main .top h2{

     height: 40px;

     border-bottom: 3px solid blue;

     box-sizing: border-box;

     float: left;

 }

 .page .main .top a{

     display: block;

     height: 40px;

     float: right;

     color: blue;

 }

 .page .main form{

     width: 400px;

     margin: auto;

 }

 .page .main form .inp{

     width: 400px;

     height: 40px;

     line-height: 40px;

     margin: 15px auto;

 }

 .page .main form .inp input{

     width: 400px;

     height: 40px;

     border: 1px solid darkgray;

     box-sizing: border-box;

     border-radius: 5px;

     text-indent: 1em;

     font-size: 16px;

 }

 .page .main form .inp .left{

     width: 260px;

     float: left;

 }

 .page .main form .inp a{

     float: right;

     display: block;

     width: 120px;

     height: 40px;

     line-height: 40px;

     text-align: center;

     font-size: 16px;

     border: 1px solid darkgray;

     box-sizing: border-box;

     border-radius: 5px;

 }

 .page .main form input[type=submit]{

     width: 400px;

     height: 40px;

     margin: auto;

     margin-bottom: 20px;

     line-height: 40px;

     text-align: center;

     border-radius: 5px;

     font-size: 18px;

     background: lightskyblue;

     border-style: none;

     color: white;

     cursor: pointer;

 }

 /*当内容较短时,让footer固定在底部,不会跟着登录框后面 横在页面中间*/

 .footer{

     position: fixed;

     left:;

     bottom:;

 }

reg.css

JavaScript

JQuery.js 略

 $(function () {

     var $picLi = $(".main .main-box .banner .pic li");

     var $tabLi = $(".main .main-box .banner .tab li");

     var $btnLI = $(".main .main-box .banner .btn li");

     var $banner = $(".main .main-box .banner");

     var picIndex = 0;

     var len = $picLi.length;

     var timer;

     // 初始化显示

     $picLi.hide().eq(picIndex).show();

     $tabLi.eq(picIndex).addClass("active");

     function change(n) {

         if( n != picIndex ){

             $picLi.eq(picIndex).fadeOut(2000);

             $tabLi.eq(picIndex).removeClass("active");

             picIndex = n;

             $picLi.eq(picIndex).fadeIn(2000);

             $tabLi.eq(picIndex).addClass("active");

         }

     }

     // 点击事件

     $tabLi.click(function () {

         change($(this).index());

     });

     $btnLI.click(function () {

         var index = picIndex;

         if($(this).index()){

             index++;

             index %= len;

         }

         else{

             if(0 === index){

                 index = len;

             }

             index--;

         }

         change(index);

     });

     // 定时器

     function auto() {

         timer = setInterval(function () {

             var index = picIndex;

             index++;

             index %= len;

             change(index);

         }, 5000);

     }

     function mouseIn(){

         clearInterval(timer);

     }

     auto();

     $banner.hover(mouseIn, auto);

 });

 $(function () {

    var $nav = $(".main .main-box .main-contain .news .nav li");

    var $content = $(".main .main-box .main-contain .news .content li");

    var index = 0;

    // 初始化

    $nav.eq(index).addClass("active");

    $content.hide().eq(index).show();

    $nav.click(function () {

        var i = $(this).index();

        if (i != index) {

            $nav.eq(index).removeClass("active");

            $content.eq(index).hide();

            index = i;

            $nav.eq(index).addClass("active");

            $content.hide().eq(index).show();

        }

    });

 });

index.js

 // 头部不显示亮下划线

 $(function () {

     var $menuLi = $(".header .header-contain .menu li");

     $.each($menuLi, function (i, obj){

         obj.removeAttribute("class", "active");

     });

 });

 // 头部不显示亮下划线

 $(function () {

     var $menuLi = $(".header .header-contain .menu li");

     $.each($menuLi, function (i, obj){

         obj.removeAttribute("class", "active");

     });

 });

 $(function () {

     var $btn = $(".page .main form div .sendcode");

     var count;

     var timer=undefined;

     function sendCodeTimer() {

         if( 1 === count ){

             clearInterval(timer);

             timer=undefined

             $btn.html("重新发送");

         }

         else{

             count--;

             $btn.html(count + "s");

         }

     }

     function sendCodeClick() {

         if(timer === undefined ){

             count = 10;

             $btn.html(count + "s");

             timer = setInterval(sendCodeTimer, 1000);

         }

     }

     $btn.click(sendCodeClick);

 });

reg.js

效果图

首页

首页续

注册

Web前端静态页面示例的更多相关文章

使用 gulp-file-include 构建前端静态页面
前言虽然现在单页面很流行,但是在 PC 端多页面还是常态,所以构建静态页面的工具还有用武之地.最近也看到了一些询问如何 include HTML 文件的问题. 很多时候我们在写静态页面的时候也希望能 ...
H5商城，纯前端静态页面
发布时间:2018-09-28 技术:jquery1.10.1+swipeSlide+jquery.mmenu+jquery.touchSwipe+cityinit 概述纯手写H5商城,2年 ...
Tomcat启动web项目静态页面中文乱码问题解决
1 首先查看静态页面在编辑器中是否正常, 如果是eclipse ,需要设置一下项目编码格式为utf-8, 如果是idea , 一般会自动识别, 也可以自己手动检查一下, 检查html上面是否有 ...
【转】手机web前端调试页面的几种方式
前言 PC端web页面调试比较容易,这里主要说几种移动端调试的方法,从简单到复杂.从模拟调试到远程调试,大概分为几部分: 1.Chrome DevTools(谷歌浏览器)的模拟手机调试 2.weinr ...
手机web前端调试页面的几种方式
前言 PC端web页面调试比较容易,这里主要说几种移动端调试的方法,从简单到复杂.从模拟调试到远程调试,大概分为几部分: 1.Chrome DevTools(谷歌浏览器)的模拟手机调试 2.weinr ...
Web前端代码页面布局总结
一. html (1)编码:所有编码均采用xhtml,标签必须闭合,属性值用双引号包括,编码统一为utf-8. (2)语义化:语义化html,正确使用标签. (3)文件命名:命名以中文命名,依实际模 ...
iviewUI 前端静态页面实现增删改查分页
完整代码部分 (仅供参考哈): <template> <div> <label prop="name"> 姓名: </label> ...
vue前端静态页面Github Pages线上预览实现
一.前期准备之项目编译此处记录如何解决vue2.0 打包之后,打开index.html出现空白页的问题,附上@参考地址打包之前修改三个文件第一步,找到build文件,在webpack.prod. ...
DataTables学习：从最基本的入门静态页面，使用ajax调用Json本地数据源实现前端开发深入学习，根据后台数据接口替换掉本地的json本地数据，以及报错的处理地方，8个例子（显示行附加信息，回调使用api，动态显示和隐藏列...），详细教程
一.DataTables 个人觉得学习一门新的插件或者技术时候,官方文档是最根本的,入门最快的地方,但是有时候看完官方文档,一步步的动手写例子,总会出现各种莫名其妙的错误,需要我们很好的进行研究出错 ...

随机推荐

[已读]HTML5与CSS3设计模式
我想说,不要被书名骗了,其实并没有涉及丁点h5与css3的内容,但是确实称得上比较详细的一本关于css的书.看它的页数就知道了,481~~ 今年上半年看完的,现在想想,觉得自己还是蛮拼的.内容会比较枯 ...
RHEL 6.5---SVN服务实现过程
主机名 IP地址 master 192.168.30.130 slave 192.168.30.131 安装 [root@master ~]# yum install -y subversion h ...
CentOS 安装图形化界面方法
登录系统,使用yum 安装 #yum groupinstall 'X Window System' -y 安装GNOME桌面环境 #yum groupinstall 'GNOME Desktop ...
AJPFX总结方法里的属性
嵌套循环:循环里套循环假设外循环的循环次数是m次,内循环的循环次数是n次,那么内层循环的循环次数需要 m * n次. Eg:利用for循环语句的嵌套打印出乘法口诀表 class break1 ...
JAVA Map的使用
学JAVA那么多天了,所以就不写那啥了,哈哈 Map 是一个很实用的东西,它查询的速度也是飞快的.还有很多好的地方, 至于好在哪里,我也说不清. 还是用代码来说吧: import java.util. ...
CF782B The Meeting Place Cannot Be Changed
题意: The main road in Bytecity is a straight line from south to north. Conveniently, there are coordi ...
【数据分析 R语言实战】学习笔记第七章假设检验及R实现
假设检验及R实现 7.1假设检验概述对总体参数的具体数值所作的陈述,称为假设;再利用样本信息判断假设足否成立,这整个过程称为假设检验. 7.1.1理论依据假设检验之所以可行,其理沦背景是小概率理论 ...
anzhuaggeoip
1.因启动geoip模块,需要先安装GeoIP # wget http://geolite.maxmind.com/download/geoip/api/c/GeoIP.tar.gz # tar xv ...
Hadoop 常用命令之 HDFS命令
命令说明 hadoop fs -mkdir 创建HDFS目录 hadoop fs -ls 列出HDFS目录 hadoop fs -copyFromLocal 使用-copyFromLocal 复制本 ...
IOS OS X 中集中消息的传递机制
1 KVO (key-value Observing) 是提供对象属性被改变是的通知机制.KVO的实现实在Foundation中,很多基于 Foundation 的框架都依赖与它.如果只对某一个对象的 ...