Web设计技巧:使用CSS调动您的网站

2021年2月24日07:40:38 发表评论 59 次浏览

一秒钟样式表以及页面HTML的少量更改, 许多在线商店都可以提供出色的移动购物体验, 而无需创建第二个网页或注册移动专用域。

移动互联网的使用正在增加。在线商家可能希望为客户提供最佳的购物体验。出于这些原因, 许多领先的电子商务网站已开始提供移动专用页面(通常是子域)或移动专用样式。

在本" Web设计技巧"中, 我将为你是否应该构建一个单独的, 针对移动设备的网站提供一些建议, 并提供一个简单的示例, 说明如何转换CSS以创建当前版本的更加便于移动的版本页。

你应该建立一个单独的移动网站吗?

答案可以是"是"或"否"。我个人认为, 移动Internet设备和手机将能够像现在的笔记本电脑和台式机一样呈现网页, 因此注册.mobi域甚至建立单独的站点都可能浪费时间。

更好的解决方案可能是重新设计当前站点, 以便可以在多个平台上轻松呈现。实际上, 开发易于在平台(移动, 桌面, RSS或更多平台)之间迁移的网站是创建CSS的主要原因之一。好的网站设计将内容与布局和外观很大程度上区分开。

如果你确定为移动客户提供服务的最佳方式是使用特定于移动设备的网站, 我鼓励你使用子域而不是.mobi域。例如, URL可能是http://m.yoursite.com, 而不是http://yoursite.mobi。

视频:转换示例

转换示例

正如每个电子商务网站都是唯一的一样, 创建该网站的移动友好版本也将有所不同。因此, 我认为, 描述网站转换的最佳方法也许就是做到这一点。

对于这个" Web设计技巧", 我为电子商务漫画书商店创建了一个主页。该页面是为演示而创建的。

首先, 这是转换之前的完整页面代码。

