zoukankan      html  css  js  c++  java
  • 第一天CSS实战培训及笔记及感想

    首先,我很激动。。。。。。

    3点了,凌晨3点了,我居然还没睡。总共不到3个小时的视频消化了6个小时,今天是培训班第一天,一下子就来高强度的讲课,整个上过基础班的都听得东倒西歪,更别说我这个没上基础班滴人,基本上讲完让自己做是无从下手的,很多基本的东西不会,例如fw和ws的基本操作也不会,就这么磕磕绊绊的学了一天回来抱着啃视频,一点点的跟着做事例,然后就做到现在了。。。实际上跟我的计划还差的有些远,我以为也就12点弄完了,然后再写一遍,没想到一直折腾到3点,而且还不敢保证说全会。不过好赖这么细嚼慢咽的,明天也许稍微听课会比今天强一些吧。

    今天有好几个同学也是在熬夜学习,我只听别人说过培训班从早上到晚回来还要学习到凌晨,我感觉这种事儿不会发生在我身上,然后。。。然后第一天就发生了这样的事儿,买噶!!!

    真的都是在脑力吸收,说做笔记,学了一整天老师课上笔记没做多少,我最后整理下的也没多少,但是今天的知识量却是巨大的。

    不行了,我脑袋迷糊的不行了。贴上笔记上床睡觉!

    第一天CSS笔记

    可能用到的基础东西:

    text-align规定文本的水平对齐方式。

    font字体

    相对定位:position:relative;

    绝对定位:position:absolute;

    如何处理溢出的内容:剪切隐藏 overflow: hidden;

    权重:

    标签选择器 1

    类选择器 10

    id 选择器 100

    行内样式标签 1000

    !important 无穷大

    继承权重是零

    字体font-weight:bold; 为700粗

    引入外部css方式:<link rel=”stylesheet” href=”css/base.css”/>

    注:base.css为基本样式;global.css为全局样式;index.css首页样式

    引入图标方式:<link rel="shortcut icon" href="favicon.ico" />

    Font:字体加粗 字号/行高 字体; 必须要有字号和字体

    例子:400 15px/15px “宋体”;

    让字体加粗font-weight:700;

    让字体不加粗font-weight:normal;

    不下划线 不删除线:text-decoration:none;

    定位: position:static; 静态定位 约等于标准流

    浮动的不浮动:float:none; none不浮动 left左浮动 right右浮动

    定位的不定位: position:static; absolute绝对定位 relative相对定位 fixed

    清除浮动又叫闭合浮动,案例:

    .clearfix:before,.clearfix:after{

    content:"";

    display:table; 清除浮动

    }

    before是之前

    after是之后

    一个块区内,前后清除,内容在中间,正好是闭合的。这是比较好的清除浮动的方法。

    先引入base.css然后再引入index.css,因为base是基础样式,而index.css是单个样式。

    引入图标的方式

    <link rel="shortcut icon" href="favicon.ico"/>

    shortcut是快捷导航的意思

    w在这里是版心得意思,版心又叫可视区

    CSS里有个规范:.shortcut {}单词和括号之间必须有个空格

    浮动盒子folat不需要加宽,因为会随着内容的增加扩宽。

    margin:0 auto;

    margin后面如果只有两个参数的话,第一个表示top和bottom,第二个表示left和right。因为0 auto,表示上下边界为0,左右则根据宽度自适应相同值(即居中)

    .one>ul>li*10>a

    等于下面

    <div class="one">
    <ul>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    </ul>
    </div>

    子绝父相,子绝对定位,父相对定位

    定位position:static; (正常流,占位置) absolute绝对定位(不占位置,随便飘) relative相对定位(占位置) fixed固定定位(不占位置,一般用于固定于屏幕不动)

    no-repeat在backgroud中含义为不平铺

    width和height最稳定,其次padding因为会撑开盒子,最不稳定是margin

    display: block;

    定义一下变为类似块级元素的,就可以定义长宽高了。

    clip_image002

    webstorm快捷键:

    ctrl+d复制当前行

    ctrl+shift+/注释

    上下行选中按鼠标滚轮,会统一进行编辑

    想要删掉正行,可以选中这行数列点delete

    .dt按table可以生成<div class=”dt”></div>

    .dt+.dla按table可以生成两个

    i>s*8按table可以生成<i><s></s><s></s><s></s><s></s><s></s><s></s><s></s><s></s></i>

    link按table是引入的意思,引入样式。

    ctrl+alt+t是环绕标签,用于想在一个地方加样式或者标签

    FW标尺使用方法

    clip_image004

    点一下网页层,然后按ctrl+alt+r出现标尺,把两端固定好后按shift键看之间的宽多少

    遇到的问题:

    需要解决红蜘蛛屏幕问题,顶端及滑动。

    将CSS初始化的每段搞清楚意思

    定位问题

    块级元素及浮动

    清除浮动问题

    权重问题

  • 相关阅读:
    UISegmentedControl分段控件
    手势识别器
    delegate代理设计模式
    target/action设计模式
    响应者链
    事件处理
    屏幕旋转
    混编ObjectiveC++
    AES128加密
    您不能拷贝项目“”,因为它的名称太长或包括的字符在目的宗卷上无效。
  • 原文地址:https://www.cnblogs.com/yiningfamily/p/4934909.html
Copyright © 2011-2022 走看看