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,17 @@
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
li,
p {
margin: 0;
padding: 0;
}
li {
list-style: none;
}

View File

@@ -0,0 +1,9 @@
.left{
float: left;
}
.right{
float: right;
}
.hidden{
overflow: hidden;
}

View File

@@ -0,0 +1,73 @@
.content{
width: 320px;
}
.content .title{
margin-bottom: 15px;
font-size: 14px;
}
.content .title .author{
font-size: 14px;
color: #969696
}
.content .title .HYP{
font-size: 14px;
}
.content .title .HYP span{
font-size: 14px;
color: #969696
}
ul{
width: 100%;
overflow: hidden;
margin-left: 10px;
}
ul li{
margin-bottom: 10px;
height: 48px;
border-bottom: 1px dashed #b5b5b5;
padding-bottom: 10px;
}
ul img{
width: 48px;
height: 48px;
border-radius: 100%;
float: left;
margin-right: 10px;
}
.content_a{
float: left;
width: 252px;
line-height: 20px;
margin-top: 5px;
}
.inside{}
.themeColor{
display: inline-block;
font-size: 14px;
}
.inside .right{
font-size: 13px;
color: #42c02e;
}
.inside .right i{}
.inside .right span{}
.content_below{
font-size: 12px;
color: #969696;
}
.end{
width: 310px;
background-color: #f7f7f7;
text-align: center;
line-height: 40px;
margin-left: 10px;
border-radius: 5px;
font-size: 13px;
color: #787878;
cursor: pointer;
}
.end i{
font-size: 12px;
}

View File

@@ -0,0 +1,114 @@
<!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>
<link rel="stylesheet" href="http:////at.alicdn.com/t/font_3445167_o5pox8tpzh.css">
<link rel="stylesheet" href="./clear.css">
<link rel="stylesheet" href="./public.css">
<link rel="stylesheet" href="./简书.css">
</head>
<body>
<div class="content">
<!-- 上面 -->
<div class="title hidden">
<div class="author left">推荐作者</div>
<div class="HYP right">
<i class="iconfont icon-shuaxin"></i>
<span>换一批</span>
</div>
</div>
<!-- 中间重复 -->
<ul>
<li>
<img 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">
<div class="content_a">
<div class="inside">
<div class="themeColor">露露说</div>
<div class="right">
<i class="iconfont icon-jiahao"></i>
<span class="themeColor1">关注</span>
</div>
</div>
<div class="content_below">写了2154.9k字 · 34.8k喜欢</div>
</div>
</li>
<li>
<img 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">
<div class="content_a">
<div class="inside">
<div class="themeColor">露露说</div>
<div class="right">
<i class="iconfont icon-jiahao"></i>
<span class="themeColor1">关注</span>
</div>
</div>
<div class="content_below">写了2154.9k字 · 34.8k喜欢</div>
</div>
</li>
<li>
<img 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">
<div class="content_a">
<div class="inside">
<div class="themeColor">露露说</div>
<div class="right">
<i class="iconfont icon-jiahao"></i>
<span class="themeColor1">关注</span>
</div>
</div>
<div class="content_below">写了2154.9k字 · 34.8k喜欢</div>
</div>
</li>
<li>
<img 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">
<div class="content_a">
<div class="inside">
<div class="themeColor">露露说</div>
<div class="right">
<i class="iconfont icon-jiahao"></i>
<span class="themeColor1">关注</span>
</div>
</div>
<div class="content_below">写了2154.9k字 · 34.8k喜欢</div>
</div>
</li>
<li>
<img 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">
<div class="content_a">
<div class="inside">
<div class="themeColor">露露说</div>
<div class="right">
<i class="iconfont icon-jiahao"></i>
<span class="themeColor1">关注</span>
</div>
</div>
<div class="content_below">写了2154.9k字 · 34.8k喜欢</div>
</div>
</li>
<li>
<img 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">
<div class="content_a">
<div class="inside">
<div class="themeColor">露露说</div>
<div class="right">
<i class="iconfont icon-jiahao"></i>
<span class="themeColor1">关注</span>
</div>
</div>
<div class="content_below">写了2154.9k字 · 34.8k喜欢</div>
</div>
</li>
</ul>
<!-- 结尾查看全部 -->
<div class="end">
<span>查看全部</span>
<i class="iconfont icon-gengduo"></i>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,17 @@
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
li,
p {
margin: 0;
padding: 0;
}
li {
list-style: none;
}

View File

@@ -0,0 +1,9 @@
.left{
float: left;
}
.right{
float: right;
}
.hidden{
overflow: hidden;
}

