2016.3.15__H5页面实战__第七天

最新推荐文章于 2024-05-03 18:15:54 发布
最新推荐文章于 2024-05-03 18:15:54 发布
阅读量2.4k 收藏 5
点赞数 1
分类专栏： HTML 学习 H5 学习笔记 文章标签： html5 css3 页面 映纷创意 从零开始
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MR_LP/article/details/50896492
版权
本文档详细介绍了如何从零开始制作一个H5页面，以映纷创意官网首页为例，涵盖Photoshop图标获取、文件结构创建、CSS和HTML代码编写等内容。通过阶段测试，学习者能掌握网页布局和设计的基本步骤。
摘要由CSDN通过智能技术生成

如果您觉得这篇文章还不错，可以去H5专题介绍中查看更多相关文章。

个人简书地址：
dhttp://www.jianshu.com/users/5a2fd0b8fb30/latest_articles

这里写图片描述
这里写图片描述

阶段测试–映纷创意首页

今日制作一个网站首页。

官网地址：http://www.infinistudio.cn/
今日制作效果图：

这里写图片描述
这里写图片描述

今日制作网站逻辑概念：

这里写图片描述

既然已经分析过了界面要求和逻辑，那么我们来开始制作第一个页面。

首先是通过 Photoshop 去获取咱们网站的具体图标等。

在之后，分别去创建对应的文件夹，内部包含你的 CSS ， images 等文件夹。

创建之后，咱们正式开始今天的代码部分。

警告：以下代码部分，标签内容对应闭合，如果需要复制，请前往文章最底部。

首先咱们先来引入咱们的外部样式表。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="css/layout.css">
    </head>
    <body>
    </body>
</html>

头部

之后咱们来去在 BODY 中创建咱们的首页 logo 还有四个按钮。
为了方便查看，header 部分的 CSS 样式表，会在 header 部分结束的时候统一贴出来，大家稍安勿躁。

<div class="header">
            <a href="#"><img src="images/title2.png"/></a>
            <ul>
                <li><a href="#">HOME</a></li>
                <li><a href="#">WORK</a></li>
                <li><a href="#">CONTACT</a></li>
                <li><a href="#">JOIN US</a></li>
            </ul>
        </div>

Header部分 CSS 代码

/*首先来设置整个界面的文字样式，清除边距*/
*{
  margin: 0px;
  font-size: 17px;
  font-family: "黑体";
}
/*为整个代码区域附上一个灰色的背景色*/
body{
  background-color: rgb(242 , 242, 242);
}
/*===========================================================*/
/*                      头部                                  */
/*===========================================================*/
.header{
  width: 100%;
  height: 113px;
  background-color: rgba(0, 0, 0, 0.5);
  /*元素框从文档流完全删除，并相对于其包含块定位。
  包含块可能是文档中的另一个元素或者是初始包含块。
  元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。
  元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
  不过其包含块是视窗本身.*/
  position: fixed;
  /*设置图片居中*/
  text-align: center;
  /*设置阴影效果 属性分别对应 ： 横向距离 竖向距离 阴影距离 阴影颜色*/
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
}
/*调整头部 logo 尺寸*/
.header img{
  margin: 15px;
  width: 140px;
  height: 55px;
}
ul{
  list-style-type: none;
}
ul a{
  /*text-decoration: underline; 下滑线*/
  /*text-decoration: line-through; 删除线*/

  /*取消a的下滑线*/
  text-decoration: none;
}
a{
  color: rgba(255, 255, 255, 0.5);
}
/*伪类代码 a:hover 当我们的鼠标放在我们的 a 标签上，咱们可以去设置颜色或者大小等*/
a:hover{
  color: white;
}
li{
  /* display 属性规定元素应该生成的框的类型:默认inline。此元素会被显示为内联元素，元素前后没有换行符。*/
  display: inline;
  /*设置边距 属性为两个的时候，第一个属性设置上下高度 第二个属性设置左右宽度*/
  margin: 0px 30px;
  padding:0px 20px;

}

主体

