当前位置: 首页 > Web前端 > HTML

进一步了解网页制作

时间:2023-04-02 12:08:48 HTML

这周主要做了一个校园官网首页,对bootstrap有了初步的了解,并尝试在网页制作中使用。不得不说,第一次用html和css写这么长的东西,确实很痛苦,但是把所学的东西融会贯通是需要练习的。网页的制作过程主要是模仿校园官网,没必要自己设计(不敢想象自己设计会出现什么样的鬼东西)。仔细观察并结合html的相关知识点可以发现,由

标签组成的页面代码在网站的页面上是一一排列的。在制作过程中,我们可以将它们逐行逐列展开,以方便划分。因此,第一步就是拆分官网首页。拆分的思路是这样的:大部分网站的首页都是分成块的,就像下面这个大众点评首页的截图。页面拆分的结果是整体分为三行,分别是:1.最上面的功能栏2.第二层背景为白色的搜索栏3.三楼各站点的导航栏.下一步是将每一行分成列。一列,设置此列的css属性使其居中并设置宽度。观察图片,文字栏分为两部分,左边是定位坐标,右边是一些下拉菜单。为了方便理解,在这一列设置一行,然后把这一行分成两部分(两列),一部分在右边,一部分在左边,这样整体的框架就出来了。按照以上思路设计好车架后,我们就可以开始修车架了。我们可以设置一个css类来标记每一帧的边框。边界{边界:3px;固体:黄色;}在你要操作的frame上加上setborderclass,这样操作起来更直观,在操作frame的同时把相应的内容写在里面。写完框架和内容,就是最精彩的了。渲染就是给frame和content标签加上一系列的css属性和js属性。需要什么样的功能,需要找到对应的语言用法。推荐使用外部方法实现css和js使用,渲染过程会特别长。。。制作过程中的一些小理解:1.盒子模型的操作方法一定要灵活,一定要有一个在你的脑海里清楚盒子的概念。外部各部分的content、padding、border、margin,在设置四个方向的长度时,按照top、right、bottom、left的顺序调整,同时也可以使用具体的方向属性来调整,也可以用正长度做负调整,调整位置的时候要有耐心。2、区分边框的底色和文字的底色。说白了,还是盒子模型的问题。3、关于css文件中各种类型的命名,当一个网页特别长的时候,各种复杂的css就会开始变得凌乱而迷人。建议大家使用英文命名,分层命名,这样便于掌握和理解整体结构。网上有相应的命名规范,想深入研究的可以搜索一下。4.渲染过程中会有很多小偏差。文件和自己写的代码可能有很大出入。这时候就需要多看控制台了。控制台的作用非常重要。5.制作过程非常繁琐复杂,需要大家耐心细心,制作前多想想,不要懒得动脑,不要懒得动脑,不要懒得动脑筋!!6、注意劳逸结合。入门bootstarpbootstrap:一个前端开发的框架,是目前非常流行的一个框架。通过使用它,可以简化开发。开发效率和开发质量堪比C++中的函数库。在使用之前,我们需要引用库,即在标签中插入如下代码。建议下载bootstrap到本地,这样查看会更快'