View File

@@ -0,0 +1,10 @@
.drop{
display: none;
}
.menu>li:hover .drop{
display: block;
}
.menu>li {
float: left;
margin-right: 10px;
}

View File

@@ -0,0 +1,32 @@
<!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>
<link rel="stylesheet" href="./clear.css">
<link rel="stylesheet" href="./public.css">
<link rel="stylesheet" href="./xiala.css">
</head>
<body>
<ul class="menu">
<li>菜单1
<ul class="drop">
<li>1-15151515151</li>
<li>1-2</li>
<li>1-3</li>
<li>1-4</li>
</ul>
</li>
<li>菜单2</li>
<li>菜单3</li>
<li>菜单4</li>
<li>菜单5</li>
</ul>
</body>
</html>

View File

@@ -0,0 +1,17 @@
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
li,
p {
margin: 0;
padding: 0;
}
li {
list-style: none;
}

View File

@@ -0,0 +1,9 @@
.left{
float: left;
}
.right{
float: right;
}
.hidden{
overflow: hidden;
}

View File

@@ -0,0 +1,74 @@
.title{
width: 1000px;
margin: 0 auto;
}
.title .logo{
width: 272px;
height: 88px;
margin-right: 20px;
}
.logo img{
width: 100%;
}
.content_top ul li{
display: inline-block;
color: #666;
cursor: pointer;
margin-right: 5px;
font-size: 13px;
}
.content{
width: 469px;
margin-top: 20px;
line-height: 26px;
}
.content_top{
float: left;
width: 100%;
}
.content_down{
border-color: #008EE1;
float: left;
width: 100%;
height: 32px;
}
.input_a{
display: inline-block;
width: 389px;
height: 36px;
}
.input_a input{
border: 1px solid #50c52a;
width: 100%;
height: 100%;
padding: 0px;
padding-left: 10px;
box-sizing: border-box;
}
.button_a{
display: inline-block;
margin-left: -6px;
}
.button_a button{
width: 80px;
height: 36px;
background: #008ee1;
color: #fff;
border: none;
}
.tubiao{
float: right;
margin-top: 40px;
color: red;
}
.tubiao ul{}
.tubiao ul li{
display: inline-block;
margin-left: 10px;
text-align: center;
}
.tubiao ul li i{}
.tubiao ul li p{
color: #1f4f88;
font-size: 15px;
}

View File

@@ -0,0 +1,62 @@
<!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>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_3448711_fco15j41ft.css">
<link rel="stylesheet" href="./clear.css">
<link rel="stylesheet" href="./public.css">
<link rel="stylesheet" href="./中关村.css">
</head>
<body>
<div class="title hidden">
<div class="logo left">
<img src="https://icon.zol-img.com.cn/mainpage/2019logo/festival/2022duanwu-logo_2x.png">
</div>
<div class="content left">
<div class="content_top">
<ul>
<li>综合</li>
<li>产品</li>
<li>咨询</li>
<li>论坛</li>
<li>下载</li>
<li>问题</li>
<li>图片</li>
<li>视频</li>
<li>口碑</li>
</ul>
</div>
<div class="content_down">
<div class="input_a">
<input type="text" placeholder="789">
</div>
<div class="button_a">
<button>搜索</button>
</div>
</div>
</div>
<div class="tubiao">
<ul>
<li>
<i class="iconfont icon-apple-fill"></i>
<p>下载app</p>
</li>
<li>
<i class="iconfont icon-apple-fill"></i>
<p>下载app</p>
</li>
<li>
<i class="iconfont icon-apple-fill"></i>
<p>下载app</p>
</li>
</ul>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,21 @@
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
li,
p {
margin: 0;
padding: 0;
}
li {
/* list-style: none; */
}
html{
font-size: 0;
}

View File

@@ -0,0 +1,9 @@
.left{
float: left;
}
.right{
float: right;
}
.hidden{
overflow: hidden;
}

View File