创建了上方的用户 logo 和四个按钮，咱们接下来要开始制作咱们的主体部分了，主体首先是一个用户引导图，下面配上文字和内容，下方还有对应的点。
首先咱们来创建咱们的引导图

  <div class="content">
            -
            <div class="content_top">
                <div class="content_banner">
                    <a href="#" class="img_bannder"><img class="img_bannder" src="images/banner.jpg" alt="" /></a>
                    <p class="banner_title_bg">
                        优酷2014全视频之夜
                    </p>
                    <div class="xiaodiandian">
                        <p class="dian"> ・ </p>
                        <p class="dian"> . </p>
                        <p class="dian"> ・ </p>
                        <p class="dian"> ・ </p>
                        <p class="dian"> ・ </p>
                        <p class="dian"> ・ </p>
                    </div>
                </div>

                <div class="content_introduce">
                    <p class="line"></p>
                    <p class="introduce">&nbsp;&nbsp;&nbsp;&nbsp;Infini Studio (映纷创意)是一家创意设计机构，专注于品质型动画影像的创意与设计。我们使用设计、动画、特效及多种创新形式（Motion Graphic），将信息与内容进行动态视觉化创意呈现。并由动画导演、设计师、插画师、三维艺术家共同协作完成。服务的范围包括广告、影视、交互、新媒体等。</p>
                </div>
        </div>
</div>

创建了引导图之后，还需要创建下方的赞助商图标。

  <div class="content_company">
                    <p class="line"></p>
                    <div class="company_logo">
                        <img src="images/1.jpg"/>
                        <img src="images/2.jpg"/>
                        <img src="images/3.jpg"/>
                        <img src="images/4.jpg"/>
                        <img src="images/5.jpg"/>
                        <img src="images/6.jpg"/>
                        <img src="images/7.jpg"/>
                        <img src="images/8.jpg"/>
                        <img src="images/9.jpg"/>
                        <img src="images/10.jpg"/>
                        <img src="images/11.jpg"/>
                        <img src="images/12.jpg"/>
                        <img src="images/13.jpg"/>
                        <img src="images/14.jpg"/>
                    </div>
                </div>

咱们的小界面部分。

<div class="content_bottom">
                <div class="news_item">
                    <a href="#"><img src="images/news1.png"/></a>
                    <p>吴亦凡 -- 器官的纷争</p>
                </div>
                <div class="news_item">
                    <a href="#"><img src="images/news2.png"/></a>
                    <p>联想企业业务</p>
                </div>
                <div class="news_item">
                    <a href="#"><img src="images/news3.png"/></a>
                    <p>ME</p>
                </div>
                <div class="news_item">
                    <a href="#"><img src="images/news4.png"/></a>
                    <p>聚划算《世界聚在眼前》</p>
                </div>
                <div class="news_item">
                    <a href="#"><img src="images/news5.png"/></a>
                    <p>头条号</p>
                </div>
                <div class="news_item">
                    <a href="#"><img src="images/news1.png"/></a>
                    <p>吴亦凡 -- 器官的纷争</p>
                </div>
                <div class="news_item">
                    <a href="#"><img src="images/news2.png"/></a>
                    <p>联想企业业务</p>
                </div>
                <div class="news_item">
                    <a href="#"><img src="images/news3.png"/></a>
                    <p>ME</p>
                </div>
                <div class="news_item">
                    <a href="#"><img src="images/news4.png"/></a>
                    <p>聚划算《世界聚在眼前》</p>
                </div>
                <div class="news_item">
                    <a href="#"><img src="images/news5.png"/></a>
                    <p>头条号</p>
                </div>
            </div>
        </div>

CSS代码

