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,111 @@
.header {
height: .9rem;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 .42rem;
box-sizing: border-box;
top: 0;
position: fixed;
width: 100%;
}
.header img {
width: 0.15rem;
height: 0.29rem;
}
.header .introduce {
font-size: 0.34rem;
color: #333333;
}
.content {
margin-top: .9rem;
}
.content .search_button {
width: 6.9rem;
height: 0.56rem;
background-color: #f0f0f0;
border-radius: 0.28rem;
border: solid 0.01rem #d5d5d5;
opacity: 0.2;
box-sizing: border-box;
background: url("./img/sousuo.png")no-repeat 0.38rem center;
background-size: .3rem;
margin-bottom: 0.34rem;
}
.content .list {
display: flex;
justify-content: space-between;
padding-left: 0.66rem;
padding-right: 0.59rem;
box-sizing: border-box;
margin-bottom: 0.41rem;
}
.content .list li {
font-family: PingFang-SC-Medium;
font-size: 0.24rem;
color: #2b2b2b;
}
.content .list li:first-child {
color: #ff7b41;
}
.content .list li:nth-child(3) {
display: flex;
align-items: center;
}
.content .list li .jiantou{
width: 0.15rem;
height: 0.19rem;
}
.content .list li:nth-child(4) {
display: flex;
align-items: center;
}
.content .list li .a{
width: 0.18rem;
height: 0.23rem;
}
.content .product {
display: flex;
flex-wrap: wrap;
width: 50%;
}
.content .product li{
width: 3.4rem;
height: 5rem;
background-color: #ffffff;
border-radius: 0.1rem;
}
.content .product img {
width: 3.4rem;
height: 3.4rem;
background-color: #e8fffe;
border-radius: 0.1rem 0.1rem 0rem 0rem;
box-sizing: border-box;
margin-bottom: 0.19rem;
}
.content .product li p {
font-family: PingFang-SC-Medium;
font-size: 0.24rem;
color: #3f3f3f;
margin-bottom: 0.26rem;
}
.content .product li p:last-child {
font-family: PingFang-SC-Bold;
font-size: 0.28rem;
color: #ff7b41;
}

View File

@@ -0,0 +1,77 @@
<!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>
<script type="text/javascript">
(function (w, d) {
function setSize() {
// 获取屏幕的宽度 375px
var screenWidth = d.documentElement.clientWidth;
// 根据规则计算 html 的font-size数值
var currentFontSize = screenWidth * 100 / 750;
// 修改html上的font-size
d.documentElement.style.fontSize = currentFontSize + 'px';
}
w.addEventListener('resize', setSize);
w.addEventListener('pageShow', setSize)
w.addEventListener('DOMContentLoaded', setSize)
})(window, document)
</script>
<link rel="stylesheet" href="../2.16/clear.css">
<link rel="stylesheet" href="./commodity.css">
</head>
<body>
<div class="header">
<img src="./img/fanhui.png" alt="">
<div class="introduce">商品列表</div>
<div></div>
</div>
<div class="content">
<input class="search_button" placeholder="搜索" type="text">
<ul class="list">
<li>最新</li>
<li>销量</li>
<li>
价格
<img class="jiantou" src="./img/shangxia.png" alt="">
</li>
<li>
筛选
<img class="a" src="./img/shaixuan.png" alt="">
</li>
</ul>
<ul class="product">
<li>
<img src="./img/xie.png" alt="">
<p>女鞋小白鞋女鞋小白鞋女鞋小白鞋女鞋小白鞋</p>
<p>50积分</p>
</li>
<li>
<img src="./img/xie.png" alt="">
<p>女鞋小白鞋女鞋小白鞋女鞋小白鞋女鞋小白鞋</p>
<p>50积分</p>
</li>
<!-- <li>
<img src="./img/xie.png" alt="">
<p>女鞋小白鞋女鞋小白鞋女鞋小白鞋女鞋小白鞋</p>
<p>50积分</p>
</li>
<li>
<img src="./img/xie.png" alt="">
<p>女鞋小白鞋女鞋小白鞋女鞋小白鞋女鞋小白鞋</p>
<p>50积分</p>
</li> -->
</ul>
</div>
</body>
</html>

View File

@@ -0,0 +1,55 @@
<html>
<head>
<title>复仇者联盟</title>
</head>
<body>
<h1 title="复仇者联盟成员" >钢铁侠</h1>
<h2 title="复仇者联盟成员" >美国队长</h2>
<h3 title="复仇者联盟成员" >黑寡妇</h3>
<h4 title="复仇者联盟成员" >鹰眼</h4>
<h5 title="复仇者联盟成员" >雷神</h5>
<h6 title="复仇者联盟成员" >黑豹</h6>
<img title="复仇者联盟成员" src="https://i01piccdn.sogoucdn.com/14307a4e44fb8fb4" alt="图片无法显示">
<p>洛基:我有一整个军队。史塔克:我们有浩克!!!
</p>
<ul>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>
<ol>
<li>
html学习
<ul>
<li>p标签学习</li>
<li>li标签学习</li>
<li>img标签学习</li>
</ul>
</li>
<li>有序列表2</li>
<li>有序列表3</li>
<li>有序列表4</li>
<li>有序列表5</li>
</ol>
<a href="https://gouwu.sogou.com/compare?p=40251500&query=-200&adsUrl=https%3A%2F%2Fm.1688.com%2Foffer%2F688707662896.html&isads=1" target="">手办</a>
<input type="text" placeholder="请输入用户名">
<input type="password" placeholder="请输入密码">
<input type="number" placeholder="请输入手机号">
<input type="color">
<input type="date">
<input type="date" >
<input type="file">
<input type="button" value="登录 input">
<!-- <input type="submit" value="登录 input"> -->
<button>登录</button>
</body>
</html>

View File

@@ -0,0 +1,36 @@
<!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>
<script>
var abc=100
console.log(abc)
</script>
<style>
.test>p {
color: blue;
}
</style>
</head>
<body>
<p class="one">这是红色文字</p>
<p class="two">这是蓝色文字</p>
<h2 class="there">哈哈哈</h2>
<input type="text" placeholder="用户名称">
<h1>你好</h1>
<div class="test">
<p>你好</p>
<p>测试</p>
<div class="nihao">
<p>不猜了</p>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,55 @@
<!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>
</head>
<body>
<div class="header">
<div class="top_center">
<div class="left">
<img src="" alt="">
<img src="" alt="">
</div>
<ul class="right">
<li></li>
</ul>
</div>
<div class="bottom">
<ul class="center">
<li></li>
</ul>
</div>
</div>
<div class="content">
<div class="center">
<img class="banner" src="" alt="">
<div class="list">
<ul class="left">
<li></li>
</ul>
<div class="right">
<div class="title">
<img src="" alt="">
<span>更多</span>
</div>
<ul>
<li></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,55 @@
<!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>
</head>
<body>
<div class="header">
<div class="top_center">
<div class="left">
<img src="" alt="">
<img src="" alt="">
</div>
<ul class="right">
<li></li>
</ul>
</div>
<div class="bottom">
<ul class="center">
<li></li>
</ul>
</div>
</div>
<div class="content">
<img class="banneer" src="" alt="">
<div class="list">
<ul class="left">
<li></li>
</ul>
<div class="right">
<div class="title">
<img src="" alt="">
<span>更多</span>
</div>
<ul>
<li></li>
</ul>
</div>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,138 @@
<!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>
</head>
<body>
<div class="header">
<div class="top">
<div class="center">
<ul class="right">
<li>
<a href=""></a>
</li>
</ul>
<div class="title">
<img src="" alt="">
<span>登录</span>
</div>
</div>
</div>
<div class="middle_center">
<img class="left" src="" alt="">
<div class="middle_1">
<div class="cearch">
<input type="text">
<button></button>
</div>
</div>
<div class="m_right">
<ul class="contact">
<li>
<img src="" alt="">
<a href=""></a>
</li>
<li>
<img src="" alt="">
<a href=""></a>
</li>
</ul>
</div>
</div>
<ul class="bottom_menu">
<li>
<ul>
<li>
<a href="">新闻</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="content">
<div class="center">
<div class="banner">
<img class="life" src="" alt="">
<ul class="right">
<li>
<img src="" alt="">
<img src="" alt="">
</li>
</ul>
</div>
<div class="news">
<ul class="advertisement">
<li>
<img src="" alt="">
<samp></samp>
</li>
<li>
<img src="" alt="">
<samp></samp>
</li>
</ul>
<div class="essay">
<div class="top">
<img src="" alt="">
<img src="" alt="">
<a href=""></a>
<ul class="bottom">
<li></li>
</ul>
</div>
<div class="hot">
<ul class="title">
<li>
<a href=""></a>
<a href=""></a>
</li>
</ul>
<ul class="story">
<li>
<img src="" alt="">
<samp></samp>
</li>
</ul>
<div class="text">
<span></span>
<a href=""></a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,91 @@
<!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>
</head>
<body>
<div class="header">
<div class="center">
<ul class="left">
<li>
<a href=""></a>
</li>
<li>
<a href=""></a>
<img src="" alt="">
</li>
</ul>
<ul class="right">
<li>
<a href=""></a>
</li>
<li>
<a href=""></a>
<img src="" alt="">
</li>
<li>
<a href=""></a>
</li>
</ul>
</div>
</div>
<div class="content">
<div class="center">
<div class="top">
<div class="left">
<img src="" alt="">
<div class="search">
<select name="" id="">
<option value=""></option>
</select>
<input type="text">
<button></button>
</div>
<img src="" alt="">
</div>
</div>
<ul class="menu">
<li>
<ul>
<li>
<a href=""></a>
</li>
</ul>
</li>
<li>
<ul>
<li>
<a href=""></a>
</li>
</ul>
</li>
<li>
<ul>
<li>
<a href=""></a>
</li>
</ul>
</li>
</ul>
<img src="" alt="">
</div>
</div>
<div class="copyright"></div>
</body>
</html>