@@ -0,0 +1,235 @@
.content{
width: 1200px;
margin: 0 auto;
}
.content .title{
height: 44px;
line-height: 44px;
}
.content .title .tltle_l{
font-size: 24px;
font-weight: 400;
color: #333;
}
.content .title .tltle_l span{
font-size: 24px;
font-weight: bold;
font-family: 'Microsoft YaHei';
margin-right: 8px;
}
.content .title .title_r{
overflow: hidden;
}
.content .title .title_r li{
display: inline-block;
float: left;
}
.content .title .title_r li:hover{
text-decoration:underline
}
.content .title .title_r li::after{
content:" ";
background: black;
width: 0.5px;
height: 12px;
display: inline-block;
margin-top: 2px;
margin-left: 7.5px;
margin-right: 7.5px;
}
.content .title .title_r li a{
text-decoration:none;
color:black;
font-size: 12px;
}
.content .title .title_r li a i{
font-size: 12px;
zoom: 0.9;
}
.content .title .title_r li:last-child::after{
width: 0 !important;
background: white !important;
}
.ddd{
height: 516px;
width: 100%;
}
.wrap{
width: 300px;
height: 100%;
}
.warp_top{
width: 100%;
height: 281px;
background: #1d89bf;
}
.warp_top .kkkkk{
background: #0f4b69 !important;
width: 100%;
height: 38px;
}
.warp_top .kkkkk .guding{
font-size: 16px;
color: #f5f5f5;
margin-right: 50px;
text-align: center;
height: 100%;
line-height: 38px;
padding-left: 17px;
padding-right: 2px;
box-sizing: border-box;
}
.warp_top .kkkkk .three{
font-size: 16px;
color: #f5f5f5;
}
.warp_top .kkkkk .three li{
float: left;
width: 50px;
text-align: center;
line-height: 38px;
}
.warp_top .kkkkk .three li:hover{
background: #333;
}
.warp_top .kkkkk .three .active{
background: red !important;
}
.warp_top .xuanze{
padding: 20px 0 10px 20px;
}
.warp_top .xuanze li{
height: 30px;
line-height: 30px;
padding-left: 26px;
}
.warp_top .xuanze li:nth-child(1) span,
.warp_top .xuanze li:nth-child(2) span,
.warp_top .xuanze li:nth-child(3) span{
background: #f5f5f5;
color: blue;
}
.warp_top .xuanze li span{
width: 16px;
height: 16px;
display: inline-block;
font-size: 12px;
line-height: 16px;
text-align: center;
margin-right: 10px;
color: #f5f5f5;
}
.warp_top .xuanze li a{
font-size: 12px;
color: #f5f5f5;
}
.warp_top .end{
height: 53px;
text-align: center;
line-height: 53px;
font-size: 12px;
color: rgb(238, 237, 237);
border-top: 1px dashed black;
width: 260px;
margin: 0 auto;
}
.warp_down{
height: 235px;
background:#333;
padding-top: 25px;
padding-left: 20px;
font-size: 14px;
color: #333;
}
.tt{
font-size: 16px;
color: #666;
margin-bottom: 5px;
}
.warp_down li{
float: left;
margin-right: 20px;
line-height: 30px;
}
.warp_down li a{
color: black;
}
.picture{
width: 900px;
height: 100%;
border-top: 1px solid;
}
.picture .picture_top{
}
.picture .picture_top li{
padding: 20px 0px 20px 0;
border-right: 1px solid;
border-bottom: 1px solid;
display: inline-block;
font-size: 14px;
color: #999;
text-align: center;
width: 224px;
}
.picture .picture_top img{
width: 160px;
}
.picture .picture_top li .title{
height: 44px;
line-height: 44px;
}
.picture .picture_top li .price{
float: left;
}
.picture .picture_top li .price span{
font-weight: 500;
color: red;
}
.picture .picture_down{
border-right: 1px solid;
text-align: center;
padding-top: 26px;
border-bottom: 1px solid;
padding-bottom: 20px;
}
.picture .picture_down li{
width: 12px;
height: 12px;
margin: 0 6px;
background: yellow;
display: inline-block;
border-radius: 50%;
cursor: pointer;
}
.picture .picture_down .active{
background: red !important;
}
.picture .picture_down li:hover{
background: blue!important;
}

View File

