list-style-type: none;
是 CSS 的一条规则,用于移除 HTML 列表项前面的标记(例如圆点、数字等)。
例如,在 HTML 中,<ul>
或 <ol>
标签定义了一个列表。默认情况下,浏览器会为列表中的每个项目添加标记(例如 <ul>
中的圆点,<ol>
中的数字)。
使用 list-style-type: none;
可以移除这些默认的标记,使得列表看起来更简洁。
margin:0;padding:0
是 CSS 中的一种常用的样式设置,用于将元素的边距(margin)和内填充(padding)设置为零。
-
margin: 0;
是设置元素的外边距为零。在 CSS 中,margin
是用来控制元素与其周围元素的距离。当设置为 0 时,元素会紧贴其周围的元素,没有任何间距。 -
padding: 0;
是设置元素的的内填充为零。padding
是用来控制元素内部与其边框的距离。当设置为 0 时,元素的内容将紧贴其边框,没有任何间距。
float: none;width: auto
是 CSS 中的一种样式设置,用于取消元素的浮动效果并将其宽度设置为自动。
-
float: none;
是设置元素的浮动效果为无。在 CSS 中,float
属性用于让元素向左或向右浮动,通常用于排版。设置为none
则表示取消元素的浮动效果,让元素回到默认的布局行为。 -
width: auto;
是设置元素的宽度为自动。在 CSS 中,width
属性用于设置元素的宽度。设置为auto
表示元素的宽度将根据其内容、内边距(padding)、边框(border)等自动计算,而不是固定为一个特定的值。
overflow: auto;
是 CSS 中的一种属性设置,用于控制当内容溢出一个元素的框时如何处理溢出的内容。
overflow
属性有四个主要的值:
-
visible
:这是默认值。如果内容被剪裁,它仍然会显示在元素的框外。 -
hidden
:如果内容被剪裁,它不会显示在元素的框外。这是最简单的防止内容溢出的方法。 -
scroll
:如果内容被剪裁,它仍然会显示在元素的框外,但浏览器会显示滚动条以便查看全部内容。 -
auto
:浏览器将根据内容决定是否添加滚动条。如果内容超出了元素的框,浏览器将显示滚动条。
font-weight: bold;
是 CSS 中的一个属性设置,用于定义文本的粗细。
font-weight
属性用于设置字体的粗细。该属性的值可以是 normal
,bold
,bolder
,lighter
,或者是从 100
到 900
的数字。
-
normal
: 这是默认的字体粗细。 -
bold
: 这会使字体变粗。 -
bolder
: 这会使字体比其父元素的字体更粗。 -
lighter
: 这会使字体比其父元素的字体更细。 -
100
到900
: 这些数字代表了不同的粗细等级。100
最细,900
最粗。
<header>
头部。 标签通常被用来包含网站的标题、标语、导航栏等内容。
<article>
内容。 标签用来表示一个独立的内容单元,通常包含一些文章、新闻故事或其他可以自我包含的内容。
<aside>
侧边。 标签用于表示与周围内容稍微有关的内容,通常这些内容与页面的主要内容部分相关。它通常被用来放置与主要内容相关的辅助信息,如侧边栏、广告等
<footer>
底部。 通常用于包装一个页面或部分的底部内容,例如版权声明、导航链接等。
.flex-container > * { padding: 10px; flex: 1 100%; }
flex: 1 100%;
这是Flexbox布局的属性,它表示子元素将等比例地占据可用空间。具体来说,flex: 1
是指每个子元素都有相同的弹性(flex),而 100%
是指每个子元素都尽可能地占据整个可用空间。
flex: 1 auto;
auto:这是 flex-shrink 的值,表示这个子项的最小尺寸。auto
表示这个子项将尽可能地缩小以适应其内容的大小,但不会缩小到小于其最小尺寸。
@media all and (min-width: 800px) {}
-
@media
:这是一个 CSS 规则,用于定义媒体查询。这意味着我们正在定义一个规则,该规则只在满足特定媒体条件的情况下应用。 -
all
:这是媒体类型。all
表示这个媒体查询应用于所有设备。 -
and
:这是一个连接词,表示接下来的条件必须与前面的条件同时满足。 -
(min-width: 800px)
:这是一个媒体特性,检查设备的视口宽度是否至少为 800 像素。如果设备的视口宽度大于或等于800像素,那么这个媒体查询的条件就满足。
flex: 3 0px;
-
3
:这是 flex-grow 的值,表示这个子项将按比例占用额外的空间。3
表示这个子项将占用父容器可用空间的3倍。 -
0px
:这是 flex-shrink 的值,表示这个子项的最小尺寸。0px
表示这个子项不会缩小到小于0px。
text-decoration: none;
是一个CSS样式规则,用于去除文本的装饰。在HTML中,文本经常会有下划线、上划线、删除线等装饰效果,这些被称为文本装饰。
text-align: center;文本居中
type
这不知道什么东西
-
text # 正常展示的普通文本 placeholder:提示文本 value:默认值 name:名称 readonly:只读,布尔属性 required:必须输入,布尔属性 disabled:不可用,布尔属性,input,select,textarea的通用属性 minlength:最小长度,提交时判定 maxlength:最大可输入的长度 pattern:正则匹配 antocomplete :自动记录输入,以后输入时可以自动选择完成。可选值为on/off,默认on
用户名: <input type="text" name="name">
-
password # 密文展示 属性和text一样,主要区别是,会自动隐藏输入的内容 密码: <input type="password" name="pwd">
-
date # 日历展示 生日: <input type="date" name="birthday">
-
radio # 单选 (1)可以通过添加checked="checked"设置默认值 ps:如果属性名和属性值相同 可以简写checked (2)name:名称,必须有,相同name的单选会作为一组,会相互排斥 (3)value:选项对应的值
性别: 男<input type="radio" name="gender" value="male"> 女<input type="radio" name="gender" checked value="female"> 其他<input type="radio" name="gender" value="others">
-
checkbox # 多选 可以产生多选框,也可以通过添加checked="checked"设置默认值 爱好: 篮球<input type="checkbox" name="hobby" value="basketball" checked> 足球<input type="checkbox" name="hobby" value="football"> 排球<input type="checkbox" name="hobby" value="volleyball" checked>
-
email # 邮箱格式数据 邮箱:<input type="email" name="email">
7.file # 文件数据 用于添加文件数据,可以通过添加multiple属性控制获取单个还是多个文件 <p>单个文件: <input type="file" name="single_file"> </p> <p>多个文件: <input type="file" multiple name="files_list"> </p>
-
submit # 触发form表单提交数据 <input type="submit" value="注册">
-
reset # 重置页面填写的数据 <input type="reset" value="重置">
-
button # 普通按钮没有任何功能 意味着以后可以给它添加任意的功能(JS事件) <input type="button" value="普通按钮">
-
image # 图片按钮 作用同提交按钮一样,只是用属性src替换了value,表示图片地址
-
displayblock作用:
1、可以改变元素的显示类型;
2、可以用于控制元素的尺寸;
3、具有盒模型的特性。
-
CSS 的 content 属性
用于在元素的内容之前或之后插入生成内容。可以用来在元素中插入文本、图像或其他元素。它主要用于为伪元素(::before 和 ::after)添加内容。
其中,常用的值有:
-
content: ""
(空字符串) 用于清除元素的内容 -
content: "string"
用于在元素中插入文本 -
content: url(image.png)
用于在元素中插入图像 -
content: counter(counterName)
用于在元素中插入计数器 -
content: attr(attributeName)
用于在元素中插入属性值 -
content: none
用于不显示任何内容
-
-
设置 transform:scale(1,1); 样式 ,
表示 盒子模型 宽高 都放大了一倍 , 也就是不变 ; 设置 transform:scale(2,2); 样式 , 表示 盒子模型 宽高 都放大了 2 倍 ; 设置 transform:scale(0.5,0.5); 样式 , 表示 盒子模型 宽高 都缩小到 0.5 倍 ;
如果 scale 只设置一个参数 , 那么就是同时对 宽高 缩放相同的倍数 , 如 : 设置 transform:scale(2); 样式 ,表示 盒子模型 宽高 都放大了 2 倍 , 相当于 transform:scale(2,2); 样式 ;
-
方法:1、给元素添加“background-color:rgba(R,G,B,A)”样式来设置颜色透明度; 2、给元素添加“opacity:透明值;”样式来设置透明度; 3、给图像设置“filter:opacity(%);”样式来透明度。
-
transform: translateY(50px,100px); 【水平右移50,垂下移100】
-
overflow:hidden;【隐藏超出盒子大小的内容】
-
倾斜30度 font-style: oblique 30deg; 倾斜 font-style: italic;
-
居中 style="margin: 0 auto" text-align: center
-
/* 实现通过:hover使图片产生缩放动画 / img:hover{ transform: scale(1.2); / 图片放大1.2倍 / transition: transform .5s; / 过渡效果持续0.5秒 / } / 实现通过keyframes让图片做环形旋转动画 / @keyframes circle { 0% { transform: rotate(0deg); } / 旋转角度为0度 / 100% { transform: rotate(360deg); } / 旋转角度为360度,即一圈 / } img{ animation: circle 2s infinite linear; / 持续2秒,重复执行,线性过渡 / } / 实现通过hover让图片做闪烁动画 / img:hover{ animation: blink 1s linear infinite; / 持续1秒,无限重复执行,线性过渡 / } / 设置图片动画 / @keyframes blink { from, to { opacity: 1; } 50% { opacity: 0; } / 透明度为0,闪烁效果 */ }
<!-- action 控制数据的提交地址 method 网络请求方式 get请求: 朝服务端索要数据 value 如果标签是选择类型的,用于区分具体数据含义 input 获取用户各中类型数据的标签 text 正常展示的普通文本 names 标识表单字段 wd 用于键值对提交 placeholder 提示文本 button 按钮,在form中使用时有提交功能, 和<input type="submit">的功能一样, 标签的文本即是按钮的提示文字 --> <form action="http://www.baidu.com/s" method="get"> <input type="text" name="wd" value="" placeholder="请输入内容"> <button type="submit" class="find">搜索</button>