最新消息:20190717 VPS服务器:Vultr新加坡,WordPress主题:大前端D8,统一介绍入口:关于

【未解决】基于html5up-landed的html5模板搭建网站主页

HTML crifan 35浏览 0评论
折腾:
【已解决】找HTML5静态网站模块
后,所以目前看来,还是基于:
html5up-landed
去试试
目前代码:
            <!-- Header -->
                <header id="header">
                    <h1 id="logo"><a href="index.html" class="xlarge logo”>xxx</a></h1>
                    <nav id="nav">
                        <ul>
                            <li><a href="index.html" class="button”>xxx</a></li>
                            <li>
                                <!-- <a href="#" class="button large”>xxx</a> -->
                                <a href="#" class="button”>xxx</a>
                                <!-- <ul>
                                    <li><a href="left-sidebar.html">Left Sidebar</a></li>
                                    <li><a href="right-sidebar.html">Right Sidebar</a></li>
                                    <li><a href="no-sidebar.html">No Sidebar</a></li>
                                    <li>
                                        <a href="#">Submenu</a>
                                        <ul>
                                            <li><a href="#">Option 1</a></li>
                                            <li><a href="#">Option 2</a></li>
                                            <li><a href="#">Option 3</a></li>
                                            <li><a href="#">Option 4</a></li>
                                        </ul>
                                    </li>
                                </ul> -->
                            </li>
                            <li><a href="elements.html" class="button”>xxx</a></li>
                            <li><a href="#" class="button”>xxx</a></li>
                        </ul>
                    </nav>
                </header>
和css
/* Header */


.logo{
    // font-size: larger;
    font-size: 1.6em;
    // font-size: 1.8em;
}
效果:
再去处理中间区域,是左右布局的:
【已解决】html网页中实现左右布局和图片居中显示
然后再去把右边8行内容调整显示效果


    .left_image {
        width: 100%;
        // height: 20em;
        margin: auto;


        display: flex;
        align-items: center;
    }


    .right_content {
        flex: 35%;
        // height: 60%;
        height: 20em;
        font-size: medium;
        margin: auto;
        text-align: center;
    }


    .right_row{
        border-radius: 2px;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
        height: 2.5em;
        line-height: 2.5em;
        background-color: rgb(89, 91, 92);


        // display:table-cell;
        // vertical-align: middle;
    }
效果:
先凑合用吧。
再去添加下面一行
【已解决】html页面底部一排水平6个老师介绍信息
然后底部再添加版权信息:
            <!-- Footer -->
                <footer id="footer">
                    <!-- <ul class="icons">
                        <li><a href="#" class="icon alt fa-twitter"><span class="label">Twitter</span></a></li>
                        <li><a href="#" class="icon alt fa-facebook"><span class="label">Facebook</span></a></li>
                        <li><a href="#" class="icon alt fa-linkedin"><span class="label">LinkedIn</span></a></li>
                        <li><a href="#" class="icon alt fa-instagram"><span class="label">Instagram</span></a></li>
                        <li><a href="#" class="icon alt fa-github"><span class="label">GitHub</span></a></li>
                        <li><a href="#" class="icon alt fa-envelope"><span class="label">Email</span></a></li>
                    </ul> -->
                    <ul class="copyright">
                        <!-- <li>&copy; Untitled. All rights reserved.</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li> -->
                        <li>&copy; xxx</li><li>电话:xxx &nbsp;&nbsp; | &nbsp;&nbsp; 地址:xxxx</li>
                    </ul>
                </footer>
效果:
现在感觉:底部版权信息高度没到底,所以想办法:
让上面图片再大点,或许就可以了。
算了,细节后续再优化。
然后先去添加更多详细页面:
【已解决】基于html5模板html5up-landed创建菜单等详情页
然后拿到了logo,再去更新logo
后来再去更新图片底下加上文字
                                <div class="container">
                                    <div class="box alt">
                                        <div class="row gtr-uniform">
                                            <section class="col-4 col-6-medium col-12-xsmall">
                                                <img class="certificate_image" src="images/davinci_certificate_primary.jpg" />
                                                <h4 class="certificate_image_text”>xxx证书</h4>
                                            </section>
                                            <section class=" col-4 col-6-medium col-12-xsmall">
                                                <img class="certificate_image" src="images/davinci_certificate_intermediate_color.jpg" />
                                                <h4 class="certificate_image_text”>xxx证书</h4>
                                            </section>
                                            <section class=" col-4 col-6-medium col-12-xsmall">
                                                <img class="certificate_image" src="images/davinci_certificate_intermediate_edit.jpg" />
                                                <h4 class="certificate_image_text”>xxx证书</h4>
                                            </section>
                                        </div>
                                    </div>
                                </div>

                                <p></p>
                                <h3>xxx</h3>
以及css
.certificate_image_parent{
    display: flex;
    flex-direction: column;
    align-items: center;
}


.certificate_image_text {
    text-align: center;
    margin-left: -38px;
}


.certificate_image{
    width: 90%;
    // height: 80%;
    // margin-bottom: 1em;
}
效果:
继续弄轮播图:
【未解决】HTML主页顶部把单个图片换成轮播图

转载请注明:在路上 » 【未解决】基于html5up-landed的html5模板搭建网站主页

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
18 queries in 0.081 seconds, using 9.38MB memory