@@ -0,0 +1,217 @@
<!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>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_3445167_o5pox8tpzh.css">
<link rel="stylesheet" href="./clear.css">
<link rel="stylesheet" href="./public.css">
<link rel="stylesheet" href="./笔记本.css">
</head>
<body>
<div class="content">
<!-- 标题 -->
<div class="title">
<div class="tltle_l left">
<span>2F</span>笔记本电脑
</div>
<ul class="title_r right">
<li>
<a href="">联想</a>
</li>
<li>
<a href="">惠普</a>
</li>
<li>
<a href="">戴尔</a>
</li>
<li>
<a href="">华为</a>
</li>
<li>
<a href="">华硕</a>
</li>
<li>
<a href="">微软</a>
</li>
<li>
<a href="">苹果</a>
</li>
<li>
<a href="">外星人</a>
</li>
<li>
<a href="">神州</a>
</li>
<li>
<a href="">联想</a>
</li>
<li>
<a href="">联想</a>
</li>
<li>
<a href="">更多
<i class="iconfont icon-z044"></i>
</a>
</li>
</ul>
</div>
<div class="ddd hidden">
<!-- 左半边 -->
<div class="wrap left">
<!-- 左上边 -->
<div class="warp_top">
<!-- 菜单 -->
<div class="kkkkk hidden">
<div class="guding left">热度排行</div>
<ul class="three left">
<li class="active">品牌</li>
<li>型号</li>
<li>新品</li>
</ul>
</div>
<!-- 内容 -->
<ul class="xuanze">
<li>
<span>1</span>
<a href="">惠普暗影精灵6</a>
</li>
<li>
<span>2</span>
<a href="">惠普暗影精灵6</a>
</li>
<li>
<span>3</span>
<a href="">惠普暗影精灵6</a>
</li>
<li>
<span>4</span>
<a href="">惠普暗影精灵6</a>
</li>
<li>
<span>5</span>
<a href="">惠普暗影精灵6</a>
</li>
</ul>
<!-- 查看更多排行榜 -->
<div class="end">
查看更多排行榜
<em>>></em>
</div>
</div>
<!-- 左下边 -->
<div class="warp_down">
<div class="tt">热门搜索</div>
<ul>
<li>
<a href="">笔记本</a>
</li>
<li>
<a href="">笔记本</a>
</li>
<li>
<a href="">笔记本</a>
</li>
<li>
<a href="">笔记本</a>
</li>
<li>
<a href="">笔记本</a>
</li>
<li>
<a href="">笔记本</a>
</li>
<li>
<a href="">笔记本</a>
</li>
<li>
<a href="">笔记本</a>
</li>
<li>
<a href="">笔记本</a>
</li>
<li>
<a href="">笔记本</a>
</li>
</ul>
</div>
</div>
<!-- 右半边 -->
<div class="picture right">
<!-- 右上 -->
<ul class="picture_top">
<li>
<img src="https://2b.zol-img.com.cn/product/219_160x120/915/ceFDJDFjhroo.jpg" alt="">
<div class="title">OPPO Reno8 Pro+(8GB/156GB)</div>
<div class="price">
最低价:<span>¥3699</span>
</div>
</li>
<li>
<img src="https://2b.zol-img.com.cn/product/219_160x120/915/ceFDJDFjhroo.jpg" alt="">
<div class="title">OPPO Reno8 Pro+(8GB/156GB)</div>
<div class="price">
最低价:<span>¥3699</span>
</div>
</li>
<li>
<img src="https://2b.zol-img.com.cn/product/219_160x120/915/ceFDJDFjhroo.jpg" alt="">
<div class="title">OPPO Reno8 Pro+(8GB/156GB)</div>
<div class="price">
最低价:<span>¥3699</span>
</div>
</li>
<li>
<img src="https://2b.zol-img.com.cn/product/219_160x120/915/ceFDJDFjhroo.jpg" alt="">
<div class="title">OPPO Reno8 Pro+(8GB/156GB)</div>
<div class="price">
最低价:<span>¥3699</span>
</div>
</li>
<li>
<img src="https://2b.zol-img.com.cn/product/219_160x120/915/ceFDJDFjhroo.jpg" alt="">
<div class="title">OPPO Reno8 Pro+(8GB/156GB)</div>
<div class="price">
最低价:<span>¥3699</span>
</div>
</li>
<li>
<img src="https://2b.zol-img.com.cn/product/219_160x120/915/ceFDJDFjhroo.jpg" alt="">
<div class="title">OPPO Reno8 Pro+(8GB/156GB)</div>
<div class="price">
最低价:<span>¥3699</span>
</div>
</li>
<li>
<img src="https://2b.zol-img.com.cn/product/219_160x120/915/ceFDJDFjhroo.jpg" alt="">
<div class="title">OPPO Reno8 Pro+(8GB/156GB)</div>
<div class="price">
最低价:<span>¥3699</span>
</div>
</li>
<li>
<img src="https://2b.zol-img.com.cn/product/219_160x120/915/ceFDJDFjhroo.jpg" alt="">
<div class="title">OPPO Reno8 Pro+(8GB/156GB)</div>
<div class="price">
最低价:<span>¥3699</span>
</div>
</li>
</ul>
<!-- 右下 -->
<ul class="picture_down">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</body>
</html>