搜索内容：
网站关键词
博客文章
案例关键词
高端网站建设,高端网站设计,网站制作
搜索内容：
网站关键词
博客文章
案例关键词

登录

注册

您的位置:

高端网站建设 > 博客 > 正文
慕枫建站

CSS表格教程：如何改进Web订单表单设计_极简慕枫

时间：2019-08-08

编辑:网站制作公司

5535

0

用户友好的界面和简洁性是设计有效的Web订单时的关键点。与单页表单（注册表单或联系表单）不同，订单表单往往需要填写几页或步骤（包括付款方式）。将所有这些显示在一个页面中并不是一个好主意。如果表单似乎永无止境，用户可能会感到沮丧。郑州企业网站建设

保持字段列表更短更整洁的好方法，但仍然能够收集所需的所有数据是将它们分解为步骤。但是，最好让用户事先了解他们必须完成多少步骤才能完成整个订单流程。

改善订单

创意网订单

现在这里有一个教程，可以帮助您制作简单而现代的Web订单表单。

4个样品

如何制作这些令人印象深刻的Web订单表单

您需要的所有图形只是一个CSS Sprite图像，它将用作步骤菜单的背景。

 

使用CSS Sprites进行菜单

有些人可能会发现为菜单创建单独的图像很容易。但是，最好将其合并为一个图像，以减少对菜单的HTTP请求。

纯文本和图像

在组合菜单背景图像之前，您需要知道单个菜单背景的宽度和高度。在这种情况下，每个图像的大小是W170px x H100px。并且您需要4个步骤的8个背景图像（4个活动，4个不活动），因此总高度将是800px。宽度保持在170px。

准备好单个图像后，可以使用CSS中的background-position属性来显示单个图像的可见部分，如下所示。

1
2
3
4
五
6
7
8
9
10
11
12
13
14
15
.bg-step1-orange {background:url(../img/img-orange.jpg) no-repeat; height:100px; background-position:0 0px;}
 
.bg-step2-orange {background:url(../img/img-orange.jpg) no-repeat; height:100px; background-position:0 -100px;}
 
.bg-step3-orange {background:url(../img/img-orange.jpg) no-repeat; height:100px; background-position:0 -200px;}
 
.bg-step4-orange {background:url(../img/img-orange.jpg) no-repeat; height:100px; background-position:0 -300px;}
 
.bg-step1-o-orange {background:url(../img/img-orange.jpg) no-repeat; height:100px; background-position:0 -400px;}
 
.bg-step2-o-orange {background:url(../img/img-orange.jpg) no-repeat; height:100px; background-position:0 -500px;}
 
.bg-step3-o-orange {background:url(../img/img-orange.jpg) no-repeat; height:100px; background-position:0 -600px;}
 
.bg-step4-o-orange {background:url(../img/img-orange.jpg) no-repeat; height:100px; background-position:0 -700px;}

背景位置

现在使用CSS为菜单设置排版样式。

