1、htmlCSS笔记

最新推荐文章于 2023-10-18 18:51:24 发布
最新推荐文章于 2023-10-18 18:51:24 发布
阅读量297 收藏 4
点赞数
分类专栏： HTML 文章标签： HTML CSS 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45699925/article/details/103005950
版权

1、html的基础标签

1、表单标签

 <form action="" method="get">
        <input type="text" autocomplete="off" name="userName" placeholder="请输入用户名" id="" value=""/>
        <input type="password" autocomplete="off" name="passWord" placeholder="请输入密码" id="" value=""/>
        <input type="submit" value="登录"/>
 </form>

内容：

1、action: 将表单内的数据提交到该地址路径

2、method:提交方法

get方法：直接将填入表单的数据放到链接地址上，可以直接查看，属于明文。不安全，但效率高
post方法：将表单的数据放置到请求的body里面，不能直接查看，安全但是效率没有get高

3、input标签

type:定义输入标签的类型

name：提交数字据的名称

autocomplete:输入历史是否保留

placeholder:输入框中预置的文字

value：提交数据的输入框中的值

2、滤镜属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			img{
    
				width: 400px;
				height: auto;
				display: block;
				margin: 0 auto;
				transition: all 3s;
				
			}
			img:hover{
    
				-webkit-filter:none;
			}
			.img1{
    
				/* 滤镜属性
				 * grayscale:设置灰度，1是百分之百，0 百分之0
				 *  */
				-webkit-filter: grayscale(1);
				
			}
			.img2{
    
				/* 滤镜属性
				 * brightness:亮度,默认值是1，正常亮度
				 *  */
				-webkit-filter: brightness(2);
			}
			.img3{
    
				/*褐色属性
				 sepia：1百分之百褐色，正常为0
				 * */
				-webkit-filter: sepia(0);
			}
			.img4{
    
				/*模糊度
				  blur:单位像素
				 * */
				-webkit-filter: blur(50px);
			}
			.img5{
    
				/*模糊度
				  contrast:对比度，正常就是1，如果调成0，就没有任何对比度，变为灰色
				 * */
				-webkit-filter: contrast(1);
			}
			.img6{
    
				/*饱和度
				  saturate:对比度，正常就是1，如果调成0，就没有任何对比度，变为灰色
				 * */
				-webkit-filter:saturate(1);
			}
			.img8{
    
				/*色相旋转*/
				-webkit-filter: hue-rotate(0deg);
			}
			
			.img9{
    
				-webkit-filter: blur(10px) brightness(10) grayscale(1);
				transition: all 15s;
			}
			.img9:hover{
    
				-webkit-filter: blur(0px) brightness(1) grayscale(1);
			}
		</style>
	</head>
	<body>
		<img class="img1" src="img/hejong.jpg" >
		<img class="img2" src="img/hejong.jpg" >
		<img class="img3" src="img/hejong.jpg" >
		<img class="img4" src="img/hejong.jpg" >
		<img class="img5" src="img/hejong.jpg" >
		<img class="img6" src="img/hejong.jpg"/>
		<img class="img7" src="img/hejong.jpg"/>
		<img class="img8" src="img/hejong.jpg"/>
		<img class="img9" src="img/hejong.jpg"/>
	</body>
</html>

2、Css基础

1、css的引用

	<!--     css的使用-->
	<!--    1、通过style标签设置样式-->
	<div id="d2" style="color: pink;font-size: 100px;">
		hello-world2
	</div>

	<!--    2、通过style属性设置样式-->
	<style type="text/css">
		#d2 {
    
			color: yellow;
			font-size: 100px;
		}
	</style>
	<!--    3、通过引入CSS文件设置样式-->
	<link rel="stylesheet" href="css/01.css"/> 

	<!--    注意-->
	<!--    1、直接在style上写的内容优先级最高。对于相同的选择器，后面覆盖前面。-->
	<!--    2、继承的样式<浏览器模式的样式<标签样式<class样式<id样式<style属性样式。-->
	<!--    3、在属性后面使用important,!important具有最高优先值。-->
	<!--    4、div#d1  中间没有空格，说明选择id是d1的div。-->

2、伪元素

默认是行元素

<style>
div:before{
    
    /*content必须要有*/
	/* content:"before的内容" */
   /* 在li元素内部创建一个最前面的假的子元素*/
	content: "";
}
div:after{
    
    /* 在li元素内部创建一个最后面的假的子元素/* 
	/* content:"after的内容" */
	content: "";
}
</style>

3、Css的选择器

1、选择器
<div class=''name'' id=''name''>
   class选择器通过 .name来选择
   id选择器通过 #name 来选择
2、子元素选择器
当存在n个相同的子元素如<li>时
第n个li元素选择    	li: nth-child(n)
最后一个li 元素选择      li:last-child
第一个li 元素选择      li:first-child
3、属性选择器
<div data-scr='abc''></div>
 <div data-scr='bcd''></div>
 <style>
  [data-scr]{
    }  选择全部的data-scr div进行设置
  [data-scr=''abc'']{
    } 选择data-scr中属性名为abc的div进行设置
 </style>
