- 博客(18)
- 收藏
- 关注
RSS订阅原创 圣杯布局
<style> .left, .right { width: 300px; height: 300px; background-color: aquamarine; } .center { height: 500px; ...
2019-08-16 19:51:28
81
原创 盒子模型
<style> div{ width:400px; height: 300px; background-color: orange; border: 15px solid blue; /* 内边距，控制内容与边界的距离 */ padding: 25px; /* 外...
2019-08-16 19:49:12
91
原创 双方旋转
<style> * { box-sizing: border-box; } html { height: 100%; } body { margin: 0; height: 100%; ...
2019-08-16 19:47:26
128
原创 魔方
<style> * { box-sizing: border-box; } html { height: 100%; } body { margin: 0; height: 100%; ...
2019-08-16 19:46:17
108
原创 时钟
<style> * { box-sizing: border-box; } html { height: 100%; } body { height: 100%; margin: 0; ...
2019-08-16 19:43:47
96
原创 浮动 元素切换
浮动 float 1：浮动后：元素本身脱离文档流，原来的位置被其他元素所占据 2：浮动后；在同一个父元素中，目标元素回占据一个浮动后位置。 3：注意：浮动只能是；子元素在容器中进行位置移动。如果父容器剩余宽度不能容纳两一个子元素，那么久换行。 ** 目标元素的浮动范围：父容器 4：同一位置多个元素；具有浮动属性的元素；层级高于不惧有浮动属性的元素 总结;浮动规律：第一步元素在布局流中的起始位置，第...
2019-08-16 19:37:36
160
原创 html,css基础
标签上title属性与alt属性的区别是什么？ alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明的。且长度必须少于100个英文字符或者用户必须保证替换文字尽可能的短。 这包括那些使用本来就不支持图像显示或者图像显示被关闭的浏览器的用户，视觉障碍的用户和使用屏幕阅读器的用户等。 title属性为设置该属性的元素提供建议性的信息。使用title属性提供非本质的额外信息。 . 请写出至少5...
2019-08-16 19:27:18
63
原创 盒子模型
盒子模型 组成元素： magin 边框与其他盒子的距离 magin变大 盒子不会变化，盒子与盒子之间的距离会变大 padding 是边框与内容区域的距离 标准盒子 padding变大 盒子变大 border 盒子的边框 content 标准盒子 为 width 和height ie盒子： content = width - padding-left - padding-right - bo...
2019-08-14 21:38:39
73
原创 定位 浮动
背景属性 background 背景：我们可以想象为；盒子的底面，我们可以给这个底面左任何涂鸦，例如；颜色 图片；多个图片；颜色+图… backgroud-image: url() 设置背景图片；值可谓多个；用逗号分开 background-size: 设置背景图片大小；值一横向 值二纵向 background-position 设置背景图片位置 值一 水平方向移动 值二竖直方向移动 bac...
2019-08-14 21:34:42
103
原创 弹性布局
弹性布局 display:fixed 弹性布局特点： 1：优点：可以解决复杂的布局问题 缺点IE不兼容 弹性布局 改变是父容器的布局方式；有默认的流逝布局变为弹性布局 简洁改版子元素的属性；块变为行内块 主轴：默认为盒子水平方形；可以通过属性改变主轴方向 交叉轴：与主轴垂直的及时交叉轴 flex-direction flex-wrap flex-flow justify-content ali...
2019-08-14 21:32:09
341
原创 盒子 复合属性 单位
盒子补充 1.只要是盒子，在盒子内部都会有布局流，也就是流失布局 2. 在写页面布局的时候，尽量利用布局流，因为在使用布局的时候 父元素高度可以由子元素撑起来，可以避免兼容性问题 3.如何搭建盒子与盒子之间的关系 复合属性 margin padding border… 凡是在浏览器解析的时候；出现倒三角的属性，都是复合属性； 单位 绝对单位 - 单位是固定的，不可改变的 - px m cm 相对单...
2019-08-14 21:29:51
381
原创 css基础4
css1 基本语法结构 选择器{ 属性：值； } 选择器作用：选中标签对其进行样式美化 属性作用:对元素进行样式美化 值作用：决定属性美化样式的程度 注意：css中的属性与html元素行内属性不是一个东西 css选择器 元素选择器 html标签：选中所有对应的html标签 .class 选中具有class行内属性的标签 #id选中所有具有id行内属性的标签 *选中所有元素 id...
2019-08-14 21:26:53
104
原创 css基础3属性，伪类，集合选择器
选中元素name属性为sumit的标签 选中元素input属性为login的标签 <style> input[name=submit]{ width: 100px; height: 30px; } input[name=login]{ width: 300px; height: 30px; ...
2019-08-14 21:20:04
173
原创 css基础2关系选择器
1.>父子选择器 #content>header { height: 50px; background-color: darkgoldenrod } 选中#content下所有的a标签：多代的 空格 子代选择器 设置字体大小 font-size #content a { color: black; ...
2019-08-14 21:06:09
109
原创 css基础
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
2019-08-12 09:08:25
137
原创 会动的水晶球
* { /* 修改标签和模型类型 */ box-sizing: border-box; } html { height: 100%; } body { margin: 0; height: 100...
2019-08-12 09:03:56
195
原创 html基础
##课前准备 学习准备 1：熟悉自己使用的开发工具 作用：编写代码 目的：做网站 做页面… 2：熟悉浏览器，每个人电脑不同的浏览器 主流浏览器 谷歌 火狐 360 QQ 非主流浏览器 IE8以下浏览器 3：熟悉浏览器的控制台 ###开发工具 vscode webstrom subline Hibude… 浏览器： ###文件后缀 xxx.html 是html 文件 作用写网页的。 浏览器可以解析...
2019-08-12 08:58:37
87
原创 常见html标签
常见html标签认识html元素根据用途分类布局类标签：页面布局文本类标签只要跟文字有关的；就用以下标签标题在一个页面中，h1标签只能出现一次，其他标题标签 可以出现多次 h1-h6 标题级别依次降低，字体依次减小图片类标签 作用：加载图片链接类标签：作用：跳转链接表格类标签 ；表单标签 作用：表单提交，录入信息，登录注册等 认识html元素 html 是标签 lang 是html标签的属性 作用...
2019-08-10 15:28:48
373
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人