first commit

This commit is contained in:
编码猿
2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions

View File

@@ -0,0 +1,50 @@
<!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>Document</title>
<style>
body {
margin: 0;
padding: 0;
}
.box1 {
width: 300px;
height: 200px;
background: red;
float: left;
margin-left: 10px;
padding-left: 20px;
box-sizing:border-box;
}
.box2 {
width: 300px;
height: 200px;
background: green;
overflow: hidden;
}
.box3 {
width: 300px;
height: 200px;
background: blue;
border: 10px solid black;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">盒子1</div>
<div class="box2">盒子2</div>
<div class="box3">盒子3</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,84 @@
<!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">
<link rel="stylesheet" href="./简书局部练习css.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/c/font_3889063_1r8lr4w2zw9.css">
<title>Document</title>
</head>
<body>
<div class="men">
<div class="title hidden">
<div class="text left" >作者推荐</div>
<div class="refresh right">
<i class="iconfont icon-shuaxin"></i>
换一批
</div>
</div>
<ul class="list hidden">
<li>
<img class="left" 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.k字·34.7k喜欢</div>
</div>
<div class="follow right">
<i class="iconfont icon-jiahao"></i>
关注
</div>
</li>
<li>
<img class="left" 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.k字·34.7k喜欢</div>
</div>
<div class="follow right">
<i class="iconfont icon-jiahao"></i>
关注
</div>
</li>
<li>
<img class="left" 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.k字·34.7k喜欢</div>
</div>
<div class="follow right">
<i class="iconfont icon-jiahao"></i>
关注
</div>
</li>
<li>
<img class="left" 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.k字·34.7k喜欢</div>
</div>
<div class="follow right">
<i class="iconfont icon-jiahao"></i>
关注
</div>
</li>
<li>
<img class="left" 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.k字·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-copy"></i>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,97 @@
/*清除浏览器默认样式*/
body ,ul,span {
margin: 0;
padding: 0;
font-size: 0;
}
/*公共样式*/
.left{
float: left;
}
.right{
float: right;
}
.clear{
clear:both;
}
.hidden{
overflow: hidden;
}
.reast{
line-height: 1;
}
/*页面的具体样式*/
.men{
width: 280px;
height: 500px;
}
.title{
margin-bottom: 15px;
}
.text{
font-size: 14px;
color:#969696;
}
.refresh{
font-size: 13px;
color: #969696;
}
.refresh i{
}
.list{
}
.list li{
list-style: none;
overflow: hidden;
margin-bottom: 15px;
}
.list img{
width: 48px;
height: 48px;
border-radius: 25px;
margin-right: 10px;
border: 1px solid #ddd;
box-sizing: border-box;
}
.introduce .name{
font-size:14px;
color: #333;
margin-top: 4px;
}
.introduce .statistic{
font-size: 12px;
color: #969696;
margin-top: 4px;
}
.follow{
font-size: 13px;
color: #42c02e;
margin-top: 5px;
}
.follow i{
font-size: 14px;
}
.all{
font-size: 12px;
color:#787877 ;
height: 34.56px;
border: 1px solid #dcdcdc;
border-radius: 4px;
box-sizing: border-box;
text-align: center;
line-height: 34.56px;
background: #f7f7f7;
}
.all i{
font-size: 12px;
zoom: 0.7;
}
.all span{
vertical-align: middle;
}