Front-end day1
- 通过上节作业总结:
- 文本内容居中:text-align:center;
- 内联标签默认有多大占多大,设置长、宽没有用,用display:inline-block; 将内联标签转为块级标签,再设置长款。
- 每个标签默认都有自己的样式,我们要对标签样式设计,就要先把默认的样式去掉,用:margin:0; padding:0; 分别取消外边距、内边距。
- 当有display:inline-block;的时候,默认堆叠,边距都有3px;解决办法:float:left
- 改造标签:用拼接
- 默认的img标签是由边距的,IE浏览器可以看出来;解决办法:border:0;
- 上节回顾:
-
- 头部信息:编码、title、style、link
- 身体包括:内联标签、块级标签、inline-block(前面两者都具有)
- a标签:属性:target、href
- img标签:src、alt(当图片没有刷出来,就显示alt定义的属性文字)
- iframe标签:嵌套网站,伪造ajax上传文件,src把某网站嵌套过来。
- form标签:
- HTML
-
- 属性:action 提交到哪里
- 属性:method 提交方式
- 属性:enctype 上传文件必须加上此参数
- input标签:
- text:普通文件
- password:密码
- checkbox:复选框 (name相同,value不同)
- radio:单选框 (name相同实现互斥,value不同)
- button:按钮,无效果
- file :上传文件
- submit:提交当前form表单
- reset:重置当前form表单
- select标签: 连续放3个,三级联动
- textarea多行标签:多行文本操作
- 默认值(补充)
-
- 单行文本默认值
- 多行文本默认值
- 标题分类默认值
- 单选框默认值
- 复选框默认值
-
-
- CSS
-
-
- 存在形式:
- 标签属性
- 头部style块
- 其他文件导入
- 最牛的:color:red !important;(使所在优先级不管处于哪个位置都最大。)
- 寻找选择器
- 标签选择器
- class选择器
- id选择器
- 层级选择器
- 组合选择器
- 属性选择器(补充)
- 样式
- color、width、height
- 外部样式=w,w等于980px
- 定义宽度的时候想利用width=100% 必须在最外部定义一个宽度。
- 背景:background
- 存在形式:
-
-
background-color:red;
background-image:url("image.jpg");
透明度:两种方式
-
-
-
-
opacity:0.6;
- background:rgba(0,0,0,,6)
-
-
-
position:
-
-
-
-
fixed 固定窗口,相对整个窗口,窗口位置不移动;
(应用对话框固定,返回顶部按钮)
- absolute 固定窗口,滚动窗口,窗口位置会移动;
- relative 默认单独无效果;
- relative+absolute定位 定位,
- Z-index:调整优先级
-
-
-
边距
-
内边距 本身增加:padding
- 外边距 本身不增加:margin
实现一个小例子:
例如:淘宝的登录框:
1.登录框用户名输入左边有一个小人的图标,代表输入用户名;
2.登录框密码输入左边有一个小锁的图标,代表输入密码;
浮动:float(
-
有个特点:拽回来clear:both;
- over-flow:hidden;
引入文件利用伪类清除浮动自定义小尖角后台管理页面布局
JavaScript介绍以及基本使用
- 介绍
- 存在形式
- 放置位置哪里更合适
- 变量
- 注释
- 数据类型
- 实例
- 数组
- 序列化
- 正则
- 时间处理
- JavaScript条件以及循环语句
- JavaScript函数
- javascript闭包以及面向对象
时间: 2025-01-20 06:12:36