<code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml" &lt;?php language_attributes(); ?&gt;
&lt;head&gt;
&lt;title&gt;Practical eCommerce Moblie Commerce CSS Demonstration&lt;/title&gt;
&lt;link href="style.css" rel="stylesheet" type="text/css" media="screen" /&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;div id="wrapper"&gt;
    &lt;div id="access"&gt;
        &lt;a href=""&gt;Skip to content&lt;/a&gt;
        &lt;a href=""&gt;Skip to search&lt;/a&gt;
    &lt;/div&gt;&lt;!--end access--&gt;

    &lt;div id="header"&gt;

        &lt;a href=""&gt;&lt;img src="images/logo.png" alt="Web设计技巧:使用CSS调动您的网站" alt="Nashvlile Comics" /&gt;&lt;/a&gt;

        &lt;div id="searchbox"&gt;
        &lt;input id="search" class="input-text" type="text" value="" name=""/&gt;
        &lt;input type="image" alt="Search" src="images/search.png" alt="Web设计技巧:使用CSS调动您的网站"/&gt;
        &lt;/div&gt;&lt;!--end search--&gt;
        &lt;div id="top-nav"&gt;
        &lt;ul&gt;
        &lt;li&gt;&lt;a href=""&gt;Marvel&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=""&gt;DC&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=""&gt;Darkhorse&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=""&gt;Image&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=""&gt;Verdigo&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=""&gt;Minx&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=""&gt;Zuda&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=""&gt;Space&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=""&gt;Pec&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
        &lt;/div&gt;&lt;!--end top-nav--&gt;




    &lt;/div&gt;&lt;!--end header--&gt;

    &lt;div id="content"&gt;
        &lt;ul&gt;
        &lt;li id="product1"&gt;
        &lt;img src="images/ac11.png" alt="Web设计技巧:使用CSS调动您的网站"&gt;
        &lt;h3&gt;Action Comics #11&lt;/h3&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis facliisis. &lt;/p&gt;
        &lt;span id="price"&gt;$11, 990.00&lt;/span&gt;
        &lt;button class="form-button" onclick="setLocation('')"&gt;
        &lt;span&gt;Add to Cart&lt;/span&gt;
        &lt;/button&gt;
        &lt;/li&gt;&lt;!--end product1--&gt;

        &lt;li id="product2"&gt;
        &lt;img src="images/ac27.png" alt="Web设计技巧:使用CSS调动您的网站"&gt;
        &lt;h3&gt;Action Comics #27&lt;/h3&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis facliisis. &lt;/p&gt;
        &lt;span id="price"&gt;$9, 990.00&lt;/span&gt;
        &lt;button class="form-button" onclick="setLocation('')"&gt;
        &lt;span&gt;Add to Cart&lt;/span&gt;
        &lt;/button&gt;
        &lt;/li&gt;&lt;!--end product2--&gt;

        &lt;li id="product3"&gt;
        &lt;img src="images/ac1.png" alt="Web设计技巧:使用CSS调动您的网站"&gt;
        &lt;h3&gt;Action Comics #1&lt;/h3&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis facliisis. &lt;/p&gt;
        &lt;span id="price"&gt;$2, 102, 990.00&lt;/span&gt;
        &lt;button class="form-button" onclick="setLocation('')"&gt;
        &lt;span&gt;Add to Cart&lt;/span&gt;
        &lt;/button&gt;
        &lt;/li&gt;&lt;!--end product3--&gt;

        &lt;li id="product4"&gt;
        &lt;img src="images/ac2.png" alt="Web设计技巧:使用CSS调动您的网站"&gt;
        &lt;h3&gt;Action Comics #2&lt;/h3&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis facliisis. &lt;/p&gt;
        &lt;span id="price"&gt;$898, 990.00&lt;/span&gt;
        &lt;button class="form-button" onclick="setLocation('')"&gt;
        &lt;span&gt;Add to Cart&lt;/span&gt;
        &lt;/button&gt;
        &lt;/li&gt;&lt;!--end product4--&gt;
        &lt;/ul&gt;
    &lt;/div&gt;&lt;!--end content--&gt;

    &lt;div id="footer"&gt;
    &lt;p&gt;Copyright 2009 Practical eCommerce, AKA Nashvlile Comics, All Rights Reserved&lt;/p&gt;
        &lt;ul&gt;
        &lt;li&gt;&lt;a href=""&gt;Marvel&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=""&gt;DC&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=""&gt;Darkhorse&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=""&gt;Image&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=""&gt;Verdigo&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=""&gt;Minx&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=""&gt;Zuda&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=""&gt;Space&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=""&gt;Pec&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;

        &lt;ul&gt;
        &lt;li&gt;&lt;a href=""&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=""&gt;About&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=""&gt;Privacy&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=""&gt;Customer Service&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;&lt;!--end footer--&gt;

&lt;/div&gt;&lt;!--end wrapper--&gt;

&lt;/body&gt;

&lt;/html&gt;


</code>

这是用于屏幕显示的样式表。

<code>
body {background: url(images/main-background.png) repeat-x; margin-top:0px; font-size:62.5%;}
#wrapper {margin:0 auto; width:800px;}
#access {position: absolute; top:-500px; margin:0; padding:0;}
#header {background: url(images/head-background.png) no-repeat; width:100%; height:256px; overflow:hidden;}
#header img {border: none; position: relative; top:162px; left: 235px;}
#top-nav {position: relative; top: 73px; left: 210px;}
#top-nav li {display: inline; list-style: none; font-size: 1.4em; font-family:Denmark; letter-spacing:1px; font-variant: small-caps; padding-left: 3px;}
#top-nav a {color: #676666; text-decoration:none;}
#top-nav a:hover {color:#e2232b; text-decoration:overline;}
#searchbox {position:relative; top:170px; left: 530px;}
#content p {font-size:1.6em;}
#content li {float: left; display:inline; list-style:none; width: 45%; text-align:center; margin:5px; padding: 10px; border: #ffffff solid 3px;}
#content li:hover {background:#676666; border: #000000 solid 3px;}
#content li:hover h3 {color:#f8a043;}
#content h3 {font-family:Denmark; font-size: 2.6em;}
#price {font-family:Denmark; font-size:2.0em;}
button {margin: 5px; padding: 10px 100px; font-family:Denmark; font-size:1.8em;}
#footer {clear:both; background: url(images/footer-background.png) no-repeat #000000; margin-top:50px; padding: 120px 10px 200px 220px; text-align:center; font-size:1.4em; font-weight:500;}
#footer a {color:#000000; text-decoration: none;}
#footer a:hover {text-decoration:overline; font-weight:900;}
#footer ul {margin:0px; padding:0px;}
#footer li {display:inline; margin: 0px 2px;}
</code>

