HTML靜態(tài)頁面——SOLANA制作

介紹寫作背景

SOLANA是我將要介紹的HTML靜態(tài)頁面的名字，可以稱它為“藍(lán)色海灣”，這個(gè)靜態(tài)頁面是我去年初學(xué)HTML，CSS時(shí)制作的，包括一些頁面的布局，鼠標(biāo)的滑動(dòng)效果等元素，現(xiàn)在來看確實(shí)還有很多的不足之處，比如一些標(biāo)簽的命名規(guī)范和代碼比較冗余，也希望能對初學(xué)者有點(diǎn)幫助。

靜態(tài)頁面效果展示

在介紹 SOLANA編寫過程之前，先給大家看一下頁面效果圖：


solana1.png

solana2.PNG

solana3.PNG

靜態(tài)頁面制作過程

#引入CSS文件，由于這個(gè)頁面的css較多，就不一一贅述了，建議使用外部引入方法
<head>
    <meta charset="UTF-8">
    <title>SOLANA</title>
    <link href="css/SOLANA.css" rel="stylesheet" type="text/css">
</head>
#頁面布局，分為上中下結(jié)構(gòu)
<body>
<div id="container">
    <div class="setting">
        <a href="#">![](images/img/settings.png)</a>
    </div>
    <div id="top">
        ![](images/img/slider-bg-1.jpg)
        <div id="header">
            <ul class="top">
                <li class="logo">![](images/img/logo-retina.png)</li>
                <li class="first"><a href="#">HOME</a></li>
                <li><a href="#">FEATURES</a></li>
                <li><a href="#">PORTFOLIO</a></li>
                <li><a href="#">BLOG</a></li>
                <li><a href="#">CONTACT</a></li>
                <li><input class="text" type="text"></li>
                <li class="search"><a>![](images/img/search-submit.png)</a></li>
            </ul>
        </div>
        <div class="content">
            <h2>MULTIPURPOSE THEME</h2>
            <p>CRAS JUSTO ODIO, DAPIBUS AC FACILISIS</p>
            <div class="link">
                <a href="#">
                    READ MORE
                    ![](images/img/arrow-rm-white.png)
                </a>
            </div>
        </div>
        <div class="footer">
            <p>![](images/img/bg-2-1.jpg)</p>
            <div class="body">
                <div class="container1">
                    <div class="content">
                        <div class="block-text">
                            WE PROVIDE<br>
                            AWESOME DIGITAL<br>
                            <strong>SERVICES</strong>
                        </div>
                    </div>
                    <div class="block-link">
                        <a href="#">READ MORE
                            ![](images/img/arrow-rm-white.png)
                        </a>
                    </div>
                </div>
                <div class="container2" align="center">
                    ![](images/img/icon-comp.png)
                    <h2>RESPONSIVE TEMPLATE</h2>
                    <h3>Sed ut perspiciatis unde omnis iste natus error sit.</h3>
                </div>
                <div class="container3" align="center">
                    ![](images/img/icon-gears.png)
                    <h2>EASY TO CUSTOMIZE</h2>
                    <h3 class="ca-sub">Sed ut perspiciatis unde omnis iste natus error sit.</h3>
                </div>
                <div class="container4" align="center">
                    ![](images/img/icon-plane.png)
                    <h2>RETINA READY</h2>
                    <h3>Sed ut perspiciatis unde omnis iste natus error sit.</h3>
                </div>
            </div>
        </div>
    </div>
    <div id="middle">
        <div class="header2">
            ![](images/img/icon-buy.png)
            <h2>Solana is a Responsive Multipurpose Theme</h2>
            <h3>Easy Customizable, Retina Ready, Cross-Browser Compatible,
                Unlimited Colors</h3>
            <a href="#">PURCHASE IT</a>
        </div>
        <div class="body">
            <div class="container1">
                <div class="content">
                    <div class="block-text">
                        THIS IS THE LIST OF<br>
                        OUR RECENT<br>
                        <strong>WORKS</strong>
                    </div>
                </div>
                <div class="block-link">
                    <div class="block-left"><img src="images/img/prev-small.png"
                                                 width=" 10" height="15"></div>
                    <div class="block-right"><img src="images/img/next-small.png"
                                                  width="10" height="15"></div>
                </div>
            </div>
            <div class="container2">
                <div class="up">
                    ![](images/img/port-2-1.jpg)
                    <h2>Lorem Ipsum</h2>
                </div>
                <div class="down">
                    <h3>web design</h3>
                </div>
            </div>
            <div class="container3">
                <div class="up">
                    ![](images/img/port-2-2.jpg)
                    <h2>Lorem Ipsum</h2>
                </div>
                <div class="down">
                    <h3>photography</h3>
                </div>
            </div>
            <div class="container4">
                <div class="up">
                    ![](images/img/port-2-3.jpg)
                    <h2>Lorem Ipsum</h2>
                </div>
                <div class="down">
                    <h3>illustration</h3>
                </div>
            </div>
        </div>
        <div class="content2">
            <div class="feature1">![](images/img/features-icon.png)</div>
            <div class="feature2">
                FULLY<br>
                <strong>RESPONSIVE</strong>
            </div>
            <div class="feature3">
                <ul>
                    <li>Fully Responsive</li>
                    <li>Retina Ready</li>
                    <li>SEO Optimized</li>
                    <li>Easy to Customize</li>
                </ul>
            </div>
        </div>
        <div class="foot">
            <div class="body">
                <div class="container1">
                    <div class="content">
                        <div class="block-text">
                            STAY TUNED.<br>
                            READ OUR<br>
                            <strong>NEWS</strong>
                        </div>
                    </div>
                    <div class="block-link">
                        <div class="block-left"><img src="images/img/prev-small.png"
                                                     width=" 10" height="15"></div>
                        <div class="block-right"><img src="images/img/next-small.png"
                                                      width="10" height="15"></div>
                    </div>
                </div>
                <div class="container2">
                    <div class="up">
                        ![](images/img/post-2-1.jpg)
                        <h2>Craes Nustro </h2>
                        <h3>10 Okt 2013 | 7 Comments </h3>
                    </div>
                    <div class="down">
                        <h3>Lorem ipsum dolor sit amet, consec at adipiscing elit.
                            Fusce varius lobortis tur pis, eu eleifend odio pharetra sit amet.
                            Aliquam...</h3>
                    </div>
                    <div class="icon">![](images/img/arrow-rm.png)</div>
                </div>
                <div class="container3">
                    <div class="up">
                        ![](images/img/post-2-2.jpg)
                        <h2>Sed Lectus </h2>
                        <h3>10 Okt 2013 | 7 Comments</h3>
                    </div>
                    <div class="down">
                        <h3>Lorem ipsum dolor sit amet, consec at adipiscing elit.
                            Fusce varius lobortis tur pis, eu eleifend odio pharetra sit amet.
                            Aliquam...</h3>
                    </div>
                    <div class="icon">![](images/img/arrow-rm.png)</div>
                </div>
                <div class="container4">
                    <div class="up">
                        ![](images/img/post-2-3.jpg)
                        <h2>Lorem Ipsum </h2>
                        <h3>10 Okt 2013 | 7 Comments</h3>
                    </div>
                    <div class="down">
                        <h3>Lorem ipsum dolor sit amet, consec at adipiscing elit.
                            Fusce varius lobortis tur pis, eu eleifend odio pharetra sit amet.
                            Aliquam...</h3>
                    </div>
                    <div class="icon">![](images/img/arrow-rm.png)</div>
                </div>
            </div>
        </div>
    </div>
    <div id="bottom">
        <div class="header3">
            ![](images/img/icon-mail.png)
            <p><strong>NEWS</strong> LETTER</p>
            <h3>Stay up-to date with the latest news and other stuffs,
                Sign Up today!</h3>
            <div class="form">
                <input type="text" onblur="if(this.value=='')this.value='Your email here...';"
                       onfocus="if(this.value=='Your email here...')this.value='';"
                       value="Your email here..." name="email" class="newform">
                <a href="#">SIGN UP</a>
            </div>
        </div>
        <div class="footer-icon">
            ![](images/img/logo1.png)
            ![](images/img/logo2.png)
            ![](images/img/logo3.png)
            ![](images/img/logo4.png)
            ![](images/img/logo5.png)
        </div>
        <div class="footer-content">
            <div class="div1">
                <a href="#">![](images/img/logo-retina.png)</a>
            </div>
            <div class="div2">
                <p>WE PROVIDE AWESOME DIGITAL <strong>SERVICES</strong></p>
            </div>
            <div class="div3">
                <p class="p1">SAY <strong>HELLO</strong></p>
                <p class="p2">WE'D LOVE HEARING FROM YOU</p>
            </div>
            <div class="div4">
                <h3>LATEST <strong>POST</strong></h3>
            </div>
            <div class="div5">
                <h3>CONTACT
                    <strong>INFO</strong></h3>
            </div>
            <div class="div6">
                <ul>
                    <li><a class="facebook" title="Facebook" href="" target="_blank"></a></li>
                    <li><a class="skype" title="Skype" href="" target="_blank"></a></li>
                    <li><a class="twitter" title="Twitter" href="" target="_blank"></a></li>
                    <li><a class="flickr" title="Flickr" href="" target="_blank"></a></li>
                    <li><a class="vimeo" title="Vimeo" href="" target="_blank"></a></li>
                    <li><a class="linkedin" title="linkedin" href="" target="_blank"></a></li>
                    <li><a class="pintrest" title="pintrest" href="" target="_blank"></a></li>
                    <li><a class="googleplus" title="googleplus" href="" target="_blank"></a></li>
                </ul>
            </div>
            <div class="div7">
                <ul>
                    <li>![](images/img/icon-standart-post.png)
                        <h4><a href="#">Donec id elit</a></h4>
                        <h4>July 10, 2013</h4>
                    </li>
                    <li>![](images/img/icon-image-post.png)
                        <h4><a href="#">Donec id elit</a></h4>
                        <h4>July 10, 2013</h4>
                    </li>
                    <li>![](images/img/icon-video-post.png)
                        <h4><a href="#">Donec id elit</a></h4>
                        <h4>July 10, 2013</h4>
                    </li>
                </ul>
            </div>
            <div class="div8">
                <ul>
                    <li>![](images/img/icon_footer_loc.png)
                        <p>Corporation, 123 Some Ave, Suite 700, New York</p>
                    </li>
                    <li>![](images/img/icon_footer_phone.png)
                        <p>(123) 456-7890<br>
                            (123) 987-6540</p>
                    </li>
                    <li>![](images/img/icon_footer_mail.png)
                        <a href="#" class="e1">email@felius.com</a>
                        <a href="#" class="e2"> email@optimas.com</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="footer-formation">
            <ul>
                <li><a href="#">HOME</a></li>
                <li><a href="#">FEATURES</a></li>
                <li><a href="#">PORTFOLIO</a></li>
                <li><a href="#">BLOG</a></li>
                <li><a href="#">CONTACT</a></li>
                <li><a href="#">PURCHASE</a></li>
            </ul>
            <p>? Solan<span>a</span> - Build with Passion by <a href="#">AbcGomel</a></p>
        </div>
        <p id="back-top"><a href="#">![](images/img/back-top.png)</a></p>
    </div>