View File

@@ -0,0 +1,73 @@
<!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>
</head>
<body>
<div class="top">
<ul>
<li></li>
</ul>
<div class="tools">
<div class="shezhi">设置</div>
<div class="denglu">登录</div>
</div>
</div>
<div class="content">
<img src="" alt="">
<div class="kuangjia">
<input type="text">
<button>百度一下</button>
<div class="hot">
<div class="tltie">
<div class="left">
<img src="" alt="">
<img src="" alt="">
</div>
<div class="right">
<img src="" alt="">
<samp>换一换</samp>
</div>
</div>
<ul>
<li>
<samp>1</samp>
<a href=""></a>
</li>
<li>
<samp>1</samp>
<a href=""></a>
</li>
<li>
111
</li>
</ul>
</div>
</div>
</div>
<ul class="copyright">
<li>
<a href=""></a>
</li>
<li>
<a href=""></a>
</li>
<li>
<a href=""></a>
</li>
</ul>
</body>
</html>

View File

@@ -0,0 +1,58 @@
<!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>
</head>
<body>
<div class="top">
<ul>
<li></li>
</ul>
<div class="tools">
<div class="shezhi">设置</div>
<div class="denglu">登录</div>
</div>
</div>
<div class="content">
<img src="" alt="">
<div class="kuangjia">
<input type="text">
<button>百度一下</button>
<div class="hot">
<div class="title">
<div class="left">
<img src="" alt="">
<img src="" alt="">
</div>
<div class="right ">
<img src="" alt="">
<span>换一换</span>
</div>
</div>
</div>
</div>
</div>
<div class="copyright">
<ul>
<li>
<span></span>
<a href=""></a>
</li>
<li>
<span></span>
<a href=""></a>
</li>
<li>
11111
</li>
</ul>
</div>
</body>
</html>

View File

@@ -0,0 +1,94 @@
<!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>
</head>
<body>
<div class="herder">
<div class="top_center">
<div class="left">
<img src="" alt="">
<ul></ul>
</div>
<div class="right">
<div class="serach">
<img src="" alt="">
<input type="text">
<span></span>
<span></span>
</div>
</div>
</div>
<div class="bottom">
<div class="center">
<ul>
<li></li>
</ul>
</div>
</div>
</div>
<div class="content">
<div class="center">
<div class="banner">
<img class="left" src="" alt="">
<div class="right">
<img src="" alt="">
<button>
<img src="" alt="">
<span>下载客户端</span>
</button>
<span></span>
</div>
</div>
<div class="hot">
<div class="left">
<div class="title">
<div class="title_ieft">
<img src="" alt="">
<ul>
<li></li>
</ul>
</div>
<div class="title_right">
<a href=""></a>
<img src="" alt="">
</div>
<ul>
<li></li>
</ul>
</div>
</div>
<div class="right">
<div class="top">
<samp></samp>
<button>登录用户</button>
</div>
<div class="botton">
<span class="left"></span>
<a class="right" href=""></a>
<ul>
<li></li>
</ul>
<button></button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,52 @@
<!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>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.menu>li {
float: left;
position: relative;
}
.two_menu {
display: none;
position: absolute;
left: 0;
width: 76px;
}
.menu>li:hover .two_menu{
display: block;
}
</style>
</head>
<body>
<ul class="menu">
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
<li>
菜单4
<ul class="two_menu">
<li>菜单1-1</li>
<li>菜单2-2</li>
<li>菜单3-3</li>
</ul>
</li>
</ul>
</body>
</html>

View File

@@ -0,0 +1,55 @@
<!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>
</head>
<body>
<div class="header">
<div class="top_center">
<div class="left">
<img src="" alt="">
<ul></ul>
<div class="iphone">
<img src="" alt="">
<span>400</span>
</div>
</div>
<img class="right" src="" alt="">
<ul>
<li>
<span></span>
<span></span>
</li>
</ul>
</div>
<ul class=" bottom">
<li></li>
</ul>
</div>
<div class="content">
<div class="center">
<ul class="menu">
<li></li>
</ul>
<img class="banneer" src="" alt="">
</div>
</div>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 231 KiB

