HTML静态页面——SOLANA制作

2017-10-21  本文已影响0人  迷途小姐

介绍写作背景

SOLANA是我将要介绍的HTML静态页面的名字，可以称它为“蓝色海湾”，这个静态页面是我去年初学HTML，CSS时制作的，包括一些页面的布局，鼠标的滑动效果等元素，现在来看确实还有很多的不足之处，比如一些标签的命名规范和代码比较冗余，也希望能对初学者有点帮助。

静态页面效果展示

在介绍 SOLANA编写过程之前，先给大家看一下页面效果图：


solana1.png
solana2.PNG
solana3.PNG

静态页面制作过程

#引入CSS文件，由于这个页面的css较多，就不一一赘述了，建议使用外部引入方法
<head>
    <meta charset="UTF-8">
    <title>SOLANA</title>
    <link href="css/SOLANA.css" rel="stylesheet" type="text/css">
</head>
#页面布局，分为上中下结构
<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>

结语

相信大家在看完这段HTML之后可能会觉得头大，其实现在看来应该有很大的提升空间，但是作为初学者来说，只要把效果做出来了，也是很大的提高，随着知识的不断积累，同一段代码可能还可以继续优化。下面我将介绍一下HTML中比较重要和常用的命名规范。
1.关于布局命名，可以使用以下html命名标签，也可以使用比较常用的左中右结构，left，center，right，上中下结构，top，middle，bottom或者
header，content，footer


html布局.PNG

2.关于命名注意事项

 (1) 一律小写；
 (2) 尽量用英文；
 (3) 不加中杠和下划线；
 (4) 尽量不缩写，除非一看就明白的单词
上一篇下一篇

猜你喜欢

热点阅读