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实现页面自动跳转
初学H5,书上说的是<meta http-equiv="refresh" content="5“ url=”./error.html"/>这样可以实 ...
Lambda表达式的一些常用形式
1.调用一个方法 prod=>EvaluteProduct(prod); 2.lambad表达式来表示一个多参数的委托,则必须把参数封装在括号内.语句如下: (prod,count)=>p ...
JVM内存各个区域分工简单介绍
JVM内存各个区域简单介绍: 程序计数器:程序计数器是一块较小的内存空间,它可以看作是当前线程所执行的字节码的行号指示器. 在使用多线程时,为了线程切换后能恢复到正确的执行位置,每条线程都需要有个独立 ...
【学习笔记】深入理解js原型和闭包（15）——闭包
前面提到的上下文环境和作用域的知识,除了了解这些知识之外,还是理解闭包的基础. 至于“闭包”这个词的概念的文字描述,确实不好解释,我看过很多遍,但是现在还是记不住. 但是你只需要知道应用的两种情况即可 ...
JD IPO address by liuqiangdong
Ladies and gentlemen, Good evening.I'd rather use english, not mandarin.Because during the road show ...
DHCP server工作原理
1.CLIENT首先发出广播的DHCPDISCOVER报文,广播的目的是让DHCP SERVER能够收到这个请求报文.在这个报文中,CLIENT可以在"选项"字段中加入" ...
WEB前端JS与UI框架
前端Js框架汇总概述: 有些日子没有正襟危坐写博客了,互联网飞速发展的时代,技术更新迭代的速度也在加快.看着Java.Js.Swift在各领域心花路放,也是煞是羡慕.寻了寻.net的消息,也是振奋人 ...
jquery.placeholder.min.js让吃屎的IE浏览器支持placeholder去吧
描述:现在都是HTML5时代了,所有的浏览器都支持placeholder,唯独IE不支持.现在我们有了这款插件,IE下终于可以支持了! 图片展示: 兼容浏览器:IE6+/Firefox/Goog ...
uva12433 Rent a Car
init 一开始搞成2*n+2了...囧所以初始化很重要! 然后提交的时候忘了删调试的数据了..囧技巧:设立虚拟节点建图比较麻烦(非常). 要考虑到保养完了的车可以免费再用设立S,T ,1 ...
vue 自定义组件 v-model双向绑定、父子组件同步通信【转】
父子组件通信,都是单项的,很多时候需要双向通信.方法如下: 1.父组件使用:msg.sync="aa" 子组件使用$emit('update:msg', 'msg改变后的值xxx ...