/*===========================================================*/
/*                            内容区域                        */
/*===========================================================*/
.content{
  width: 70%;
  height: 1620px;
  margin: auto;
}
/*banner、公司介绍、合作企业*/
/*设置具体图片距离顶部标题栏的距离*/
.content_top{
  width: 100%;
  height: 690px;
  margin-top: 130px;
}
/*横幅*/
.content_banner{
  width: 100%;
  height: 490px;
}
/*设置标题栏下 图片的 尺寸*/
.content_banner .img_bannder{
  width: 100%;
  height: 420px;
  /*position: relative;*/
}
/*设置提示语大小颜色*/
.banner_title_bg{
  margin-top: -3px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 5px 0px;
}
.xiaodiandian{
  margin-top: 10px;
  text-align: center;
}
.dian{
  display: inline;
}
/*公司介绍*/
/*设置公司介绍所占得位置大小*/
.content_introduce{
  width: 100%;
  height: 80px;
}
.line{
  margin: 0px 10px;
  background-color: gray;
  height: 1px;
  /*透明Opacity：调整元素透明度；*/
  opacity: 0.1;
}
/*设置介绍文字的样式*/
.introduce{
  padding: 10px;
  font-size: 13px;
  color: darkgray;
  line-height: normal;
}
/*合作企业底部图片大小*/
.content_company{
  width: 100%;
  height: 100px;
}
div.company_logo{
  text-align: center;
}
div.company_logo img{
  width: 60px;
  height: 38px;
  /*需要注意：当设置属性为四个时， 属性分别对应 上 右 下 左 */
  padding: 10px 10px 0px 10px;
}
/*===========================================================*/
/*                          视频展示                          */
/*===========================================================*/
/*首先设置每一个视频图片居中*/
.content_bottom{
  width: 100%;
  height: 830px;
  text-align: center;
}
/*接下来来规定一下图片的位置尺寸*/
.news_item{
  /*这里设置 28% 主要是因为想一行 放入三列 28% * 3 = 84% 具体看实际情况而定*/
  width: 28%;
  height: 150px;
  float: left;
  text-align: center;
  margin: 20px;
  background-color: white;
  /*设置圆角 3 px 像素*/
  border-radius: 3px;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
}
/*设置背景图片*/
.news_item img{
  width: 100%;
  height: 78%;
  border-radius: 3px;
}
/*设置图片文字*/
.news_item p{
  text-align: center;
  padding: 5px;
  color: rgba(0, 0, 0, 0.5);
}
/*设置鼠标放上去，透明度降低*/
a:hover{
  opacity: 0.5;
}

这时候应该就已经设置完主体和头部了，那我们离完成也就不远了。
我们继续来设置我们的文章结尾。

<div class="footer">
            <table>
                <tr>
                    <td class="one">
                        <img src="images/contact1.jpg"/>
                        <img src="images/contact2.jpg"/>
                        <img src="images/contact3.jpg"/>
                    </td>
                    <td class="two">
                        <p class="vertical_line"></p>
                    </td>
                    <td class="three">
                        <img class="footer_logo" src="images/footer_logo.jpg"/>
                        <p>Infini Studio | 映纷创意</p>
                        <p>北京市朝阳北路107号院</p>
                        <p>Email:infinistudio@foxmail.com</p>
                        <p>QQ:7585917</p>
                        <p>weibo:@InfiniStudio</p>
                    </td>
                </tr>
            </table>
        </div>

CSS 代码部分

/*===========================================================*/
/*                            尾部                            */
/*===========================================================*/
/*设置尾部距离*/
.footer{
  width: 100%;
  height: 215px;
  background-color: rgb(224, 224, 224);
  margin-bottom: 40px;
}
/*更改尾部图片大小*/
.footer img{
  width: 36px;
  height: 30px;
  margin-top: 5px;
}
/*更改文字大小*/
.footer p{
  color: gray;
  padding: 3px 0px;
  font-size: 15px;
}
table{
  width: 100%;
}
td.one{
  width: 48%;
  text-align: right;
  /*设置元素的垂直对齐方式*/
  vertical-align: top;
}
td.two{
  width: 1%;
  text-align: center;
  height: 100%;
}
.vertical_line{
  margin-top: 5px;
  height: 195px;
  width: 1px;
  background-color: gray;
  opacity: 0.2;
}
td.three{
  width: 48%;
  text-align: left;
}
img.footer_logo{
  margin-top: -10px;
  width: 145px;
  height: 60px;
}

这时候，咱们的界面首页就基本完成了，但是还是有非常多的功能需要优化，但是咱们现在所学习的水平有限，等咱们技术好一点了，我会带着大家，用更高级的方式，从新制作一次这个界面。
欢迎大家留言挖坟。

今天就到这里，欢迎大家跟着我，每天10分钟，一起学习 H5.

附录：
代码源码：

