佐切的第二天学习分享

找到一个自己想学习模仿的网站进行制作，好开始，我之前找了挺长时间，很多网站文字太多而且也不好看，没有模仿的冲动。终于找到一个还是比较好看些的网站，而且也算是目前比较流行的O2O类型的网站，名字我就不说了。觉得就是网站图片多些，而且文字又不多，还有很丰富的交互操作，正适合我模仿。

那好废话不多说，开始先把最简单的头部先搞定。我使用在看教学视频中使用的软件editplus来做，比较适合需要巩固基础的同学。

一、开始第一步，先从网站上把首页要用到的图片下载下来（这个可以按f12调出源代码把图片资源文件夹找到，里面肯定有自己要的图片）一般网上展现的图片都是可以通过源代码找到图片地址下载下来的。

二、素材有了开始编程之前，先想下banner有几个项，要怎样排。好像光想没用，先打开编程软件开始试着打上去。先把软件下载了，然后在下载个配色方案，因为原本的白色和纯黑色代码让人看着眼睛累，果断按着网上大神已经好的配色方案把editplus_u.ini文件替换了，这样就成了下面的截图，舒服多了各种颜色，看着像各种糖果色。下面那段代码是新建一个html文件自动生成的，关于它为什么是这样就没必要搞明白了，后面时候到了自己应该就明白了不纠结。

三、开始把导航条上的文字先的码进去。

内容在这两个标签间开始填内容。

保存后用浏览器打开，然后结果显示就是这样的，可见代码里面的空格对浏览器来说不是很起作用，不友好的感觉，打一空格和打多个空格显示效果都是一个空格。

四、那接下来，应该是按着创造这门语言规则的语法来尝试加标签，把文字内容包起来。试着写：

每个加一个简单的

标签，结果就变成了这样：

也就很容易简单理解

标签的作用就是另起一行，好吧挺有意思。简单的标签可以控制文字甚至各种元素在浏览器中被呈现出来的位置或者其他形式，这个应该就是 html 规范的作用。

接下来试下标签：

感觉和上面的直接打没有什么区别，但是查了下，说标签是分块作用，也就是一段一段的。想下跟不加标签还是有区别的，加了标签就相当于把每一部分都单独的控制起来了，后面可以通过某种方式把他做成按钮，后面百度看下怎么弄。

五、好接下来我要把这一行文字剧中在网页上，之前有点印象看视频中用到的是

标签：试下：

结果是：

Ok居中了，也就是通过了div标签中的align属性设置成居中得到的效果，通过这个明白了每个标签应该都有自己的属性，而每个属性都有不一样的属性值，从而控制标签内的元素的呈现方式。至于每个标签有多少属性或者属性值这个也没必要知道。

接下来我要改变文字的大小，这个字号作为导航有点小，应该可以直接在div标签上统一设置，试下：

这个是直接网上查的，直接就复制黏贴过来的：

结果显示的字体就变得50px超级大，好吧我把它设置成20px，正常点。

六、接下来我想加上图片，试下额：网上搜了下怎么加图片，用到单标签：

显示的结果是这样的：

七、那根据我要模仿的网页，它的效果是文字在图片上面呈现的，我要怎么实现，这是跟问题，照样还是百度下找答案：（下面还有一个没截到图）

可以把最外层的盒子div的背景设置成我的这个图片，不重复，而且设置的宽度和高度与图片一致。接下来还是把之前的盒子放进来，因为已经设置了居中所以很自然的就居中了，然后是我想要设置成白色的字体，那我又不能直接在style引号里直接往后面加，试了下没有效果，那就试下再套一层盒子，设置颜色为白色，这样就有了下面的效果：

八、会发现这次用三个div盒子才把文字弄到图片上面，颜色改为想要的白色，网上查了盒子越多浏览器读取效率越低，好吧改想办法用一个div搞定所有。

之前看了视频有点印象，貌似要用到css可以解决这个问题，把所有要设置的东西全部写在一个css文件里，然后通过class来调用可以实现，试下：新建一个css文件，

文件名是zai.css。试了下align：center；在这里就不能直接写了，需要写成text-align：center才有用。查了下，答案是align：center用在标签内的标记有效，而text-align：center则用在css样式下有效。这个点还是有必要记一下。

接下来是HTML文件调用外部的这个zai.css文件，刚开始傻了，没有加这句话

完全就没有反应，这句是起到调用zai.css的作用。

其他的也就是class=“div1”调用zai.css文件下的.div1这个类了，这样就全部运用到这一个

之间的内容上了。于是就有了浏览器显示结果：

好今天就先学习到这里，明天会接着这个继续。

爱分享，爱学习！找回本心，坚持自己，佐切一路每天为大家分享学习过程！

佐切的第二天学习分享相关推荐

佐切的第一天学习分享
从哪学呢?这对于我来说也是个很大的问题. 由于之前有看过一点php的视频教程,就从基础的html开始对之前看点那点视频教程的回顾. ①首先自己的一个认识,网页通过www.^^^^^来访问,这个协议是美 ...
佐切的第四天学习分享
挺奇怪的昨天的页面没有问题,今天打开就变成了: 按钮全部跑到左边了,什么情况,调换了下li中几行代码先后顺序: 之前是这样: 调换下第二和第三行的位置,顺便把div1 a中display:block: ...
佐切的第三天学习分享
好,接着昨天的任务,现在我要把整个导航栏文字往下挪些,不要它顶到最上面,试下,做这个之前需要去查下div盒子模型内边距和外边距以及边框宽的表示方式,网上查了分别是:外:margin 内:paddi ...
数据结构第二章学习总结
数据结构第二章学习总结在数据结构第二章,我们学习了线性表的两种结构顺序和链式结构,学习了他们的定义,不同,存储结构和逻辑结构,还有一些基本的操作. 在学习过程中,我发现了许多问题:①书上的大多数代码 ...
python中if语句缺省else_9_【Python学习分享文章】_if(条件语句)
[Python学习分享文章]_if(条件语句)_logicalJudgement介绍及基本操作综述计算机的"条件语句"和生活中的"条件成立"是不一样的. 一 ...
校办研修之计算机培训简报,“2018校本研修培训”第二期学习简报
原标题:"2018校本研修培训"第二期学习简报校训校风:博教风学风: 学习提升,共约成长洛阳市第二十六中学2018年校本研修培训学习简报(第二期) 素材收集:数学组.物理组. ...
r语言新增一列数字类型_R语言实战（2）——创建数据集【学习分享】
往期回顾: R语言实战(1)--R语言介绍[学习分享] 引言:上一章我们通过简单的例子了解了R语言及R语言能实现的一些功能,本期我们将一起学习R中的数据结构,以及向R中导入数据的方法. 2.1 数据结 ...
20169220 网络攻防实践第二周学习总结
20169220 赵京鸣 2016/2017-2 第二周学习总结进度:1.教材第1-2章/12章 2.Kali教学视频1-5/36 3.查找2个安全工具/5 4.国内外黑客.电影书籍了解 5.lin ...
Python读写矢量数据（2）矢量数据写入（属性数据）——Python地理数据处理学习分享
这一节主要介绍矢量数据的写入(只有属性数据,无几何),如果有读者没有读取的基础建议先看一下上一篇文章,需要对矢量数据读取有一定的了解才能继续学习本节.在这里我们用到的数据仍为goble文件夹下的数据, ...

佐切的第二天学习分享

佐切的第二天学习分享相关推荐

最新文章

热门文章