4、直接子元素
.class>div   选择class下的直接div，隔代不选
5、选择跟在某个元素后面的那个元素
.class+div   仅仅选择class后面的哪一个div
6、选择某个元素后面的多个元素
.class~div   选择class下的全部div

4、浮动

1、浮动可以解决文字包围图片的问题。

2、浮动可以解决莫名奇妙的间隔问题。

3、浮动可以向左，向右进行排版对齐。

4、浮动：可以设置元素，脱离正常的文档流，向左或者向右，靠近父元素的边缘或者是设置了浮动的其他的元素的边缘靠拢。

5、浮动

 <style>

  div{float:  }  float属性： left  right

 <style/>

6、莫名其妙的间隔问题

7、高度塌陷问题

 ①、设定父元素高度

 ②、最佳解决方案，伪元素清除浮动

 给父元素增加一个伪元素  通过清除该伪元素的浮动来达到撑开父元素的目的  比如父元素为div 

 .div:after {content:""; display:block; clear:both; }

5、字体

font-size:   设置字体的大小
font-weight: 设置字体的粗细100-900
font-family:"微软雅黑" 设置的字体必须在系统里面试存在的，如果没有这个字体，就会默认按照系统字体样式显示
color 设置字体的颜色
font-style 设置字体的样式
text-align  设置文字的行高

6、过渡动画

​

1、过渡效果的综合性设置
 transition: all .5s;
 可以单独设置一个值，也可以用all设置全部的值

2、过渡效果分开设置
 transition-property: all ; 过渡的属性设置  property
 transition-duration: ; 过渡的时间设置  duration
 transition-timing-function: ;  过渡动画变化的速度 默认ease  线性 linear
 transition-delay: ; 设置过渡动画延迟的时间  delay 延迟

7、css的转换

1、旋转
 transform: rotate3d(1, 1, 1, 0deg);   
 进行旋转

2、移动
 transform: translate(x,y); 
 x代表水平移动距离px, y代表垂直移动距离

3、3d的旋转和移动  需存在透视点
 perspective : 1000px; 进行透视点的设置，父元素
 transform: rotateZ(45deg); 然后旋转Z轴
 transform: translateX(500px); 在X轴移动500px

4、保留3d效果
 transform-style: perserve-3d; 
 设置transform-style: perserve-3d能够保留子元素的3d效果

5、透明度设定opacity
 opacity: 0.5;

8、动画选项框的绑定

1、使用label绑定选项框
 <input type="radio" name="color" id="yellow" value="yellow">
 <input type="radio" name="color" id="green" value="green">
 <input type="radio" name="color" id="red" value="red">
 <label class="btn" for="yellow">
 绑定了yellow按钮
 </label>

2、check状态的使用
 <input type="radio" name="color" id="yellow" value="yellow">
 <input type="radio" name="color" id="green" value="green">
 <input type="radio" name="color" id="red" value="red">
 <div class="d1"></div>

 <style>
  #yellow:checked~.d1 {
     background-color: yellow;}  选择后d1变yellow
  #green:checked~.d1 {
     background-color: green;} 选择后d1变green
  #red:checked~.d1 {
     background-color: red;} 选择后d1变red
 </style>

9、定位

1、固定定位
 position: fixed;
 right: ;
 top: ;

2、相对定位   
 position: relative;
 right: ;
 top: ;

3、绝对定位
 position: absolute;  父元素有定位时  以父元素为模板   子绝父相
 right: ;
 top: ;

4、粘性定位
 position: sticky;
 

10、动画

1、动画的综合性设置
 animation:;

2、选择动画名称
 animation-name: ;

3、动画持续时间
 animation-duration:;

4、动画循环次数
 animation-iteration-count: infinite; 无限次的

5、动画随时间运动的函数
 animation-timing-function: linear; 线性的

6、动画延迟的时间
 animation-delay: 2s;

7、动画的运动方向
 animation-direction: ;
 normal 默认值
 alternate 奇数次正常运动，偶数次反方向运动.
 reverse  反向运动
 alternate-reverse 奇数次反方向偶数次正方向运动

8、停止时让动画保留最后一帧。
 animation-fill-mode: forwards;

11、字体图标弹性布局响应式移动端

1、字体图标

  1、字体图标：
       优点：1、占用带宽小，不会失真，可以随便调节字体大小以及颜色。

       Unicode引用，Unicode是字体

           ①兼容性最好，支持 IE6+，及所有现代浏览器。

           ②支持按字体的方式去动态调整图标大小，颜色等等。

           ③但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。

           注意：
最低0.47元/天 解锁文章
瓜娃子qaq
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML之插入图片及多媒体页面和表单
qq_2992427261
07-21 4246
图像标记 ----img 在 HTML 4.01 中，不赞成使用以下布局属性：align, border, hspace、vspace。在 HTML5 中不支持这些属性。 属性有； width，height:图片的高度 src:图片的位置 alt:提示文字 usemap:映像地图 多媒体《embed》 可以加入视频。 bgsound设置背景音乐。 属性： src:设置文件位置 loop:...
html+css笔记总结1
08-04
HTML 和 CSS 是网页设计的基础，本笔记主要涵盖了HTML和CSS的一些关键知识点，包括元素的布局、样式设置以及一些实用技巧。 1. **padding, border, margin的关系**：这三者决定了元素的尺寸和间距。`width` 和 `...
HTML input框里加图标
m0_57444344的博客
08-17 2945
Html input框里加小图标
input框前面加上图标
努力奔跑的小不点
08-05 3234
实现效果如图： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *, html, body{ width:100%; height:100%; margin:0 auto; box-sizing: border-box; }
在input框之前添加图标
热门推荐
MPFLY的博客
10-16 1万+
在input框之前添加图片，想到了三种方法。 第一种，添加input背景图片，实现起来很简单，但是要求必须将图片放到输入框的右侧，否则会出现文字和图片重合的问题，现在自己暂时还不能解决此问题。下面是代码：#password{ width: 200px; height: 35px; outline: none; border: 1px s
当前元素前面添加html,如何在元素内容前后加图标
weixin_36256447的博客
06-19 321
大家最常用作图标的元素是i标签，为什么呢？用 元素做图标在语义上是不正确的(虽然看起来像 icon 的缩写)； 比 短，但 gzip 后差异很小，不过打字可以少按三个键；多数图标用的是空 元素，配合 ::before 伪元素实现，因为没有内容，读屏器不会朗读(这样即使有特殊处理也跳过了)，机器理解起来应该也没什么影响。综合来看，从实用性上暂时没看出有什么缺陷，所以目前用不用 取决于你对于遵...
element-ui控件el-input中前面添加icon图标
xiaoming4965的博客
01-17 4243
el-input中前面添加icon图标
黑马html+css笔记
08-03
黑马HTML+CSS笔记 本资源主要讲解HTML的基础知识，包括HTML的基本语法、网页组成、标签关系、注释、标题标签、段落标签、换行和水平线、文本格式化标签、图像标签、路径、超链接标签、音频和视频等知识点。 1. ...
html css笔记
01-27
html css 笔记
JS Input里添加小图标的两种方法
10-19
大家在做网站的时候，经常需要在input里面添加小图标功能，看似功能很简单，但是实现起来还是有点技巧的，下面小编给大家介绍下JS Input里添加小图标的两种方法，需要的朋友参考下吧
html css js 学习笔记.zip
12-30
html css js 学习笔记html css js 学习笔记html css js 学习笔记 html css js 学习笔记html css js 学习笔记html css js 学习笔记 html css js 学习笔记html css js 学习笔记html css js 学习笔记 html css js 学习...
使用JS删除HTML元素的两种方法
sejinan的博客
10-18 4235
使用removeChild()方法删除HTML元素。：使用remove()方法从文档中删除HTML元素。
html如何添加或删除元素,添加删除元素.html
weixin_39877581的博客
06-24 575
// JavaScript DocumentArray.prototype.has = function(e){for(var i in this){if(this[i]===e)return true;}return false};Array.prototype.each = function(fn){for(var i=0,l=this.length;iArray.prototype.merg...
HTML数组的基本操作(增删改查、删除重复元素)
测试
06-27 667
一、创建数组 var testArray = new Array(); 二、数组中添加元素 　　1）在数组的开头添加新元素 - unshift() var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.unshift("Lemon","Pineapple"); //结果： Lemon,Pinea...
input前面的小图标。 可以加在后面。前面后面都可以。位置可调。
xinhuazhongxue的博客
08-30 4629
登录框input 前面增加一个小图标 效果如图： 核心样式： background:url("…/images/slider-pic/yh.png") no-repeat scroll .35rem center transparent ; .35rem： 这个个地方可以调整位置。 可选的值： left right 固定的值 数字都可以。 no-repeat: 重复关闭。只显示一个图标 ...
我与 CSDN 这几年，当技术遇到 CSDN，开启人生新篇章
Shids_的博客
01-13 9493
我与 CSDN 这几年，当技术遇到 CSDN，开启人生新篇章
html密码框怎么添加小图标,JS Input里添加小图标的两种方法
weixin_39777488的博客
06-04 1630
我们在做网页的时候，经常需要在input里面添加小图标，那么这里就介绍比较常见的两种方法。方法一将小图标当做input的背景来插入，直接上代码吧：*{margin: 0;padding: 0;}input{border: none;}.box{height: 50px;background: yellow;}.box input{width: 200px;height: 30px;border-r...
input如何添加图标
此去经年的博客
08-09 4703
代码：<input type="text" class="user" /> 设置class类属性，添加小图标。创建<style>标签，然后在这个标签里面设置user样式。 1.使用background-image设置input背景图片； 2.background-size设置背景图片的大小； 3.background-positi...
黑马pink老师html css笔记
最新发布
05-31
他的HTML/CSS笔记主要分为以下几个部分： 1. HTML基础部分：介绍HTML的基本概念、标签、元素、属性、语义化标签等知识点，并通过案例演示如何搭建一个基本的网页结构。 2. CSS基础部分：介绍CSS的基本概念、选择器...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值