HTTML4&CSS2--综合案例

网易云音乐导航栏

效果图


2018-12-05_180102.png
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>网易云音乐导航条 demo</title>
    <style>
        body{
            padding: 0px;
            margin: 0px;
        }
        .nav{
            list-style-type: none;
            background-color: #C20C0C;
            width: 100%;
            height: 50px;
            line-height: 50px;
            text-align: center;  
            font-size:  0;    /*解决li各个块之间空隙问题*/
        }
        /* 选择器分组 */
        .nav li, .nav a{
            display: inline-block;
            width: 80px;         
        }
        ul a{
            font-size: 17px;     /*配合font-size:0;解决li块之间空隙的问题*/
            /* text-decoration--去掉下划线 */
            text-decoration: none;
            color: #fff;
        }
        .menu{
            background-color: #9B0909;           
        }
        /* 伪类选择器--a:hover */
        .nav a:hover{
            background-color: #fff;
            color: #9B0909;
        }
    </style>
</head>
<body>
    <ul class="nav">
        <li><a href="#">推荐</a></li>
        <li><a href="#">排行榜</a></li>
        <li><a href="#" class="menu">歌单</a></li>
        <li><a href="#">主播电台</a></li>
        <li><a href="#">歌手</a></li>
        <li><a href="#">新碟上架</a></li>
    </ul>
</body>
</html>

新闻标题列表

效果图：


