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/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 可選的 Bootstrap 主題文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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%;
}
圖標：阿里爸爸圖標+原網頁上摳的
