一步一步写web之初识web（一）

前言：本人是一个web初学者，JavaScript，html，css语法参照W3School网站进行学习，但是没有贯穿性，对于web项目是雨里雾里，甚至不知道三者是如何连在一起的。唯一会的前端是react native，然而这是一个app开发工具，和web有所不同，现在就一步一步的学习web，并把所遇到的困境及心理历程一步一步的记录下来，会有很多白痴的情况，不喜勿喷。

本web项目依据慕课网《DOM探索之基础详解篇》中的滑动门特效进行扩充，基础知识请参考自行学习。

一、初识web

在对基础知识有所了解后非常想做一个web项目，苦于不止如何下手，正好在慕课网的DOM课程里看到了一个滑动门效果，就跟着写了下代码，并实现了滑动门效果。这期间没什么问题，毕竟跟着教程来的。现在从滑动门效果实现之后开始，下图为实现效果（图片从淘宝网首页下载得到）。一步一步写web之初识web（一）

遇到的思考：刚开始加载图片时非居中对齐，没注意到的自己对比代码。

二、随意扩展

首先实现一个三角形的背景框：

一步一步写web之初识web（一）

实现css代码：

#triangle {
    width: 0px;
    height: 0px;
    border-left: 500px solid yellow;
    border-bottom: 100px solid white;
    border-top: 100px solid black;
}

三、多列实现

在一个框内实现多列并排的数据：

css代码：

#boxContainer {
    width:600px;
    height:200px;
    margin-left: 100px;
    border:1px solid #ccc;
    -moz-column-count:3; 	/* Firefox */
    -webkit-column-count:3; /* Safari 和 Chrome */
    column-count:3;
    overflow: scroll;
}

HTML代码div部分（包括之前的滑动门和三角形实现）：

<div id="mainContainer">
     <div id="sliderDoor">
          <img src="image/sliderDoors/footer1.jpg" alt="第一张图片" title="图一"/>
          <img src="image/sliderDoors/footer2.jpg" alt="第二张图片" title="图二"/>
          <img src="image/sliderDoors/footer3.jpg" alt="第三张图片" title="图三"/>
          <img src="image/sliderDoors/footer4.webp" alt="第四张图片" title="图四"/>
          <img src="image/sliderDoors/footer5.webp" alt="第五张图片" title="图五"/>
     </div>
     <div id="triangle">
     </div>
     <div id="boxContainer">人民网北京2月24日电 (记者
          刘阳)国家发展改革委近日发出通知，决定自2月25日零时起将汽、柴油价格每吨分别提高300元和290元，折算到90号汽油和0号柴油（全国平均）每升零售价格分别提高0.22元和0.25元。

          此次国内成品油价格调整幅度，是按照现行国内成品油价格形成机制，根据国际市场油价变化情况确定的。去年11月16日国内成品油价格调整以来，受市场预期欧美经济复苏前景向好以及中东局势持续动荡等因素影响，国际市场原油价格先抑后扬，2月上旬WTI和布伦特原油期货价格再次回升至每桶95美元和115美元以上。虽然近两日价格有所回落，但国内油价挂钩的国际市场三种原油连续22个工作日移动平均价格上涨幅度已超过4%，达到国内成品油价格调整的边界条件。

          通知指出，这次成品油调价后，国家将按照已建立的补贴机制，继续对种粮农民、渔业（含远洋渔业）、林业、城市公交、农村道路客运（含岛际和农村水路客运）等给予补贴。同时，为保证市场物价基本稳定，防止连锁涨价，对与居民生活密切相关的铁路客运、城市公交、农村道路客运（含岛际和农村水路客运）价格不作调整。

          通知要求，中石油、中石化、中海油三大公司要组织好成品油生产和调运，保持合理库存，加强综合协调和应急调度，保障成品油供应。各级价格主管部门要加大市场监督检查力度，依法查处不执行国家价格政策，以及囤积居奇、造谣惑众、合谋涨价、搭车涨价等违法行为，维护正常市场秩序。
    </div>
</div>

四、添加background-image

此效果暂时未实现，添加背景后并未按预想的展现，明日继续奋战！

代码详情在github上更新：https://github.com/dwenb/webLearning。

秒客网

一步一步写web之初识web（一）

相关文章