Front-end day2

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Front-end day2相关的知识,希望对你有一定的参考价值。

Front-end day1

  1. 通过上节作业总结:

    1. 文本内容居中:text-align:center;

    2. 内联标签默认有多大占多大,设置长、宽没有用,用display:inline-block; 将内联标签转为块级标签,再设置长款。

    3. 每个标签默认都有自己的样式,我们要对标签样式设计,就要先把默认的样式去掉,用:margin:0; padding:0; 分别取消外边距、内边距。

    4. 当有display:inline-block;的时候,默认堆叠,边距都有3px;解决办法:float:left 

    5. 改造标签:用拼接

    6. 默认的img标签是由边距的,IE浏览器可以看出来;解决办法:border:0;

  2. 上节回顾:

      1. 头部信息:编码、title、style、link

      2. 身体包括:内联标签、块级标签、inline-block(前面两者都具有)

      3. a标签:属性:target、href

      4. img标签:src、alt(当图片没有刷出来,就显示alt定义的属性文字)

      5. iframe标签:嵌套网站,伪造ajax上传文件,src把某网站嵌套过来。

      6. form标签:

      7. html

          1. 属性:action 提交到哪里

          2. 属性:method 提交方式

          3. 属性:enctype 上传文件必须加上此参数

          4. input标签:

          5. text:普通文件

          6. password:密码

          7. checkbox:复选框 (name相同,value不同)

          8. radio:单选框 (name相同实现互斥,value不同)

          9. button:按钮,无效果

          10. file :上传文件

          11. submit:提交当前form表单

          12. reset:重置当前form表单

          13. select标签: 连续放3个,三级联动

          14. textarea多行标签:多行文本操作

          15. 默认值(补充)

              1. 单行文本默认值

              2. 多行文本默认值

              3. 标题分类默认值

              4. 单选框默认值

              5. 复选框默认值

      8. CSS

        1. 存在形式:

          1. 标签属性

          2. 头部style块

          3. 其他文件导入

          4. 最牛的:color:red !important;(使所在优先级不管处于哪个位置都最大。)

        2. 寻找选择器

          1. 标签选择器

          2. class选择器

          3. id选择器

          4. 层级选择器

          5. 组合选择器

          6. 属性选择器(补充)

        3. 样式

          1. color、width、height

          2. 外部样式=w,w等于980px

          3. 定义宽度的时候想利用width=100% 必须在最外部定义一个宽度。

          4. 背景:background

    background-color:red;

    background-image:url("image.jpg");

透明度:两种方式
        1. opacity:0.6;

        2. background:rgba(0,0,0,,6)

position:
        1. fixed    固定窗口,相对整个窗口,窗口位置不移动;

                 (应用对话框固定,返回顶部按钮)

        2. absolute   固定窗口,滚动窗口,窗口位置会移动;

        3. relative   默认单独无效果;

        4. relative+absolute定位    定位,

        5. Z-index:调整优先级

边距
  1. 内边距    本身增加:padding

  2. 外边距    本身不增加:margin

实现一个小例子:

例如:淘宝的登录框:

    1.登录框用户名输入左边有一个小人的图标,代表输入用户名;

    2.登录框密码输入左边有一个小锁的图标,代表输入密码;

浮动:float(
  1. 有个特点:拽回来clear:both;

  2. over-flow:hidden;

引入文件利用伪类清除浮动自定义小尖角后台管理页面布局

javascript介绍以及基本使用

  1. 介绍

  2. 存在形式

  3. 放置位置哪里更合适

  4. 变量

  5. 注释

  6. 数据类型

  7. 实例

  8. 数组

  9. 序列化

  10. 正则

  11. 时间处理

  12. JavaScript条件以及循环语句

  13. JavaScript函数

  14. javascript闭包以及面向对象


本文出自 “杨栋豪” 博客,请务必保留此出处http://506554897.blog.51cto.com/2823970/1863170

以上是关于Front-end day2的主要内容,如果未能解决你的问题,请参考以下文章

64551 Front-End Developer (Angular)

Front-End——工具使用

Front-end 前端优化总结

Front-End

Front-end day1

Front-End——HTML