1
2
3
4
五
6
7
8
9
10
.typo-step {color:#382201; font:bold 30px Rockwell;}
/* This is for the selected "STEP".*/
 
.typo-step-o {color:#fff; font:bold 30px Rockwell;}
/* This is for the white "STEP".*/
 
.typo-right {padding:60px 0px 0px 30px;}
 
.typo-w {color:#fff;}
/* This is for the white text. */

您可以使用相同的技术制作多种颜色。

HTML标记如下所示。

1
2
3
4
五
6
7
8
9
10
11
12
13
14
15
<div class="box-170 bg-step1-orange" >
    <p class="typo-right"><span class="typo-step">STEP</span><br />Your info</p>
</div>
 
<div class="box-170 ml-3 bg-step2-o-orange" >
    <p class=" typo-right"><span class="typo-step-o">STEP</span><br /><span class="typo-w">Payment</span></p>
</div>
 
<div class="box-170 ml-3 bg-step3-o-orange" >
    <p class="typo-right"><span class="typo-step-o">STEP</span><br /><span class="typo-w">Submit order</span></p>
</div>
 
<div class="box-170 ml-3 bg-step4-o-orange" >
    <p class="typo-right"><span class="typo-step-o">STEP</span><br /><span class="typo-w">Confirmation</span></p>
</div>

纯CSS用于设置Web表单的样式

纯CSS形式

下面显示的是用于设置Web表单样式的CSS。

1
2
3
4
五
6
7
form.order {padding:40px;}
ul.order li {line-height:2.4em; border-bottom:1px dashed #fff; clear:both; padding:0px 20px;}
form.order label {float:left; width:200px;}
form.order input.text {width:280px; background:#fff; border:1px solid #eee;}
form.order input.text1 {width:180px; background:#fff; border:1px solid #eee;}
form.order select.drop {width:280px; background:#fff; border:1px solid #eee;}
form.order select.drop1 {width:80px; background:#fff; border:1px solid #eee;}

这是HTML标记。

1
2
3
4
五
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
三十
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<form id="" name="" method="" action="orange-form-2.html" class="order">
<fieldset>
    <ul class="order">
    <li>
        <label for="name">Title:<span class="typo-1">*</span></label>
        <select  class="drop1" id="" name="" >
            <option value="">Mr.</option>
            <option value="">Mrs.</option>
            <option value="">Ms.</option>
            <option value="">Dr.</option>
        </select>
    </li>
 
    <li>
        <label for="firstName">First name (middle)<span class="typo-1">*</span></label>
            <input  class="text" type="text" id="" name="" value="" size="30" maxlength="20">
    </li>
 
    <li><label for="lastName">Last name<span class="typo-1">*</span></label>
            <input  class="text" type="text" id="" name="" value="" size="30" maxlength="20">
    </li>
 
    <li><label for="email">E-mail address<span class="typo-1">*</span></label>
            <input  class="text" type="text" id="email" name="" value="" size="30" maxlength="50">
    </li>
 
    <li><label for="">Phone<span class="typo-1">*</span></label>
            <input  class="text" type="text" id="tel" name="" value="" size="16" maxlength="10">
    </li>
</ul>
 
<div class="clear"></div>
 
<ul class="order">
    <li><label for="country">Country<span class="typo-1">*</span></label>
         <select class="drop" id="country" name="country"  ></select>
    </li>
 
    <li><label id="lblStreet" for="street">Street<span class="typo-1">*</span></label>
         <input class="text" type="text" id="street" name="street" value="" size="30" maxlength="100" >
    </li>
 
    <li><label id="lblCity" for="city">City<span class="typo-1">*</span></label>
         <input class="text" type="text" id="city" name="city" value="" size="30" maxlength="50" >
    </li>
 
    <li><label id="lblState" for="state">State<span class="typo-1">*</span></label>
         <select  class="drop1" id="state" name="state" ></select>
    </li>
 
    <li><label id="lblZip" for="zip">Zip:<span class="typo-1">*</span></label><br />
         <input class="text1" type="text" id="zip" name="zip" value="" size="25" maxlength="25">
    </li>
</ul>
 
<div class="clear"></div>
 
    <input class="bt-order-orange" type="submit" value="Next step" onclick="" />
 
<div class="clear"></div>
 
</fieldset>
</form>

不要忘记确认页面

确认表格

下面是CSS样式。

1
2
.box-200 {width:200px; display:inline; float:left;}
.box-300 {width:300px; display:inline; float:left;}

您可以使用与上面相同的类。

1
ul.order li {line-height:2.4em; border-bottom:1px dashed #fff; clear:both; padding:0px 20px;}

这是HTML标记。

1
2
3
4
五
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div class="box-200 pl-9 pb-6">
    <ul class="order">
        <li>Title</li>
        <li>First Name &amp; MI</li>
        <li>Last Name</li>
        <li>Email Address</li>
        <li>Phone (Home)</li>
        <li>Phone (Daytime)</li>
        <li>Home Address</li>
    </ul>
 
    <div class="clear"></div>
</div>
 
<div class="box-300 pl-9 pb-6">
    <ul class="order">
        <li>Ms.</li>
        <li>XXXX</li>
        <li>XXXX</li>
        <li>xxx@xxx.com</li>
        <li>111-111-111</li>
        <li>111-111-111</li>
        <li>100 Avenue New York, NY 10001</li>
    </ul>
 
    <div class="clear"></div>
</div>

立即创建您的Web订单！

通过使用上面显示的这种方法，您还可以将它们分成几个步骤，将其应用于具有长字段列表的其他类型的表单。这使用户友好。使用本教程，您可以将您的创造力提升到新的水平。

郑州企业网站建设

<
艺术与设计：发现差异_极简慕枫
艺术与设计：发现差异_极简慕枫
>
导航设计的10个原则以及为什么质量导航如此重要_极简慕枫
导航设计的10个原则以及为什么质量导航如此重要_极简慕枫
相关文章：
郑州网站设计：图标可用性之最佳用户体验提示和设计指南
郑州网站设计：图标可用性之最佳用户体验提示和设计指南
我们周围都有图标：网站，智能手机和软件 - 我们甚至可以离线查看它们，例如标牌。家庭，印刷，游戏和搜索等一些图标非常普遍，不需要任何解释 - 我们确切地知道他们随时随地做什么。
2019-07-27
郑州网站建设：如何使用影响力营销来增加您的社交媒体受众
郑州网站建设：如何使用影响力营销来增加您的社交媒体受众
建立和维护相关受众是社交媒体上最难做的事情之一。幸运的是，您可以利用一些不包括购买粉丝的快捷方式！社交媒体上有许多有影响力的人，行业内有大量关注和声音的用户，如知名作家，名人或商界领袖，他们可以为您的个人资料提供显着的推动。让一个影响者支持您的公司或分享您的内容可以产生奥普拉温弗瑞效应。
2019-07-27
郑州网站制作：如何创造一个令人难忘和积极的用户体验
郑州网站制作：如何创造一个令人难忘和积极的用户体验
为了使您的网站或应用程序能够产生积极，令人难忘的用户体验，了解人类思维如何运作非常重要。如果不理解思维如何感知，处理和保留信息，组织的数字化努力很可能会失败。成功的数字体验不仅会增加参与度，而且之后也会被用户记住。了解如何产生这些类型的体验是实现卓越用户体验（UX）的关键。以下是创建令人难忘的数字用户体验的一些最佳实践。
2019-07-27
郑州网站优化：SEO基础知识之初学者SEO最佳实践指南
郑州网站优化：SEO基础知识之初学者SEO最佳实践指南
无论您是为您的网站撰写副本还是准备新的博客文章，您都应该使用SEO最佳实践来设计您的内容。这里推荐的指南可能没有单独的影响（记住，谷歌使用200多个因素来排名你的网站），但它们确实很快加起来。搜索结果中几个位置之间的差异可能与您是否遵循这些指南有关。那么，让我们开始吧！
2019-07-27
郑州网站设计：4种简化登陆页面设计的方法
郑州网站设计：4种简化登陆页面设计的方法
在当今的商业世界中，对能够创建高转换着陆页的网页设计者的需求很高。换句话说，如果您擅长设计影响客户的目标网页并将其推送到转化渠道，那么您应该不会在找工作时遇到任何问题。
2019-07-29
郑州网站建设：重新设计网站之前应该知道的事情
郑州网站建设：重新设计网站之前应该知道的事情
您的网站需要重新设计 - 多么令人兴奋！这是创意缪斯优先考虑并实现梦想的机会。想象一下，重新设计的徽标或名称在您的新网站上的外观有多好。您将与您的设计团队一起享受如此多的乐趣。想象一下潜力; 设计世界是你的牡蛎。
2019-07-29
郑州网站制作：可访问网页设计的基础知识
郑州网站制作：可访问网页设计的基础知识
由于许多原因，创建每个人都可以访问的设计至关重要。在某些情况下，您可能在法律上要求任何有障碍的人都可以访问。例如，这是政府网站所必需的，但也可能适用于其他类型。即使您没有法律要求使您的网站可访问，它对商业而言既道德又聪明。
2019-07-29
郑州高端网页设计：使用颜色炸毁您的网站转换
郑州高端网页设计：使用颜色炸毁您的网站转换
人类总是根据自己的感官做出决定，特别是在网上购物时。在那些感官中，视力是大多数人最大的决策者。因此，您为网站设计选择的颜色对将网站访问者转变为客户的影响最大。为了了解您应该为您的网站使用的颜色，您需要了解颜色如何影响人类行为。虽然有些人怀疑颜色对人类行为的实际影响，但研究表明，颜色在日常决策中起着重要作用。
2019-07-29
评论区：
查看更多评论
发表评论
慕枫酷站
网站案例

本周排行榜

TOP10
1
怎么制作一个网站,简单粗暴！...
2
企业网站设计: 如何建立一个网站便...
3
高端网站设计公司:网站建设与规划理...
4
企业网站建设方案:如何设计主页...
5
8个高端网站建设的策划步骤...
6
20个漂亮的网页设计的模板...
7
专业网站建设公司:做网站建设有哪些...
8
青海网站建设:网站建设的特色将如何...
9
龙岩网站设计:网站建设收费标准,非...
10
北京设计师平常去那些网站找设计素材...
限量精品模板免费下载

登录

在此计算机上记住密码
忘记密码

注册
限量精品模板免费下载
获取

注册

已有账号

我是游客>>
注册成功

3

s后返回登录
限量精品模板免费下载
获取

重置密码

重置成功

3

s后返回登录
新版
联系电话： 400-6065-301
在线沟通
留言
联系我们

×

寒枫-总监 QQ：1611387063

微信咨询 寒枫-总监

联系极简慕枫，免费获取方案及报价

400-606-5301

在线咨询 暂不需要