【HTML】笔记

本文详细介绍了HTML的各种样式和布局技巧,包括链接伪类、背景图像与颜色、定位方式、表格与表单的处理,以及过渡、动画和媒体查询等。通过实例展示了如何创建滚动字条、设置背景图片、解决IE兼容性问题,以及利用CSS实现响应式设计。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

a:hover{
		color:red;
		font-size:20px;
	}
链接字体颜色大小
<marquee></marquee>滚动字条
<hr> 分割线
&nbsp; 空格
<img src=""> 插入图片
<embed src=""> 插入视频
float:left;
padding-right:0.5px;
图片悬浮 与文字间距
title:显示图片名称alt
设置背景颜色,transparent表示透明:{background-color:transparent|color}
插入背景图片:background-image: url(84039d9d4c68de1dab34f6f5c4_560.jpg)
背景图片重复:background-repeat:repeat水平和竖直方向都平铺
                       repeat-x水平平铺    repeat-y竖直平铺  no-repeat不重复平铺
背景图片显示:background-attachment:fixed固定在页面的可见区域里
                       scroll随页面一起滚动
背景图片位置:background-position legth设置图片与边距水平和垂直方向的距离
                       percentage以页面元素框的宽度或者长度的百分比放置图片
                      top,center,bottom,left,right
背景图片大小:background-size:length percentage,cover,contain
边框样式:    border-style:dashed破折线 dotted点线 solid直线 double双线 groove              槽线式 Ridge脊线式 inset内嵌 outset突起效果
                    border-width线宽


超级链接伪类:a:link未被访问时的样式
                         a:hover鼠标悬停时的样式
                         a:active激活时的样式
                         a:visited被访问过的样式
鼠标样式:auto自动   crosshair精确定位十字   default默认鼠标指针
                   hand手形   move移动       help帮助     wait 等待   text文本
                 n-resize箭头朝上双向        s-resize箭头朝下双向
                 w-resize箭头朝左双向        e-resize箭头朝右双向
                 ne-resize右上    se-resize右下     nw-resize左上   sw-resize左下
                 pointer指示  url自定义

*父元素只设置了宽,没有设置高,子元素浮动,使父元素包住子元素的方法
1.父级元素设为inline-block,缺点是margin:0 auto;失效,用text-align:center居中
2.父级元素也浮动,缺点是margin:0 auto失效
3.父级元素设置高
4.设置br标签 <br clear="all"/> 不推荐使用
5.clear:both;父元素后面加<p style="clear:both"></p> 不符合标准
6:父元素:after{content:"";display:block;clear:both;}
*定位的三种特性
相对定位 relative
1.不影响本身特性
2.不使元素脱离文档流
3.提升层级
4.无法触发bfc
5.针对自己本身进行定位
绝对定位 absolute
1.会是元素完全脱离文档流
2.内容撑开宽度和高度
3.使元素支持所有CSS样式
4.提升层级
z-index:数值 定位层级设置 数字越大层级越高
5.绝对定位要和相对定位配合使用
6.如果有定位父级,针对定位父级发生偏移,没有定位父级,针对document进行偏移
7.如果绝对定位的子级有浮动,可以省略清除浮动
固定定位 fixed
1.不兼容IE6
2.针对窗口定位
*兼容性
1.在IE下大部分兼容性都是因为haslayout属性触发的问题,尽量触发haslayout属性 zoom:1;可以触发, 在IE下父级有边框时,子元素margin会失效,需要触发父级haslayout属性。
2.盒子模型数据要精准
3.IE6下双边距的bug:块元素有浮动,横向margin值会扩大二倍,解决方法:display:inline
4.margin-left 一行中左侧第一个元素有双边距  display:inline
5.在IE6,7下,li本身没有浮动,li里面内容有浮动,li下会产生一个间隙。解决:给li加浮动。或者加vertical-align:top
6.当一行子集元素之和与父级的宽度相差3px,或者子级元素不满行的情况,最后一行子级元素的margin-bottom会失效。
7.文字溢出bug:子元素的宽度和父级的宽度如果相差小于3px的时候,两个浮动元素中间有注释或者内联元素,就会出现文字溢出,内联元素越多,溢出越多。解决:用div把注释或内联元素包起来。
8.在IE6下,当浮动元素和绝对定位元素是兄弟元素时,绝对定位会失效。解决:不让浮动元素和绝对定位元素是兄弟关系,用div或其他标签把绝对定位元素包起来。
9.在IE6,7下,子级元素有相对定位,父级元素overflow包不住子级元素。解决:给父级也添加相对定位
10.在IE6下,如果绝对定位的父级宽高是奇数时,子级元素的right和bottom值会有1px偏差
11.透明度:filter:alpha(opacity=50)
12.在IE6,7下,输入型的表单标签上下会有1px间隙,解决:给input加浮动
13.<!--[if ie 6]>我是IE6<[!endif]-->在IE6下显示“我是IE6”
14._background或*background ie6支持, +background ie7支持,  \9 :ie10之前的IE解析
*表格
1.清除默认样式table{border-collapse:collapse;} td,th{padding:0;}
2.特性:单元格默认平分,th默认加粗,水平垂直居中;td默认不加粗,垂直居中;td,th宽度大于table不管用;如果th,td没有设宽度,表格同一列继承最大宽度(行同理);display:table
3.合并单元格:colspan="数值"(横向) rowspan="数值"(纵向) 数值代表合并数量,被合并的单元格必须删掉
*表单
<form action="提交地址" method="提交方式" target="">
<input type="text/password/submit/radio(单选)/checkbox(多选)/file/bottom/hidden/reset" name="一定要设置"/>
</form>
get::在地址栏做内容的拼接,用户看得到
post:把表单元里面的内容做拼接,并且打包传送到action的地址,用户看不到
target:_blank新窗口打开 -self当前窗口
lable嵌套实现点击文字也可以选中选项<lable><input/></lable>或<lable for="id"></lable><input id="id"/>
<select name="" id=""><option value="河北">河北</select>
<textarea name="" id="" cols="" rows="">中国不是、、</textarea>
清除默认样式:input{margin:0;padding:0;}
option{padding:0;}
textarea{padding:0;resize:none;outline:none;}
*背景图尺寸background-size
1.具体数值
2.百分比
3.cover
4.contain
背景裁切:background-clip:(需要rgba配合-透明度)
1.border-box:从边框开始显示背景
2.padding-box:从padding区域开始显示背景
3.content-box:从内容区域开始显示背景
4.text:从文本区域显示背景
线性渐变IE9以下不支持,加内核前缀
linear-gradient(90deg角度,颜色,颜色.....);颜色后面可以加宽度确定区域
制作光斑:
linear-gradient(
rgba(255,255,255,0) 100px,
rgba(255,255,255,1) 120px,
rgba(255,255,255,1) 140px,
rgba(255,255,255,0) 160px,
rgba(255,255,255,0) )
角度:模糊的值或具体的数值(to right,to left,to  top,to bottom)角度指水平线与渐变线之间的角度,逆时针方向
非标准下(有内核前缀)90-x=y;x标准角度,y非标准角度
1.radial-gradient(circle at center,red,yellow,blue)从圆心开始渐变
括号里的第一个值:圆心位置或者圆的形状circle(默认为椭圆),可以是模糊的值,也可以是具体的数值
模糊的值:at center/left/rigth/top/bottom
具体的数值:x偏移量 y偏移量
颜色可以通过具体的数值规定渐变的范围,具体数值可以是100px或者百分比
标准下加 circle at
标准之前没有设置(即有内核前缀)
2.重复的渐变repeating-linear-gradient
盒阴影
box-shadow:inset(内阴影)10px右边阴影宽 10px下边阴影 30px阴影程度 red颜色(可以不断增加)
字阴影
text-shadow 
蒙版
目前只有-webkit-内核支持,需要PNG的透明度遮罩,
-webkit-mask:url();
和背景设置一样,可以设置多个PNG为模板
倒影
只有-webkit-内核支持
-webkit-box-reflect:left/right/below/above
第二个值:倒影与本体之间的距离
第三个值:渐变,可以是透明度的渐变,也可以是PNG透明的图片链接
*媒体查询
当屏幕发生变化,根据设置的最大宽度或最小宽度时,读取大括号中的代码
@media screen and( 当屏幕发生变化,最大宽度到达某个值的时候,如max-width:960px ){执行以下代码}
viewport布局百分比<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maxmum-scale=1.0,user-scalable=no">
width:控制viewport的大小,可以制定一个数值或一个特殊值,device-width就是设备的宽度
initial-scale:初始缩放,页面开始缩放的程度
maxnum-scale,minimum-scale:最大最小缩放倍数
user-scalable=no:是否允许用户调整页面,若为No,maxnum-scale,minimum-scale会失效
子选择器:div>span
作用范围:div下的span享受样式,p中的span不享受样式
<div>
<p>
	<span>我是第一个</span>
</p>
	<span>woshi</span>
    <span>srt</span>
    <span>ertert</span>
</div>
相邻兄弟选择器:p+span
作用范围:可以选择相邻的两个元素,且有同一个父级,+后面的享受样式
同级元素通用选择器:p~span
作用范围:p之后的同级span享受样式
属性选择器:选择带有某种属性的所有元素,选择带有某种属性值,并规定属性值的元素
<a href=""></a>与<a></a>a[属性名]{}   input[属性名="属性值"]{}
p:nth-child(1){样式}选择父级下第一个元素,第一个必须是p
p:nth-of-type(1){}一定会匹配P,若值为n,n可以计算,2n表示偶数,2n-1表示奇数
p:first-child{},p:last-child{},p:first-of-type{},P:last-of-type{}
*字体与盒模型
@font-face{
font-family:"自定义字体名称";
src:url("字体图片的路径地址"),
      url("字体图片的路径地址"),
      url("字体图片的路径地址"),
      url("字体图片的路径地址");
font-weight:;
font-style:;
}
找字体的网站 下载  修改字体图片格式的线上工具 上传,使用里面的CSS文件
字体图片格式:.ttf .otf .woff .eot .svg 
如果想搭建盒模型,首先在父级建立盒模型空间
方法:display:-webkit-box;display:-moz-box;
排列方式有两种:水平,垂直
-webkit-box-orient:vertical;垂直
-webkit-box-orient:horizontal;水平
子级排列位置可以由-webkit-box-pack:center/end/start(左边)/justify(均分);设置
子级具体份数由-webkit-box-flex:几份;设置
<style>
.test{border:1px solid #666;
display:-webkit-box;/*使左浮动*/
-webkit-box-pack:center;/*使居中*/
/*-webkit-box-pack:end;右浮动*/
/*-webkit-box-pack:justify;均分*/
-webkit-box-orient:horizontal;/*竖着*/
}
.test div{
	height:100px;
	width:100px;
	background:red;
	text-align:center;
	line-height:100px;
	border:1px solid #FFF;
	}
.test div:nth-of-type(1){
	-webkit-box-flex:1;
	}
.test div:nth-of-type(2){
	-webkit-box-flex:2;
	}
.test div:nth-of-type(3){
	-webkit-box-flex:3;
	}
</style>
</head>
<body>
<div class="test">
	<div>1</div>
    <div>2</div>
    <div>3</div>
</div>
</body>


分栏
column-count:3;分几栏
column-gap:100px;分栏之间的间隙
column-rule:5px solid 颜色 设置分栏之间的分割线
IE9以下不支持,火狐加前缀
配合媒体查询使用@media scree and(max-width:){}
过渡
transition:1s 1s all ease;
第一个值:过度的总时间
第二个值:延迟过渡的时间
第三个值:需要过渡的样式
第四个值:过渡的方式linear匀速 ease慢速开始然后慢慢变快
ease-in慢速开始ease-out慢速结束ease-in-out开始和结束都慢cubic-bezier(1,0,1,0)贝瑟尔曲线
2D变换
transform:translate(x,y)位移 rotate(xdeg)旋转 scale缩放 skew(旋转角度)斜切
变换原点transform-orgin:left、top、right、bottom、center(默认值)
3D变换
首先需要给需要进行3d变换的元素的父级添加3d环境和景深
方法:translate-style:preserve-3d;添加3d环境
perspective:数值
rotatX, rotatY, rotatZ,translateX,translateY,translateZ,
animation:
首先定义一套关键帧
方法:@keyframes 动画名称 {
0%{相应样式}
10%{相应样式}
20%{相应样式}
100%{相应样式}
}
然后调用动画名称:
方法:animation:1s 1s 动画名称 运动方式 执行次数
第一个值:运动总时间
第二个值:延迟运动时间
第三个值:动画名称
第四个值:运动方式
linear匀速   ease慢速开始然后慢慢变快
ease-in慢速开始  ease-out慢速结束  ease-in-out开始和结束都慢  cubic-bezier(1,0,1,0)贝瑟尔曲线
第五个个值:运动次数 具体数值或无限次infinite


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值