image.png
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>新闻标题列表 demo</title>
    <style>
        ul{
            
            list-style-type: none;
            width: 500px;
            height: 120px;
        }
        li{
            border-bottom: 1px dotted #2f8af3;

            /* 将line-height与height设置为相同高度可以实现文字垂直居中的效果 */
            height: 30px;
            line-height: 30px;

            /* 以下是一种组合--将多余的文本隐藏且将隐藏的文本用省略号代替(最多3个省略号)，
            white-space: nowrap;--强制将文本保持在同一行，除非遇到br标签或者直到文本结束才能换行 
            overflow: hidden;--将多余的文本隐藏
            text-overflow: ellipsis;--将隐藏的文本用省略号代替*/
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
        <!-- ul>li*4{文本$}：一次创建4个li且为其赋值 -->
        <!-- <ul>
            <li>文本1</li>
            <li>文本2</li>
            <li>文本3</li>
            <li>文本4</li>
        </ul> -->
        <!-- ul>li*4>lorem20：一次创建4个li且为每个li写入20个字符的内容 -->
        <ul>
            <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus repudiandae error beatae deserunt expedita sequi, iure veritatis aliquam atque recusandae?</li>
            <li>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Harum alias soluta nemo temporibus, quam sapiente id labore porro. Aspernatur, laudantium.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore molestias ullam, similique deleniti quisquam consequatur eum corrupti earum assumenda ipsa.</li>
            <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, blanditiis expedita! Quo distinctio necessitatibus molestias eius asperiores perferendis similique officiis.</li>
        </ul>    
</body>
</html>

教学管理系统登录页

2018-12-05_180506.png
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>login demo</title>
    <link rel="stylesheet" href="../CSS/reset.css">
    <link rel="stylesheet" href="../CSS/base.css">
    <style>
        *{
            /* 清除浏览器默认样式 */
            padding: 0;
            margin: 0;
            border: none;
        }
        div.login{
            width: 340px;
            border: 1px solid #ccc;
            margin: 0 auto;
            margin-top: 150px;
            padding: 25px;
            /* 边框阴影 */
            box-shadow: 0 0 2px 2px rgba(0, 0, 0,0.1);
            border-radius: 5px;
        }
        .login h3{
            font-size: 24px;
            font-weight: bold;
            text-align: center;
            padding: 25px;
        }
        .login input{
            width: 313px;
            margin: 5px;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .login #submit{
            width: 313px;
            box-sizing: content-box;
            margin: 5px;
            padding: 9px;
            background-color: #007ACC;
            color: #fff;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div class="login">
        <form action="https://www.baidu.com" method="get">
            <h3>教学管理系统</h3>
            <div><input type="text" name="username" id="username" placeholder="请输入用户名"></div>
            <div><input type="password" name="password" id="password" placeholder="请输入密码"></div>
            <div><button id="submit">登录</button></div>
        </form>
    </div>
</body>
</html>

美食杰菜单详情页

效果图


美食网.png

HTML部分

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- SEO优化 -->
    <meta name="keywords" content="美食,美食网,菜谱,菜谱网,美食地图,食谱">
    <meta name="description" content="美食网 - 做你最喜爱的美食网，菜谱网。找家常菜谱，上美食网。">
    <title>egg demo</title>
    <link rel="stylesheet" href="../美食网/css/reset.css">
    <link rel="stylesheet" href="../美食网/css/base.css">
    <link rel="stylesheet" href="../美食网/css/style.css">
</head>

<body>
    <!-- 头部 -->
    <div class="header clearfix">
        <div class="header-c">
            <h1><img src="../美食网/images/logo.png" alt="美食网"></h1>
            <div class="headerItem">
                <a href="#" class="link qq">QQ登录</a>
                <a href="#" class="link weibo">微博登录</a>
                <a href="#">注册</a>
                <a href="#">登录</a>
            </div>
        </div>
    </div>
    <!--div.header END-->

    <!-- 导航栏 -->
    <div class="nav">
        <ul class="navbar">
            <li class="current"><a href="#"><span>首页</span></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>
                <span><img src="../美食网/images/icon.png" alt="美食达人"></span>
            </li>
            <li><a href="#">菜谱视频</a></li>
            <li><a href="#">手机版下载</a></li>
        </ul>
    </div>
    <!--div.nav END-->

    <!-- 菜单详情 -->
    <div class="menu">
        <div class="path">
            <ul>
                <li><a href="#">首页</a></li>
                <li>&gt;</li>
                <li><a href="#">菜谱大全</a></li>
                <li>&gt;</li>
            </ul>
        </div>
        <!--div.path END-->
        <div class="main">
            <h2>西红柿炒鸡蛋</h2>
            <p><span>“</span>这道菜，俺从小吃到大，它承载着我儿时的全部味觉记忆，啥也不说了，吃吧同志们。<span>”</span></p>
            <h3>材料</h3>
            <ul class="material clearfix">
                <li><a href="#">中型西红柿</a><span>2个</span></li>
                <li><a href="#">鸡蛋</a><span>2个</span></li>
                <li><a href="#">料酒</a><span>1茶匙<em>(5ml)</em></span></li>
                <li><a href="#">清水</a><span>1汤匙<em>(15ml)</em></span></li>
                <li><a href="#">青葱</a><span>2根</span></li>
                <li><a href="#">白糖</a><span>2茶匙<em>(10克)</em></span></li>
                <li><a href="#">番茄沙司</a><span>2汤匙<em>(30ml)</em></span></li>
                <li><a href="#">盐</a><span>1茶匙<em>(3克)</em></span></li>
            </ul>
            <h3>制作步骤</h3>
            <ol class="step">
                <li><em>1.</em>将鸡蛋打散，调入料酒和清水，继续搅匀。锅烧热，倒入油大火加热，待油8成热时，倒入鸡蛋，并用铲子迅速搅散。盛出备用。</li>
                <li><em>2.</em>用叉子叉住西红柿底部，放在火上烤10秒钟，待皮裂开后，撕去西红柿皮，将西红柿切块。青葱洗净切碎</li>
                <li><em>3.</em>锅中倒入油大火加热，待油7成熟时，放入青葱碎，随后倒入西红柿块，煸炒2分钟，待西红柿出汤后，调入白糖和番茄沙司，最后放入炒好的鸡蛋搅匀，出锅前放盐即可。</li>
            </ol>
            <h3>图片</h3>
            <ul class="images clearfix">
                <li>
                    <a href="#">
                        <img src="images/egg-1.jpg" alt="准备材料">
                    </a>
                    <span>准备材料</span>
                </li>
                <li>
                    <a href="#"><img src="images/egg-2.jpg" alt="炒鸡蛋">
                    </a>
                    <span>炒鸡蛋</span>
                </li>
                <li>
                    <a href="#"><img src="images/egg-3.jpg" alt="西红柿去皮">
                    </a>
                    <span>西红柿去皮</span>
                </li>
                <li>
                    <a href="#">
                        <img src="images/egg-4.jpg" alt="爆香葱花">
                    </a>
                    <span>爆香葱花</span>
                </li>
                <li>
                    <a href="#"><img src="images/egg-5.jpg" alt="炒西红柿">
                    </a>
                    <span>炒西红柿</span>
                </li>
                <li>
                    <a href="#"><img src="images/egg-6.jpg" alt="把鸡蛋放入一起炒">
                    </a>
                    <span>把鸡蛋放入一起炒</span>
                </li>
                <li>
                    <a href="#"><img src="images/egg-7.jpg" alt="出锅前放盐">
                    </a>
                    <span>出锅前放盐</span>
                </li>
                <li>
                    <a href="#"><img src="images/egg-8.jpg" alt="出锅">
                    </a>
                    <span>出锅</span>
                </li>
            </ul>
        </div>
        <!--div.mian END-->

    </div>
    <!--div.menu END-->

    <!-- 尾部 -->
    <div class="footer">
        <dl class="link  clearfix">
            <dt class="blogroll">友情链接</dt>
            <dd>美食</dd>
            <dd>体质测试</dd>
            <dd>伊特</dd>
            <dd>大粤网美食</dd>
            <dd>9酷音乐网</dd>
            <dd>爱奇艺生活</dd>
            <dd>365音乐网</dd>
            <dd>图吧</dd>
            <dd>汽车论坛</dd>
            <dd>39健康饮食</dd>
            <dd>QQ下载</dd>
            <dd>家具网</dd>
            <dd>搜狐美食</dd>
            <dd>美食天下</dd>
            <dd>中华美食网</dd>
            <dd>合肥公交网</dd>
            <dd>苹果园</dd>
            <dd>红餐微杂志</dd>
            <dd>北京搜房网</dd>
            <dd>更多友情链接</dd>
        </dl>
    </div>
    <!--div.footer END-->
    <div class="back-to-top"><a href="#" class="arrow">回到顶部</a></div>
</body>
</html>

--
CSS部分

div.header{
    background-color: #C10510;
    height: 130px;
    width: 100%; 
    width: 100%;
}
.header .header-c{
    display: block;
    margin: 0 auto;
    width: 990px;
    height: 130px;
}
div.header h1{
    text-align: center;
    height: 130px;
    line-height: 130px;
    float: left;
}
.header .header-c .headerItem{
    float: left;
    float: right;
    height: 130px;
}
.headerItem a{
    font-size: 12px;
    color: #fff;
    padding-left: 27px;
    padding-right: 15px;
    display: inline-block;
    margin-top: 57px;
}
.headerItem .qq{
    height: 28px;
    line-height: 28px;
    background: url(../images/topdsflogin_icon.gif) 0 0 no-repeat;
}
.headerItem .weibo{
    height: 28px;
    line-height: 28px;
    background: url(../images/topdsflogin_icon.gif) -2px -29px no-repeat;
}
.header-c .headerItem a:hover{
   text-decoration: underline;
   background-color: rgba(8, 0, 0, 0.3);
   border-radius: 4px;
}
div.header img{
    vertical-align: middle;
}

div.nav ul{
    text-align: center;
    height: 76px;
    background-color: #fff;
    box-shadow: 0 0 1px 1px #ddd;
}
ul.navbar li{
    display: inline-block;
    height: 76px;
    line-height: 76px;
    position: relative;
}
.nav ul a{
    display: inline-block;
    height: 76px;
    line-height: 76px;
    padding: 0 20px;
    font-size: 18px;
    font-weight: bold;
}
.nav ul li img{
    position: absolute;
    top: 8px;
    left: 84px;
}
.nav ul .current span{
    border-bottom: 4px solid red;
    display: inline-block;
    height: 76px;
} 
  div.menu{
    width: 990px;
    margin: 0 auto;
} 
div.path{
    height: 88px;
}
div.path ul li{
    display: inline-block;
    height: 88px;
    line-height: 88px;
    font-size: 17px;
} 
div.main{
    padding: 20px 0;
    background-color: #fff;
}
div.main h2{
    font-size: 35px;
    text-align: center;
    height: 88px;
    line-height: 88px;
}
div.main p{
    margin-top: 20px;
    padding-left: 15px; 
}
.main p span{
    font-size:30px;
    font-family: Arial;
    color: #ddd;
}
h3{
    font-size: 24px;
    height: 66px;
    line-height: 66px;
    margin-top: 20px;
    padding-left: 15px; 
    border-bottom: 1px solid #eee;
}
.material li a{
    height: 8px;
    line-height: 8px;
}
.material li a:hover{
    color: red;
    text-decoration: underline;
}

.material li{
    float: left;
    width: 207.5px;
    border-bottom: 1px solid #eee;
    padding: 20px;
}
.material li span{
    margin-left: 13px;
    font-size: 13px;
    color: #A699A6;
}
.material li span em{
    margin-left: 8px;
}
ol.step{
    margin-top: 20px;
    padding-left: 15px;   
}
ol.step em{
    color: #ff3232;
    font-size: 20px;  
    font-style: italic;
    font-family: Arial;
}
.main .images{
    padding: 20px;
}
ul.images li{
    float: left;
    padding: 15px;
    border: 1px solid #eee; 
    margin: 10px;
    /* 将li的高度设置为图片的高度，消除蓝色边框 */
    height: 232px;
    position: relative;
}
ul.images img{
    /* 将img宽度设置为li宽度 */
    width: 185.5px;
}
ul.images li:hover{
    box-shadow: 0 0 1px 1px rgba(47, 50, 53, 0.2);
}
ul.images li span{
    position: absolute;
    bottom: 15px;
    left: 15px;
    background: #3F3A32;
    opacity: 0.3;
    width: 185.5px;
    height: 40px;
    line-height: 40px;
    color: #fff;
    text-align: center;
}

div.footer{
    background-color: #3F3A32;
    height: 180px;
    margin-top: 39px;
}
dl dt.blogroll{
    border-bottom: 1px solid #444;
    padding: 40px 0 11px 0;
}
.footer dl.link{
    width: 990px;
    margin: 0 auto;
}

dl.link dt{
    font-size: 15px;
    color: #fff;
}

dl.link dd{
    font-size: 14px;
    float: left;
    width: 99px;
    color: #999;
    padding-top: 11px; 
}
.back-to-top{
    background: url(../images/backtotop_icon.png) no-repeat;  
    width: 48px;
    height: 47px; 
    position: fixed;
    right: 0;
    bottom: 0;
    left: 50%;
    margin-left: 495px; 
    /* 将文字隐藏 */
    font-size: 0; 
}
.arrow{
    /* a标签是行内元素，如果要改变它的高度和宽度，需将其转换为行内块或块元素 */
    display: inline-block;
    width: 48px;
    height: 47px;  
} 
.arrow:hover{
    background: url(../images/backtotop_icon.png) 0 -48px no-repeat;

}

点击登录弹出登录框

效果图：


2018-12-05_180754.png
<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>mask demo</title>
    <style>

        *{
            /* 清除浏览器默认样式 */
            padding: 0;
            margin: 0;
        }
        div.mask{
            position: fixed;
            top: 0;
            left: 0;
            z-index: 888;
            background: #000;
            opacity: 0.2;
            width: 100%;
            height: 100%;
            display: none;
        }

        div.login{
            position: fixed;
            top: 50%;
            left: 50%; 
            z-index: 1000;
            margin-top: -170px;
            margin-left: -170px;
            width: 340px;
            border: 1px solid #ccc;
            padding: 25px;
            /* 边框阴影 */
            box-shadow: 0 0 2px 2px rgba(0, 0, 0,0.1);
            border-radius: 5px;
            background-color: #fff;
            display: none;
        }
        div.login span{
            position: absolute;
            top: 10px;
            right: 10px;
            /* 将文本X变为pointer */
            cursor: pointer;
        }
        .login h3{
            font-size: 24px;
            font-weight: bold;
            text-align: center;
            padding: 25px;
        }
        .login input{
            width: 313px;
            margin: 5px;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .login #submit{
            width: 313px;
            box-sizing: content-box;
            margin: 5px;
            padding: 9px;
            background-color: #007ACC;
            color: #fff;
            border-radius: 5px;
        }

    </style>

    <script>
        function submit1() {
            document.getElementById("login").style.display = 'block';
            document.getElementById("mask").style.display = 'block';
        }
    </script>
    <script>
        function close1() {
            document.getElementById('login').style.display = 'none';
            document.getElementById("mask").style.display = 'none';
        }
    </script>
</head>

<body>
    <div class="content">Welcome!</div>
    <button id="submit" onclick="submit1()">登录</button>
    <div class="mask" id="mask"></div>
    <div class="login" id="login">
        <form action="https://www.baidu.com" method="get">
            <h3>教学管理系统</h3>
            <div><input type="text" name="username" id="username" placeholder="请输入用户名"></div>
            <div><input type="password" name="password" id="password" placeholder="请输入密码"></div>
            <div><button id="submit">登录</button></div>
        </form>
        <span onclick="close1()">X</span>
    </div>
</body>
</html>

王者荣耀首页

效果图


王者荣耀首页.png

--
HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>index</title>
    <link rel="stylesheet" href="../王者荣耀/CSS/reset.css">
    <link rel="stylesheet" href="../王者荣耀/CSS/base.css">
    <link rel="stylesheet" href="../王者荣耀/CSS/index.css">
    <link rel="stylesheet" href="../王者荣耀/CSS/animation.css">
</head>
<body>
    <div class="topbar">
        <span>腾讯logo</span>
    </div>
    <div class="container">
        <div class="logo">王者荣耀logo</div>
        <img class="slogan" src="../王者荣耀/images/slogan.png" width="560" height="242" alt="一战封神">
        <a class="zzrz" href="#">作者入驻</a>
        <a class="mtrz" href="#">媒体入驻</a>
        <div class="arrow">箭头</div>
    </div>
</body>
</html>

--
CSS代码

html,body{
    height: 100%;
    overflow: hidden;
}
.topbar{
    height: 40px;
    padding-left: 200px;
}
.topbar span{
    background: url(../images/ost-bg.png) 0 -40px no-repeat;
    /* 将行内元素转换为块元素 */
    display: block;
    width: 205px;
    height: 40px;
    text-indent: -500px;
}
.container{
    background: url(../images/p1-bg.jpg) no-repeat;
    height: 100%;
    /* CSS属性会根据 @viewport 来初始化一个缩放因数。 */
    zoom: 0.715;
    position: relative;
}
.container .logo{
    background: url(../images/logo.png) no-repeat;
    display: block;
    width: 502px;
    height: 97px;
    position: absolute;
    top: 30px;
    left: 200px;
    z-index: 99;
    /* 将文字隐藏 */
    text-indent: -500px;
}
.container .slogan{
    position: absolute;
    display: block;
    left: 50%; 
    top: 236px;
    margin-left: -272px;
}
.container .zzrz{
    background: url(../images/spr.png) no-repeat;
    width: 310px;
    height: 80px;
    position: absolute;
    left: 50%;
    top: 664px;
    margin-left: -350px;
    /* 将文字隐藏 */
    text-indent: -500px;
}
.container .mtrz{
    background: url(../images/spr.png) -310px 0 no-repeat;
    width: 310px;
    height: 80px;
    position: absolute;
    right: 50%;
    top: 664px;
    margin-right: -350px;
    /* 将文字隐藏 */
    text-indent: -500px;
}
.container .arrow{
    background: url(../images/spr.png) -630px 0 no-repeat;
    width: 96px;
    height: 48px;
    position: absolute;
    left: 50%;
    bottom: 80px;
    display: block;
    margin-left: -46px;
    /* 将文字隐藏 */
    font-size: 0;
}

--
实现动态效果的CSS代码

.container .slogan {
    -webkit-animation: scaleIn 0.5s 0.3s both;
    animation: scaleIn 0.5s 0.3s both;
}

.container .zzrz {
    -webkit-animation: fadeInLeft 0.5s both;
    animation: fadeInLeft 0.5s both;
    animation-delay: 0.8s;
    -webkit-animation-delay: 0.8s;
}
.container .mtrz {
    -webkit-animation: fadeInRight 0.5s both;
    animation: fadeInRight 0.5s both;
    animation-delay: 0.8s;
    -webkit-animation-delay: 0.8s;
}
.arrow {
    animation: arrow 0.6s infinite alternate;
    -webkit-animation: arrow 0.6s infinite alternate;
}


@-webkit-keyframes scaleIn {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(2, 2, 2);
                transform: scale3d(2, 2, 2);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
                transform: scale3d(1, 1, 1);
    }
}
@keyframes scaleIn {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(2, 2, 2);
                transform: scale3d(2, 2, 2);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
                transform: scale3d(1, 1, 1);
    }
}

