first commit

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

@@ -0,0 +1,16 @@
+/* 专门用来重置浏览器默认样式的 */
+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;
+}

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

@@ -0,0 +1,411 @@
+.header {
+    width: 100%;
+    position: fixed;
+    left: 0;
+    top: 0;
+    height: 56px;
+    background: #fff;
+    z-index: 9999;
+    box-shadow: 0 2px 10px rgba(0,0,0,.05);
+}
+.top_logo {
+    padding-top: 12px;
+}
+.top_logo img{
+    width: 60px;
+    height: 30px;
+}
+.top{
+        width: 1440px;
+        margin: 0 auto;
+}
+.top_mid {
+    margin-left: 204px;
+}
+.top_mid ul li {
+    line-height: 56px;
+    height: 56px;
+    padding: 0 20px;
+}
+.top_mid ul li a {
+    font-size: 17px;
+    color: #333;
+}
+.top_mid ul li input[type="text"] {
+    width: 160px;
+    height: 36px;
+    border: none;
+    padding: 8px 36px 8px 16px;
+    box-sizing: border-box;
+    border-radius: 18px;
+    background: #f2f2f2 url("../img/search.png");
+    background-repeat: no-repeat;
+    background-size: 21px 21px;
+    background-position: 124px center;
+}
+.top_right ul li:first-child img{
+    padding-top: 17px;
+    width: 24px;
+    height: 24px;
+    margin-right: 12px;
+}
+.top_right ul li:nth-child(2) img{
+    padding-top: 18px;
+    width: 56px;
+    height: 24px;
+    margin-right: 10px;
+}
+
+.top_right ul li:nth-child(3) a{
+    padding: 0 16px;
+    color: #969696;
+}
+.top_right ul li:nth-child(4) a{
+    width: 82px;
+    height: 40px;
+    border-radius: 50px;
+    background-color: #fff;
+    font-size: 16px;
+    color: #ec7259;
+    margin-right: 8px;
+    border: 1px solid #ec7259;
+    text-align: center;
+    line-height: 40px;
+    display: block;
+    box-sizing: border-box;
+    margin-top: 7px;
+}
+.top_right ul li:nth-child(5) img {
+    width: 16px;
+    height: 16px;
+    vertical-align: middle;
+}
+.top_right 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;
+}
+
+.top_right ul li {
+    height: 56px;
+    line-height: 56px;
+}
+
+.top_right ul li,
+.top_mid ul li {
+    float: left;
+}
+
+.content{
+    width: 1032px;
+    height: 915px;
+    margin: 0 244px;
+    padding: 10px 16px 0;
+    margin: 0 auto;
+    background:#fff;
+    margin-top: 65px;
+}
+.content_left{
+    width: 730px;
+    height: 9384px;
+    background: #fff;
+}
+.content_left img{
+    margin-left: 15px;
+}
+.content_left h1{
+    margin-top: 20px;
+    margin-left: 15px;
+    margin-bottom: 10px;
+}
+.content_right{
+
+    background: #fff;
+}
+
+.content_right{
+
+    justify-content: start;
+    background: #fff;
+}
+.refly_1{
+    margin-top: 16px;
+    margin-left: 14px;
+}
+.refly_2{
+    margin-top: 16px;
+    margin-left: 14px;
+}
+.read_title{
+    margin-top: 50px;
+    display: flex;
+    margin-bottom: 8px;
+}
+.read_content ul li p{
+    margin-left: 14px;
+    font-size: 12px;
+    color: #969696;
+    margin-bottom: 6px;
+}
+.read_content ul li a{
+    margin-left: 14px;
+}
+.M_a1{
+    display: flex;
+    align-items: center;
+}
+.M span{
+    margin-right: -6px;
+}
+.M_a1 p:last-child{
+    width: 44px;
+    height: 23px;
+    border-radius: 50px;
+    background-color: #fff;
+    font-size: 12px;
+    color: #ec7259;
+    margin-right: 8px;
+    border: 1px solid #ec7259;
+    text-align: center;
+    line-height: 23px;
+    display: block;
+    box-sizing: border-box;
+}
+.M_a1 img:nth-child(2){
+    margin-left: 5px;
+}
+.M_a1 img{
+    width: 16px;
+    height: 16px;
+    margin-top: 5px;
+    margin-left: 5px;
+}
+.M_a1 p{
+    margin-left: 5px;
+}
+.M_a1 p a{
+    color: #000;
+}
+.M_a2 span{
+    font-size: 10px;
+    align-items: center;
+    margin-right: 10px;
+}
+.M_a2{
+    width: 314px;
+    height: 18px;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    flex-wrap: wrap;
+    justify-content: start;
+}
+.M_a2 img{
+    width: 11px;
+    height: 11px;
+    margin-right: 5px;
+}
+.article p{
+    font-size: 16px;
+    margin-top: 19px;
+}
+.article h4{
+    font-size: 20px;
+    margin-bottom: 16px;
+    margin-top: 20px;
+}
+.M img{
+    width: 48px;
+    height: 48px;
+}
+
+
+.M img:nth-child(4) {
+    width: 44PX;
+    height: 23PX;
+    margin-left: 5px;
+}
+ .refly{
+    width: 228px;
+    height: 85px;
+} 
+.M{
+    width: 265px;
+    height: 48px;
+    display: flex;
+    justify-content: start;
+}
+.M_a{
+    width: 207px;
+    height: px;
+}
+.M_a1{
+    display: flex;
+    align-items: center;
+}
+.M span{
+    margin-right: -6px;
+}
+.M_a1 p:last-child{
+    width: 44px;
+    height: 23px;
+    border-radius: 50px;
+    background-color: #fff;
+    font-size: 12px;
+    color: #ec7259;
+    margin-right: 8px;
+    border: 1px solid #ec7259;
+    text-align: center;
+    line-height: 23px;
+    display: block;
+    box-sizing: border-box;
+}
+.M_a1 img:nth-child(2){
+    margin-left: 5px;
+}
+.M_a1 img{
+    width: 16px;
+    height: 16px;
+    margin-top: 5px;
+    margin-left: 5px;
+}
+.M_a1 p{
+    margin-left: 5px;
+}
+.M_a1 p a{
+    color: #000;
+}
+.M_a2 span{
+    font-size: 10px;
+    align-items: center;
+    margin-right: 10px;
+}
+.M_a2{
+    width: 314px;
+    height: 18px;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    flex-wrap: wrap;
+    justify-content: start;
+}
+.M_a2 img{
+    width: 11px;
+    height: 11px;
+    margin-right: 5px;
+}
+    .content_right{
+        width: 260px;
+        height: 621px;
+        background: #fff;
+    }
+    .content_right img{
+        margin-left: 15px;
+    }
+.M_a3{
+    margin-left: 5px;
+    font-size: 15px;
+}
+.M_a1 img{
+    margin-left: 5px;
+}
+.read_content ul li a {
+    color: inherit;
+    font-size: 14px;
+    margin-bottom: 4px;
+    display: block;
+    
+}
+
+.buttom{
+    width: 100%;
+    position: fixed;
+    left: 0;
+    top: 0;
+    height: 56px;
+    background: #fff;
+}
+
+.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 img{
+    width: 50px;
+    height: 50px;
+    margin-left: -20px;
+    margin-top: 40px;
+}
+.zan p a{
+    margin-left: -15px;
+    font-size: 14px;
+    text-align: center;
+    color: #969696;
+}
+

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

