first commit

历届学生/韩想/项目开发/练习项目/仿简书/zhaojunkai/css/clear.css

@@ -0,0 +1,15 @@
+body, p,ul,li,h1,h2,h3,h4,h5,h6,input{
+    margin: 0;
+    padding: 0;
+}
+
+input {
+    outline: none;
+}
+li {
+    list-style: none;
+}
+
+a {
+    text-decoration: none;
+}

历届学生/韩想/项目开发/练习项目/仿简书/zhaojunkai/css/index.css

@@ -0,0 +1,400 @@
+body{
+    background: #f9f9f9;
+}
+.header{
+    background: #fff;
+    width: 100%;
+    height: 56px;
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    z-index: 999999;
+    box-shadow: 0 2px 10px rgba(0, 0,0, .05);
+    
+}
+.center{
+    width: 1440px;
+    margin: 0 auto;
+}
+.center_logo {
+    padding-top: 12px;
+}
+.center_logo img {
+    width: 60px;
+    height: 30px;
+}
+.center_zuo{
+    margin-left: 204px;
+}
+.center_zuo ul li{
+    height: 56px;
+    line-height: 56px;
+    padding: 0 20px;
+    float: left;
+}
+.center_zuo ul li a{
+    font-size: 17px;
+    color: #333;
+}
+.center_zuo ul li input{
+    width: 160px;
+    height: 36px;
+    border: none;
+    padding: 8px 36px 8px 16px;
+    box-sizing: border-box;
+    border-radius: 18px;
+    background: #f2f2f2 url("../img/sosuo.png");
+    background-repeat: no-repeat;
+    background-size: 21px 21px;
+    background-position: 124px center;
+}
+.center_you ul li{
+    float: left;
+    height: 56px;
+    line-height: 56px;
+}
+.center_you ul li:nth-child(1) img{
+    padding-top: 18px;
+    width: 29px;
+    height: 19px;
+    margin-right: 12px;  
+}
+.center_you ul li:nth-child(2) img{
+    padding-top: 18px;
+    width: 55px;
+    height: 21px;
+    margin-right: 38px;
+}
+.center_you ul li:nth-child(3) a{
+    padding: 0 16px;
+    color: #969696;
+}
+.center_you ul li:nth-child(4) a{
+    width: 82px;
+    height: 40px;
+    border-radius: 50px;
+    background-color: #fff;
+    border: 1px solid #ec7259;
+    font-size: 16px;
+    color: #ec7259;
+    margin-right: 8px;
+    text-align: center;
+    line-height: 40px;
+    display: block;
+    box-sizing: border-box;
+    margin-top: 7px;
+}
+.center_you ul li:nth-child(5) img{
+    width: 16px;
+    height: 16px;
+    vertical-align: middle;
+}
+.center_you ul li:nth-child(5) a{
+    width: 108px;
+    height: 40px;
+    border-radius: 50px;
+    background-color: #ec7259;
+    font-size: 16px;
+    color: #fff;
+    margin-right: 8px;
+    text-align: center;
+    line-height: 40px;
+    display: block;
+    margin-top: 7px;
+}
+.clear{
+    clear: both;
+}
+.content{
+    width: 1000px;
+    margin: 0 auto;
+    margin-top: 66px;  
+}
+.content_left{
+    width: 730px;
+    box-sizing: border-box;
+    background-color: #ffffff;
+    padding: 24px;
+    display: inline-block;
+    float: left;
+}
+.content_left h1{
+    margin-bottom: 15px;
+    display: block;
+}
+.jieshao{
+    margin-bottom: 32px;
+    height: 48px;
+}
+.jieshao_touxiang{
+    width: 46px;
+    height: 46px;
+    float: left;
+}
+.jieshao_touxiang img{
+    width: 46px;
+    height: 46px;
+    border-radius: 46px;
+    
+}
+.jieshao_xiangqing{
+    height: 47.2px;
+    margin-left: 8px;
+    float: left;
+}
+.jieshao_xiangqing_guanzhu{
+    height: 22.8px;
+    margin-right: 6px;
+}
+.jieshao_xiangqing_guanzhu ul li{
+    float: left;
+}
+.jieshao_xiangqing_guanzhu ul li:nth-child(1){
+    font-size: 16px;
+    font-weight: 500px;
+    margin-right: 8px;
+    
+}
+.jieshao_xiangqing_guanzhu ul li:nth-child(1) a{
+    color: inherit;
+}
+.jieshao_xiangqing_guanzhu ul li:nth-child(2){
+    margin-right: 8px;
+}
+.jieshao_xiangqing_guanzhu ul li:nth-child(2) img{
+    width: 16px;
+    height: 16px;
+    padding-top: 3px;
+    
+}
+.jieshao_xiangqing_guanzhu ul li:nth-child(3) {
+    width: 44px;
+    height: 22.8px;
+    border-radius: 14px;
+    background-color: #fff;
+    border: 1px solid #ec7259;
+    font-size: 15px;
+    color: #ec7259;
+    margin-right: 8px;
+    text-align: center;
+    line-height: 22.8px;
+    display: block;
+    box-sizing: border-box;
+}
+.jieshao_xiangqing_guanzhu ul li:nth-child(3) a{
+    color: #ec7259;
+}
+.jieshao_xiangqing_yuedu{
+    height: 19px;
+    float: left;
+}
+.jieshao_xiangqing_yuedu ul li {
+    float: left;
+}
+.jieshao_xiangqing_yuedu ul li:nth-child(1){
+    margin-right: 6px;
+}
+.jieshao_xiangqing_yuedu ul li:nth-child(1) img{
+    width: 13px;
+    height: 13px;
+}
+.jieshao_xiangqing_yuedu ul li:nth-child(2){
+    font-size: 13px;
+    color: #ec7259;
+    line-height: 19px;
+    margin-right: 8px;
+}
+.jieshao_xiangqing_yuedu ul li:nth-child(3){
+    font-size: 13px;
+    line-height: 19px;
+    margin-right: 8px;
+    color: #969696;
+}
+.jieshao_xiangqing_yuedu ul li:nth-child(4){
+    font-size: 13px;
+    line-height: 19px;
+    margin-right: 8px;
+    color: #969696;
+}
+.jieshao_xiangqing_yuedu ul li:nth-child(5){
+    font-size: 13px;
+    line-height: 19px;
+    margin-right: 8px;
+    color: #969696;
+}
+.content_left p{
+    margin-bottom: 20px;
+}
+.content_left h4{
+    height: 36px;
+    margin-bottom: 16px;
+}
+.centent_right{
+    width: 260px;
+    margin-left: 10px;
+    float: left;
+    position: fixed;
+    top: 66px;
+    right: 260px;
+}
+.centent_right_top{
+    width: 270px;
+    height: 220px;
+    padding: 16px;
+    margin-bottom: 10px;
+    background-color: #ffffff;
+    box-sizing: border-box;
+}
+.centent_right_top .jieshao_xiangqing{
+    margin-left: 0px;
+}
+.centent_right_top .jieshao_xiangqing_guanzhu ul li:nth-child(1) a{
+    font-size: 14px;
+}
+.centent_right_top .jieshao_xiangqing_guanzhu ul li:nth-child(1){
+    margin-right: 2px;
+}
+.centent_right_top .jieshao_xiangqing_guanzhu ul li:nth-child(3){
+    width: 48px;
+    height: 21.8px;
+    border-radius: 14px;
+    background-color: #fff;
+    border: 1px solid #ec7259;
+    font-size: 15px;
+    color: #ec7259;
+    margin-right: 0px;
+    text-align: center;
+    line-height: 22.8px;
+    display: block;
+    box-sizing: border-box;
+}
+.centent_right_top .jieshao_xiangqing_yuedu ul li:nth-child(1) {
+    font-size: 12px;
+    color: #969696;
+    margin-top: 2px;
+}
+.dp{
+    width: 228px;
+    height: 1px;
+    margin: 16px 0;
+    background-color: #eee;
+}
+.centent_right_top .jieshao{
+    margin-bottom: 0px;
+}
+.liebiao ul li{
+    margin-bottom: 16px;
+}
+.liebiao ul>li>a:nth-child(1){
+    color: inherit;
+    font-size: 14px;
+    margin-bottom: 4px;
+    display: block;
+}
+.liebiao ul>li>a:nth-child(2) {
+    color: #969696;
+    font-size: 12px;
+}
+.lb1{
+    margin-top: 16px;
+}
+.centent_right_dow{
+    width: 270px;
+    padding: 16px;
+    margin-top: 10px;
+    background-color: #ffffff;
+    box-sizing: border-box;
+}
+.centent_right_dow h3{
+    font-size: 16px;
+    font-weight: 500;
+    border-left: 4px solid #ec7259;
+    padding-left: 12px;
+    margin-bottom: 16px;
+}
+.footer{
+    width: 100%;
+    height: 56px;
+    position: fixed;
+    bottom: 0px;
+    left: 0px;
+    background-color: #fff;
+}
+.footer_center{
+    width: 1032px;
+    height: 56px;
+    box-sizing: border-box;
+    padding: 10px 16px;
+    margin: 0 auto;
+}
+.footer_center ul li{
+    float: left;
+}
+.footer_center ul li a{
+    font-size: 14px;
+    color: #969696;
+    line-height: 40px;
+}
+.footer_center ul li input{
+    width: 400px;
+    height: 36px;
+    border: none;
+    padding: 8px 36px 8px 16px;
+    box-sizing: border-box;
+    border-radius: 18px;
+    background: #f2f2f2;
+    margin-right: 16px;
+}
+.footer_center ul li:nth-child(2) img{
+    width: 26px;
+    height: 20px;
+    padding-top: 10px;
+}
+.footer_center ul li:nth-child(4) img{
+    width: 24px;
+    height: 24px;
+    padding-top: 6px;
+}
+.footer_center ul li:nth-child(2){
+    margin-right: 10px;
+}
+.footer_center ul li:nth-child(3){
+    margin-right: 22px;
+}
+.footer_center ul li:nth-child(4){
+    margin-right: 10px;
+}
+.footer_center ul li:nth-child(5){
+    margin-right: 24px;
+}
+.dianzan{
+    width: 60px;
+    height: 200px;
+    position: fixed;
+    top: 212px;
+    left: 198px;
+}
+.zan{
+    width: 50px;
+    height: 50px;
+    border-radius: 25px;
+    background: #ffffff;
+}
+.zan img{
+    width: 30px;
+    height: 30px;
+    padding-left: 10px;
+    padding-top: 9px;
+}
+.zan p{
+    margin-left: 8px;
+    margin-top: 10px;
+}
+
+.zan>p>a{
+    color: #969696;
+    font-size: 14px;
+}
+.shang{
+    margin-top: 50px;
+}