html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="css/layout.css">
    </head>
    <body>

        <div class="header">
            <a href="#"><img src="images/title2.png"/></a>
            <ul>
                <li><a href="#">HOME</a></li>
                <li><a href="#">WORK</a></li>
                <li><a href="#">CONTACT</a></li>
                <li><a href="#">JOIN US</a></li>
            </ul>
        </div>

        <div class="content">
            -
            <div class="content_top">
                <div class="content_banner">
                    <a href="#" class="img_bannder"><img class="img_bannder" src="images/banner.jpg" alt="" /></a>
                    <p class="banner_title_bg">
                        优酷2014全视频之夜
                    </p>
                    <div class="xiaodiandian">
                        <p class="dian"> ・ </p>
                        <p class="dian"> . </p>
                        <p class="dian"> ・ </p>
                        <p class="dian"> ・ </p>
                        <p class="dian"> ・ </p>
                        <p class="dian"> ・ </p>
                    </div>
                </div>

                <div class="content_introduce">
                    <p class="line"></p>
                    <p class="introduce">&nbsp;&nbsp;&nbsp;&nbsp;Infini Studio (映纷创意)是一家创意设计机构，专注于品质型动画影像的创意与设计。我们使用设计、动画、特效及多种创新形式（Motion Graphic），将信息与内容进行动态视觉化创意呈现。并由动画导演、设计师、插画师、三维艺术家共同协作完成。服务的范围包括广告、影视、交互、新媒体等。</p>
                </div>

                <div class="content_company">
                    <p class="line"></p>
                    <div class="company_logo">
                        <img src="images/1.jpg"/>
                        <img src="images/2.jpg"/>
                        <img src="images/3.jpg"/>
                        <img src="images/4.jpg"/>
                        <img src="images/5.jpg"/>
                        <img src="images/6.jpg"/>
                        <img src="images/7.jpg"/>
                        <img src="images/8.jpg"/>
                        <img src="images/9.jpg"/>
                        <img src="images/10.jpg"/>
                        <img src="images/11.jpg"/>
                        <img src="images/12.jpg"/>
                        <img src="images/13.jpg"/>
                        <img src="images/14.jpg"/>
                    </div>
                </div>
            </div>

            <div class="content_bottom">
                <div class="news_item">
                    <a href="#"><img src="images/news1.png"/></a>
                    <p>吴亦凡 -- 器官的纷争</p>
                </div>
                <div class="news_item">
                    <a href="#"><img src="images/news2.png"/></a>
                    <p>联想企业业务</p>
                </div>
                <div class="news_item">
                    <a href="#"><img src="images/news3.png"/></a>
                    <p>ME</p>
                </div>
                <div class="news_item">
                    <a href="#"><img src="images/news4.png"/></a>
                    <p>聚划算《世界聚在眼前》</p>
                </div>
                <div class="news_item">
                    <a href="#"><img src="images/news5.png"/></a>
                    <p>头条号</p>
                </div>
                <div class="news_item">
                    <a href="#"><img src="images/news1.png"/></a>
                    <p>吴亦凡 -- 器官的纷争</p>
                </div>
                <div class="news_item">
                    <a href="#"><img src="images/news2.png"/></a>
                    <p>联想企业业务</p>
                </div>
                <div class="news_item">
                    <a href="#"><img src="images/news3.png"/></a>
                    <p>ME</p>
                </div>
                <div class="news_item">
                    <a href="#"><img src="images/news4.png"/></a>
                    <p>聚划算《世界聚在眼前》</p>
                </div>
                <div class="news_item">
                    <a href="#"><img src="images/news5.png"/></a>
                    <p>头条号</p>
                </div>
            </div>
        </div>

        <div class="footer">
            <table>
                <tr>
                    <td class="one">
                        <img src="images/contact1.jpg"/>
                        <img src="images/contact2.jpg"/>
                        <img src="images/contact3.jpg"/>
                    </td>
                    <td class="two">
                        <p class="vertical_line"></p>
                    </td>
                    <td class="three">
                        <img class="footer_logo" src="images/footer_logo.jpg"/>
                        <p>Infini Studio | 映纷创意</p>
                        <p>北京市朝阳北路107号院</p>
                        <p>Email:infinistudio@foxmail.com</p>
                        <p>QQ:7585917</p>
                        <p>weibo:@InfiniStudio</p>
                    </td>
                </tr>
            </table>
        </div>

    </body>
</html>

