嘉兴网络公司:响应式网页设计简单入门教程

日期:2017-11-07 人气:3217

Overview:

构造基本的HTML页面

动态加载样式表

Viewport

字体缩放

侧边栏

导航菜单

图片自适应

其他

总结

 

说到响应式网页设计(Responsive web design),最近在谷歌加上碰到个奇葩贴子,通过一个原始到无法再简单的网页Motherfucking Website及满屏幕的fuck道出了网页设计的真谛,这孩子不是个激进分子就是个报复社会型的货没错,虽然整篇文章就像是泼妇骂街,但我特么是笑着读完的。。

统计了下全文共用Fuck (包括fucking) 33次,shit (包括shitty)16次,Motherfucker 8次,创下我所阅读的技术类文章里面脏话之最。

文章表达的中心思想就是最后的那句引用"最好的设计是尽量少的设计"。最重要的是我意识到平时我们都忽略了一个常识:一张未经加工的原始HTML文档就已经是响应式的了,根本不用什么CSS media属性或者指定任何样式。

通过查看HTML代码发现作者果然留下了一些信息,于是在twitter上找到他表达了我对他的膜拜之情以及想把如此精华的文章翻译成中文的意愿。作者很爽快地答应了23333~~(X___X)~~。

于是就有了同样奇葩的中文版本:妈逼的网站,原文的精髓可能由于我自身对这类表达的驾驭的不够而丢失了一些,但多少还是能够方便嫌英文阅读麻烦的同学们围观的了。

 

当然以上全是扯淡,一如作者所指出的,相当讽刺。

回到正题,各种屏幕尺寸满天飞的时代如何让网站自适应的究极解决方案:响应式设计(Responsive Design)。

构造基本的HTML页面

一个简单的博客页面

始终觉得再多口水都没有一个生动鲜明的例子来得实在,下面通过对一个普通HTML页面的改造来体验什么是响应式设计及如何达到。

下面构造一个基本的HTML页面,它包含网站导航菜单,正文,图片,侧边栏,表格式的布局以及页脚信息。是个非常完整而中庸的布局,几乎是常见的博客版面。

 

复制代码
<html>     <head>         <title>             Responsive Design Example
        </title>         <meta http-equiv="content-type" content="text/html;charset=utf-8" />         <link rel="stylesheet" type="text/css" href="style.css">     </head>     <body>         <div id="main">             <nav>                 <ul>                     <li>                         <a href="#">Home</a>                     </li>                     <li>                         <a href="#">Articles</a>                     </li>                     <li>                         <a href="#">Gallery</a>                     </li>                     <li>                         <a href="#">Forum</a>                     </li>                     <li>                         <a href="#">About</a>                     </li>                 </ul>             </nav>             <aside>                 <ul>                     <li><a href="#subtitle1">item1</a> </li>                     <li><a href="#subtitle2">item2</a></li>                     <li><a href="#subtitle3">item3</a></li>                     <li><a href="#subtitle4">item4</a></li>                     <li><a href="#subtitle5">item5</a></li>                 </ul>             </aside>             <section class="post">                 <article>                     <h1>                         Sample Title
                    </h1>                     
                    <p></p>                     
                    <section class="grid">                         <div class="item">                             #1
                        </div>                         <div class="item">                             #2
                        </div>                         <div class="item">                             #3
                        </div>                     </section>                     <p></p>                 </article>             </section>             <footer>                 <hr>                 <ul>                     <li><small>Wayou &copy 2013|</small></li>                     <li><small><a href="mailto:sample@somesite.com">Contact</a></small> </li>                 </ul>             </footer>         </div>     </body> </html>
复制代码

 

文章内容填充

剩下文章部分需要填充点内容,正好MS Word有这样一个产生随机文章的彩蛋。使用方法是新建一个word文件然后打开输入"=rand(3,10) " 再回车。其中rand 函数接收两个参数,第一个表示要产生多少个自然段,第二个表示每段多少行。所以上面回车后我们会得到一篇由3个自然段组成的文章且每段有10行。

 