历届学生/韩想/项目开发/练习项目/仿简书/zhaojunkai/css/public.css

@@ -0,0 +1,16 @@
+.left {
+    float: left;
+}
+
+.right {
+    float: right;
+}
+
+.w-1200 {
+   width: 1200px;
+   margin: 0 auto; 
+}
+
+.center {
+    text-align: center;
+}

历届学生/韩想/项目开发/练习项目/仿简书/zhaojunkai/index.html

@@ -0,0 +1,201 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>深度的5年</title>
+    <link rel="stylesheet" href="./css/index.css">
+    <link rel="stylesheet" href="./css/clear.css">
+    <link rel="stylesheet" href="./css/public.css">
+
+</head>
+<body>
+    <div class="header">
+        <div class="center">
+            <div class="center_logo left">
+                <img src="./img/logo.png" alt="">
+            </div>
+            <div class="center_zuo left">
+                <ul>
+                    <li><a href="">首页</a></li>
+                    <li><a href="">下载APP</a></li>
+                    <li><input type="text" placeholder="搜索"></li>
+                </ul>
+            </div>
+            <div class="center_you right">
+                <ul>
+                    <li><img src="./img/Aa.png" alt="" srcset=""></li>
+                    <li><img src="./img/beat.png" alt="" srcset=""></li>
+                    <li><a href="">登录</a></li>
+                    <li><a href="">注册</a></li>
+                    <li>
+                        <a href="">
+                        <img src="./img/yumao.png" alt="" srcset="">
+                        <span>写文章</span>
+                        </a>
+                    </li>
+                </ul>
+            </div>     
+        </div>
+    </div>
+    <div class="content">
+        <div class="content_left">
+            <h1>深度的5年</h1>
+            <div class="jieshao">
+                <div class="jieshao_touxiang"><img src="https://upload.jianshu.io/users/upload_avatars/5957/6d510770-b55c-465f-80bb-10aab2714cfa.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp" alt=""></div> 
+                <div class="jieshao_xiangqing">
+                    <div class="jieshao_xiangqing_guanzhu">
+                        <ul>
+                            <li><a href="">ManateeLazyCat</a></li>
+                            <li><img src="./img/xingxing.png" alt=""></li>
+                            <li><a href="">关注</a></li>
+                        </ul>
+                    </div>
+                    <div class="jieshao_xiangqing_yuedu">
+                        <ul>
+                            <li><img src="./img/zuanshi.png" alt="" srcset=""></li>
+                            <li>0.81</li>
+                            <li>2016.03.08 02:03:12</li>
+                            <li>字数 9,192</li>
+                            <li>阅读 11,361</li>
+                        </ul>
+                    </div>       
+
+                </div>
+            </div>
+            <p>自从被Deepin老大忽悠来深度， 一转眼整整5年的时间就过去了， 我从一个懵懵懂懂的小孩变成一个4岁女儿她爸爸。<br>
+                回首深度这5年， 除了满满的幸福外， 其中的酸甜苦辣也只有创业人才能真真体会...
+            </p>
+            <h4>2011 小试牛刀</h4>
+            <p>
+                来了深度写第一版软件中心的时候， 那时候我记得大多数软件都是英文介绍 为了解决这个问题， 那时候写了一个小工具， 可以自动扫描系统中所有软件的英文介绍并配上一个 Google 翻译按钮， 在网上找了中科大20多个爱好者朋友， 大家就一人分一段， 一起开始翻译校验， 大概半个月以后所有两千个软件就翻译完成了， 这应该是Deepin团队组织的第一次线上社区合作。 （开源社区的合作是非常零散的， 有时候只需要一篇激情轩昂的文章配上基本的说明， 再加上志同道合的朋友就可以在一起做出非常伟大的协作， 有强大的工具固然是好的， 开源社区和创业基本差不多， 一个共同的理想+靠谱的团队比任何强大的工具和制度更能激起大家的斗志）。               
+            </p>
+            <p>
+                在深度头半年的时候应该是我5年最轻松的半年， 那时候只有我一个全职开发者， 每天正常发挥把软件中心代码随性的敲完就背着包回家看美剧了， 我记得那年夏天每天回家的第一件事情就是躲进房间开上空调（武汉真的好热好热）躺在床上看《星际之门》， 每天晚上看10集， 连续看了40天， 终于把20部《星际之门》看完了。 以后的创业时光每每回忆这半年都感觉那时真的好轻松。
+            </p>
+            <p>
+                每个月领了工资， 先把一半钱给老婆寄回去， 剩下的钱就买碗炒饭宅在屋里看看科幻剧、维护一下原来写的Emacs和Haskell代码， 周末无聊的时候就和同事去汉口看iMax电影， 生活好不惬意...
+            </p>
+            <p>
+                7月份在武汉举办了第一届用户和开发者大会， 在大会前一天还在修改深度软件中心代码， 还好在开会当天早上5点完成， 2011年的时候还是 Gtk+2 和 Qt3 的时代， 没有什么自绘控件， 所有Linux软件都是用 Gtk+ 原生控件构建的， 千篇一律的灰色， 深度软件中心在 Gtk+ 的基础之上构建了完全自绘的软件界面，在界面设计上应该是超越当时Linux时代的图形渲染技术。
+            </p>
+            <p>
+                在我们举办大会的当天， deepin.org 网站直接不能访问了， 会后我们才发现是因为一位网友只是在网上写了一篇怎么在Deepin上用 SSH 代理的文章， 我们的网站就直接被拔网线了， 感谢我们伟大的 GFW， 让中国的言论如此自由。 （我记得就是那年GFW之父就在武汉大学被人用鞋砸后落荒而逃， 相当的解恨）。
+            </p>
+            <p>
+                9月份， 武汉深之度有限公司正式在一个70平米的小办公室成立了， 整个办公室就四张长条桌加上各种风格的二手椅子， 地毯是让打鸡血的大红色地毯， 一进门就可以看到破破烂烂的桌子， 现在回忆起来一点儿都不寒酸， 到时感觉有几分亲切， 亲切的时候那时候大家就像一家人一样， 进办公室除了恶臭以外更多的是温暖。
+
+            </p>
+            <p>
+                9月份， 武汉深之度有限公司正式在一个70平米的小办公室成立了， 整个办公室就四张长条桌加上各种风格的二手椅子， 地毯是让打鸡血的大红色地毯， 一进门就可以看到破破烂烂的桌子， 现在回忆起来一点儿都不寒酸， 到时感觉有几分亲切， 亲切的时候那时候大家就像一家人一样， 进办公室除了恶臭以外更多的是温暖。
+
+            </p>
+            <p>
+                9月份， 武汉深之度有限公司正式在一个70平米的小办公室成立了， 整个办公室就四张长条桌加上各种风格的二手椅子， 地毯是让打鸡血的大红色地毯， 一进门就可以看到破破烂烂的桌子， 现在回忆起来一点儿都不寒酸， 到时感觉有几分亲切， 亲切的时候那时候大家就像一家人一样， 进办公室除了恶臭以外更多的是温暖。
+
+            </p>
+            <p>
+                9月份， 武汉深之度有限公司正式在一个70平米的小办公室成立了， 整个办公室就四张长条桌加上各种风格的二手椅子， 地毯是让打鸡血的大红色地毯， 一进门就可以看到破破烂烂的桌子， 现在回忆起来一点儿都不寒酸， 到时感觉有几分亲切， 亲切的时候那时候大家就像一家人一样， 进办公室除了恶臭以外更多的是温暖。
+
+            </p>
+            <p>
+                9月份， 武汉深之度有限公司正式在一个70平米的小办公室成立了， 整个办公室就四张长条桌加上各种风格的二手椅子， 地毯是让打鸡血的大红色地毯， 一进门就可以看到破破烂烂的桌子， 现在回忆起来一点儿都不寒酸， 到时感觉有几分亲切， 亲切的时候那时候大家就像一家人一样， 进办公室除了恶臭以外更多的是温暖。
+
+            </p>
+            <p>
+                9月份， 武汉深之度有限公司正式在一个70平米的小办公室成立了， 整个办公室就四张长条桌加上各种风格的二手椅子， 地毯是让打鸡血的大红色地毯， 一进门就可以看到破破烂烂的桌子， 现在回忆起来一点儿都不寒酸， 到时感觉有几分亲切， 亲切的时候那时候大家就像一家人一样， 进办公室除了恶臭以外更多的是温暖。
+
+            </p>
+            <p>
+                9月份， 武汉深之度有限公司正式在一个70平米的小办公室成立了， 整个办公室就四张长条桌加上各种风格的二手椅子， 地毯是让打鸡血的大红色地毯， 一进门就可以看到破破烂烂的桌子， 现在回忆起来一点儿都不寒酸， 到时感觉有几分亲切， 亲切的时候那时候大家就像一家人一样， 进办公室除了恶臭以外更多的是温暖。
+
+            </p>
+            <p>
+                9月份， 武汉深之度有限公司正式在一个70平米的小办公室成立了， 整个办公室就四张长条桌加上各种风格的二手椅子， 地毯是让打鸡血的大红色地毯， 一进门就可以看到破破烂烂的桌子， 现在回忆起来一点儿都不寒酸， 到时感觉有几分亲切， 亲切的时候那时候大家就像一家人一样， 进办公室除了恶臭以外更多的是温暖。
+
+            </p>
+        </div>
+        <div class="centent_right">
+            <div class="centent_right_top">
+                <div class="jieshao">
+                    <div class="jieshao_touxiang"><img src="https://upload.jianshu.io/users/upload_avatars/5957/6d510770-b55c-465f-80bb-10aab2714cfa.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp" alt=""></div> 
+                    <div class="jieshao_xiangqing">
+                        <div class="jieshao_xiangqing_guanzhu">
+                            <ul>
+                                <li><a href="">ManateeLazyC..</a></li>
+                                <li><img src="./img/xingxing.png" alt=""></li>
+                                <li><a href="">关注</a></li>
+                            </ul>
+                        </div>
+                        <div class="jieshao_xiangqing_yuedu">
+                            <ul>                             
+                                <li>总资产398 (约36.88元)</li>
+                            </ul>
+                        </div>       
+    
+                    </div>
+                    
+                </div>
+                <div class="dp"></div>
+                <div class="liebiao">
+                    <ul>
+                        <li>
+                            <a href="">重新启航</a>
+                            <a href="">阅读 3,538</a>
+                        </li>
+                        <li>
+                            <a href="">简书, Goodbye</a>
+                            <a href="">阅读 3,602</a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div class="centent_right_dow">
+                <h3>推荐阅读</h3>
+                <div class="liebiao lb1">
+                    <ul>
+                        <li>
+                            <a href="">百度网盘终结者来了，下载速度68MB/s,超稳定不崩盘，全面替代...</a>
+                            <a href="">阅读 33,268</a>
+                        </li>
+                        <li>
+                            <a href="">有哪些开源的 Python 库让你相见恨晚？ <br> Teamviewer！</a>
+                            <a href="">阅读 4,472</a>
+                        </li>
+                        <li>
+                            <a href="">Python的文档管理系统</a>
+                            <a href="">阅读 1,896</a>
+                        </li>
+                        <li>
+                            <a href="">ubuntu 20.04 终极配置方案</a>
+                            <a href="">阅读 3,602</a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="footer">
+        <div class="footer_center">
+            <ul>
+                <li><input type="text" placeholder="写下你的评论"></li>
+                <li><a href=""><img src="./img/xinxi.png" alt="" srcset=""></a></li>
+                <li><a href="">评论15</a></li> 
+                <li><a href=""><img src="./img/dianzan .png" alt="" srcset=""></a></li> 
+                <li><a href="">赞61</a></li> 
+                <li><a href="">...</a></li>            
+            </ul>
+        </div>
+    </div>
+    <div class="dianzan">
+        <div class="zan">
+            <img src="./img/dianzan .png" alt="" srcset="">
+            <p><a href="">61赞</a></p>
+        </div>
+        <div class="zan shang">
+            <img src="./img/shang.png" alt="" srcset="">
+            <p><a href="">5赞赏</a></p>
+        </div>
+    </div>
+</body>
+</html>