index.html
<!DOCTYPE html> <html> <head> <title>简书</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- 可选的 Bootstrap 主题文件（一般不用引入） --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="./static/style.css"> <link rel="stylesheet" type="text/css" href="./static/icon/zuanshi/iconfont.css"> <link rel="stylesheet" type="text/css" href="./static/icon/pinglun/iconfont.css"> <link rel="stylesheet" type="text/css" href="./static/icon/aixin/iconfont.css"> <link rel="stylesheet" type="text/css" href="./static/icon/change/iconfont.css"> <link rel="stylesheet" type="text/css" href="./static/icon/add/iconfont.css"> <link rel="stylesheet" type="text/css" href="./static/icon/up-row/iconfont.css"> <link rel="stylesheet" type="text/css" href="./static/icon/write/iconfont.css"> <link rel="stylesheet" type="text/css" href="./static/icon/fangdajing/iconfont.css"> <body> <div class="self-contain"> <div class="self-head"> <a href="/" class="self-logo-index"></a> <ul class="self-list-ul"> <li > <a href="/">发现</a></li> <li > <a href="/">关注</a></li> <li > <a href="/">消息</a></li> <div class="self-search"> <input type="" placeholder="搜索" class="self-search-input"/> <a ><div class="iconfont icon-fangdajing self-search-logo"></div></a> </div> </ul> <div class="self-user"> <img src="./static/avatar.jpg"/> <ul class="self-dropdown-menu"> <li><a href="">我的主页</a></li> <li><a href="">收藏的文章</a></li> <li><a href="">帮助与反馈</a></li> <li><a href="">设置</a></li> <li><a href="">退出</a></li> </ul> </div> <a href="/" class="self-button-write"> <span class="iconfont icon-penwrite self-write"></span> 写文章</a> </div> </div> <div class="container" style="padding: 56px 38px 0 38px;min-width: 910px;"> <div class="row"> <div class="col-xs-7 self-left"> <div class="banner"> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner " role="listbox"> <div class="item active self-banner"> <img src="./static/banner1.png" class="item-img" alt="..."> <div class="carousel-caption"> </div> </div> <div class="item self-banner"> <img src="./static/banner2.jpg" class="item-img" alt="..."> <div class="carousel-caption"> </div> </div> <div class="item self-banner"> <img src="./static/banner3.png" class="item-img" alt="..."> <div class="carousel-caption"> </div> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> <ul class="content-list"> <li> <div class="content-detail"> <a href="/" class="content-title">(效率工具)程序员必备终端及美化</a> <p class="content-abstract">作为一个合格的程序员，CLI是必备的技能。 工欲善其事，必先利其器。一个顺手并且提高效率的终端是必须的。 平时很多人会私信或评论中问我关于我的终...</p> <div class="content-meta"> <span><span class="iconfont icon-zuanshi">11.3</span></span> <a href="/" >若风</a> <a href="/" ><span class="iconfont icon-pinglun2">3</a></span> <span><span class="iconfont icon-aixin">87</span></span> </div> </div></li> <li> <div class="content-detail"> <a href="/" class="content-title">(效率工具)程序员必备终端及美化</a> <p class="content-abstract">作为一个合格的程序员，CLI是必备的技能。 工欲善其事，必先利其器。一个顺手并且提高效率的终端是必须的。 平时很多人会私信或评论中问我关于我的终...</p> <div class="content-meta"> <span><span class="iconfont icon-zuanshi">11.3</span></span> <a href="" >若风</a> <a href="" ><span class="iconfont icon-pinglun2">3</a></span> <span><span class="iconfont icon-aixin">87</span></span> </div> </div></li> <li> <div class="content-detail"> <a href="/" class="content-title">(效率工具)程序员必备终端及美化</a> <p class="content-abstract">作为一个合格的程序员，CLI是必备的技能。 工欲善其事，必先利其器。一个顺手并且提高效率的终端是必须的。 平时很多人会私信或评论中问我关于我的终...</p> <div class="content-meta"> <span><span class="iconfont icon-zuanshi">11.3</span></span> <a href="/" >若风</a> <a href="/" ><span class="iconfont icon-pinglun2">3</a></span> <span><span class="iconfont icon-aixin">87</span></span> </div> </div></li> <li> <div class="content-detail"> <a href="/" class="content-title">(效率工具)程序员必备终端及美化</a> <p class="content-abstract">作为一个合格的程序员，CLI是必备的技能。 工欲善其事，必先利其器。一个顺手并且提高效率的终端是必须的。 平时很多人会私信或评论中问我关于我的终...</p> <div class="content-meta"> <span><span class="iconfont icon-zuanshi">11.3</span></span> <a href="/" >若风</a> <a href="/" ><span class="iconfont icon-pinglun2">3</a></span> <span><span class="iconfont icon-aixin">87</span></span> </div> </div></li> <li> <div class="content-detail"> <a href="/" class="content-title">(效率工具)程序员必备终端及美化</a> <p class="content-abstract">作为一个合格的程序员，CLI是必备的技能。 工欲善其事，必先利其器。一个顺手并且提高效率的终端是必须的。 平时很多人会私信或评论中问我关于我的终...</p> <div class="content-meta"> <span><span class="iconfont icon-zuanshi">11.3</span></span> <a href="/" >若风</a> <a href="/" ><span class="iconfont icon-pinglun2">3</a></span> <span><span class="iconfont icon-aixin">87</span></span> </div> </div></li> <li> <div class="content-detail"> <a href="/" class="content-title">(效率工具)程序员必备终端及美化</a> <p class="content-abstract">作为一个合格的程序员，CLI是必备的技能。 工欲善其事，必先利其器。一个顺手并且提高效率的终端是必须的。 平时很多人会私信或评论中问我关于我的终...</p> <div class="content-meta"> <span><span class="iconfont icon-zuanshi">11.3</span></span> <a href="/" >若风</a> <a href="/" ><span class="iconfont icon-pinglun2">3</a></span> <span><span class="iconfont icon-aixin">87</span></span> </div> </div></li> <li> <div class="content-detail"> <a href="/" class="content-title">(效率工具)程序员必备终端及美化</a> <p class="content-abstract">作为一个合格的程序员，CLI是必备的技能。 工欲善其事，必先利其器。一个顺手并且提高效率的终端是必须的。 平时很多人会私信或评论中问我关于我的终...</p> <div class="content-meta"> <span><span class="iconfont icon-zuanshi">11.3</span></span> <a href="/" >若风</a> <a href="/" ><span class="iconfont icon-pinglun2">3</a></span> <span><span class="iconfont icon-aixin">87</span></span> </div> </div></li> </ul> </div> <div class="col-xs-2 col-xs-offset-1 self-right" > <div class="content-ad-list"> <a href="/"><img src="./static/ad1.png" /></a> <a href="/"><img src="./static/ad2.png" /></a> <a href="/"><img src="./static/ad3.png" /></a> <a href="/"><img src="./static/ad4.png" /></a> </div> <div class="conent-recommend-wrap"> <div class="content-qrcode"> </div> <div class="content-ad-one"> </div> <div class="content-recommend-user"> <div class="user-title"> <span>推荐作者</span> <a href="/"><span class="iconfont icon-segi-icon-Change">换一批</span> </a> </div> <ul class="user-list"> <li> <a href="/" class="user-list-avatar"><img src="./static/avatar.jpg"></a> <a href="/" class="user-follow"><span class="iconfont icon-add"></span>关注</a> <a href="/" class="user-name">无限猴子</a> <p>写了2K字-2K喜欢</p> </li> <li> <a href="/" class="user-list-avatar"><img src="./static/avatar.jpg"></a> <a href="/" class="user-follow"><span class="iconfont icon-add"></span>关注</a> <a href="/" class="user-name">无限猴子</a> <p>写了2K字-2K喜欢</p> </li> <li> <a href="/" class="user-list-avatar"><img src="./static/avatar.jpg"></a> <a href="/" class="user-follow"><span class="iconfont icon-add"></span>关注</a> <a href="/" class="user-name">无限猴子</a> <p>写了2K字-2K喜欢</p> </li> <li> <a href="/" class="user-list-avatar"><img src="./static/avatar.jpg"></a> <a href="/" class="user-follow"><span class="iconfont icon-add"></span>关注</a> <a href="/" class="user-name">无限猴子</a> <p>写了2K字-2K喜欢</p> </li> <li> <a href="/" class="user-list-avatar"><img src="./static/avatar.jpg"></a> <a href="/" class="user-follow"><span class="iconfont icon-add"></span>关注</a> <a href="/" class="user-name">无限猴子</a> <p>写了2K字-2K喜欢</p> </li> <li> <a href="/" class="user-list-avatar"><img src="./static/avatar.jpg"></a> <a href="/" class="user-follow"><span class="iconfont icon-add"></span>关注</a> <a href="/" class="user-name">无限猴子</a> <p>写了2K字-2K喜欢</p> </li> </ul> </div> </div> </div> </div> </div> <div class="side-tool" id="toTop"> <ul> <li ><span class="function-button" ><div class="iconfont icon-jiantoushang icon-center" ></div></span></li> </ul> </a> </div> <footer class="container"> <div class="row"> <div class="col-xs-8 main" style="background-color: #fff;height: 160px;"> <a href="">关于简书</a> <a href="">联系我们</a> <a href="">加入我们</a> <a href="">简书出版</a> <a href="">品牌与徽标</a> <a href="">帮助中心</a> <a href="">合作伙伴</a> <div class="icp"> ©2012-2019 上海佰集信息科技有限公司 / 简书 / 沪ICP备11018329号-5 / Smrz 沪公网安备31010402002252号 / Wxb 简书网举报电话：021-34770013 / Fanzha 亲爱的市民朋友，上海警方反诈劝阻电话“962110”系专门针对避免您财产被骗受损而设，请您一旦收到来电，立即接听 / Zggsrz </div> </div> </div> </footer> </div> </body> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <script type="text/javascript"> $(function(){ $(window).on("scroll",function(){ var display = window.pageYOffset > 300 ? "block" : "none"; $("#toTop").css("display",display); }); $("#toTop").on("click",function(){ $('html,body').animate({scrollTop: '0px'}, 1000); }) }) </script> </script> </html>style.css
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: 0; padding: 0; border: 0; 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: 1; } 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: 0; } body{ margin: 0; padding:0 ; font-family: -apple-system,SF UI Display,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif; } img{ vertical-align: middle; } a { text-decoration:none !important; cursor: pointer; } .self-head{ position: fixed; min-width: 768px; background-color: #fff; height: 56px; border-bottom: 1px solid #f0f0f0; width: 100%; z-index: 10001; } .self-logo-index{ background: url(nav-logo.png); position: absolute; top: 0; left: 0; display: block; width: 100px; height: 56px; /** 图片同比缩放在容器中 */ background-size: contain; } .self-list-ul{ display: flex; margin-left: 100px; width: 400px; height: 56px; float: left; vertical-align:middle; } .self-list-ul li{ display: flex; width: 50px; height: 56px; justify-content: center; align-items: center; } .self-list-ul a{ color: #0a0a0a; font-weight:700; font-family: sans-serif; } .self-list-ul li:hover{ background-color: #eee; } .self-write{ display: inline-block; } .self-search { display: flex; float: left; align-items: center; position: relative; } .self-search input{ margin-left: 12px; width: 110px; height: 38px; padding: 0 40px 0 20px; border-radius: 40px; border:1px solid #eee; outline: none; background-color: #eee; transition:all 0.5s ease; } .self-search input:focus { width: 138px; transition:all 0.5s ease; } .self-search a{ position: absolute; right: 10px; color: #969696; } .self-user{ display: inline-block; width: 80px; height: 56px; padding-top: 8px; position: absolute; right: 120px; text-align: center; cursor: pointer; } .self-user:hover{ background-color: #eee; } .self-user img{ width: 40px; height: 40px; border-radius: 50% 50%; border:1px solid #eee; } .self-button-write{ display: inline-block; height: 40px; width:100px; text-align: center; background-color: #ea6f5a; color: #eee !important; border-radius: 20px; margin:8px 12px 0 12px; line-height: 34px; float: right; font-size: 15px; opacity: 0.9; } .self-button-write:hover{ opacity: 1 } .self-dropdown-menu{ position: relative; display: none; background-color: #fff; margin-top: 4px; box-shadow: 0 0 10px #ddd; width: 120px; z-index: 100; } .self-user:hover .self-dropdown-menu { display: block; } .self-dropdown-menu li{ font-family: sans-serif; font-weight: 700; padding: 10px; display: box; box-align:center; vertical-align: center; } .self-dropdown-menu li:hover{ background-color: #ddd; } .self-dropdown-menu a{ color: #0a0a0a; } .self-left{ padding-top: 30px; padding-right: 0; } .self-right{ padding: 30px 0 0 0; z-index: 1; } .banner { height: 240px; width: 100%; min-width: 440px; } .carousel-inner>.item>img{ width: 100%; height: 210px; } .content-ad-list{ display: block; box-sizing: border-box; min-width: 250px; } .content-ad-list img{ min-height: 39px; width: 100%; cursor: pointer; } .content-list{ padding: 0; margin: 0; font-family: -apple-system,SF UI Display,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif; } .content-list li{ position: relative; width: 100%; border-bottom: 1px solid #f0f0f0; word-wrap: break-word; line-height: 20px; padding: 15px 2px 20px 0; margin:0 0 0 15px; } .content-title{ color: #333; font-size: 18px; font-weight: 700; line-height: 1.5; margin: -7px 0 0 4px; cursor: pointer; } .content-title a{ color: #999; } .content-abstract{ color: #999; font-size: 13px; line-height: 24px; margin: 0 0 0 8px; } .content-meta{ color: #999 ; } .content-meta a { margin-right: 10px; color: #999; } .content-meta span{ margin-right: 10px; } .conent-recommend-wrap{ min-width: 250px; margin-bottom: 20px; padding-top: 0; font-size: 13px; text-align: center; } .content-recommend-user a{ color: #969696; } .content-qrcode{ padding: 7px 10px; border-radius: 6px; width: 100%; margin-bottom: 30px; background-color: #fff; } .user-title { display: flex; justify-content: space-between; font-size: 14px; } .user-list{ margin: 0 0 20px; text-align: left; list-style: none; } .user-list li{ margin-top: 15px; line-height: 20px; } .user-list p{ margin-top: 2px; font-size: 12px; color: #969696; } .user-list-avatar{ float: left; width: 48px; height: 48px; margin-right: 10px; display: block; cursor: pointer; } .user-list-avatar img{ width: 100%; height: 100%; border: 1px solid #eee; border-radius: 50%; } .user-follow{ float: right; color: #42c02e !important; } .user-name{ color: #333 !important; font-size: 14px; } footer .row{ padding-top: 25px; margin-left: 6px; } footer .main{ font-size: 13px; } footer .main a{ display: inline-block; color: #969696; } footer .icp{ margin-top: 10px; font-size: 12px; } .function-button{ cursor: pointer; width: 50px; height: 50px; text-align: center; display: block; } .side-tool{ position: fixed; bottom: 40px; right: 40px; z-index: 1040; } .side-tool:hover{ transition: all 0.5s ease; } .side-tool>ul>li{ border: 1px solid #dcdcdc; border-bottom: none; background-color: #fff; transition: .1s ease-in; } .icon-center{ display: flex; align-items: center; justify-content: center; height: 100%; }图标：阿里爸爸图标+原网页上抠的
