SS全称“Cascading Style Sheet”，它的意思是“层叠样式表”或“级联样式表”，CSS盒子模型是在网页设计中用到的CSS技术中引用的一种思维模型。CSS盒子模型由内容区、填充、边框、空白边组成。

CSS盒子模型常见用途

由于CSS盒子模型是CSS中的一个重要概念，每一个元素都可以当作一个矩形的盒子，这个矩形盒子可以描述元素所占空间内容。CSS盒子模型更方便了设计者对网页设计的整体把控。

CSS盒子模型绘制方法

用亿图图示绘制CSS盒子模型十分简单，只需要找到指定模板即可，新手参考以下几个步骤即可完成CSS盒子模型的绘制。

第一步：下载“亿图图示”软件，启动软件界面，登录账号开始操作。

第二步：点击搜索框输入“CSS盒子模型”，寻找符合设计要求的CSS盒子模型模板，点击“使用”打开CSS盒子模型模板。

第三步：点击操作区的CSS盒子模型，根据自己的需要，在模板上修改各层次的注释，在上方操作区更改字体为黑体，并更改字体大小。

第四步：双击CSS盒子模型中的“文本”方框，即可输入CSS盒子模型中的文本，右侧填充可以修改填充色、边框颜色。

第五步：完成CSS盒子模型制作之后，点击左上角的“保存”等按钮，本次选择保存为让图片格式，修改好分辨率等参数之后，CSS盒子模型就可以存储在电脑中。

以上就是CSS盒子模型绘制方法的相关介绍。

CSS盒子模型绘制软件——亿图图示

当有绘制CSS盒子模型的需求时，选择亿图图示这款国产矢量绘图软件，让用户绘图事半功倍。
亿图图示是一款与众不同的矢量绘图软件，它采用了与其他绘图软件完全不同的思维模式设计开发，在满足了用户基本的绘图需求基础上，开发了模板套用功能，让绘图的效率提高许多，同时，在云存储的加持下，亿图图示用户可以随时随地绘制作品。
使用亿图图示绘制CSS盒子模型，直接套用一个模板，在原有基础上修改、添加需要的元素，提升绘图效率。

为什么选择亿图图示绘制CSS盒子模型？

1、可靠软件，值得信赖：亿图图示经过了九个大版本的升级，软件可靠程度大幅增加，现在已经拥有超过900万用户，庞大的使用群体是亿图图示经受住市场优胜劣汰的体现。
2、软件资源库强大，满足绘图需求：亿图图示拥有数量庞大的矢量符号库和模板库，当用户绘图时可以很轻松的找到自己需要的符号，即使符号很特殊在库中找不到，用户也可以自行绘制或者导入本地符号图形、从库外调用。
3、先用后付，性价比高：亿图图示为新用户谋福利，凡是新注册的亿图图示账户，均可长期使用免费基础版本。当有高级需求的时候，可以再升级购买会员版。

们在上网的时候，经常有一些登录界面进行输入账号和密码，以及我们在网上填一些信息，这些功能的实现都是通过表单来完成的，今天我们就来讲讲表单。

表单不是指一个标签，而是指一类标签。

我们表单里所有的内容都要写在<form></form>标签中 form的action属性是将表单所填的内容发送到想要发送的后台，而method属性有两个值，分别是get和post。get和post的主要区别是get表单所传的内容会在地址栏里显示出来，并且有长度限制，而post表单所传的内容不会在地址栏显示出来，并且可以视为没有长度限制。一般系统默认get。当然get和post的细区别还是有的，在这里我就不赘述了。

其中最重要的是<input>标签，input标签也是单标签。input标签的type属性值不同，其产生的作用也不同：如：<input type="text">产生的是文本框，一般都是我们登录时输入的账号那样的文本框。<input type="password">,产生的是密码框，一般都是我们登录时输入密码的那个框框。<input type="submit">产生的是提交框，一般是我们登录的那个按钮。这些标签都有value属性，但只有提交框用最合适用，因为文本框和密码框虽然也会展示出来，但效果却差强人意，我们一般都用placeholder属性替代它。

不知大家有没有在网上做过选择题，作者是做过的。网页中的选择题也是用的input。