然后再另存为网页文件:

最后可以在浏览器中通过查看源码把包含内容的<p>标签复制到我们的代码中即可。

同时这里有一个专门产生填充内容的网站Fillerati。可以定义篇幅,作者信息,标题等。

当然以上两种作法多少有点装逼与做作的感觉,你完全可以随便复制点什么东西来作为内容填充的 一_一|||。

填充内容后HTML变成这样

复制代码
<section class="post">     <article>         <h1>             Sample Title
        </h1>         <p>             Video provides a powerful way to help you prove your point. When you click Online
            Video, you can paste in the embed code for the video you want to add. You can also
            type a keyword to search online for the video that best fits your document. To make
            your document look professionally produced, Word provides header, footer, cover page,
            and text box designs that complement each other. For example, you can add a matching
            cover page, header, and sidebar. Click Insert and then choose the elements you want
            from the different galleries. Themes and styles also help keep your document coordinated.
            When you click Design and choose a new Theme, the pictures, charts, and SmartArt
            graphics change to match your new theme. When you apply styles, your headings change
            to match the new theme. Save time in Word with new buttons that show up where you
            need them.
        </p>         <section class="grid">             <div class="item">                 #1
            </div>             <div class="item">                 #2
            </div>             <div class="item">                 #3
            </div>         </section>         <p>             To change the way a picture fits in your document, click it and a button for layout
            options appears next to it. When you work on a table, click where you want to add
            a row or a column, and then click the plus sign. Reading is easier, too, in the new
            Reading view. You can collapse parts of the document and focus on the text you want.
            If you need to stop reading before you reach the end, Word remembers where you left
            off - even on another device. Video provides a powerful way to help you prove your
            point. When you click Online Video, you can paste in the embed code for the video
            you want to add. You can also type a keyword to search online for the video that
            best fits your document. To make your document look professionally produced, Word
            provides header, footer, cover page, and text box designs that complement each other.
            For example, you can add a matching cover page, header, and sidebar.
        </p>         <img class="illustration" src="beauty.png" title="sample pic" alt="beauty" />         <p>             Click Insert and then choose the elements you want from the different galleries.
            Themes and styles also help keep your document coordinated. When you click Design
            and choose a new Theme, the pictures, charts, and SmartArt graphics change to match
            your new theme. When you apply styles, your headings change to match the new theme.
            Save time in Word with new buttons that show up where you need them. To change the
            way a picture fits in your document, click it and a button for layout options appears
            next to it. When you work on a table, click where you want to add a row or a column,
            and then click the plus sign. Reading is easier, too, in the new Reading view. You
            can collapse parts of the document and focus on the text you want. If you need to
            stop reading before you reach the end, Word remembers where you left off - even on
            another device.
        </p>     </article> </section>
复制代码

 

最后出来的效果看起来是这样的:

最后为了让侧边栏更有意义一点,给文章正文加上一些子标题同时给侧边栏里的元素加上锚点连接可以在文章的子标题间进行导航。

复制代码
<aside>     <ul>         <li>             <a href="#subtitle1">item1</a>         </li>         <li>             <a href="#subtitle2">item2</a>         </li>         <li>             <a href="#subtitle3">item3</a>         </li>         <li>             <a href="#subtitle4">item4</a>         </li>         <li>             <a href="#subtitle5">item5</a>         </li>     </ul> </aside> <section class="post">     <article>         <h1>             Sample Title
        </h1>         <p id="subtitle1">             <strong>                 subtitle1
            </strong>         </p>         <p>             //正文被省略
        </p>         <p id="subtitle2">             <strong>                 subtitle2
            </strong>         </p>         <section class="grid">             <div class="item">                 #1
            </div>             <div class="item">                 #2
            </div>      
上一篇: 【重要】说说网站建设中的过程
下一篇: 嘉兴网站建设:屏幕录像专家4步录制高清视频