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,28 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>搜索框</title>
<style>
input {
border-radius: 29px;
border: 1px solid #f2f2f2;
background: #f2f2f2;
font-size: 13px;
padding: 7px 7px;
background-image: url("./sss.png");
background-size: 25px 25px;
background-repeat: no-repeat;
background-position: 107px center;
outline: none;
}
</style>
</head>
<body>
<input type="text" placeholder="搜索">
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.7 KiB

View File

@@ -0,0 +1,74 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css属性练习</title>
<style>
.dddd {
font-size: 80px;
font-weight: bolder;
font-family: fantasy;
font-style: oblique;
text-align: center;
letter-spacing: 35px; /* 设置字符间距 */
line-height: 60px;
}
div {
height: 60px;
}
span {
vertical-align: middle;
}
.box {
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
.box p {
font-size: 15px;
}
.tm {
opacity: 0.5; /* 0 ~ 1*/
}
.box-2 {
width: 400px;
height: 400px;
/* background: #c65050; */
background-image: url('https://upload-images.jianshu.io/upload_images/538-efa040828af14c4e.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp');
background-size: 134px 98px;
background-repeat: no-repeat;
background-position: 19px 21px;
border: 30px solid #747474;
box-shadow: 10px 38px 1px #e33c3c;
border-radius: 300px 50px 60px 10px;
/* border-width: 30px;
border-style: solid;
border-color: #747474; */
}
</style>
</head>
<body>
<div>
<span>测试</span>
<a href="">dedede</a>
</div>
<p class="dddd">
这是font字体这是font字体这是font字体这是font字体这是font字体这是font字体这是font字体这是font字体这是font字体这是font字体这是font字体这是font字体这是font字体这是font字体
</p>
<div class="box">
<p>居中文字</p>
</div>
<img class="tm" src="https://upload-images.jianshu.io/upload_images/538-efa040828af14c4e.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp" alt="">
<div class="box-2">
背景测试
</div>
</body>
</html>

View File

@@ -0,0 +1,49 @@
text-indent: 首行缩进 30px;
line-height: 做元素的垂直居中
前提:文本标签在 块元素中垂直居中
限定:单行文字居中
outline: none; 清除输入框外边的线
text-decoration清除下划线
text-shadow: 设置文字阴影
box-shadow设置div块元素阴影
list-style: 设置 ulol里面的li的圆点样式风格 none
display: 行内标签和块级标签实现相互转换
inline
block
inline-block
none 将元素隐藏
不适合:网站最外层搭建结构的时候使用,因为元素间会有边距
float 浮动
overflow: 规定元素超过父容器后如何排列,显示
hidden 超过部分隐藏
scroll 超过部分滚动
overflow-x
overflow-y
visibility 决定元素是否可以被看见
hidden
animation
@media
尺寸与补白
排除 marginpadding
box-sizing