CSS 代码：

/*首先来设置整个界面的文字样式，清除边距*/
*{
  margin: 0px;
  font-size: 17px;
  font-family: "黑体";
}
/*为整个代码区域附上一个灰色的背景色*/
body{
  background-color: rgb(242 , 242, 242);
}
/*===========================================================*/
/*                      头部                                  */
/*===========================================================*/
.header{
  width: 100%;
  height: 113px;
  background-color: rgba(0, 0, 0, 0.5);
  /*元素框从文档流完全删除，并相对于其包含块定位。
  包含块可能是文档中的另一个元素或者是初始包含块。
  元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。
  元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
  不过其包含块是视窗本身.*/
  position: fixed;
  /*设置图片居中*/
  text-align: center;
  /*设置阴影效果 属性分别对应 ： 横向距离 竖向距离 阴影距离 阴影颜色*/
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
}
/*调整头部 logo 尺寸*/
.header img{
  margin: 15px;
  width: 140px;
  height: 55px;
}
ul{
  list-style-type: none;
}
ul a{
  /*text-decoration: underline; 下滑线*/
  /*text-decoration: line-through; 删除线*/

  /*取消a的下滑线*/
  text-decoration: none;
}
a{
  color: rgba(255, 255, 255, 0.5);
}
/*伪类代码 a:hover 当我们的鼠标放在我们的 a 标签上，咱们可以去设置颜色或者大小等*/
a:hover{
  color: white;
}
li{
  /* display 属性规定元素应该生成的框的类型:默认inline。此元素会被显示为内联元素，元素前后没有换行符。*/
  display: inline;
  /*设置边距 属性为两个的时候，第一个属性设置上下高度 第二个属性设置左右宽度*/
  margin: 0px 30px;
  padding:0px 20px;

}
/*===========================================================*/
/*                            内容区域                        */
/*===========================================================*/
.content{
  width: 70%;
  height: 1620px;
  margin: auto;
}
/*banner、公司介绍、合作企业*/
/*设置具体图片距离顶部标题栏的距离*/
.content_top{
  width: 100%;
  height: 690px;
  margin-top: 130px;
}
/*横幅*/
.content_banner{
  width: 100%;
  height: 490px;
}
/*设置标题栏下 图片的 尺寸*/
.content_banner .img_bannder{
  width: 100%;
  height: 420px;
  /*position: relative;*/
}
/*设置提示语大小颜色*/
.banner_title_bg{
  margin-top: -3px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 5px 0px;
}
.xiaodiandian{
  margin-top: 10px;
  text-align: center;
}
.dian{
  display: inline;
}
/*公司介绍*/
/*设置公司介绍所占得位置大小*/
.content_introduce{
  width: 100%;
  height: 80px;
}
.line{
  margin: 0px 10px;
  background-color: gray;
  height: 1px;
  /*透明Opacity：调整元素透明度；*/
  opacity: 0.1;
}
/*设置介绍文字的样式*/
.introduce{
  padding: 10px;
  font-size: 13px;
  color: darkgray;
  line-height: normal;
}
/*合作企业底部图片大小*/
.content_company{
  width: 100%;
  height: 100px;
}
div.company_logo{
  text-align: center;
}
div.company_logo img{
  width: 60px;
  height: 38px;
  /*需要注意：当设置属性为四个时， 属性分别对应 上 右 下 左 */
  padding: 10px 10px 0px 10px;
}
/*===========================================================*/
/*                          视频展示                          */
/*===========================================================*/
/*首先设置每一个视频图片居中*/
.content_bottom{
  width: 100%;
  height: 830px;
  text-align: center;
}
/*接下来来规定一下图片的位置尺寸*/
.news_item{
  /*这里设置 28% 主要是因为想一行 放入三列 28% * 3 = 84% 具体看实际情况而定*/
  width: 28%;
  height: 150px;
  float: left;
  text-align: center;
  margin: 20px;
  background-color: white;
  /*设置圆角 3 px 像素*/
  border-radius: 3px;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
}
/*设置背景图片*/
.news_item img{
  width: 100%;
  height: 78%;
  border-radius: 3px;
}
/*设置图片文字*/
.news_item p{
  text-align: center;
  padding: 5px;
  color: rgba(0, 0, 0, 0.5);
}
/*设置鼠标放上去，透明度降低*/
a:hover{
  opacity: 0.5;
}
/*===========================================================*/
/*                            尾部                            */
/*===========================================================*/
/*设置尾部距离*/
.footer{
  width: 100%;
  height: 215px;
  background-color: rgb(224, 224, 224);
  margin-bottom: 40px;
}
/*更改尾部图片大小*/
.footer img{
  width: 36px;
  height: 30px;
  margin-top: 5px;
}
/*更改文字大小*/
.footer p{
  color: gray;
  padding: 3px 0px;
  font-size: 15px;
}
table{
  width: 100%;
}
td.one{
  width: 48%;
  text-align: right;
  /*设置元素的垂直对齐方式*/
  vertical-align: top;
}
td.two{
  width: 1%;
  text-align: center;
  height: 100%;
}
.vertical_line{
  margin-top: 5px;
  height: 195px;
  width: 1px;
  background-color: gray;
  opacity: 0.2;
}
td.three{
  width: 48%;
  text-align: left;
}
img.footer_logo{
  margin-top: -10px;
  width: 145px;
  height: 60px;
}
MR_LP
关注
专栏目录
HTML5和CSS3 WEB技术开发
张晨光老师的播客
01-02 6451
B站视频参考：https://www.bilibili.com/video/BV1H44y1k7ze/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uwbid43Z-1672665963237)(asseits/image-20210831212039584.png)]HTML:超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。 HTML 不是一种编程语言（C、Java、python、R等），而是一种标记语言 (markup
H5学习_番外篇_弹性盒模型详解
热门推荐
MR_LP的博客
03-23 1万+
弹性盒模型详解 每天都是大晚上的给各位读者老爷写文章，我也是瀑布汗。(⊙﹏⊙)b 近日很多内容都是直接在网上摘录的，具体文章链接全部在文章最底部。 如果涉及到版权问题，请及时联系我，我会尽快做出处理。 今天弄的东西都是老生常谈的问题， 如果你之前读过，就当温习好了，如果没读过，就当学习罢了。 发现自己又墨迹了好长时间，不好意思了。2016年03月23日21
Html5项目实战
08-04
html5+css+div开发漂亮的网站页面，适合初学者。
H5实战页面
jjsnc
05-06 2420
html<!DOCTYPE html> <html><head> <title>H5实战页面</title> <!-- 引入初始化css样式表 --> <link rel="stylesheet" type="text/css" href="./css/normalize.css"> <!-- 引入css样式表 --> <link rel="styleshee
h5实战
一起coding一起飞
03-30 518
http://az642008.blog.163.com/blog/static/35400837201502441844723/#
rem布局在安卓webview中页面错乱
fc1904的博客
04-03 1652
复现操作：将安卓的系统字体调离标准大小，导致基础值出现问题。解决办法：客户端固定webview字体大小。                    在每个webview配置webview.getSettings().setTextZoom(100)就可以了...
H5实战
Q 的博客
07-09 616
二.js基础 1.运算符： ＊自相加/自相减：前置形式返回一个新的值，但后置返回原来的值（做加法/减法之前的值）。 前置形式，变量前： ++a --a 后置形式，变量后： a++ a-- 注意： 1.自相加/自相减只能应用于变量。尝试将其应用于数值（比如5++）会报错。 2.如果自相加/自相减的值不会被使用，那么两者形式没有区别： let counte...
1*2*3*4*5 c语言,s=1+2*3+4*5*6+7*8*9*10+.... C语言求解
weixin_39753397的博客
05-19 894
#include /*类似斐波那契数列的计算方式项 1 2 3 41 2*3 4*5*6 7*8*9*10生成项的起始数字 1 2 4 7和后一项的差值 1 2 3*/int startNum(int i){if(i==)return ;return startNum(i-)+i-;}/*获得第几项 Ai方式是...
centos7 安装 Redis（资源）
weixin_34235371的博客
05-14 8099
2019独角兽企业重金招聘Python工程师标准>>> ...
numpy python安装_安装numpy
weixin_39831242的博客
12-16 1149
python numpy安装一、python下的numpy安装方法第一步：安装python，这里不做介绍。第二步：打开cmd看python是否安装成功。第三步：输入python -m pip install -U pip 安装pip文件，pip文件一般在python安装包的script目录下。第四步：将pip所...文章swjian19972018-05-242395浏览量微软LightGBM ...
H5实战干货、iH5黑历史-听听老司机偷偷和我说了什么？
01-09
这次请来的设计师比较带感,有三个特质:他是iH5第一批H5设计师,资历老、故事多。他走技术路线,段位高,透露了很多iH5的实战干货。
25个经典网站源代码
06-09
25个经典网站源代码 有简约的有时尚的方便大家参考、模仿。
【Vue H5项目实战】从0到1的自助点餐系统—— 搭建脚手架(Vue3.2 + Vite + TS + Vant + Pinia + Node.js)
白洞，白色的明天在等着我们
07-11 5802
H5 项目基于 Web 技术，可以在智能手机、平板电脑等移动设备上的浏览器中运行，无需下载和安装任何应用程序，且H5 项目的代码和资源可以集中在服务器端进行管理，只需更新服务器上的代码，即可让所有顾客访问到最新的系统版本。本系列将以肯德基自助点餐页面为模板，搭建一款自助点餐系统，第一次开发移动端h5项目，免不了有所差错和不足，欢迎各位大佬指正。Vue3.2 + Vite + TS + Vant + Pinia + Node.js + MongoDB
实战h5页面跳转到小程序
技术需要沉淀，兴国需要科技！
09-01 2751
实战h5页面跳转到小程序
【Vue H5项目实战】从0到1的自助点餐系统—— 项目页面布局(Vue3.2 + Vite + TS + Vant + Pinia + Nodejs + MongoDB)
白洞，白色的明天在等着我们
08-12 3747
H5 项目基于 Web 技术，可以在智能手机、平板电脑等移动设备上的浏览器中运行，无需下载和安装任何应用程序，且H5 项目的代码和资源可以集中在服务器端进行管理，只需更新服务器上的代码，即可让所有顾客访问到最新的系统版本。本系列将以肯德基自助点餐页面为模板，搭建一款自助点餐系统，第一次开发移动端h5项目，免不了有所差错和不足，欢迎各位大佬指正。项目代码正在gitee同步更新中，项目地址：https://gitee.com/airheaven/kfg-vue，学习前请大家给个star哦。
H5网页综合案例开发实战视频教程（含案例网站源码）
qq_36749728的博客
06-19 530
本H5网页综合案例视频教程，共33集，主要内容是讲解一个包含五屏的网页综合案例效果如何使用H5+css3实现的全过程，网页每一屏展示的效果和功能都不尽相同。 第1章 1-9集视频课 h5前端综合实例开发教学第01集offsetLeft&offsetTop h5前端综合实例开发教学第02集元素的绝对&相对位置 h5前端综合实例开发教学第03集offset-WH&client-WH h5前端综合实例开发教学第04集mac停靠栏 h5前端综合实例开发教学第05集滚轮事件 h5前端综...
仿美团H5项目实战系列- 项目整体框架搭建
最新发布
二当家小D的学习资源库
05-03 342
⭐前荔枝FM架构师、阿里资深工程师||曾任职于阿里巴巴担任多个项目负责人，8年开发架构经验，精通java,擅长分布式高并发架构,自动化压力测试，微服务容器化k8s等🍅。
3天通俗易懂的HTML5项目实战教程（含资料）
01-03
本套视频是HTML5的实战视频，我们将综合HTML5的各个方面来构建一个fullpage（全屏滚动）的应用。课程将会从实战的角度深入全面的分析HTML5中的技术。并将技术灵活的运用入项目实战中。应用主要内容包括：1.dom中位置尺寸api详解;2.鼠标事件的兼容;3.全屏滚动的实现; 4.3d轮播的实现;5.3d品牌墙的实现;6.机器人动画实现;7.图片炸裂动画实现;8.canvas气泡动画实现。
FileNotFoundError: [Errno 2] No such file or directory: './satisfy_2016.04.09_320100_.csv'
03-14
这个错误提示是因为程序找不到名为 './satisfy_2016.04.09_320100_.csv' 的文件或目录。可能是文件路径不正确或者文件不存在。请检查文件路径和文件名是否正确，并确保文件存在。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值