View File

@@ -0,0 +1,48 @@
<!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{
height: 3000px;
}
.box{
width: 200px;
height: 200px;
float: left;
}
.box1{
background: red;
position: relative;
left: 20px;
top: 20px;
}
.box2{
background: green;
}
.box3{
background: yellow;
position: absolute;
}
.box4{
background: plum;
}
.box_1_1{
width: 100px;
height: 100px;
background: blue;
}
</style>
</head>
<body>
<div class="box box1">
<div class="box_1_1"></div>
</div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></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">
<title>定位案例</title>
<link rel="stylesheet" href="http://at.alicdn.com/t/c/font_3888527_o8p3rz40sn.css">
<style>
body,
ul ,li {
margin: 0;
padding: 0;
list-style: none;
}
.main {
width: 590px;
height: 470px;
background: url("https://img20.360buyimg.com/pop/s1180x940_jfs/t1/74001/5/24121/92985/63de1286F9b7604e3/068cbd26f08c101a.jpg");
background-size: cover;
}
.main {
position: relative;
}
.nav,
.main ul {
position: absolute;
}
.nav {
color: #fff;
font-size: 30px;
}
.nav {
top: 50%;
transform: translateY(-50%);
width: 100%;
}
.icon-zuojiantou-copy{
float: right;
}
.main ul li{
float: left;
width: 10px;
height: 10px;
background-color: #fff;
border-radius: 100%;
margin-left: 5px;
}
.main ul{
bottom: 26px;
left: 26px;
}
</style>
</head>
<body>
<div class="main">
<div class="nav">
<i class="iconfont icon-zuojiantou"></i>
<i class="iconfont icon-zuojiantou-copy"></i>
</div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>

View File

@@ -0,0 +1,54 @@
body{
width: 280px;
}
.recommend{
font-size: 14px;
color: #969696;
margin-bottom:15px ;
}
.refresh{
font-size:14px ;
color: #787878;
}
.text li .introduce{
width: 48px;
height: 48px;
border-radius: 100%;
margin-right: 10px;
}
.text .author .name{
font-size: 14px;
color:#333 ;
margin-top: 5px;
}
.text .author .statistics{
font-size: 12px;
color: #969696;
margin-top: 4px;
}
.text .follow{
font-size:13px ;
color: #42c02e;
margin-top: 9px;
}
.text li{
overflow: hidden;
margin-bottom: 15px;
}
.all{
height: 35.07px;
background: #f7f7f7;
border: #f7f7f7;
border-radius: 10px;
font-size: 13px;
color: #787878;
line-height: 35.07px;
text-align: center;
}
.all .icon-zuojiantou-copy{
font-size:12px ;
}

View File

@@ -0,0 +1,118 @@
<!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="../2.10/clear.css">
<link rel="stylesheet" href="../2.10/public.css">
<link rel="stylesheet" href="./简书布局.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/c/font_3888527_347blb5tppq.css">
<body>
<div class="main">
<div class="list hidden">
<div class="recommend left">推荐作者</div>
<div class="refresh right">
<i class="iconfont icon-shuaxin"></i>
换一批
</div>
</div>
<ul class="text">
<li>
<img class="left introduce
"
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="left author">
<div class="name ">卢璐说</div>
<div class="statistics">写了2215.2k字 · 34.7k喜欢</div>
</div>
<div class="follow right">
<i class="iconfont icon-jiahao"></i>
关注
</li>
<li>
<img class="left introduce
"
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="left author">
<div class="name ">卢璐说</div>
<div class="statistics">写了2215.2k字 · 34.7k喜欢</div>
</div>
<div class="follow right">
<i class="iconfont icon-jiahao"></i>
关注
</li>
<li>
<img class="left introduce
"
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="left author">
<div class="name ">卢璐说</div>
<div class="statistics">写了2215.2k字 · 34.7k喜欢</div>
</div>
<div class="follow right">
<i class="iconfont icon-jiahao"></i>
关注
</li>
<li>
<img class="left introduce
"
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="left author">
<div class="name ">卢璐说</div>
<div class="statistics">写了2215.2k字 · 34.7k喜欢</div>
</div>
<div class="follow right">
<i class="iconfont icon-jiahao"></i>
关注
</li>
<li>
<img class="left introduce
"
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="left author">
<div class="name ">卢璐说</div>
<div class="statistics">写了2215.2k字 · 34.7k喜欢</div>
</div>
<div class="follow right">
<i class="iconfont icon-jiahao"></i>
关注
</li>
</ul>
<div class="all">
查看全部
<i class="iconfont icon-zuojiantou-copy"></i>
</div>
</div>
</body>
</html>