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

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.7 KiB

View File

@@ -0,0 +1,86 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>仿百度图片详情</title>
<style>
body, ul,li,p {
margin: 0;
padding: 0;
list-style: none;
}
.main {
position: relative;
width: 458px;
height: 272px;
background: url("https://inews.gtimg.com/newsapp_ls/0/11459241338_870492/0");
background-size: cover;
}
.main p {
position: absolute;
font-size: 20px;
color: #fff;
bottom: 15px;
padding: 0 20px;
}
.box {
position: relative;
width: 458px;
height: 272px;
}
.box img {
position: absolute;
z-index: 1;
width: 100%;
}
.box p {
position: absolute;
z-index: 2;
font-size: 20px;
color: #fff;
bottom: 30px;
padding: 0 20px;
}
.news_list li{
width: 270px;
height: 100px;
}
.news_list img {
width: 120px;
height: 80px;
float: left;
}
.news_list span {
float: left;
width: 144px;
margin-left: 5px;
}
</style>
</head>
<body>
<!-- 背景图 -->
<div class="main">
<p>vivo清仓5G手机跑分50万大电池44W快充跌至2898</p>
</div>
<!-- img实现 -->
<div class="box">
<img src="https://inews.gtimg.com/newsapp_ls/0/11459241338_870492/0" alt="">
<p>vivo清仓5G手机跑分50万大电池44W快充跌至2898</p>
</div>
<ul class="news_list">
<li>
<img src="https://inews.gtimg.com/newsapp_ls/0/11458983176_294195/0" alt="">
<span>服退烧药,带全家从美国来京的确诊女子已被立案</span>
</li>
</ul>
</body>
</html>

View File

@@ -0,0 +1,50 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>仿照网易严选的搜索</title>
<link rel="stylesheet" href="./css/clear.css">
<style>
.main {
width: 532px;
height: 38px;
}
.left {
float: left;
}
.main input {
width: 442px;
height: 100%;
border: none;
border: 1px solid #CC9756;
box-sizing: border-box;
border-top-left-radius: 19px;
border-bottom-left-radius: 19px;
padding-left: 32px;
background: url("./img/sss.png");
background-repeat: no-repeat;
background-size: 25px;
background-position: 5px center;
}
.search_button {
width: 90px;
height: 100%;
background: #CC9756;
color: #fff;
text-align: center;
line-height: 38px;
border-top-right-radius: 19px;
border-bottom-right-radius: 19px;
}
</style>
</head>
<body>
<div class="main">
<input class="left" type="text" placeholder="搜索">
<div class="search_button left">搜索</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,95 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮播图</title>
<link rel="stylesheet" href="./css/clear.css">
<style>
.main {
width: 520px;
height: 280px;
border: 1px solid #000;
overflow: hidden;
position: relative;
}
.main:hover .daohang {
display: block;
}
.daohang {
position: absolute;
width: 520px;
height: 36px;
top: 50%;
margin-top: -18px;
display: none;
}
.fs {
width: 40px;
height: 40px;
border-radius: 50%;
color: #fff;
background: #000;
text-align: center;
line-height: 40px;
cursor: pointer;
}
.dh_left {
float: left;
}
.dh_right {
float: right;
}
.lb_img{
width: 1560px;
}
.lb_img li {
float: left;
}
.yd {
position: absolute;
bottom: 15px;
left: 50%;
margin-left: -37.5px;
}
.yd li {
width: 15px;
height: 15px;
border-radius: 100%;
background: #fff;
float: left;
margin-right: 10px;
}
.active {
background: red !important;
}
</style>
</head>
<body>
<div class="main">
<div class="daohang">
<div class="fs dh_left"> < </div>
<div class="fs dh_right"> > </div>
</div>
<ul class="lb_img">
<li><img src="https://aecpm.alicdn.com/simba/img/TB1XotJXQfb_uJkSnhJSuvdDVXa.jpg" alt=""></li>
<li><img src="https://aecpm.alicdn.com/simba/img/TB1JNHwKFXXXXafXVXXSutbFXXX.jpg" alt=""></li>
<li><img src="https://img.alicdn.com/tfs/TB1VZo7x4v1gK0jSZFFXXb0sXXa-520-280.jpg_q90_.webp" alt=""></li>
</ul>
<ul class="yd">
<li class="active"></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 289 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 109 KiB

View File

@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>悬浮出现菜单</title>
<link rel="stylesheet" href="./css/clear.css">
<style>
.menu li {
float: left;
position: relative;
margin-right: 20px;
}
.drop_menu {
position: absolute;
display: none;
}
.menu li:hover .drop_menu{
display: block;
}
.drop_menu li {
clear: both;
width: 68px;
}
</style>
</head>
<body>
<ul class="menu">
<li><a href="">首页</a></li>
<li>
<a href="">图标库</a>
<ul class="drop_menu">
<li><a href="">我的图标</a></li>
<li><a href="">我的项目</a></li>
<li><a href="">我的收藏</a></li>
</ul>
</li>
<li><a href="">图标管理</a></li>
<li><a href="">帮助</a></li>
</ul>
</body>
</html>