js学习笔记6

4月27

1.列表操做:
列表的经常使用形式有图片形式和信息形式,经常使用的操做
:显示列表,选择列表,新增列表,删除列表,更新列表项


示例代码:




二.页面架构

1.布局方案:

CSS Reset:全部的HTML标签在没有设置样式的时候都被浏览器默认的样式渲染,
CSS样式重置就是删除浏览器的默认样式,能够理解为对于全局的样式定义.对于开发者来讲,
若不重置样式,可能会形成不方便.

2.布局解决方案:
了解CSS中属性及其特性,分析问题和需求才能选择和设计合适的布局方案.

2.1水平居中

inline-block + text-align:兼容性好

<div class="parent">
    <div class="child">Demo</div>
</div>

<style>
    .child {
        display: inline-block;
    }
    .parent {
        text-align: center;
    }
</style>


2.2 table + margin:兼容ie8以上,无需设置父元素样式

<div class="parent">
    <div class="child">Demo</div>
</div>

<style>
    .child {
        display: table;
        margin: 0 auto;
    }
</style>

2.3 absolute + transform:绝对定位脱离文档流,不会影响后续元素的布局,
CSS3兼容

<div class="parent">
    <div class="child">Demo</div>
</div>

<style>
    .parent {
        position: relative;
    }
    .child {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
</style>


2.4 flex+justify-content:只需设置父元素的属性,可是有兼容性问题

<div class="parent">
    <div class="child">Demo</div>
</div>

<style>
    .parent {
        display: flex;
        justify-content: center;
    }

    /* 或者下面的方法，能够达到同样的效果 */

    .parent {
        display: flex;
    }
    .child {
        margin: 0 auto;
    }
</style>



2.5 垂直居中


2.5.1 table-cell+ vertical-align:ie8以上

<div class="parent">
    <div class="child">Demo</div>
</div>

<style>
    .parent {
        display: table-cell;
        vertical-align: middle;
    }
</style>

2.5.2 absolute + transform
绝对定位脱离文档流，不会对后续元素的布局形成影响。
但若是绝对定位元素是惟一的元素则父元素也会失去高度。
<div class="parent">
    <div class="child">Demo</div>
</div>

<style>
    .parent {
        position: relative;
    }
    .child {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
</style>


2.5.3 flex+align-items:
只需设置父节点属性，无需设置子元素,有兼容性问题
<div class="parent">
    <div class="child">Demo</div>
</div>

<style>
    .parent {
        display: flex;
        align-items: center;
    }
</style>




2.6 水平与垂直居中

2.6.1  inline-block + text-align + table-cell + vertical-align
兼容性好
<div class="parent">
    <div class="child">Demo</div>
</div>

<style>
    .parent {
        text-align: center;
        display: table-cell;
        vertical-align: middle;
    }
    .child {
        display: inline-block;
    }
</style>


2.6.2 absolute + transform

绝对定位脱离文档流，不会对后续元素的布局形成影响。
<div class="parent">
    <div class="child">Demo</div>
</div>

<style>
    .parent {
        position: relative;
    }
    .child {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
</style>

2.6.3 flex + justify-content + align-items
只需设置父节点属性，无需设置子元素
有兼容性问题

<div class="parent">
    <div class="child">Demo</div>
</div>

<style>
    .parent {
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>


5.3 多列布局

1.一列定宽,一列自适应

1.1 float + margin

<div class="parent">
    <div class="left">
        <p>left</p>
    </div>

    <div class="rigth">
        <p>right</p>
    </div>

</div>

<style>
    .left{
        float: left;
        width: 100px;
    }

    .rigth{
        margin-left: 100px;
    }
</style>
要兼容ie6,.left加入margin-left:-3px;

1.2 float+margin+(fix)


<div class="parent">
    <div class="left">
        <p>left</p>
    </div>

    <div class="right-fix">
        <div class="right">
            <p>right!</p>
        </div>
    </div>
</div>

<style>
    .left{
        float: left;
        width: 100px;
    }

    .right-fix{
        float: right;
        width: 100%;
        margin-left: -100px;
    }

    .right{
        margin-left: 100px;
    }
</style>

兼容性比较好


1.3 float + overflow

<style>
    .left{
        float: left;
        width: 100%;
    }

    .right{
        overflow: hidden;
    }
</style>

1.4  table

<style>
    .parent{
        display: table;
        width: 100%;
        table-layout: fixed;
    }

    .left{
        display: table-cell;
        width: 100px;
    }

    .right{
        display: table-cell;

    }
</style>


2 2列定宽,一列自适应

<div class="parent">
    <div class="left">
        <p>left!!!</p>
    </div>

    <div class="center">
        <p>Center!!</p>
    </div>

    <div>
        <p>Center!</p>
    </div>

    <div class="right">
        <p>right!!</p>
    </div>

</div>


<style>
    .left,.center{
        float: left;
        width: 100px;
        margin-right: 20px;
    }

    .right{
        overflow: hidden;
    }
</style>




响应式布局

<head>    <meta charset="UTF-8">    <title>响应式布局</title>    <!--媒体查询-->    @media screen and (max-width: 320px) {    /* 视窗宽度小于等于 320px */    }    @media screen and (min-width: 320px) {    /* 视窗宽度大于等于 320px */    }    @media screen and (min-width: 320px) and (max-width: 1000px){    /* 视窗宽度大于等于 320px 且小于等于 1000px */    }    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"></head><body><!--页面优化技巧--><p>    页面优化能够提高页面的访问速度从而提升用户体验，优化的页面能够更好的提高 SEO 的效果同时也能够提升代码的可读性和维护性。    从下面的几个方面能够进行页面的优化：    减小请求数        图片合并        CSS 文件合并        减小内联样式        避免在 CSS 中使用 import    减小文件大小        选择适合的图片格式        图片压缩        CSS 值缩写（Shorthand Property)        文件压缩    页面性能        调整文件加载顺序        减小标签数量        调整选择器长度        尽可能使用 CSS 制做显示表现    加强代码可读性与可维护性        规范化        语义化        模块化    1.减小请求    请求数与网页加载时长有直接的关系。因此对于图标能够使用 Sprite 来减小小图标的请求数，    对于文本则能够经过合并缩小。（避免使用 import 引入 CSS 文件，而且请求是同步请求）    2.减小文件大小    页面上最大的流量产生与多媒体（视频或图片）因此为了减小文件大小，开发者须要使用合适的媒体格式并对文件进行压缩。    3.页面性能    页面文件的加载顺序自上而下，样式则须要放置于最顶部，脚本则放置于底部（由于 JavaScript 的加载会阻塞页面的绘制）。    减小标签的数量也能够起到提高性能的做用，缩短 CSS 选择器的层级来提升性能。    减小使用消耗性能的样式属性例以下面的这些：    expression .class{width: expression(this.width > 100?'100px':'auto')}    filter .class{filter:alpha(opacity=50)}    border-radius    box-shadow    gradients    页面中所使用的图片尺子应该与现实尺寸相符不然在图标下载后须要重绘致使性能降低。    能使用样式（使用 CSS 的类名）实现的交互就不使用脚本（须要重绘致使屡次页面渲染）来实现。    可读性与可维护性    开发以前须要明确规范，尤为是对人协做时。使用 HTML5 语义化的标签来制做页面，一样也适用于样式选择器的 ID 与类名。    在使用开发中的奇技淫巧的适合须要深思是否须要使用。模块化的制做页面和样式，提升可复用性并减小文件大小。    注释注释注释，在代码中添加注释，利人利己。</p></body>