- 博客(20)
- 收藏
- 关注
RSS订阅原创 html+css笔记20
flex布局：设置flex布局display：flex；写在父盒子：容器。主轴和交叉轴设置主轴方向flex-direction：row（从左往右）/row-reverse（从右往左）/column（从上往下）/column-reverse（从下往上）换行flex-wrap：nowrap（不换行）/wrap（换行）/wrap-reverse（反向换行）主轴的方向对齐方式justify-content：flex-start（开始位置）/flex-end（结束位置）/center（居中）space-b
2021-04-26 10:10:43
55
原创 html+css笔记19
flex容器main axis:水平的主轴main start:主轴的开始位置main end:主轴的结束位置cross axis:垂直的交叉轴cross start:交叉轴的开始位置cross end: 交叉轴的结束位置项目默认沿主轴排列单个项目占据的主轴空间叫main size单个项目占据的交叉轴空间叫cross sizeflex-direction: row/row-reverse/column/column-revers;改变主轴；row：默认值，从左到右；row-rever
2021-04-22 16:42:17
47
原创 html+css笔记18
transition：过渡transform：转换rotate：旋转translate：位移scale：缩放skew：斜切animation:动画网页正中心一个200*200px的盒子，鼠标放上去后2s时间里匀速变换：变换：放大2倍并旋转180度。动画持续4s0s：red2s：green4s：blue转换<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <t
2021-04-12 11:27:01
47
原创 html+css笔记17
过渡<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>css高级样式</title> <style> *{ margin: 0; padding: 0; } .box{ width: 12.5rem; height: 12.5rem; background-color: pink
2021-04-06 10:28:46
44
原创 html+css笔记16
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>背景</title> <style> .box{ width: 93.75rem; height: 187.5rem; border: 0.3125rem solid pink; margin: auto; color: #f00; f
2021-03-29 10:45:42
36
原创 html+css笔记15
1.多媒体的格式元素支持三种音频格式文件：MP3,Wav和Ogg；元素支持三种视频格式：MP4，WebM和Ogg。<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>音频和视频插入</title> </head> <body> <!-- 音频：audio --> <!-- 插入音频标签：<a
2021-03-24 11:23:14
36
原创 html+css笔记14
权重：ID的权重是100类的权重是10标签的权重是1样式最后使用权重大的行内元素:1.一行显示多个；2.设置width,height无效；3.默认的宽高是内容的宽高。链接里面不能再放链接；特殊情况链接里可以放块级元素，但是给转换一下块级模式最安全。块元素：1.比较霸道，自己独占一行；2.可以控制width、height、对齐属性；3.宽度默认是容器（父级元素宽度）的100%；4.块元素内可以包含行元素或块元素。文字类的标签内不能使用块元素，比如,~等标签主要用于存放文字。因此
2021-03-23 11:18:39
46
原创 html+css笔记13
布局：标准流+浮动（一行显示）+定位定位:给盒子固定位置z-index: 1; 正数/负数/0;值越大,显示越靠前<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style> .box1{ /* 大相小绝/子绝父相：父盒子相对定位，子盒子绝对定位 */ position: relati
2021-03-22 11:27:21
61
原创 html+css笔记12
folat:left/right/none特点：1.脱标：脱离标准流2.一行内显示并且元素顶部对齐3.具有行内块元素的特点<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>取消浮动</title> </head> <style> .box{ background-color: pink; /* ove
2021-03-17 10:23:25
65
原创 html+css笔记11
浮动特性浮动元素会脱离标准流（脱标）浮动元素会一行内显示并且元素顶部对其浮动的元素会具有行内块元素的类似特性<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style> .box{ width: 63.125rem; height: 3.25rem; border: #C0C0C
2021-03-16 11:27:17
34
原创 html+css笔记10
盒子：内容区（content）、边框（border）、内边距（padding）、外边距（margin）、左：left 右：right 上：top 下：bottom 自动：auto外边距合并：相邻两个盒子之间同时设置margin，最终取的值是最大的那一个避免相邻盒子外边距合并：只给其中一个盒子设置外边距。外边距塌陷：嵌套的两个盒子之间同时设置margin，最终取的值也是最大的一个避免嵌套盒子外边距塌陷：给父盒子添加边框、或添加padding、或添加overflow：hidden&l
2021-03-11 17:11:09
61
原创 html+css笔记9
盒子：边框：border、内容、内边距：padding版心（大盒子）盒子的作用：给网页布局宽：width高：height边框：border实线：solid 虚线：dashed 点线dotted内边距：padding左：left 右：right 上：top 下：bottommarquee：选框：文字向左浮动盒子模型<!DOCTYPE html><html> <head> <meta charset="utf-8" />
2021-03-10 11:24:38
47
原创 html+css笔记8
标签选择器类选择器：样式点（.）定义结构类（class）调用一个或多个开发最常用ID选择器：样式#号定义结构ID调用只能调一次别人勿使用<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>CSS引入方式</title> <style> /* 标签选择器: */ h3{ color: pink;
2021-03-09 10:58:10
45
原创 html+css笔记7
HTML:Hyper Text Makeup Language超文本标记语言，网页结构。CSS:Cascading Style Sheet层叠样式表、级联样式表三种引入样式的方式：1.内联样式：把样式直接写在开始2.内部样式：用标签书写样式3.外部样式：用引入写好的css文件。内联样式、内联样式和外部样式三个一起用的时候，内联样式权重最高（最终一定用内联样式）；stylesheet:样式表内部样式和外部样式，谁在后就听谁的。color: 颜色font-size: 文字大小（单位em）fo
2021-03-04 17:08:12
64
1
原创 html+css笔记6
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>图书信息管理系统</title> </head> <body> <h3>图书信息表</h3> <!-- 表格标签:<table></table> --> <!-- 表头<thead><
2021-03-03 11:31:36
52
原创 html+css笔记5
input:输入type:类型text:文本password:密码radio:广播、收音机、单选sex:性别name:名字checkbox:复选框。多选submit:提交reset:重置button:按钮select:选择option:选项optgroup:定义选项组textarea:文本域，可输入多行文本<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <
2021-03-02 11:00:50
56
原创 html+css笔记4
<html> <head> <meta charset="utf-8" /> <title>笔记</title> </head> <body> <h3>xxx音乐排行榜</h3> <p>最佳播放量排名</p> <!-- 有序列表<ol> 列标签：<li> --> <ol> <li><a
2021-02-25 15:55:55
70
原创 html+css笔记3
<!DOCTYPE html><html><head><meta charset="utf-8" /><!–扩展：1.双标签：由两个组成，<开始标签> </结束标签>2.单标签：只有一对<>，<开始 />3.注释：<!-- -->``<!--，添加注释后浏览器不会翻译到网页上--><!--<title></title:标题标签 -->
2021-02-24 11:22:15
43
原创 html+css笔记2
http：hypertext transfer protocol超文本传输协议https：加密传输www：world wide web.com域名（商业性）.cn（中国）.deu（教育）html：hypertext markup language超文本标记语言超文本：比文本更厉害、除了文字还有图片、视频、还有链接、音频。超越文本的限制。<!DOCTYPE HTML>docutment type 文档类型：网页文档（html）<html> 网页开始，根元素<
2021-02-23 11:21:57
59
原创 html+css笔记1
html+css3hello world编程思维（代码思维）网页前端：静态网页html+css动态网页javascript（js）网页后端java语言 php语言 数据库web：网络翻译网站：有道翻译授人以鱼 不如授人以渔代码思维（编程思维）消化：xmind（思维导图）、csdn博客、网页前端：web的三大标准，结构、样式、行为。结构html：对网页元素进行整理和分类样式CSS:设置网页元素的外观样式行为javascript（js）:网页模型的定义及交互一、培养目标：1、
2021-02-20 17:07:57
63
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人