添加特定于移动设备的CSS

转换过程的第一步是添加一个移动CSS, 将其链接到我们的HTML中, 然后将一个仍为空白的文件添加到我们的网站层次结构中。在此演示中, 我将文件命名为" handheld.css"。

<code>   &lt;link href="handheld.css" rel="stylesheet" type="text/css" media="handheld" /&gt;
</code>

使用页面布局作为开始创建移动样式的指南

我们的目标是达到万维网联盟针对移动浏览器的标准, 因此我们将使用该组织的CSS Mobile Profile 2.0作为确定使用哪些选择器或属性的指南。我们还将尝试将页面宽度保持为205像素, 并采取措施限制移动网站的文件总大小。

尽管我们的目标是在CSS中进行大部分更改, 但我们还必须创建几个适合移动设备使用的背景图片。你可以在上面的视频中看着我逐步进行操作。以下是完整的"手持式" CSS文件。

<code>
body {background:#ffffff; margin-top:0px; font-size:62.5%;}
#wrapper {margin:0 auto; width:205px;}
#access {display:none;}
#header {background: url(images/m-head-background.png) no-repeat #60605F; width:100%;  border-bottom: #f8a043 solid 3px;}
#header img {display:none;}
#top-nav {text-align:center;}
#top-nav ul {margin:0px; padding: 2px 0px;}
#top-nav li {display:inline; list-style: none; font-size: 1.2em; font-family:Denmark; font-variant: small-caps; padding-left: 1px;}
#top-nav a {color: #000000; text-decoration:none;}
#top-nav a:hover {color: #f8a043; text-decoration:overline;}
#search {width:120px;}
#searchbox {padding:72px 0px 2px 4px;}
#content {margin:0px; padding:0px;}
#content img {width:100%; padding: 0px;}
#content p {font-size:1.2em;}
#content ul {margin:0px; padding:0px;}
#content li {float:left; display:inline; list-style:none; width:181px; text-align:center; margin:0px; padding: 10px; border: #FFFFFF solid 2px;}
#content li:hover {background:#676666; border: #000000 solid 2px;}
#content li:hover h3 {color:#f8a053;}
#content h3 {font-size:1.6em; font-family:Denmark; margin: 1px 0px;}
#price {font-family:Denmark; font-size:1.4em;}
button {margin:5px; font-family:Denmark; font-size:1.4em;}
#footer {clear:both; color:#FFFFFF; background: #000000; margin-top: 50px; padding: 5px 0px 100px 0px; text-align:center; font-size: 1.2em; font-weight: 500;}
#footer a {color:#FFFFFF; text-decoration:none;}
#footer a:hover {text-decoration:overline; font-weight:900;}
#footer ul {margin:0px; padding:0px;}
#footer li {display:inline; margin:0px 2px;}
#product2 img {display:none;}
#product3 img {display:none;}
#product4 img {display:none;}
</code>

一个可以做什么的例子

该演示给出了一个示例, 说明如何使用基本CSS将现有的电子商务网站转换为适合移动设备的商店。每个商店都会面临不同的挑战和折衷, 但是可以为移动客户优化你的网站。

一盏木

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: