当前位置: 首页 > 工具软件 > Pure.css > 使用案例 >

HTML+CSS

欧阳鸿哲
2023-12-01

1, 无线端页面

一, 写移动页面需要在前面添加
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
二, 写移动页面,尺寸要从PX转REM

2, H5新增标签

一, 新标签,跟div用法一样,更具有语义化
	header 头部标签       section  内容区域     footer  底部区域
	article  独立区域     aside  辅助信息       nav  导航区域       hgroup  组合标题标签
1, 创建一个圆
一. css属性添加 border-radius:50%;  改变一个元素角的弧度
	提示: 为四个数值时,顺时针改变角的弧度
	或者: border-bottom-lefr-radius:10px;  为左下角的弧度
2, 元素阴影-滤镜-倒影
一, 元素添加阴影
	文字阴影 text-shadow:1px 2px 3px red;
        顺序: 水平-垂直-模糊-颜色
    元素阴影  box-shadow:1px 2px 3px 4px red inset;
        水平-垂直-模糊-阴影大小-颜色-内阴影
    多重阴影  text-shadow:1px 2px red,1px 2px red;(逗号隔开)
        水平-垂直-颜色
        
二, 元素滤镜
	filter:burl(10px);
        burl(10px) 模糊      brightness(10%)明亮/暗度      opacity(10%)透明度
        saturate(10%)颜色饱和度        contrast(10%)对比度
        
三, 元素倒影
	-webkit-box-reflect:below 10px linear-gradient(transparent 50%,rgba(255,255,255,.3));
	倒影的方向 必须添加渐变,从虚到实
	above 上     below 下     left 左     right 右

3, 基础标签

一, 单标签 
	&nbsp 空格    <br>让后面全部变成空格(换行)    <hr>画一条水平线
	
二, 图片的引入
	<img>引入图片
	src="图片的路径"    alt="图片的内容"    title="鼠标放上去要展示的内容"
	width="图片宽度"    height="图片高度"(宽高写一个会等比缩放)
	<img src="图片的路径" alt="图片的内容" title="鼠标放上去要展示的内容">
	
三, 关于路劲
	相对路劲: ../指令返回上一级        ./本页面出发(可不填)
	绝对路劲: 直接复制图片的路劲
	
四, 双标签 (前后都有,后面的需要加结束斜杠,需要加尖括号)
	b/strong   内容加粗,后面的是标记为特殊
	i/em       内容倾斜,后面的是标记为特殊
	p          单独占一行
	h1-h6      标题,会加粗,字号依次变小,只能存在6个,h1只能有一个,不能相互嵌套
	center	   强制性内容居中
	u          为文本添加下划线
	mark  	   高亮显示内容区相同的文字
	div        单独占据一行,内容是一整块,搭建页面结构
	span       空白区,也类似选中一块进行样式编辑,主要做样式修改
	
五, 特殊颜色编辑
	::selection{background: ;  color: ;}对选中的进行颜色编辑
	style="color:red"  对选中的进行颜色编辑
	
六, 排序列表
	ul/li  无序列表,默认前面有小黑点,ul为前提,li跟P一样,单独占一行
	ol/li  有序列表,默认前面是数字,ul为前提,li跟P一样,单独占一行
		<ol type="排序字"></ol>  通过改字可以改排序方法
		reversed  使排序倒过来
	ul{list-style:none;}   可以去掉ul/ol前面的标签符号
	dl/dt/dd  自定义列表,单独占一行,一个dl只有一个dt,类似主标题,dd类似副标题,可以存在多个
	figure/figcaption/p  自定义列表,单独占一行
1, 添加超链接
一, 添加超链接
	< a >  添加超链接
	href="需要跳转的页面"
	<a href="跳转链接"></a>   (跳转的里面单独一个#是指本页面跳转,需要在#后面加上锚点名称)
		给要点击的元素添加cursor:pointer;统一为手
	target 跳转样式
		_self  当前页面刷新     _blank 打开新窗口     _new  在新窗口刷新
		
二, 锚点链接
	要点1: 有点击的位置
		<a href="锚点的ID">点击位置</a>
	要点2: 有跳转位置
		<p id="名字"被跳转的位置</p>(name也可以)
	要点3: 跳转位置不在最顶上,说明页面高度不够
2, 表格
table 创建表格
	border="加边框"         
	cesspadding="边框和内容的间隙"      
	cellspacing="边框和边框之间的间隙"
    width="宽度"      
    height="高度"       
    bgcolor="背景色"(不可以用style)
    background-color="背景色2"(可以用style)
    align="left/center/right"对齐方式(水平对齐)  justify(对齐换行)
    valign="middle"()
    
tr:行    td:列
    rowspan="上下合并个数" 合并行
    colspan="左右合并个数" 合并列
3, 表单
form:表单
	action="提交地址"
	method="提交方式"
		get:明文提交,数据看得见,不安全,有长度限制
		post:非明文提交,数据看不见,安全性高,没长度限制
fieldset  表单字段,整合标签,给表单属性添加标签

input:表单元素
	type="text" 单行文本输入框(账号)
	type="password" 密码输入框(密码)
	type="reset" 重置按钮
	type="submit" 提交按钮(类似登陆,提交数据)
	type="button"" 普通按钮(没有什么作用,单纯一个按钮)
	type="file" 选择文件按钮
		multiple 实现多选   multiple="multiple"
	type="radio" 单选按钮圆形
	type="checkbox" 多选按钮方形
		checked="默认选中"		disabled="禁用"
	input type="email"  邮件提交
	input type="url"    网址提交
	input type="number" 只能填数字选框
	input type="range"  数字拖动框
	<button>提交按钮</button>(单独生成一个按钮)
	border:none; 去掉表单自带的边框
	outline:none; 去掉表单选中时带的蓝色边框
	
select:下拉列表
	option列表的行数(双标签,前者为主,后者为内容)

textarea:文本输入框
	cols="宽度"   	rows="高度/行数"
	
表单中用到的属性
	placeholder="框内显示的内容"(类似提示)
		添加行高可以调整位置
	name="元素的名字"  (重复可以导致冲突只选一个)
	value="元素值"	 上传的什么(也可用来编辑框内内容)
	checked   针对选择按钮,默认选中
	disabled   针对选择按钮,默认禁用,变成灰色
	autofocus  打开是默认选中的框,只能有一个
	maxlength="10" 最大输入内容个数限制
	required="true"    内容不能为空
	autocomplete="on/off" 是否保留历史输入记录
	
表单关联标签(点击内容即可点击按钮)
	label 双标签,关联标签
	需要给按钮添加ID  label添加for  两个名字一样
	<input id="123" type="radio"><label for="123">99999999</label>

4, CSS基本语法

内部添加css
	在页面<head>处添加<style type="text/css">CSS属性</style>
			div{width:300px;}     选择要编辑的段落标签{属性:属性值;}
	在页面单独的标签前面添加样式style="属性:属性值;"

外部添加css
	外部新建一个.css文件,在页面的head中通过link标签引入
			<link rel="stylesheet" type="text/css" href="css文件的路径">
			外部css文件清空,加上@charser "utf-8";
1, css类型选择器
类型选择器(选择性的进行css样式添加,给段落取名字进行添加)
	class="name"  添加到标签属性中,在css编辑的时候需添加“.name”
	id="name"     添加到标签属性中,在css编辑的时候需添加“#name”
	*{css样式}  默认匹配页面所有元素标签(适用去掉边框什么的)
	群组选择器(多选)  class,class,class{css样式}(每个之间用逗号分开)
	包含选择器(父子关系选择)name name name{css样式}(每个之间用空格分开)
			选择器排名   id选择器100分>class选择器10分>类型选择器1分
			相同的时候,采用加载的优先级,后加载的显示
	兄弟选择器,用+号来表示
	伪类选择器(针对超链接的选择器效果)
			:link{} 初始状态 
			:visited{} 访问过后的状态
			:hover{} 鼠标悬停的状态(仅针对前面一个有效,多个需要重复添加:hover)
			:active{} 鼠标按下的状态(仅针对前面一个有效,多个需要重复添加:active)
			transition:1s; 可以控制鼠标放上去过度时间
	属性选择器  (针对符号来选择)
			[属性='值的内容']   通过标签添加的属性来查找
			属性的后面添加符号:
				^ 找xxx开头的      $ 找xxx结尾的      *  找全部带有xxx是
			语法: [href^='www.bc.com']
2, css基本样式
css样式
	width:300px;(元素的宽度)
	height:300px;(元素的高度)
	background:#999999;(元素背景的颜色)
	border: groove 40px blue;(框的类型,大小,颜色)
			solid 实线  dotted 点组成的虚线  dashed 虚线  double 双线
	color:rgb(255,255,255);    rbga(255,255,255,0.5)  a的意思是透明度
	opacity:0.5; 透明,元素所有都透明
	vertical-align:top; 去掉图片下方默认的间距
	vertical-align:middle;元素的对齐方式(可以解决图片跟文字对齐)
			top  顶部对齐  middle  居中对齐  bottom  底部对齐
	transparent  把对象变成透明
	
			
文本css样式
	font-size:100px;(文字的大小)
			默认是16,最小是12,  0是不显示
			em继承最近的父级的文本大小  ,没有父级跟着body
			rem跟着根元素(html)的文本大小变化(用于移动端)
	font-family:微软雅黑;(字体选择)
			ont-family:"字体1","字体2";(多选字体,会按循序加载字体,逗号隔开)
	font-weight:文本加粗;
			默认500  bold/600=加粗   normal默认文本/去掉加粗
	font-styel:文本倾斜;
			italic倾斜/加高权重   oblique倾斜/仅仅是效果    normal去掉倾斜效果/不倾斜
	text-align:文字/内容对齐;
			left/center/right   左/中/右对齐
	text-indent:10px;首行缩进
	line-height:行高;  文本垂直对齐方式
			normal 默认值
			跟高度一样的大小默认居中,不给单位的时候数值乘以文字字号大小'
	
	font 文本类型综合简写方法
			font:文本大小/行高 字体类型;  加粗,倾斜都可加入
					大小和行高和字体必须有
					
超链接文本修饰
	text-decoration:修饰内容;  去掉下划线
			underline 添加下划线      overline  上划线  
			line-through  中划线     none  去掉线/没有线
	letter-spacing:字间距;
			px  字与字的距离
			
针对列表(ul li/ol li等)
	list-style-type:列表的样式;
			disc实心圆  circle空心圆  square实心方块  none去掉符号
	把图片变成列表符号
			list-style-image:url(图片的路径);
	改变列表符号的位置
			list-style-position:位置; 
					outside(外边)  inside(里边)

针对"边框" 的CSS进行编辑
	border-images: url("地址");  把图片变成背景
	border-images-slice:27px;  除了四个角,,其他地方切27像素
	border-images-repeat:round;  平铺

针对“背景”的css进行编辑
	background-color:背景颜色;
			transparent 透明色填充
	background-image:url("图片路径")(吧背景变成图片)
	background-repeat:repeat; (针对图片的平铺样式)
			repeat平铺  no-repeat 不平铺  repeat-x 横向平铺  repaat-y 纵向平铺
	background-position:定位的方向; (背景出现的位置-定位-对齐方式)
			left左  right右  center中/居中  top上  bottom下
	background-attachment:定位方法; 让背景固定或者随着文字移动
			scroll 单纯的背景            fixed 让背景固定
	background的简写(  background:简写的内容;  )
			background:url("图片路径") 背景颜色 定位的方向;
	background-size: 100px 100px;   设置背景图的大小
			cover  默认为铺满
	
内容的浮动样式
	float: 浮动形式 ;  (浮动)
			left:左浮动  right:右浮动  none:不浮动
		图片浮动:
			图片浮动,文字会默认跟随图片,形成图片嵌入到文本里面
		浮动元素带来的问题,父级元素没有高度,会造成塌陷
			解决方案1:给父级元素添加高度
			解决方案2:给父级元素添加 overflow:hidden;
			解决方案3:给浮动元素添加清楚样式
				添加属性  clear:both(清除浮动带来的问题,需要添加在内容的后面)
				<div style="clear:both"></div>
				添加要求:需要单独占一行,在标签里面,且出现在最后一行
					left(清除左浮动)  right(清除右浮动)  both(清除所有)
					缺点:会造成大量代码重复,加载慢
			解决方案4:添加伪元素,默认添加在内容最后
				.clear:after{    }  需要添加给父级,才能去掉塌陷问题,下面三个都要填入
			content:"内容";    display:block;(单独占一行)    clear:both;(跟方案2一样)
					内容输入文字,会出现在子元素最后
					
盒模型的组成
	内容区域: content
	内边距区域: padding(距离不可以出现负数)
	边框:       border
	外边距区域:  margin(距离可以出现负数)
			auto 使内容左右居中
	单独设置内容和边框的距离
			padding=:100px;
                left左  right右  top上  bottom下  auto左右居中
                padding-top=:100px;(改变上面的距离)
                padding:100px 200px 300px 400px;(顺时针改变)
    单独设置边框和周围平齐元素的距离
            margin=:100px;(四周距离)
            margin=:auto;(居中)	
	父级设置内边距时,会造成内容撑大
			解决方法 父级添加 box-sizing:border-box;  (变成怪异盒模型)
				也可以吧边框改成内边框,把元素计算到总尺寸内

弹性盒模型(无线)
	display:flex; 把目标变成弹性盒模型
            flex-direction:row;设置弹性盒模型的属性
                    row      默认水平
                    row-reverse     水平反方向
                    column     设为垂直
                    column-reverse     垂直反反向
            flex-wrap:wrap; 设置子元素是否换行
                    nowrap  不换行(一行显示)
                    wrap  子元素会换行,默认不换行,并且会挤压
                    wrap-reverse  反向换行
            flex-flow:row wrap;同时设置主元素和子元素
            
     主轴对齐方式
            justify-content: ;子级在主轴上的对齐方式
                    flex-start  起始位置
                    flex-end   结束位置
                    center   中间对齐(所有元素中间对齐)
                    space-around    自动分配(在父级内自动分配)
                    space-between   元素两端对齐(两端对齐,中间自动分配)
                    space-evenly       平分子元素(谷歌支持)

	侧轴对齐方式
            align-items:;子级在侧轴上的对齐方式
                    flex-start  起始位置
                    flex-end   结束位置
                    center      中间对齐
                    baseline  第一行内容底部对齐
                    stretch   默认值(每个都有默认值)
            align-content:  ; 多行子级在侧轴上的对齐方式
                    flex-start  起始位置
                    flex-end   结束位置
                    center   中间对齐(所有元素中间对齐)
                    space-around    自动分配(在父级内自动分配)
                    space-between   元素两端对齐(两端对齐,中间自动分配)
                    
	子元素的对齐方式
            align-self: ;子级在侧轴上的对齐方式
                    flex-start  起始位置
                    flex-end   结束位置
                    center   中间对齐
                    baseline  第一行内容对齐
                    auto   自适应对齐
            order: ; 子级的排列顺序,数值越大,排序越靠后,0为默认值
            flex: ;     剩余空间的分配
            flex-grow:1;把父级剩余空间分配给对应的子元素,百分比为父级的百分比
            flex-shrink:2; 设置元素在被缩小时的缩小比例,默认为1
            
关于文本操作
	文本溢出操作
            overflow:编辑方法;  对溢出文本编辑
                    -x  -y
                    visible  默认正常超出
                    hidden  内容只在设定的大小内显示,超出的不可见
                    scroll  出现上下拉动条或左右拉动条
                    auto   内容被裁剪了,自动出现拉动条
                    inherit  跟随父级设置
                    
	文本空白操作
            white-space:操作方法;  对空白处进行操作
                    normal  默认正常超出
                    nowrap 强制性不换行,一行显示,遇到br才会换行
                    pre  根据编辑器的原格式显示
                    pre-wrap 保留空白区域,正常换行
                    pre-line 合并空白区域,保留换行
                    
	文本超出部分出现省略号
            必备三个条件
                    white-space:nowrap;  文本不会换行
                    overflow:hidden;  文本超出隐藏部分
                    text-overflow:ellipsis;  超出的部分用省略号显示
                    text-overflow:clip;  超出部分进行裁剪不显示
3, 元素类型转换
元素类型转换
       display:元素值;
               block   把行级元素变成块状元素,标签不变(显示)比如div  p(还可去除图片下面的间隙)
               inline   变成行级元素 (比如  p  span i)
               inline-block   变成内联块元素(比如  img  input)
               list-item   把元素转换成列表类型,类似ui li
               none   元素隐藏  不占据文档流
               扩展 +  用加号可以实现鼠标放在A,B显示,并且A和B是兄弟关系标签,只能向后
                
元素图片的定位
		position:;(针对父级)
            top   bottom   left   right 
            单位填50%的时候会进行页面居中(采取的是元素对应的角)
            transform:translate(-50%,-50%);往回拉元素本身的一半,达到居中

            static  默认值
            relative  相对定位(占据文档流,元素本身的位置 )
            absolute  绝对定位(脱离文档流,可以在父级任意地方进行漂浮定位)
            fixed  固定(将内容固定在页面某个地方,随着滚动条移动,类似悬浮)
            
		元素完全居中
            方法1:添加绝对定位,四个方向为0,再添加margin:auto;
                	position:absolute; top:0; left:0; bottom:0; right:0; margin:auto;
            方法2:添加绝对定位,两个方向为50%,同时两个方向内缩元素的一半
                	position:absolute;  top:50%;  left:50%; margin-方向:负一半;
                	
		z-index:;(更改图层定位的层级关系)
                值越大,层级越高
                值越小,层级越低
4, 视频的插入
视频的插入
		object 插入视频父级标签
                param  视频插入,单标签
                    背景蓝色,无法直接控制大小,大小由父级元素object控制,value添加视频连接 
                    <param value="视频地址">
                embed  视频插入  双标签
                    背景黑色 可以直接控制大小  src添加视频连接
                    <embed src="视频地址"></embed>
                wmode="transparent"  去掉元素本身自带的背景,变成透明
                
		插入外部内容
                iframe 插入外部网页
                    frameborder:0;(0为去掉边框  1为有边框)
        src  加入网页地址或者视频地址,视频通用代码
                <iframe frameborder:0; src="地址"></iframe>
5, 音频的插入
音频的插入
        audio  音频文件(默认不显示控件)
                <audio src="路径" controls>音乐无法加载时的提示</audio>
        video  放置视频文件
                <video src="地址" type="">视频无法加载时的提示</video>
        属性添加(对音频或者视频添加额外属性)
                controls  显示控件
                autoplay  加载完成自动播放
                loop      循环播放
                preload   预加载
                poster    设置第一帧图画,也就是视频封面,不能跟自动播放使用
                width/height  设置视频的宽度和高度
        设置视频支持的格式
                支持格式<source src="vider/ogg">,放在video标签里面
                    ogg        带有Threora视频编码和Vorbis音频编码
                    mpeg4   带有H.264视频编码和AAC音频编码
                    webm     带有VP8视频编码和Vorbis音频编码

6, 宽高自适应
宽高自适应  给元素设置最大和最小 
        min-height:10px; 最小宽度
        max-height:100px; 最大宽度
7, 元素权重加重
元素权重加重
	!important  对同样的元素加高权重,优先显示,主要用来针对不同浏览器的兼容
8, 元素渐变
元素渐变
        background:linear-gradient(颜色,颜色);
                    linear线性渐变    radial径向渐变
                (left,颜色,颜色) 渐变从指定的方向先开始
                (颜色 20%,颜色 60%) 从20%开始渐变到60%停止
                (circle,颜色,颜色) 径向渐变正圆
        background:repeating-linear-gradient(颜色 10%,颜色 20%);
            	渐变的宽度取值第一个百分比到第二个百分比的距离
9, 动画效果
过度时间动画
         transition:1s 2s background linear;
            	过度时间-等待时间-过度属性-过度方式(过度属性不填为全部)
            	
过度的效果 ease 从慢到快   linear 匀速    ease-out  减速 
        	贝塞尔曲线控制速度  cubic-bezier(1,1,1,1)
          
针对指定样式过度
		transition-property:width color background;   /*过度宽度,文字颜色,背景*/
			all 过度所有属性
			
transform 元素转换
        translate 元素位移
             transform:translate(10px 10px);    /*也可以直接translateX/Y(10px)*/
        origin 元素的位置
             transform:origin(left top);
        rotate 目标在一条直线上旋转
             transform:rotate(0deg);
                 rotateX x轴   rotateY y轴  rotateZ z垂直
        skew 让目标倾斜
             transform:skew(0deg);
        scale 增加或减小元素
             transform:scale(2); 默认为1,取绝对值
					
动画效果
        @keyframes box{form{开始} to{结束}}    /*设置一个运动方式*/
        @keyframes box{0%{效果} 50%{效果} 100%{效果}}    /*设置一个运动方式*/
        animation:1s infinite linear box;       /*给元素添加动画效果*/
            	时间-次数(无限)-过度效果-运动方式名字(也就是调用上哪个动画)
            	
创建3D效果(需要结合元素转换)
         transform-style:preserve-3d;在父级创建3D坏境
         perspective:200px; 景深,近大远小
         perspective-origin:100px 100px; 观看3D的角度

5,关于内容的显示和隐藏

关于内容的显示和隐藏
        visibility  显示隐藏,占据文档流(只针对一个)
            	hidden 隐藏    visible 显示
        display  显示隐藏,不占据文档流
            	none 隐藏    block 显示
 类似资料: