first commit

历届学生/front-end-team-10/项目练习/上课项目/简书局部练习/index.css

@@ -0,0 +1,104 @@
+/* 清除浏览器默认样式的css代码 */
+body,ul{
+    margin: 0;
+    padding: 0;
+    font-size: 0;
+}
+
+
+/* 公共样式的css代码 */
+.left {
+    float: left;
+}
+.right {
+    float: right;
+}
+.clear {
+    clear: both;
+}
+
+.hidden {
+    overflow: hidden;
+}
+.reset {
+    line-height: 1;
+}
+
+
+/* 页面的具体代码 */
+.main {
+    width: 280px;
+}
+
+.title {
+    margin-bottom: 15px;
+}
+.text {
+    font-size: 14px;
+    color: #969696;
+}
+.refresh {
+    font-size: 14px;
+    color: #787878;
+}
+.refresh i {
+    font-size: 13px;
+}
+
+
+.list {}
+.list li {
+    overflow: hidden;
+    margin-bottom: 15px;
+}
+.list li .photo {
+    width: 48px;
+    height: 48px;
+    border-radius: 100%;
+    margin-right: 10px;
+    border: 1px solid #ddd;
+    box-sizing: border-box;
+}
+
+.introduce {}
+.introduce .name {
+    font-size: 14px;
+    color: #333;
+    margin-top: 4px;
+}
+
+.introduce .statistic {
+    font-size: 12px;
+    color: #969696;
+    margin-top: 5px;
+}
+
+.follow {
+    font-size: 13px;
+    color: #42c02e;
+    margin-top: 5px;
+}
+
+.follow i {
+    font-size: 12px;
+    font-weight: 800;
+}
+
+.all {
+    height: 35.07px;
+    background: #f7f7f7;
+    border: 1px solid #dcdcdc;
+    border-radius: 4px;
+    color: #787878;
+    font-size: 13px;
+    box-sizing: border-box;
+    line-height: 35.07px;
+    text-align: center;
+}
+.all i {
+    font-size: 12px;
+    zoom: 0.65;
+}
+.all span {
+    vertical-align: middle;
+}

历届学生/front-end-team-10/项目练习/上课项目/简书局部练习/index.html

@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>简书局部练习</title>
+    <link rel="stylesheet" href="./index.css">
+    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_3887737_ma9bwqj0g6.css">
+</head>
+<body>
+    
+
+    <div class="main">
+
+        <div class="title hidden">
+            <div class="text left">推荐作者</div>
+            <div class="refresh right">
+                <i class="iconfont icon-shuaxin"></i>
+                换一批
+            </div>
+        </div>
+
+        <ul class="list">
+            <li>
+                <img class="left photo" src="https://upload.jianshu.io/users/upload_avatars/301940/189d69dd-af7c-4290-9e2c-89e98acf3603.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp" alt="">
+                
+                <div class="introduce left">
+                    <div class="name">卢璐说</div>
+                    <div class="statistic">写了2215.2k字 · 34.7k喜欢</div>
+                </div>
+
+                <div class="follow right">
+                    <i class="iconfont icon-jiahao"></i>
+                    关注
+                </div>
+            </li>
+            <li>
+                <img class="left photo" src="https://upload.jianshu.io/users/upload_avatars/301940/189d69dd-af7c-4290-9e2c-89e98acf3603.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp" alt="">
+                
+                <div class="introduce left">
+                    <div class="name">卢璐说</div>
+                    <div class="statistic">写了2215.2k字 · 34.7k喜欢</div>
+                </div>
+
+                <div class="follow right">
+                    <i class="iconfont icon-jiahao"></i>
+                    关注
+                </div>
+            </li>
+            <li>
+                <img class="left photo" src="https://upload.jianshu.io/users/upload_avatars/301940/189d69dd-af7c-4290-9e2c-89e98acf3603.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp" alt="">
+                
+                <div class="introduce left">
+                    <div class="name">卢璐说</div>
+                    <div class="statistic">写了2215.2k字 · 34.7k喜欢</div>
+                </div>
+
+                <div class="follow right">
+                    <i class="iconfont icon-jiahao"></i>
+                    关注
+                </div>
+            </li>
+            <li>
+                <img class="left photo" src="https://upload.jianshu.io/users/upload_avatars/301940/189d69dd-af7c-4290-9e2c-89e98acf3603.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp" alt="">
+                
+                <div class="introduce left">
+                    <div class="name">卢璐说</div>
+                    <div class="statistic">写了2215.2k字 · 34.7k喜欢</div>
+                </div>
+
+                <div class="follow right">
+                    <i class="iconfont icon-jiahao"></i>
+                    关注
+                </div>
+            </li>
+            <li>
+                <img class="left photo" src="https://upload.jianshu.io/users/upload_avatars/301940/189d69dd-af7c-4290-9e2c-89e98acf3603.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp" alt="">
+                
+                <div class="introduce left">
+                    <div class="name">卢璐说</div>
+                    <div class="statistic">写了2215.2k字 · 34.7k喜欢</div>
+                </div>
+
+                <div class="follow right">
+                    <i class="iconfont icon-jiahao"></i>
+                    关注
+                </div>
+            </li>
+        </ul>
+
+        <div class="all">
+            <span>查看全部</span>
+            <i class="iconfont icon-zhankai"></i>
+        </div>
+        
+
+    </div>
+
+
+</body>
+</html>