First commit

Signed-off-by: lish <lish@csdn.net>

.gitignore

+.idea/
+node_modules
+assets
+build
+dist

README.md

+## 启动
+
+### 1.系统环境依赖
+
+```
+1.安装node.js 运行环境    
+2.配置NPM淘宝资源镜像
+```
+```
+//命令行设置淘宝镜像
+npm config set registry https://registry.npm.taobao.org
+```
+### 2.编译发布
+
+```
+//安装或更新npm插件包
+npm install
+
+//本地开发: 不压缩,并开启实时watch,输出到本地 访问地址:http://localhost.csdn.net/
+输出目录:/dist
+npm run dev
+
+//线上环境(压缩),打包
+输出目录:/dist
+npm run build
+
+```
+### 3.增加职位信息
+
+```
+只需要改一个json文件 ：//目录文件src/js/job_description.json
+格式:
+'id':必须设置为唯一的，统一类型的职位以'-'和数字拼接，如'bianji-1','bianji-2'以此类推
+'imgName':列表图片显示的内容，可相同，
+'title':列表及详情页职位名称，可相同,
+'duty':岗位职责，不加序号,
+'requirement':任职要求，不加序号，
+'pluse':加分项，不加序号,
+'material':你需要提供的材料
+
+{
+  "id": "yunying-3", 
+  "imgName": "运营",
+  "title": "CTO俱乐部运营",
+  "duty": [
+    "负责俱乐部整体运营策略与计划、流程规范的制定与执行；",
+    "管理俱乐部项目及任务分工，把控项目运营节奏、品质，包括线上运营、线下活动；"
+  ],
+  "requirement": [
+    "本科毕业，熟悉互联网社区工作及产业，3年以上高端人群社群运营经验者优先；",
+    "具备一定的活动策划、协调及组织能力；热爱社交、更热爱组织社交活动；"
+  ],
+  "pluse": [],
+  "material": []
+}
+
+```
\ No newline at end of file

gulpfile.js

+var gulp = require('gulp'),
+  htmlmin = require("gulp-htmlmin"), //压缩html
+  cleanCss = require("gulp-clean-css"), //压缩css
+  imagemin = require("gulp-imagemin"), //压缩图片
+  connect = require("gulp-connect"),
+  cached = require("gulp-cached"),
+  uglify = require('gulp-uglify'), //压缩js
+  fileInclude = require('gulp-file-include'),
+  autoprefixer = require('gulp-autoprefixer'), //兼容浏览器前缀
+  del = require('del')
+  rev = require('gulp-rev-append')//给页面的引用添加版本号，清除页面引用缓存
+
+gulp.task('webserver', function () {
+  connect.server({
+    root: 'dist',
+    host: '127.0.0.1', //
+    port: 80
+  });
+});
+gulp.task('js', function () {
+  return gulp.src('src/js/*.js')
+    .pipe(uglify())
+    .pipe(gulp.dest('dist/js'))
+});
+gulp.task('css', function () {
+  return gulp.src("src/css/*.css")
+    .pipe(autoprefixer())
+    .pipe(cleanCss({
+      compatibility: 'ie8'
+    }))
+    .pipe(gulp.dest('dist/css'))
+});
+gulp.task('zip', function () {
+  return gulp.src("src/static/*.zip")
+    .pipe(gulp.dest('dist/static'))
+});
+gulp.task('image', function () {
+  return gulp.src('src/img/*.{jpg,png,gif,svg}') //要处理的图片目录为img目录下的所有的.jpg .png .gif 格式的图片;
+    .pipe(cached(imagemin()))
+    .pipe(gulp.dest('dist/img'))
+});
+
+gulp.task('fileinclude', function () {
+  return gulp.src(['src/*/*.json', 'src/*.html'])
+    .pipe(fileInclude({
+      prefix: '@@',
+      basepath: '@file'
+    }))
+    .pipe(rev())
+    .pipe(htmlmin({
+      collapseWhitespace: true,
+      removeComments: true
+    }))
+    .pipe(gulp.dest('dist'));
+});
+
+gulp.task('testFile', function(){
+  return gulp.src(['src/test/**/*.*'])
+    .pipe(gulp.dest('dist/test'));
+})
+
+gulp.task('watch', function () {
+  gulp.watch('src/css/*.css', ['css', 'fileinclude']);
+  gulp.watch(['src/js/*.*'], ['fileinclude', 'js']);
+  gulp.watch('src/img/*.*', ['image', 'fileinclude']);
+  gulp.watch(['src/**.html'], ['fileinclude']);
+  gulp.watch(['src/**.zip'], ['zip']);
+  gulp.watch(['src/test/*'], ['testFile']);
+})
+
+gulp.task('clean', function () {
+  return del('dist');
+});
+gulp.task('default', ['clean'], function () {
+  gulp.start('fileinclude', 'css', 'image', 'js', 'webserver', 'watch','zip', 'testFile');
+});
+gulp.task('prod', ['clean'], function () {
+  gulp.start('fileinclude', 'css', 'image', 'js','zip', 'testFile');
+})

package.json

+{
+  "name": "www_company_fe",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "dev": "gulp",
+    "build": "gulp prod"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "del": "^3.0.0",
+    "gulp": "^3.9.1",
+    "gulp-autoprefixer": "^5.0.0",
+    "gulp-cached": "^1.1.1",
+    "gulp-clean-css": "^3.9.4",
+    "gulp-connect": "^5.5.0",
+    "gulp-file-include": "^2.0.1",
+    "gulp-htmlmin": "^4.0.0",
+    "gulp-imagemin": "^4.1.0",
+    "gulp-rev-append": "^0.1.8",
+    "gulp-uglify": "^3.0.0"
+  }
+}

src/MP_verify_RXFSae6GALiCVL2w.txt

+RXFSae6GALiCVL2w
\ No newline at end of file

src/about.html

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <script>location.href = "./index.html#about"; </script>
+</head>
+<body>
+
+</body>
+</html>

src/app/m/wapapp/css/wap_app_download.css

