锐客网

  1. 首页 > it技术 > >

九月第一周学习笔记分享

九月第一周学习笔记分享
文章图片
没法分享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 - 保存

    推荐阅读


    上一篇：坚持一定是好的，放弃一定不好吗

    下一篇：即墨微行爱心公益联盟救助困难家庭