input的type属性值还有radio，是单选框，有几个选项就写几个input，但要注意每一个input里都要写相同的name属性和属性值，这样的话浏览器才会知道这些是同一道题。

既然有单选题那一定也有多选题了，type的checked属性是多选框，其和单选的用法一样，也都要注意name一样的为一道题，还有一个属性是checked=“checked”，这个可以设定默认选择的选项。

我们也一定遇到过选择文字就能勾选而不用非得去点选框的情况，其实input选择框只有被点击的时候才能选中，但有的时候太小不容易点击甚至有的根本没有显示出来，这样的话用户体验就会非常的差，所以我们引进了一个标签：<label></label>标签，这个标签可以实现点击文字就进行选择的功能，用法就是将input标签和文字写在同一个label标签中，注意每一个选项写一起。

我们来看一下代码和结果：

作者已经尽量去说清楚了，欢迎大家批评指教，希望多多关注[送心]

天讲讲如何用word Press 和 mailchimp 创建莱斯下面的这样的 landing page ：

我认为大多数卖家有自己的独立站或者 Shopify 做了独立站，有时候我们需要通过折扣【大额度】折扣来收取潜在消费者的邮件信息 ，你想要得到别人的信息 ，你肯定用一个人家感兴趣的或者觉得值得对等交换的东西作为诱饵去获取该信息。

如果你真的有wordPress 独立站，你可以用以下方式去制作简单的某个产品的landing page。

第一登陆你的账号 ，打开 dashboard 点击新建页面

我建议你们用 Elementor 插件 ，编辑页面非常方便，如下图所示 ，可在安装插件区域搜索 Elementor 然后免费安装

第二步：假如说我们是卖这个中coffe mug 我们打算做一个 70%的giveaway，如下图所示

我们在标题里面 输入coffee mug 70% OFF code 填写进去 ，同时我们不想让进去这个page 的人看到我们网站的其他信息 ，不要让他浏览其他页面，如果你这个wordpress 做的独立站和你的这个产品不相关的情况下 你可以选择1，2 图里的红框 ，并且隐藏header 和footer信息 ：如下图

第三步：继续点击 【使用Elemntor 编辑】 继续前往，进入这个页面，相当于空白的一个页面

第四步：你在这个里面就可以 拽进来 ，调整大小字体的形式，可以自由发挥了 ，非常简单 ，我们现在第一步需要Title ，image 以及 Text 内容拽进来，一个个设置就好了，看下面图 ：

至于下面的 subscribe to our email list 这个怎么插入 其实非常简单，你先到你的 mailchimp 页面点击list，如下图所示

你进入下面一页 你会看到这几个选项 ，如下图所示

继续点击去之后你进入这个一个页面，你复制所有的HTML code 在红色方框里的code 都复制下来

你把code 复制下来之后 回到wordpress 的刚才的 elemntor 编辑的页面 ，找到这个图标 拽进来

然后再进入这里，把刚才从mailchimp 复制出来的code 粘贴在这个里面

最后呈现出这种效果 请看下面的图

一定记得点击【更新】，然后最后 这个页面的链接打开的时候怎么设置突然蹦出来的 要求填写邮件的这种效果呢？

这个需要你在wordpress 的 header或者footer 上面填写mailchimp 代码 ，请看下面的图 ，你找到 wordepress 仪表盘，找到这里之后点击去：

然后把代码从mailchimp 拿出来 再填写到这个位置 ，如下图所示

最后呈现出来的效果是这样的 ，你打开链接：http://bit.ly/2FFDfOv 之后手机上看到的是这样的 画面 ，先是这个跳出来的 填写email的页面

然后你要是不想输进去 进入点击 右上方【X】页面会显示下方这个 ，如图所示

为了得到 这个code 还是照样给邮件的，我们拿这个邮件干嘛，可以和他们邮件里交流能不能帮我们测评，这个总比在facebook上找人，找出来的人更精准，毕竟这些给你邮件的真的想这个产品。

（来源：跨境电商策）

以上内容属作者个人观点，不代表雨果网立场！本文经原作者授权转载，转载需经原作者授权同意。

上雨果网搜索“跨境资料库”,领取欧美/东南亚各国市场商机、各大平台热销品报告、跨境电商营销白皮书！