+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+ul,
+li,
+ol,
+dl,
+dt,
+dd,
+p,
+span,
+object,
+iframe,
+pre,
+a,
+abbr,
+cite,
+input,
+select,
+option {
+    margin: 0;
+    padding: 0;
+    font-family: 'Arial', 'Microsoft YaHei';
+}
+ul,
+li,
+ol,
+dl,
+dd,
+dt,
+form {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+html{
+    height:100%;
+}
+body {
+    background: #fff;
+    font-family: 'Arial', 'Microsoft YaHei';
+    font: inherit;
+}
+img {
+    border: none;
+    outline: none;
+}
+em,
+i {
+    font-style: normal;
+}
+
+a {
+    outline: none;
+    text-decoration: none;
+    color: #333;
+}
+a:hover,
+a:active,
+avisited {
+    text-decoration: none;
+}
+.clearfix:after {
+    content: '.';
+    height: 0;
+    visibility: hidden;
+    display: block;
+    clear: both;
+}
+dd,
+dt,
+dl {
+    line-height: 1.2;
+    font-weight: normal;
+}
+label {
+    font-weight: normal;
+}
+
+
+.wap_app_wrap{
+    margin-top:52px;
+    background:url(../images/bg.png) no-repeat center ;
+    background-size:cover;
+    height:calc(100% - 52px);
+    position:relative;
+}
+.wap_app_logo{
+    padding:3rem 0 0;
+    text-align:center;
+}
+.wap_app_logo .logo{
+    display:inline-block;
+    width:3.5rem;
+    height:3.5rem;
+    margin: 0 auto;
+}
+.wap_app_pro{
+    text-align:center;
+    padding:1.8rem 0;
+    font-family: PingFangSC-Medium;
+    font-size: 0.9rem;
+    color: #3D3D3D;
+    letter-spacing: 0.5rem;
+}
+.wap_app_b{
+    padding:0 0.8rem;
+}
+.wap_app_b .wap_app_btn{
+    display:block;
+    width:100%;
+    height:1.5rem;
+    background: #CC2525;
+    border-radius: 6px;
+    font-size:0.6rem;
+    color:#fff;
+    line-height:1.5rem;
+    text-align:center;
+}
+
+
+.wap_mobile{
+    display:block;
+    width:8rem;
+    height:7.9rem;
+    position: absolute;
+    bottom:0;
+    left:50%;
+    margin-left:-4rem;
+}
\ No newline at end of file

src/app/m/wapapp/index.html

+<html>
+    <head>
+        <meta content="always" name="referrer">
+        <meta http-equiv="content-type" content="text/html; charset=utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+        <meta name="apple-mobile-web-app-status-bar-style" content="yes">
+        <script src="//csdnimg.cn/public/common/libs/jquery/jquery-1.9.1.min.js" type="text/javascript"></script>
+        <link rel="apple-touch-icon" href="//csdnimg.cn/public/favicon.ico"/>
+
+        <link rel="stylesheet" href="//csdnimg.cn/public/common/libs/bootstrap/css/bootstrap.css">
+        <link rel="stylesheet" href="//csdnimg.cn/public/common/toolbar/content_toolbar_css/m_toolbar-1.1.1.css">
+        <link rel="stylesheet" href="./css/wap_app_download.css">
+    </head>
+    <script>
+        window.csdn = window.csdn || {};
+        window.csdn.mobileToolbar = window.csdn.mobileToolbar || {};
+        window.csdn.mobileToolbar.mobileParams = {
+            prodTag: 'csdn'// 展示对应log,存在第一优先
+        }
+    </script>
+<body>
+    <div class="wap_app_wrap">
+        <div class="wap_app_logo">
+            <img class="logo" src="images/logo.png" alt="logo"/>
+        </div>
+        <div class="wap_app_pro">技   术   连   接   你   我</div>
+        <div class="wap_app_b">
+            <a class="wap_app_btn" href="https://t.csdnimg.cn/cISz">立即下载</a>
+        </div>
+        <div class="wap_app_bb">
+            <img class="wap_mobile" src="images/mobile.png" alt="img"/>
+        </div>
+    </div>
+
+    <script type="text/javascript" src="js/fontSize.js?"></script>
+
+
+<script type="text/javascript"  id="m-toolbar-tpl-scriptId" prod="csdn" src="//csdnimg.cn/public/common/toolbar/js/m_toolbar-1.1.1.js"></script>
+
+</body>
+</html>

src/app/m/wapapp/js/fontSize.js

+$(function () {
+    initpage();
+    $(window).resize(function ()
+    {
+        initpage();
+    });
+
+    function initpage()
+    {
+        var view_width = document.getElementsByTagName('html')[0].getBoundingClientRect().width;
+        var _html = document.getElementsByTagName('html')[0];
+        view_width > 640 ? _html.style.fontSize = 640 / 16 + 'px' : _html.style.fontSize = view_width / 16 + 'px';
+    }
+});
\ No newline at end of file

src/app/pc/app/index.html

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <meta name="keywords" content="程序员必备 APP，IT资讯 APP，IT学习 APP，编程技术 APP">
+    <meta name="description" content="CSDN APP主要提供安卓、iOS下载路径， APP主要里面主要内容包括：程序员必备 APP， IT资讯 APP， IT学习 APP，编程技术 APP等内容，找编程技术、程序员资讯等APP内容，就上 CSDN APP。">
+    <link rel="stylesheet" href="//csdnimg.cn/public/common/toolbar/content_toolbar_css/content_toolbar.css">
+    <link href="https://csdnimg.cn/public/favicon.ico" rel="SHORTCUT ICON">
+    <title>【CSDN APP】博客 APP_下载 APP - CSDN</title>
+    <style>
+        html, body{
+            height: 100%;
+        }
+        body{
+            background: url(img/background.png) top center;
+            background-size: cover;
+        }
+        html, body, div, dl, dt, dd,p{
+            margin: 0;
+            padding: 0;
+            border: 0;
+            font-size: 100%;
+            font: inherit;
+            vertical-align: baseline;
+        }
+        .app-container{
+            height: 90%;
+            background:url(img/bg.png) center center repeat-x;
+            background-size: contain;
+            margin-top: 1px;
+        }
+        .app-wrapper{
+            width: 1228px;
+            margin: 0 auto;
+            padding: 103px 0 0 210px;
+            box-sizing: border-box;
+            overflow: hidden;
+        }
+        .app-wrapper dt img{
+            width: 390px;
+        }
+        .app-wrapper dt{
+            float: left;
+        }
+        .app-wrapper dd h2{
+            font-size: 44px;
+            color: #3D3D3D;
+            letter-spacing: 1.4px;
+            font-family: 'PingFang SC','Microsoft YaHei',SimHei,Arial,SimSun;
+            margin: 0;
+        }
+        .app-wrapper dd h4{
+            font-weight: 300;
+            font-size: 34px;
+            color: #3D3D3D;
+            letter-spacing: 1.9px;
+            font-family: 'PingFang SC','Microsoft YaHei',SimHei,Arial,SimSun;
+            margin: 0;
+        }
+        .app-wrapper dd{
+            float: left;
+            padding-left: 62px;
+            padding-top: 88px;
+        }
+        .app-wrapper .csdn-qr{
+            margin:47px 0 0;
+            padding: 0;
+        }
+        .app-wrapper li{
+            list-style: none;
+            display: inline-block;
+            margin-right: 30px;
+        }
+        .app-wrapper .csdn-qr li span{
+            display: inline-block;
+            box-shadow: 0 1px 2px 0 rgba(80,101,152,0.30);
+            border-radius: 4px;
+            background: #fff;
+            padding: 11px;
+            width: 130px;
+            height: 130px;
+            box-sizing: border-box;
+        }
+        .app-wrapper .csdn-qr li img{
+            width: 100%;
+        }
+        .app-wrapper p{
+            font-family: 'PingFang SC','Microsoft YaHei',SimHei,Arial,SimSun;
+            font-size: 16px;
+            color: #3D3D3D;
+            margin-top: 11px;
+            text-align: center;
+        }
+        </style>
+</head>
+<body>
+    <div class="app-container" >
+        <dl class="app-wrapper">
+            <dt><img src="img/iPhone.png" alt=""></dt>
+            <dd>
+                <h2>技术连接你我</h2>
+                <h4>尽在CSDN APP</h4>
+                <ul class="csdn-qr">
+                    <li>
+                        <span><img src="img/csdnqr@2x.png" alt="CSDN"></span>
+                        <p>CSDN</p>
+                    </li>
+                    <li>
+                        <span><img src="img/EDUAPPQR@2x.png" alt="CSDN学院"></span>
+                        <p>CSDN学院</p>
+                    </li>
+                </ul>
+            </dd>
+        </dl>
+    </div>
+    <div id="csdn_pub_footer" class="margin_foot_top">
+    </div>
+</body>
+<script src="//csdnimg.cn/public/common/libs/jquery/jquery-1.9.1.min.js"></script>
+<script id="toolbar-tpl-scriptId" prod="download" skin="black" src="//csdnimg.cn/public/common/toolbar/js/content_toolbar.js" type="text/javascript" domain="http://blog.csdn.net"></script>
+<script src="//csdnimg.cn/pubfooter/js/publib_footer-1.0.2.js"></script>
+</html>
\ No newline at end of file

src/contact.html

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <script>location.href = "./index.html#contact"; </script>
+</head>
+<body>
+
+</body>
+</html>

src/css/edu-recommend-1.0.0.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: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+  vertical-align: baseline;
+  font-family: 'Microsoft YaHei','SF Pro Display',Roboto,Noto,Arial,'PingFang SC',sans-serif;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section, main {
+	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;
+}
+.edu-ad-list .recommend-item-box{
+  padding: 0!important;
+  background: #FFFFFF;
+}
+.edu-ad-list .recommend-item-box h4{
+  margin-bottom: 6px;
+  font-size: 18px;
+  line-height: 24px;
+  color: #3d3d3d;
+  display: inline-block;
+}
+.edu-ad-list .type_blog .content .desc{
+  display: inline-block;
+  width: 76%;
+  overflow: hidden;
+  vertical-align: bottom;
+  text-overflow: ellipsis;
+  white-space: nowrap !important;
+}
+.edu-ad-list * {
+  word-wrap: break-word;
+}
+.edu-ad-list .recommend-item-box p.content a{
+  font-size: 14px;
+  color: #999;
+  text-decoration: none;
+}
+.edu-ad-list .type_blog .content .blog_title_box {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  width: 23%;
+  text-align: right;
+  float: right;
+  color: #999;
+  font-size: 14px;
+}
+.edu-ad-list .type-show-edu {
+  color:#F7737A;
+}
+.edu-ad-list .type-show-after:after {
+  content: ' ';
+  display: inline-block;
+  height: 12px;
+  width: 1px;
+  background-color: #e0e0e0;
+  margin-left: 8px;
+  margin-right: 5px;
+  vertical-align: middle;
+}
+.edu-ad-list .type_blog .content .blog_title_box .blog_title {
+  vertical-align: bottom;
+  padding-left: 4px;
+}
\ No newline at end of file

src/css/edu-recommend-1.0.1.css

+.edu-ad-list .recommend-item-box{
+  padding: 0!important;
+  background: #FFFFFF;
+}
+.edu-ad-list .recommend-item-box h4{
+  margin-bottom: 6px;
+  font-size: 18px;
+  line-height: 24px;
+  color: #3d3d3d;
+  display: inline-block;
+}
+.edu-ad-list .type_blog .content .desc{
+  display: inline-block;
+  width: 76%;
+  overflow: hidden;
+  vertical-align: bottom;
+  text-overflow: ellipsis;
+  white-space: nowrap !important;
+}
+.edu-ad-list * {
+  word-wrap: break-word;
+  font-family: 'Microsoft YaHei','SF Pro Display',Roboto,Noto,Arial,'PingFang SC',sans-serif;
+}
+.edu-ad-list .recommend-item-box p.content a{
+  font-size: 14px;
+  color: #999;
+  text-decoration: none;
+}
+.edu-ad-list .type_blog .content .blog_title_box {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  width: 23%;
+  text-align: right;
+  float: right;
+  color: #999;
+  font-size: 14px;
+}
+.edu-ad-list .type-show-edu {
+  color:#F7737A;
+}
+.edu-ad-list .type-show-after:after {
+  content: ' ';
+  display: inline-block;
+  height: 12px;
+  width: 1px;
+  background-color: #e0e0e0;
+  margin-left: 8px;
+  margin-right: 5px;
+  vertical-align: middle;
+}
+.edu-ad-list .type_blog .content .blog_title_box .blog_title {
+  vertical-align: bottom;
+  padding-left: 4px;
+}
\ No newline at end of file

src/css/edu-recommend-ad.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: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+  vertical-align: baseline;
+  font-family: 'Microsoft YaHei','SF Pro Display',Roboto,Noto,Arial,'PingFang SC',sans-serif;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section, main {
+	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;
+}
+.edu-ad-list .recommend-item-box{
+  padding: 17px 24px;
+  background: #FFFFFF;
+  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.05);
+}
+.edu-ad-list .recommend-item-box h4{
+  margin-bottom: 6px;
+  font-size: 18px;
+  line-height: 24px;
+  color: #3d3d3d;
+  display: inline-block;
+}
+.edu-ad-list .type_blog .content .desc{
+  display: inline-block;
+  width: 76%;
+  overflow: hidden;
+  vertical-align: bottom;
+  text-overflow: ellipsis;
+  white-space: nowrap !important;
+}
+.edu-ad-list * {
+  word-wrap: break-word;
+}
+.edu-ad-list .recommend-item-box p.content a{
+  font-size: 14px;
+  color: #999;
+  text-decoration: none;
+}
+.edu-ad-list .type_blog .content .blog_title_box {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  width: 23%;
+  text-align: right;
+  float: right;
+  color: #999;
+  font-size: 14px;
+}
+.edu-ad-list .type-show-edu {
+  color:#F7737A;
+}
+.edu-ad-list .type-show-after:after {
+  content: ' ';
+  display: inline-block;
+  height: 12px;
+  width: 1px;
+  background-color: #e0e0e0;
+  margin-left: 8px;
+  margin-right: 5px;
+  vertical-align: middle;
+}
+.edu-ad-list .type_blog .content .blog_title_box a .blog_title {
+  vertical-align: bottom;
+  color: #3399ea;
+}
\ No newline at end of file