@@ -0,0 +1,21 @@
+/* 存放公共css的 */
+.theme_red {
+    color: blue;
+}
+
+.left {
+    float: left;
+}
+
+.right {
+    float: right;
+}
+
+.w-1200 {
+   width: 1200px;
+   margin: 0 auto; 
+}
+
+.center {
+    text-align: center;
+}

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

@@ -0,0 +1,238 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./css/clear.css">
+    <link rel="stylesheet" href="./css/public.css">
+    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1975352_0bxvaauyh155.css">
+    <link rel="stylesheet" href="./css/index.css">
+    <title>深度的5年-简书</title>
+</head>
+
+<body>
+    <div class="header">
+        <div class="top">
+            <div class="top_logo left">
+                <img src="./img/logo.png" alt="">
+            </div>
+            <div class="top_mid left">
+                <ul>
+                    <li>
+                        <a href="">首页</a>
+                    </li>
+                    <li>
+                        <a href="">下载app</a>
+                    </li>
+                    <li>
+                        <input type="text" placeholder="搜索"></input>
+                    </li>
+                </ul>
+            </div>
+            <div class="top_right right">
+                <ul>
+                    <li>
+                        <img src="./img/font.png" alt="">
+                    </li>
+                    <li>
+                        <img src="./img/beta.png" alt="">
+                    </li>
+                    <li>
+                        <a href="">登录</a>
+                    </li>
+                    <li>
+                        <a href="">注册</a>
+                    </li>
+                    <li>
+
+                        <a href="">
+                            <img src="./img/4.png" alt="">
+                            <span>写文章</span>
+                        </a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+    <div class="content">
+        <div class="content_left left">
+            <h1>深度的5年</h1>
+            <div class="M">
+                <img src="./img/12.jpg" alt="">
+                <div class="M_a">
+                    <div class="M_a1">
+                        <p>
+                            <a href="">ManateeLazyCat</a>
+                        </p>
+
+                        <a href="">
+                            <img src="./img/5.png" alt="">
+                        </a>
+                        <p>
+                            <a href="">关注</a>
+                        </p>
+
+                    </div>
+                    <div class="M_a2">
+                        <img src="./img/6.png" alt="">
+                        <span>0.81</span>
+                        <span>2016.03.08 02:03:12</span>
+                        <span>字数9192</span>
+                        <span>阅读11464</span>
+
+                    </div>
+                </div>
+            </div>
+            <div class="article">
+                <p>自从被Deepin老大忽悠来深度， 一转眼整整5年的时间就过去了， 我从一个懵懵懂懂的小孩变成一个4岁女儿她爸爸。</p>
+                <p1>回首深度这5年， 除了满满的幸福外， 其中的酸甜苦辣也只有创业人才能真真体会...</p1>
+                <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>
+                <h4>2012 在学校混了一年</h4>
+                <p>随着软件中心和桌面环境的研发， 整个团队将进军新的项目， 我们决定在解决软件中心以后， 解决中
+                    国用户听音乐乱码和看电影下载解码器的痛苦。</p>
+                <p>为了快速的开发更多软件， 就必须要写一套统一的控件库供以后的深度软件使用， 软件中心那种临
+                    时自绘的方案只会让开发者重复写相同的代码， 所以我着手编写后来叫Deepin-UI的图形库， 简单
+                    来说就是把应用开发中各种控件库和通用库统一编写供其他应用开发者调用， 那时候我带了2名开发
+                    者： 猴哥和另外一个外号皮卡丘的开发者， 也是后来深度音乐和深度影音的作者。</p>
+            </div>
+
+        </div>
+        <div class="content_right right">
+            <div class="M">
+                <img src="./img/12.jpg" alt="">
+                <div class="M_a">
+                    <div class="M_a1">
+                        <p>
+                            <a href="">ManateeLazyCat</a>
+                        </p>
+
+                        <a href="">
+                            <img src="./img/5.png" alt="">
+                        </a>
+                        <p>
+                            <a href="">关注</a>
+                        </p>
+                    </div>
+                    <div class="M_a3">
+                        <span>总资产398(约37.71万元)</span>
+                    </div>
+
+
+
+                </div>
+
+            </div>
+            <div class="refly">
+                <div class="refly_1">
+                    <ul>
+                        <li>
+                            <a href="">重新起航</a>
+                            <p>
+                                阅读3,583
+                            </p>
+                        </li>
+                    </ul>
+                </div>
+                <div class="refly_2">
+                    <ul>
+                        <li>
+                            <a href="">简书, Goodbye</a>
+                            <p>
+                                阅读3,583
+                            </p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div class="read">
+                <div class="read_title">
+                    <img src="./img/123.png" alt="">
+                    <span>推荐阅读</span>
+                </div>
+                <div class="read_content">
+                    <ul>
+                        <li>
+                            <a href="">百度网盘终结者来了，
+                                下载速度68MB/s,超稳定不崩盘，全面替代pandownload
+                            </a>
+                            <p>阅读40979</p>
+                        </li>
+                        <li>
+                            <a href="">个人从0开始开发小程序 2个月时间实现盈利！
+                            </a>
+                            <p>阅读40979</p>
+                        </li>
+                        <li>
+                            <a href="">有哪些开源的 Python 库让你相见恨晚？
+                            </a>
+                            <p>阅读40979</p>
+                        </li>
+                        <li>
+                            <a href="">史上最好的Markdown编辑器
+                            </a>
+                            <p>阅读40979</p>
+                        </li>
+                        <li>
+                            <a href="">ZeroTier+远程桌面=代替Teamviewer！
+                            </a>
+                            <p>阅读40979</p>
+                        </li>
+
+                    </ul>
+                </div>
+            </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/zan.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>