外贸网站建设内容包括做旅游信息的网站能赚钱吗

外贸网站建设内容包括,做旅游信息的网站能赚钱吗,制作网站合同需注意,qq空间wordpressgrid布局含义:grid布局,也被称之为网格布局,是将页面中的父元素划分成一个个小的格子,然后通过这些小的格子进行合并来制作出各种不同的网站效果.(如下图所示)如何触发网格呢:给父元素添加display属性,并且将取值设置成:grid/inline-grid.grid:代表的是块状网格,默认独占一行,类…grid布局含义:grid布局,也被称之为网格布局,是将页面中的父元素划分成一个个小的格子,然后通过这些小的格子进行合并来制作出各种不同的网站效果.(如下图所示)如何触发网格呢:给父元素添加display属性,并且将取值设置成:grid/inline-grid.grid:代表的是块状网格,默认独占一行,类似于块级元素.inline-grid:代表的是行内块网格,与行内块元素类似触发网格有哪些特点?划分行列之后,才能将里面的区域进行划分,才能显示网格,才能进行合并grid布局与flex布局异同,网格与表格区别?grid与flex布局:相同点:都有容器和项目之分;不同点:flex被称之为一维布局,也叫做轴线布局;grid被称之为二维布局,有行列之分grid与表格:相同点:都有行列之分,都能划分格子;不同点:表格嵌套的级别比较深grid通过容器和项目完成布局划分行列属性行属性: grid-template-rows:列属性: grid-template-columns重点我们研究的是他们的取值注意事项:后面跟几组值,就代表了几行几列取值1:纯数值{grid-template-rows:100px 100px 100px;grid-template-columns:100px 100px 100px;}代表的是:1)划分一个3行3列的网格2)每一行行高:100px;3)每一列列宽:100px;!DOCTYPE html html langen head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / titleDocument/title style .box { margin: 100px auto; width: 500px; height: 500px; border: 10px solid gray; display: grid; grid-template-rows: 100px 100px 100px; grid-template-columns: 100px 100px 100px; } /style /head body div classbox/div /body /html取值2:百分比{grid-template-rows:20% 30% 50%;grid-template-columns:100px 100px 100px;}代表的是:1)划分一个3行3列的网格;2)每一行行高:分别是总高的:20% 30% 50%;3)每一列列宽:100px;!DOCTYPE html html langen head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / titleDocument/title style .box { margin: 100px auto; width: 500px; height: 500px; border: 10px solid gray; display: grid; grid-template-rows: 20% 30% 50%; grid-template-columns: 100px 100px 100px; } /style /head body div classbox/div /body /html取值3:重复函数重复函数:使用的是 repeat(num1,num2)函数两个参数参数1: 重复次数参数2: 需要重复的数值{grid-template-rows:repeat(3,100px);grid-template-columns:repeat(5,20%);}代表的是:1)划分一个3行5列的网格;2)每一行行高:100px;3)每一列列宽:均占总宽度的20%;4)注意:repeat函数,第一个参数是重复的次数,第二个参数为需要重复的数值!DOCTYPE html html langen head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / titleDocument/title style .box { margin: 100px auto; width: 500px; height: 500px; border: 10px solid gray; display: grid; grid-template-rows: repeat(3, 100px); grid-template-columns: repeat(5, 20%); } /style /head body div classbox/div /body /html取值4:自动填充自动填充:auto-fill应用在重复函数中,代表的是根据需要重复的数值,进行自动填充数量;(例如:以列宽为例子){grid-template-rows:repeat(3,100px);grid-template-columns:repeat(auto-fill,30%);}备注:在这里auto-fill会将列数宽度按照30%的宽度进行划分;盛放不下的话则不再划分列数{grid-template-rows:repeat(3,100px);grid-template-columns:repeat(auto-fill,20%);}备注:在这里auto-fill会将列数宽度按照20%的宽度进行划分;盛放不下的话则不再划分列数!DOCTYPE html html langen head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / titleDocument/title style .box { margin: 100px auto; width: 500px; height: 500px; border: 10px solid gray; display: grid; grid-template-rows: repeat(3, 100px); grid-template-columns: repeat(auto-fill, 30%); } /style /head body div classbox/div /body /html取值5:auto自动auto自动代表的是,占剩余宽度和剩余高度的所有如下图所示{grid-template-rows:100px auto 100px;grid-template-columns:auto 100px 100px;}代码的含义是:设置一个3行3列的网格第1,3行固定高度100px;第2行高度自适应第2,3列固定宽度100px; 第1列宽度自适应;!DOCTYPE html html langen head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / titleDocument/title style .box { margin: 100px auto; width: 500px; height: 500px; border: 10px solid gray; display: grid; grid-template-rows: 100px auto 100px; grid-template-columns: auto 100px 100px; } /style /head body div classbox/div /body /html取值6:fr片段划分片段划分: 为了方便表示比例关系网格布局提供了fr关键字(fraction 的缩写意为“片段)如果两列的宽度分别为1fr和2fr就表示后者是前者的两倍{grid-template-rows:1fr 2fr 3fr;grid-template-columns:100px 100px 100px;}代码含义:划分3行3列的网格其中行高总共划分成6份,第1行占1/6:第2行占2/6第3行占3/6每一列的宽度为:100px!DOCTYPE html html langen head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / titleDocument/title style .box { margin: 100px auto; width: 500px; height: 500px; border: 10px solid gray; display: grid; grid-template-rows: 1fr 2fr 3fr; grid-template-columns: 100px 100px 100px; } /style /head body div classbox/div /body /html取值7:minmax()minmax(num1,num2)函数,可以理解成最小最大值函数,函数中两个参数:参数1代表的是最小值,参数2代表的是最大值如果条件允许,则一直使用最大值,如果条件不满足则使用中间值,如果剩下的距离不足以显示距离大小,则使用最小值{grid-template-rows:100px 100px minmax(100px,200px);grid-template-columns:100px 100px 100px;}{grid-template-rows:200px 200px minmax(100px,200px);grid-template-columns:100px 100px 100px;}!DOCTYPE html html langen head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / titleDocument/title style .box { margin: 100px auto; width: 500px; height: 500px; border: 10px solid gray; display: grid; grid-template-rows: 100px 100px minmax(100px, 200px); grid-template-columns: 100px 100px 100px; } /style /head body div classbox/div /body /html!DOCTYPE html html langen head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / titleDocument/title style .box { margin: 100px auto; width: 500px; height: 500px; border: 10px solid gray; display: grid; grid-template-rows: 200px 200px minmax(100px, 200px); grid-template-columns: 100px 100px 100px; } /style /head body div classbox/div /body /html1