src/css/reset.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: 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, main {
+	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;
+}
\ No newline at end of file

src/css/style.css

+/* -------------------------------- 
+
+Primary style
+
+-------------------------------- */
+*, *:after, *:before {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+body {
+  font-size: 100%;
+  font-family: "Roboto", sans-serif;
+  color: #4d4d4d;
+  background-color: white;
+}
+
+body, html {
+  /* important */
+  height: 100%;
+}
+
+a {
+  color: #4d4d4d;
+  text-decoration: none;
+}
+
+
+/* -------------------------------- 
+
+Modules - reusable parts of our design
+
+-------------------------------- */
+.cd-container {
+  /* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */
+  width:90%;
+  max-width: 900px;
+  /* margin: 0 auto; */
+  margin: 0 auto;
+  font-size: 15px;
+}
+.cd-container::after {
+  /* clearfix */
+  content: '';
+  display: table;
+  clear: both;
+}
+
+.cd-container h2,.cd-container h3{
+  max-height: 50px;
+  font-size: 1.5em;
+  border-bottom: 1px #ccc solid;
+  display: inline-block;
+  width: 100%;
+  margin: 1em 0 0 0;
+}
+.cd-container h3{
+  border:none;
+  font-size: 1.2em;
+}
+.cd-container ul{
+  margin: 1em auto 0;
+}
+
+/* 企业数字 */
+.csdn-digitalinfo{
+  float: left;
+  margin: 24px 0;
+  width: 50%;
+  text-align: center;
+  padding: 0 24px;
+  min-height: 80px;
+}
+.csdn-digitalinfo .title{
+  font-size: 18px;
+  line-height: 24px;
+}
+.csdn-digitalinfo .content{
+  font-size: 14px;
+  line-height: 22px;
+  min-height: 70px;
+}
+
+/* 新媒体矩阵 */
+.newmedia{
+  float: left;
+  width:95px;
+  margin: 0 5px 0 0;
+  text-align: center;
+  height: 142px;
+}
+.newmedia .content{
+  line-height:20px;
+}
+
+.newmedia .QR{
+  background: #fff;
+}
+.newmedia img{
+  width: 95px;
+  height: 95px;
+}
+
+@media only screen and (min-width: 768px) {
+  .csdn-digitalinfo{
+    width: 20%;
+    padding: 0 8px;
+    min-height: 45px;
+  }
+  .csdn-digitalinfo .title{
+    font-size: 24px;
+    line-height: 30px;
+  }
+  .csdn-digitalinfo .content{
+    font-size: 14px;
+    line-height: 24px;
+  }
+}
+
+/* .cd-container a{
+  font-weight: 400;
+} */
+.cd-container a:hover{
+  color: #FC5531;
+}
+
+h1, h2, h3 {
+  font-weight: 400 !important;
+}
+/* -------------------------------- 
+
+Main components 
+
+-------------------------------- */
+.cd-header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 50px;
+  background: rgba(255, 255, 255, 0.95);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+  z-index: 2;
+}
+.cd-header:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+.cd-header #cd-logo {
+  float: left;
+  margin: 16px 0 0 20px;
+}
+.cd-header #cd-logo img {
+  display: block;
+  width: 84px;
+  height: 20px;
+}
+.csdnchart{
+  width: 100%;
+  /* text-align: center; */
+  margin:24px 0 0 0;
+  background-repeat: no-repeat;
+  background-size: 100%;
+}
+.CSDN-chart01{
+  background-image: url(../img/meeting@2x.png);
+  background-position: center 80%;
+}
+.CSDN-chart01 span{
+  font-size: 12px;
+  text-align: center;
+  width: 100%;
+  margin: 30% 0 0 0;
+  display: inline-block;
+}
+@media only screen and (min-width: 375px) {
+  .CSDN-chart01 span{
+    margin: 24% 0 0 0;
+  }
+  .medias .newmedia{
+    width: 45% !important;
+    height:192px;
+  }
+}
+
+@media only screen and (min-width: 768px) {
+  .cd-header {
+    height: 60px;
+  }
+  .cd-header #cd-logo {
+    margin: 20px 0 0 0px;
+  }
+  .CSDN-chart01 span{
+    margin: 18% 0 0 0;
+  }
+}
+
+.cd-main-nav {
+  float: right;
+  width: 44px;
+  margin-right: 18px;
+  height: 100%;
+  background: url("../img/cd-icon-menu.svg") no-repeat center center;
+  background-size: 44px 44px;
+  cursor: pointer;
+}
+.cd-main-nav ul {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  -webkit-transform: translateY(-100%);
+  -moz-transform: translateY(-100%);
+  -ms-transform: translateY(-100%);
+  -o-transform: translateY(-100%);
+  transform: translateY(-100%);
+}
+.cd-main-nav ul.is-visible {
+  -webkit-transform: translateY(50px);
+  -moz-transform: translateY(50px);
+  -ms-transform: translateY(50px);
+  -o-transform: translateY(50px);
+  transform: translateY(50px);
+}
+.cd-main-nav a {
+  display: block;
+  height: 50px;
+  line-height: 50px;
+  padding-left: 5%;
+  background: #2f292a;
+  border-top: 1px solid #453c3d;
+  color: #8e7d7f;
+}
+@media only screen and (min-width: 768px) {
+  .cd-main-nav {
+    width: auto;
+    height: auto;
+    background: none;
+    cursor: auto;
+  }
+  .cd-main-nav ul {
+    position: static;
+    width: auto;
+    -webkit-transform: translateY(0);
+    -moz-transform: translateY(0);
+    -ms-transform: translateY(0);
+    -o-transform: translateY(0);
+    transform: translateY(0);
+    line-height: 60px;
+  }
+  .cd-main-nav ul.is-visible {
+    -webkit-transform: translateY(0);
+    -moz-transform: translateY(0);
+    -ms-transform: translateY(0);
+    -o-transform: translateY(0);
+    transform: translateY(0);
+  }
+  .cd-main-nav li {
+    display: inline-block;
+    /* margin-left: 0.1em; */
+  }
+  .cd-main-nav a {
+    display: inline-block;
+    height: auto;
+    line-height: normal;
+    background: transparent;
+    padding: .3em 0.7em;
+    border-top: none;
+    color: #4d4d4d;
+    text-transform: uppercase;
+    /* font-size: 14px; */
+    font-size: 0.875rem;
+  }
+  .no-touch .cd-main-nav a:hover {
+    color: #1C1D30;
+    font-weight: 500;
+  }
+}
+
+.cd-main-content {
+  /* you need to assign a min-height to the main content so that the children can inherit it*/
+  height: 100%;
+  position: relative;
+  z-index: 1;
+}
+
+/* 这里定义图片上的文字样式 */
+.picinfo {
+  position: absolute;
+  left: 50%;
+  bottom: 40px;
+  right: auto;
+  -webkit-transform: translateX(-50%);
+  -moz-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  -o-transform: translateX(-50%);
+  transform: translateX(-50%);
+  width: 90%;
+  max-width: 900px;
+  font-size: 30px;
+  font-size: 1.875rem;
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  color: white;
+
+}
+/* 图片文字简介 */
+.picinfo span {
+  display: inline-block;
+  line-height: 24px;
+  padding:10px 0 0 0;
+  margin: 10px 0 0 0;
+  font-size: 16px;
+  border-top: 0.5px #ccc solid;
+}
+
+
+.cd-fixed-bg{
+  position: relative;
+  min-height: 100%;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center center;
+  z-index: 1;
+}
+.cd-footer-bg{
+  position: relative;
+  height: 500px;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center center;
+  z-index: 1;
+}
+/* .cd-fixed-bg h1, .cd-fixed-bg h2 {
+  position: absolute;
+  left: 10%;
+  top: 75%;
+  bottom: auto;
+  right: auto;
+  -webkit-transform: translateX(-50%) translateY(-50%);
+  -moz-transform: translateX(-50%) translateY(-50%);
+  -ms-transform: translateX(-50%) translateY(-50%);
+  -o-transform: translateX(-50%) translateY(-50%);
+  transform: translateX(-50%) translateY(-50%);
+  width: 90%;
+  max-width: 1170px;
+  text-align: center;
+  font-size: 30px;
+  font-size: 1.875rem;
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  color: white;
+} */
+.cd-fixed-bg.cd-bg-1 {
+  background-image: url("../img/cd-background-1-new.jpg");
+}
+.cd-fixed-bg.cd-bg-2 {
+  background-image: url("../img/cd-background-2.jpg");
+}
+.cd-fixed-bg.cd-bg-3 {
+  background-image: url("../img/cd-background-3.jpg");
+}
+.cd-fixed-bg.cd-bg-4 {
+  background-image: url("../img/cd-background-4.jpg");
+}
+.cd-fixed-bg.cd-bg-5 {
+  background-image: url("../img/cd-background-5.jpg");
+}
+.cd-fixed-bg.cd-bg-6 {
+  background-image: url("../img/cd-background-6.jpg");
+}
+.cd-footer-bg.cd-bg-7 {
+  background-image: url("../img/cd-background-7.jpg");
+}
+
+@media only screen and (min-width: 768px) {
+  .cd-fixed-bg h1, .cd-fixed-bg h2 {
+    font-size: 36px;
+  }
+  .recruit li{
+    width: 20%!important;
+  }
+  .newmedia{
+    width: 15% !important;
+  }
+  .recruit{
+    justify-content: flex-start!important;
+  }
+}
+@media only screen and (min-width: 1170px) {
+  .cd-fixed-bg {
+    background-attachment: fixed;
+    background-attachment: scroll\9;
+  }
+  .cd-fixed-bg h1, .cd-fixed-bg h2 {
+    font-size: 48px;
+    font-weight: 300;
+  }
+}
+
+.cd-scrolling-bg {
+  position: relative;
+  /* min-height: 100%; */
+  padding: 1em 0;
+  line-height: 1.6;
+  /*box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);*/
+  z-index: 2;
+}
+.cd-scrolling-bg.cd-color-1 {
+  color: #4D4D4D;
+}
+.cd-scrolling-bg.cd-color-2 {
+  background-color: #fff;
+  color: #4d4d4d;
+}
+.cd-scrolling-bg.cd-color-3 {
+  color: #3d3536;
+}
+@media only screen and (min-width: 768px) {
+  .cd-scrolling-bg {
+    padding: 1em 0;
+    font-size: 20px;
+    font-size: 1.25rem;
+    line-height: 2;
+    font-weight: 300;
+  }
+}
+.recruit{
+  width: 90%;
+  margin-left: 20px;
+}
+.recruit-index{width: auto;}
+.recruit li{
+  text-align: center;
+  margin: 25px 0 0;
+  height: 185px;
+  float: left;
+  width: 50%;
+}
+.recruit a{
+  display: block;
+  width: 120px;
+  height: 120px;
+  border-radius: 100%;
+  background: #0E5791;
+  font-family: Arial-Black;
+  font-size: 26px;
+  color: #FFFFFF;
+  text-align: center;
+  line-height: 120px;
+  margin: 0 auto;
+}
+/*.recruit a:hover{
+  color: #fff;
+  text-decoration: underline;
+}
+.recruit a[attr^="bianji"]{
+  background:#B966FF;
+}
+.recruit a[attr^="suanfa"]{
+  background:#ED8400;
+}
+.recruit a[attr^="yunying"]{
+  background:#4283CE ;
+}
+.recruit a[attr^="shichang"]{
+  background:#81C9D0 ;
+}
+.recruit a[attr^="jizhe"]{
+  background:#DF6DBC ;
+}
+.recruit a[attr^="qudao"]{
+  background:#60BD8F ;
+}
+.recruit a[attr^="xiangmu"]{
+  background:#D9A666  ;
+}
+.recruit a[attr^="guwen"]{
+  background:#B2BF64 ;
+}
+.recruit a[attr^="qianduan"]{
+  background:#D1C080  ;
+}
+.recruit a[attr^="jiaohu"]{
+  background:#4D862C  ;
+}*/
+.job-n{
+  max-width: 120px;
+  margin: 5px auto 0;
+  text-align: center;
+}
+.newmedias{
+  width: 90%;
+  max-width: 800px;
+  overflow:hidden;
+  margin: 2em auto 0;
+}
+.programmer p{
+  margin-top: 1em;
+}
+.online-application{
+  width:158px;
+  height:24px;
+  border-radius:2px;
+  border:1px solid rgba(224,224,224,1);
+  font-size:14px;
+  color:rgba(51,153,234,1);
+  line-height:20px;
+  padding: 2px 8px;
+  margin-left: 10px;
+}
+.chart-1{
+  display: block;
+  width: 100%;
+  max-width: 800px;
+  margin: 2em auto 0;
+}
+/*job*/
+.job-title{
+  width: 100%;
+  background:url(../img/php.png) no-repeat center center;
+  height: 240px;
+  margin-top: 60px;
+  background-size: cover;
+}
+.job-title h2{
+  font-size: 24px;
+  color: #FFFFFF;
+  line-height: 24px;
+  text-align: center;
+  padding-top: 70px;
+}
+.job-recruit{
+  display: flex;
+   width: 100%;
+  margin-left: 0;
+  flex-wrap: wrap;
+}
+.job-recruit-hot{width: 100%;height: 406px;overflow: hidden;
+  margin-left: 0;}
+.job-recruit p{
+  margin-top: 10px;
+}
+.job-recruit a,.job-recruit-hot a{
+  margin: 0;
+  display: inline-block;
+  background: none;
+  line-height: inherit;
+  width: auto;
+  height: auto;
+  text-align: left;
+  font-size: 24px;
+  color: #2D2D2D;
+}
+.job-recruit-hot a{font-size: 16px;color: #3D3D3D;line-height: 25px}
+.job-recruit a:hover{color: #2D2D2D;text-decoration: none}
+
+.job-contain h2{
+  font-size: 18px;
+  color: #2E2E2E;
+  line-height: 25px;
+  font-weight: 500;
+  margin: 0 0 16px;
+}
+.job-contain .job_name_area{margin: 0;overflow: hidden}
+.job-contain .job_name_area img{vertical-align: middle;margin-right: 16px;float: left;width: 48px;height: 48px;border-radius: 4px;border: none; }
+.job-contain h2.job-name-dec {float: left;width: calc(100% - 72px);margin-top: 3px; font-size: 24px;color: #2D2D2D;margin-bottom: 6px;}
+.job-contain .job_name_area span{display: inline-block;margin-top: 3px;margin-bottom: 30px; color: #6B6B6B;font-size: 12px}
+.job-contain h2.gwzz{background: url("../img/icon_gw-new.png") no-repeat left center;padding-left: 27px;background-size: 20px}
+.job-contain h2.rzyq{background: url("../img/icon_rz-new.png") no-repeat left center;padding-left: 27px;background-size: 20px}
+.job-contain h2.jfx{background: url("../img/icon_jf-new.png") no-repeat left center;padding-left: 27px;background-size: 20px}
+.job-contain h2.tgzl{background: url("../img/icon_tg.png") no-repeat left center;padding-left: 27px;background-size: 20px}
+.job-contain h2.lxfs{background: url("../img/icon_lx-new.png") no-repeat left center;padding-left: 27px;background-size: 20px}
+.jobs_other h2.qtzw{font-size: 18px;color: #2D2D2D;line-height: 25px;font-weight: 500;margin-bottom: 20px}
+
+.job-contain li,.job-contain p{color: #909090;line-height: 30px;font-size: 14px;font-weight: 400;}
+
+.job-recruit li,.job-recruit-hot li{
+  text-align: left;
+  width: 100%!important;
+  float: none;
+  height: auto;
+  margin: 0;
+
+}
+.job-recruit-hot li{padding-bottom: 16px;margin-bottom: 16px;border-bottom: 1px solid #E0E0E0;}
+.job-recruit  p.jobs_area_dec,.job-recruit-hot  p.jobs_area_dec,.recruit-index p.jobs_area_dec{margin: 3px 0 0;color: #6B6B6B;font-size: 12px}
+.job-recruit  p.job-d{margin: 18px 0 0;color: #4D4D4D;font-size: 14px;line-height: 25px;display: none}
+.job-recruit li,.recruit-index li{padding-bottom: 12px;margin-bottom: 12px;border-bottom: 1px solid #E0E0E0}
+.recruit-index li{overflow: hidden}
+.job-recruit li img,.recruit-index li img{margin-right: 12px;float: left;width: 48px;height: 48px;}
+.jobs_right{float: left;width: calc(100% - 60px);height: auto}
+.job-recruit{height: 515px;overflow: hidden;}
+.btn_box{text-align: center;margin-top: 32px;}
+.btn_box a{display: block; font-size: 24px;color: #1C1D30;line-height: 33px;}
+.send-resume{
+  display: block;
+  width: 120px;
+  height: 40px;
+  background: #FC5531;
+  border-radius: 20px;
+  font-size: 14px;
+  color: #FFFFFF;
+  text-align: center;
+  line-height: 40px;
+  margin: 20px auto 0;
+}
+.container-nav,.container,.footer-logo{
+  width:100%;
+  max-width: 900px;
+  margin: 0 auto;
+  overflow: hidden;
+  height: 100%;
+}
+.jobs_dec,.jobs_other {background-color: #fff}
+.jobs_other{margin-top: 8px;}
+.job-describe .container{max-width: 1180px;padding: 15px 20px}
+.container-nav{
+  max-width: 1200px;
+}
+.footer-img{
+  display:block;
+  width: 192px;
+  margin:23px auto 0;
+}
+.job-contain ol{
+  list-style: decimal inside;
+  padding-bottom: 16px;
+  margin-bottom: 16px;
+  border-bottom: 1px solid #E0E0E0;
+}
+.medias .newmedia{
+  width: 162px;
+  height:192px;
+}
+.medias .newmedia img{
+  width:100%;
+  max-width: 162px;
+  height:100%;
+  max-height: 155px;
+}
+.persion_article{
+  width: 300px;
+  margin: 0 auto 0;
+}
+.hot_jobs{display: none}
+.hot_jobs h3{margin-bottom: 16px; padding-bottom: 32px;border-bottom: 1px solid #E0E0E0;color:#2E2E2E; ;font-size: 18px;}
+
+@media only screen and (min-width: 768px) {
+  .medias .newmedia{
+    width: 22%!important;
+  }
+  .persion_article{
+    float: right;
+    margin-top: 7px;
+    margin-right: 20px;
+  }
+  .footer-img{
+    display: inline;
+    margin:213px 0 0 85px;
+  }
+  .job-title h2{font-size: 36px;padding-top: 50px;line-height: 50px}
+  .job-contain .job_name_area span{margin-bottom: 44px;}
+  .job-describe .jobs_dec,.job-describe .jobs_other{padding: 40px;background-color: #fff;margin-top: -60px;border-radius:4px;}
+  .job-describe .jobs_other{margin-top: 16px;}
+  .job-contain{float: left;width: calc(100% - 308px)}
+  .hot_jobs{display: block; float: left;width: 250px;margin-left: 58px}
+  .job-contain ol{ margin-left: 72px; margin-bottom: 32px;padding-bottom: 32px;}
+  .job-contain li{line-height: 25px;font-size: 16px;}
+  .job-contain p{margin-left: 72px;line-height: 25px;font-size: 16px;}
+/*  .job-contain p span{margin-right: 80px}
+*/  .job-contain h2.gwzz,.job-contain h2.rzyq,.job-contain h2.jfx,.job-contain h2.tgzl,.job-contain h2.lxfs,.job-contain h2.qtzw{margin-left: 45px;}
+  .send-resume{margin-left: 72px}
+  .jobs_other h2.qtzw{margin-bottom: 40px}
+  .send-resume{font-size: 18px;margin: 32px 0 0px 72px}
+  .job-recruit p.job-d{display: block}
+  .job-recruit li img,.job-contain .job_name_area img{width: 56px;height: 56px;margin-right: 16px;}
+  .jobs_right{width: calc(100% - 72px);padding-bottom: 32px; margin-bottom: 32px;  height: auto;
+    border-bottom: 1px solid #E0E0E0;}
+  .job-recruit li,.recruit-index li{padding-bottom: 0;margin-bottom: 0;border-bottom: none;}
+  .recruit-index{overflow: hidden}
+  .recruit-index li{float: left;width: 33.33%}
+  .recruit-index li:nth-last-child(1) .jobs_right,.recruit-index li:nth-last-child(2) .jobs_right,.recruit-index li:nth-last-child(3) .jobs_right,.recruit-index li:nth-last-child(4) .jobs_right{border-bottom: none;}
+  .recruit-index .jobs_right{padding-bottom: 16px;margin-bottom: 16px;}
+}
+
+@media only screen and (min-width: 992px) {
+  .recruit-index li{width: 25%}
+
+}
+.layer-img{
+  float: right;
+  margin-top: 15px;
+}
+.layer-p{
+  font-size: 1.5em;
+}
+.job-recruit .job-n,.job-recruit-hot .job-n,.recruit-index .job-n{
+  margin:3px 0 0;
+  text-align: left;
+  max-width:inherit;
+  line-height: 33px;
+}
+.recruit-index .job-n{line-height: 22px;margin-top: 0}
+.job-recruit .job-n{font-size: 18px;font-weight: 600}
+
+
+.cd-fixed-bg h1, .cd-fixed-bg h2 {
+  padding-top: 168px;
+}
+
+.csdn-pub-footer {
+  padding: 24px 0 0;
+}
\ No newline at end of file

src/img/cd-icon-menu.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44"><path d="M18 13h20v3H18zm0 7h20v3H18zm0 7h20v3H18z" fill="#3D3536"/></svg>
\ No newline at end of file

src/img/csdn-logo-new.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="200px" height="50px" viewBox="0 0 200 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>logo200x50</title>
+    <defs>
+        <polygon id="path-1" points="0.630611424 -0.00393316719 40.5131953 -0.00393316719 40.5131953 44.6752728 0.630611424 44.6752728"></polygon>
+    </defs>
+    <g id="logo200x50" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组" transform="translate(16.000000, 2.000000)">
+            <path d="M35.9592202,33.9533775 C35.5155589,33.531742 34.9082779,33.2988985 34.3214494,33.3114846 C33.7188882,33.3209242 33.1729645,33.5726469 32.7859409,34.0147349 C29.3137409,37.9872337 23.2645298,38.4167356 20.8243928,38.4167356 C16.2965308,38.4167356 12.8321971,37.2682508 10.5273612,35.0074663 C8.33737367,32.859957 7.18888885,29.6945441 7.11337204,25.6024769 C6.93716615,16.1156777 12.3098725,6.30478543 21.60316,6.30478543 C26.0413458,6.30478543 29.4883735,9.45289245 30.7627197,10.805902 C31.206381,11.2763088 31.8183818,11.5469107 32.4476885,11.5500572 C33.0785685,11.5657899 33.6622505,11.2857484 34.0571405,10.8184881 L34.4189919,10.3905595 C35.1615739,9.51739639 35.4951065,8.38779077 35.3613788,7.21256042 C35.2245045,6.02631719 34.6298097,4.94390958 33.6874228,4.16199595 C31.4093324,2.27564896 27.5390959,0.0305971351 22.0326618,0.0305971351 C16.3138367,0.0305971351 10.6642354,2.65952608 6.53283656,7.25031882 C2.19219326,12.0723818 -0.126802117,18.6360512 0.00535230053,25.7330581 C0.110761181,31.4282841 1.97822896,36.214162 5.40952401,39.5793798 C9.0956883,43.1963204 14.4951402,45.1078396 21.0273443,45.1078396 C28.6907272,45.1078396 33.4388466,42.8376155 36.0756419,40.9355359 C37.0966921,40.2008202 37.7055464,39.038176 37.7527444,37.7512437 C37.7967959,36.4580183 37.2681782,35.1915385 36.3006191,34.2758972 L35.9592202,33.9533775 Z" id="Fill-1备份-5" fill="#FC5531"></path>
+            <path d="M64.4823913,17.8566548 C62.7439314,17.2619599 61.0180576,16.7742472 59.4951353,16.3447453 C53.055754,14.5244755 52.3178918,12.8505196 52.3918354,11.5966259 C52.542869,9.06366622 55.9930432,5.63709097 61.8393029,6.06659283 C66.0776839,6.37809967 68.9347365,9.62060269 70.2610005,11.5242556 C70.6181321,12.0387139 71.1703488,12.3942722 71.7776298,12.5012543 C72.3833375,12.6098098 73.0032047,12.4603494 73.4736115,12.0937782 L73.8921005,11.768112 C74.8628061,11.0082241 75.4307555,9.85344619 75.4543545,8.59325943 C75.4763802,7.32835286 74.944616,6.08704529 73.9959361,5.18556338 C71.7618971,3.0663729 67.9577378,0.451603351 62.5299671,0.0519935646 C58.2333753,-0.265806344 54.0012874,0.881105207 50.6124705,3.27719066 C47.4250318,5.53168209 45.4143968,8.6703495 45.2350443,11.6752892 C44.7898098,19.0869495 52.3289047,21.2171528 57.8337655,22.7731138 C59.3315155,23.1963226 60.8324121,23.6620095 62.4969285,24.1843342 C70.4639519,26.6811087 70.6920756,29.1951891 70.1241263,33.0371069 C69.5483106,36.9246493 65.2580119,38.8660606 58.3529435,38.3547489 C51.1646872,37.824558 48.2085187,34.1824451 47.0867795,32.0569616 C46.7941518,31.5031716 46.2828401,31.0815361 45.6865719,30.8990372 C45.085584,30.7196847 44.4436911,30.7952016 43.9276596,31.1067084 L43.2983528,31.4858657 C42.2521304,32.118319 41.5520266,33.1865672 41.3789672,34.4137154 C41.2043346,35.6440101 41.5724791,36.9152097 42.3890046,37.9063678 C44.7725039,40.8027521 49.4262273,44.3882274 58.0414367,45.0222539 C59.0892324,45.0977707 60.0803906,45.1371024 61.0227774,45.1371024 C73.1369324,45.1355291 76.7758986,39.0265338 77.6364756,33.6789997 C78.2799418,29.6860484 77.485442,26.4954632 75.2026318,23.9231718 C73.1164799,21.5695646 69.7087838,19.6407394 64.4823913,17.8566548" id="Fill-3备份-2" fill="#3E3C39"></path>
+            <path d="M115.575177,21.1630324 C115.691599,27.5615088 113.894928,32.2262451 110.232363,35.0266601 C104.392396,39.4900183 95.6324461,38.9566808 91.5293661,38.3903047 C91.0652524,38.3258008 90.7238534,37.8962989 90.7663316,37.4353317 L93.5384279,7.75250561 C93.5698932,7.4111067 93.8106031,7.13106519 94.1409891,7.05082858 C101.123147,5.36428649 106.555638,5.87559823 110.290574,8.57217765 C113.496891,10.8895998 115.472915,15.595241 115.575177,21.1630324 M114.857767,3.86181663 L114.857767,3.86181663 C110.677597,0.847437296 105.127112,-0.400163335 98.3699305,0.147333537 C93.3968339,0.551663124 89.4683865,1.84331523 89.0420312,1.98805578 L89.0011262,2.00064192 C87.8321889,2.3955319 87.0345426,3.4118623 86.9228407,4.6515966 L83.6378594,40.9861951 C83.5403169,42.0811888 84.2797523,43.1321311 85.3621599,43.4294785 L86.3312923,43.6937874 C86.3737705,43.7063735 90.8811801,44.8863236 96.8926329,45.0877018 C97.3960783,45.1050077 97.8948039,45.1144473 98.3872364,45.1144473 C105.175883,45.1144473 110.716929,43.5097151 114.875073,40.3380091 C120.214741,36.2648212 122.84367,29.8553319 122.687917,21.2967601 C122.541603,13.3674951 119.907954,7.50235617 114.857767,3.86181663" id="Fill-5备份" fill="#3E3C39"></path>
+            <g id="编组备份-2" transform="translate(127.167165, 0.232762)">
+                <mask id="mask-2" fill="white">
+                    <use xlink:href="#path-1"></use>
+                </mask>
+                <g id="Clip-8"></g>
+                <path d="M37.2667591,4.81183674 C34.4159995,1.61653171 30.0737829,-0.00393316719 24.3581044,-0.00393316719 C19.2324009,-0.00393316719 14.5739577,1.91702569 10.7572123,5.57959097 L10.8830736,4.22186166 C10.9286983,3.74044199 10.7603588,3.25430253 10.4236797,2.88458481 C10.0854273,2.51644037 9.61344724,2.30719587 9.1257345,2.30719587 L7.74755272,2.30719587 C5.5780177,2.30719587 3.80809247,3.92766075 3.63031331,6.07831657 L0.637959718,42.1674854 C0.586041911,42.7999387 0.811019074,43.438685 1.2562536,43.9185314 C1.70306139,44.3999511 2.32292854,44.6752728 2.96167489,44.6752728 L5.66297411,44.6752728 C6.48893922,44.6752728 7.16701725,44.0601254 7.24253406,43.2451732 L9.24687605,21.755921 C9.34127207,20.75375 9.53478389,19.7861908 9.824265,18.8784159 C11.3408943,14.0909648 15.1922516,6.06101063 23.9223095,6.06101063 C27.8916618,6.06101063 30.805352,7.72552699 32.0938576,9.14933351 C33.8401838,11.0813052 33.6010473,13.8062035 33.5979007,13.8423886 L31.0979797,42.7700466 C31.0570747,43.2514663 31.2254143,43.7344592 31.5636667,44.1010304 C31.901919,44.4660283 32.3723258,44.6752728 32.8553188,44.6752728 L34.9760825,44.6752728 C36.6028405,44.6752728 37.9369708,43.4607108 38.0785648,41.8512588 L40.4667839,14.7202715 C40.4935294,14.4905745 41.0740649,9.08010977 37.2667591,4.81183674" id="Fill-7" fill="#3E3C39" mask="url(#mask-2)"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

src/img/csdn-logo.svg

+<svg class="icon" width="200" height="50" viewBox="0 0 4096 1024" xmlns="http://www.w3.org/2000/svg"><path d="M1081.536 723.584c74.656 27.296 230.368 54.432 356.288 54.432 135.68 0 211.2-37.568 217.248-95.872 5.504-53.184-50.048-60.384-203.264-96.672-211.712-51.904-346.784-132.256-333.536-260.672 15.392-149.088 214.912-261.76 521.056-261.76 149.248 0 293.952 10.528 368.928 35.104l-25.728 188c-48.672-16.928-234.976-40.448-360.992-40.448-127.776 0-193.92 40.192-198.496 84.256-5.76 55.776 60.64 58.368 226.624 102.56 224.768 57.024 323.04 137.312 310.176 261.792-15.072 146.432-194.592 270.944-553.056 270.944-149.216 0-277.824-27.232-348.672-54.464l23.392-187.168zm2106.4-613.792c816.16-153.888 886.592 122.624 861.376 367.296l-47.52 452.64H3742.72l43.36-412.832c9.376-90.912 67.744-268.736-214.048-262.08-97.536 2.368-145.888 15.744-145.888 15.744s-8.48 109.856-18.752 191.04l-49.12 468.128h-254.08l50.432-461.376 33.312-358.56zM2157.088 88.384c58.24-6.336 147.712-12.768 270.848-12.768 205.568 0 371.776 35.776 474.688 111.008 92.416 70.144 153.92 183.712 136.896 348.256-15.712 153.12-95.328 260.32-211.232 326.624-106.048 62.528-239.68 89.248-440.64 89.248-118.496 0-231.52-6.4-317.472-19.136l86.944-843.232zM2326.944 764c19.808 3.84 45.856 7.648 97.216 7.648 205.632 0 350.624-101.056 365.184-243.136 21.152-205.376-107.456-277.184-324.128-275.936-28.064 0-67.072 0-87.712 3.776l-50.592 507.616z" fill="#262626"/><path d="M934.176 936.8c-48.736 16.896-149.696 28.416-290.752 28.416-405.632 0-624.576-190.4-598.688-442.112C75.712 223.2 400.064 54.464 755.2 54.464c137.536 0 218.528 11.072 294.4 29.632l-24.352 202.048c-50.464-16.992-168.736-32.608-264.48-32.608-208.96 0-386.432 62.24-406.784 259.136-18.144 176.064 106.432 260.224 341.504 260.224 81.824 0 202.464-11.712 258.24-28.64L934.176 936.8z" fill="#CA0C16"/></svg>
\ No newline at end of file