</div>
</body>

結(jié)語

相信大家在看完這段HTML之后可能會(huì)覺得頭大，其實(shí)現(xiàn)在看來應(yīng)該有很大的提升空間，但是作為初學(xué)者來說，只要把效果做出來了，也是很大的提高，隨著知識的不斷積累，同一段代碼可能還可以繼續(xù)優(yōu)化。下面我將介紹一下HTML中比較重要和常用的命名規(guī)范。
1.關(guān)于布局命名，可以使用以下html命名標(biāo)簽，也可以使用比較常用的左中右結(jié)構(gòu)，left，center，right，上中下結(jié)構(gòu)，top，middle，bottom或者
header，content，footer


html布局.PNG

2.關(guān)于命名注意事項(xiàng)

 (1) 一律小寫；
 (2) 盡量用英文；
 (3) 不加中杠和下劃線；
 (4) 盡量不縮寫，除非一看就明白的單詞
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,139評論 25贊 708
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,165評論 1贊 92
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 15,414評論 4贊 61
  • 沒有更好，只有最好。 2013年春，在一次心靈成長的課程上，我有了一個(gè)頓悟：原來，我那么努力，無非是想讓自己變得更...
    怒放的葉子閱讀 787評論 7贊 11
  • 轉(zhuǎn)眼畢業(yè)兩年了，生活的壓力無時(shí)無刻不在試圖擊垮我，也許我向來懦弱，一直半死不活，到后來搞得死神都懶得理我。 工作和...
    yf_wkwk閱讀 168評論 0贊 2

友情鏈接更多精彩內(nèi)容