- 博客(13)
- 收藏
- 关注
RSS订阅原创 HTML与CSS学习 day12
css盒子模型盒子不会因为边框大小和内边距而变大撑开 box-sizing: border-box;盒子会因为边框大小和内边距而变大撑开 box-sizing: content-box; * { padding: 0; margin: 0; box-sizing: border-box; }css滤镜 blur（模糊）blur里面单位越大 图片越模糊 filter: blur(15px);.
2021-03-21 16:05:12
57
原创 HTML与CSS学习 day12
video常见属性音频属性新增的input属性<form action=""> <ul> <li> 邮箱<input type="email"> </li> <li>网址<input type="url"></li> <li>日期<input type="date"></li>.
2021-03-20 17:13:12
63
原创 HTML与CSS学习 day11
精灵图的使用主要借助于背景位置来实现 background-position: x y ; 里面分别填入x轴 和y轴坐标字体图标主要适用场景小图标 简单的图标字体图标的使用先打开下载的字体文件里面的 demo.html 复制字体后边的小框 字体声明 @font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?lck2wb'); s.
2021-03-20 09:44:46
73
原创 HTML与CSS学习 day10
定位的特殊特性1.给行内元素添加绝对定位 可以直接设置宽度高度2.给块级元素添加绝对定位 如果不给宽度和高度 默认是文字的大小 （行内元素）浮动元素 ，绝对定位（固定定位）都不会触发外边距合并塌陷问题（脱标）浮动元素只会压住下面的元素的盒子 不会掩住内容绝对定位会压住盒子以及文字浮动之所以不会压住文字 因为浮动产生的目的就是为了做文字环绕效果的 文字会围绕浮动元素如果一个盒子里既有left 也有right 会先执行 lefttop与botttom同理 先执行top元素的显示与隐藏.
2021-03-19 17:22:52
52
原创 HTML与CSS学习 day9
定位定位=定位模式+边偏移static 静态定位relative 相对定位absolute 绝对定位fixed 固定定位边偏移 有top bottom left right1.静态定位 static （了解 ）元素默认定位方式 无定位意思 按照标准流元素一样 无边偏移 很少使用2. relative相对定位 位置移动后 保留原位置3.absolute绝对定位 如果没有父元素或父元素没有定位 则以浏览器为定位移动位置如果父元素有定位 则以最近的有定位的父元素为准移动位置绝.
2021-03-18 10:19:51
63
原创 HTML与CSS学习 day8
浮动注意点清除浮动1.本质是清除浮动造成的影响2.如果父盒子本身有高度 则不需要清除浮动3.清除浮动之后 父级就会自动检测高度 就不会影响其他的元素了清除浮动的策略是 闭合浮动left 清除左侧浮动影响right 清除右侧浮动影响both 清除两侧浮动影响一般情况下 几乎都使用bothclean:both;清除浮动方法1.额外标签法 在浮动元素末尾添加一个空的元素这个添加的元素 必须为块级元素2.父级添加 overflow: hidden/auto/scroll;.
2021-03-18 10:19:31
41
原创 HTML与CSS学习 day7
圆角边框 border-radius: 15px;圆形 先写一个正方形边框 border-radius: 50%;或者 border-radius: 高或宽的一半;圆角矩形 border-radius: 高度的一半;自定义圆角按照左上 右上 右下 左下 顺时针顺序border-radius: 5px 10px 15px 40px;两个数值代表 对角线 左上-右下 右上-左下border-radius: 20px 40px;border-top-left-radius:.
2021-03-16 09:00:06
49
原创 HTML与CSS学习 day6
css三大特性1.层叠性就近原则 哪个样式离结构近 就执行哪个样式 只会重叠冲突的样式<style> div { color: blue; font-size: 30px; } div { color: rgb(18, 155, 77); } </style></head><body>.
2021-03-14 19:44:41
52
原创 HTML与CSS学习 day5
伪类选择器a:link 未访问过的链接a:visited 访问过的链接a:hover 鼠标放在链接上 会变色a:active 鼠标点击的链接还未松开<style> a:link { color: rgb(0, 0, 0); text-decoration: none; } a:visited { color: brown; } a:h.
2021-03-13 18:30:35
72
原创 HTML与CSS学习 day4
字体大小 body { font-size: 20px; }字体粗细normal默认样式 不加粗bold 加粗light 变细font-weight: 800; 后面的数字确定文字的大小 400=normal 700=bold实际开发中使用较多 font-weight: 800;字体样式font-style: italic; italic字体倾斜normal使倾斜的字体恢复正常em { font-style: norm.
2021-03-12 17:56:14
68
原创 HTML与CSS学习 day3
体验css语法规范<style> p{ color: red; font-size: 20px; } </style> <p>学习前端第三天 我很快乐</p>标签选择器 <style> p { color: green; } div { color: brown; }&l.
2021-03-11 17:55:05
74
原创 HTML与CSS学习 day2
表格基本语法<table><tr><td></td></tr></table>表头单元格标签(table head)表头单元格也是单元格 相对<td>单元格来说 <th>单元格内文字会加粗 居中 <th></th><table align="center" border="1" cellpadding="1" cellspacing="0" height.
2021-03-10 17:47:41
48
原创 HTML与CSS学习 day1
安装VSCodevscode下载链接打开VScode创建新文件 ctrl+N 保存文件ctrl+S 创建后先保存文件为 xx.html格式 然后进行代码的编写更改VScode为中文模式 打开vscode 单击侧边栏最下面的图标 最上边搜索chinese 单机install即可安装完成 点击restart vscode切换为中文代码编写 首先保存为.html格式 输入！单击第一个！或者单击键盘tab均可接下来就可以开始代码的编写了标题标签 一共有6级标签 从h1—h.
2021-03-10 13:51:33
81
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人