@-webkit-keyframes fadeInLeft {
    from {
      opacity: 0;
      -webkit-transform: translate3d(-60%, 0, 0);
              transform: translate3d(-60%, 0, 0);
    }
    to {
      opacity: 1;
      -webkit-transform: none;
              transform: none;
    }
}
@keyframes fadeInLeft {
    from {
      opacity: 0;
      -webkit-transform: translate3d(-60%, 0, 0);
              transform: translate3d(-60%, 0, 0);
    }
    to {
      opacity: 1;
      -webkit-transform: none;
              transform: none;
    }
}
@-webkit-keyframes fadeInRight {
    from {
      opacity: 0;
      -webkit-transform: translate3d(60%, 0, 0);
              transform: translate3d(60%, 0, 0);
    }
    to {
      opacity: 1;
      -webkit-transform: none;
              transform: none;
    }
}
@keyframes fadeInRight {
    from {
      opacity: 0;
      -webkit-transform: translate3d(60%, 0, 0);
              transform: translate3d(60%, 0, 0);
    }
    to {
      opacity: 1;
      -webkit-transform: none;
              transform: none;
    }
}

@-webkit-keyframes arrow {
    0% {
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
      opacity: 0.6;
    }
    80%,100% {
      -webkit-transform: translate3d(0, 20px, 0);
              transform: translate3d(0, 20px, 0);
      opacity: 1;
    }
}
  
@keyframes arrow {
    0% {
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
      opacity: 0.6;
    }
    80%,100% {
      -webkit-transform: translate3d(0, 20px, 0);
              transform: translate3d(0, 20px, 0);
      opacity: 1;
    }
}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • iOS工具和框架1
    1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AGI阅读 16,012评论 3赞 119
  • 投票，让我看出自己在你心中的地位
    今天无事翻看朋友圈，忽然看到一个家长发的最美家风--话家风书信征文投票，我想起来自己也是参与者，不知道入选没有。于...
    向日葵3阅读 447评论 0赞 0
  • 醉翁亭记
    天是那么的蓝，海是那么的宽广，我是那么的忧伤。我们曾经那么努力，熟悉，可是到最后我们还在原地踏步，是我不够努力，还...
    米凡阅读 290评论 0赞 0
  • 序章：环境搭建
    Windows 如果已经安装Pyhton环境最好卸载，书中代码为Python2.7版本，最新的Python 3前向...
    zydsb阅读 239评论 0赞 0
  • 卷
    卷 硬盘上的存储区域。驱动器使用一种文件系统（如 FAT 或 NTFS）格式化卷，并给它指派一个驱动器号。单击“W...
    念念不忘_60e9阅读 682评论 0赞 0