美文网首页
九月第一周学习笔记分享

九月第一周学习笔记分享

作者: Jadon7 | 来源:发表于2018-09-09 20:19 被阅读0次

    没法分享markdown,以下文本可以直接复制到bear看完整效果。有需要的可以找我要完整markdown格式

    # 9月第一周学习笔记#学习/笔记## 疑惑* 所有``标签引用的内容都会有自己默认的一套class,例如字体图标库当中的每一个单独的 icon 就是一个class---## 一般属性* `border-color` ::边框颜色::* `border-width` ::边框宽度::* `border-style` ::边框风格::1. 一般用`solid`* `border-radius`1. 可以用像素也可以用百分比2. 百分比的放在描边后面,否则先百分比再描边会有不同效果--- ## 文本* `

    `::无序号列表::用法:```

    milk

    cheese

    ```效果[image:D974D04B-D0B5-4AA1-BDC2-3FA7C0E4EC07-1084-000058E89D9ED0F2/29047CDE-85BD-4A7B-BD23-1E8AF65766DB.png]* `

    `::有序列表::(用法同**::无序列表::**)---## From表单* ``::输入框::* `placeholder`::输入框默认值::例:``* `

    `::数据上传服务器::例: `

    `* `submit`::提交按钮::例:`this button submits the form`* `required`::必填字段::例:``* `radio`::单选按钮::1. 所有关联的单选按钮应该**使用相同的name属性**例:```Indoorggdoor``` *`其中 type=“radio”`是指类型为单选按钮 *`indoor`用来给单选按钮加上右侧为indoor的文字 *`name=“indoor-outdoor”`用意给按钮命名,命名相同的按钮属于同一套单选系列* `checkbox`::复选框::嵌套在`;label`中使用* `checked`::默认选中::例:`Indoor`---* `

    `::盛装其他元素的容器::* `background-color`::背景颜色::* `id`::唯一属性::不要给任何元素相同的id用法例:`

    `CSS中引用id加#,例```#su {  background-color: green;}```---## 元素样式* `padding`::内边距::可以通过不同的方向控制`padding`的值`padding-top`上 `padding-right` 右`padding-bottom` 下 `padding-left`左也可以统一起来指定,例`padding: 10px 20px 10px 20px;`* `margin`::外边距::可以通过不同的方向控制`margin`的值,类似::padding::增加`margin`意味着元素达到边界时更小?可以设置负数——使元素变更大例:`margin: 20px;`* `border`::边框::---## 细碎* `!important`使元素使用的样式不会被覆盖用法例:```.pink-text {    color: red !important;  }```---## 颜色* ::hex code::RGB颜色是由六位十六进制数组成的(0-9,A-F),以两位为一对(16*16)分别表示 red-green-blue (红-绿-蓝)* 颜色缩写为三位表示RGB使用单个的16进制来表示(#FFF表示 red:F green:F blue:F)但是这里的 F≠F0,而是指吧256等分为16份,表示不同的阶段,即:F=FF* 颜色的表示方法1. `#FFFFFF`2. `#FFF`3. `rgb(255, 255, 255)`4. ---## 复合用法* 全局调整```body{    background-color: black;  }```调整`body`的样式会使用到附属元素当中在下边新建class并覆盖时会使用新样式* class 新建的属性总是会覆盖原来的属性,id属性会覆盖所有class属性,行内样式会覆盖所有属性(即在标签内直接写属性)除了写了`!important`的属性::**行内样式>ID样式>新的class>旧的class**::* 多个class的引用法`class="name1 name2"`* ``可以把几个元素放在一起,例:`

    ExampleExample:

    `---## Bootstrap:响应式设计* 需要添加``* `Example`无样式按钮1. `class=“btn”`按钮样式2. `class=“btn-primary“`深蓝色按钮3. `class=“btn-info”`浅蓝色按钮4. `class="btn-block"`按钮占满一行5. `class="btn-danger"`警示按钮* 12网格布局[image:FF3550C0-CCDF-44B3-B303-4FCFBBC80C93-1084-00008FD3B2F7E5DB/1E3E735A-FD84-4737-A7D6-5BEBDCACDADA.png]1. Class属性`.col-md-*`正在被占用且一般用在div属性当中,其中 md 代表 medium 意为栅格所在的屏幕大小为中等,其他的有 xs(extra small)/;*代表需要占用的网格数。例:```

    Example

    ```* `class=“well”`内阴影样式## Font Awesome 图标库* 字体大小会继承父级HMTL元素字体的大小* 需要添加``* 通过``标签引用,例``## jQuery———JavaScript库```  $(document).ready(function() {

      });```* 一般叫 ::decument ready function::使HTML渲染完成再执行,避免bug;1. `{}`中是 script 方法* 所有jQuery都是以 $ 开始的,读音bling* jQuery通过选择器来选择一个元素的,然后操作元素做些改变。* 举个例子,要让所有的按钮做弹回效果,只要把这段代码写在document ready function里面就可以了。`$("button").addClass("animated bounce");`1. `$("button”)`代表获取所有 button 元素(获取class可以用CSS中引用的方式,例 `$(“.example”) `自定义样式; `$(“#example”)`ID; `$("example”)`元素;)* `addClass() `方法可以给元素添加 class* `removeClass()`可以去掉元素上的 class* `.css()`可以改变CSS属性,CSS属性和值在引号内,且**用逗号分开**,例:`$("#example").css("color", "blue");`*`.prop()`改变元素的属性,例:`$("example").prop("disabled", true);`使元素不可选* `.html()`方法可以添加HTML标签和文字到元素,而元素之前的内容都会被方法的内容所替换掉。例:`$("h3").html("example");`可以将文本内容替换为example* `.text()`只能改变文本但不能修改标记* `.remove()`移除html元素* `.appendTo`移动元素,例`$("#example1").appendTo("#group");`* `.clone()`复制元素,::用法与appendTo有区别::例:`$("#example1").clone().appendTo("#group2");`需要同时使用clone和appendTo。这种用法叫做::function chaining::* `parent()`访问父级例`$("#example1").parent().css("background-color","red");`* `children()`访问子元素例`$("#group").children().css("color","red");`* `example:nth-child(n)`按索引序号选取元素(索引class)例1`$(".example:nth-child(2)").addClass("animated bounce");`代表以example为class的索引第二个结果添加class效果例2`$(".example:odd").addClass("animated shake");`以example为class且索引为奇数的结果天剑class1. 奇数:odd2. 偶数:even---## animated`fadeOut`淡出效果`hinge`悬挂出场😂---## codePen* 添加bootstrap:class设置-链接:https://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css - 保存

    相关文章

      网友评论

          本文标题:九月第一周学习笔记分享

          本文链接:https://www.haomeiwen.com/subject/shvdgftx.html