济南网站建设,网站运营维护,网站优化
技术探讨您当前的位置:智达维网络科技 > 建站知识 > 技术探讨 >

济南企业网站建设HTML5开发技术有哪些?

更新时间:2018-03-28 09:19:38 作者:千寻建站 访问量:31

济南企业网站建设HTML5开发技术有哪些?
济南企业网站建设HTML5开发技术有哪些?

1 加div标签使用语义标签

    在使用每个语义标签的时候,在外层加一个div标签:有的人单纯地使用语义标签实现网页的布局,语义标签的目的是让别人看见自己的网页代码,很容易就能定位到网页的相应部分。但是在整个网页的布局中,例如对齐等设置,依旧需要在语义标签的外层包裹一层div,这样更有利于控制网页的整体布局。
例如,footer语义标签在外层加一个div,id是footer_wrapper:
#footer_wrapper{
background-color: dodgerblue;
margin-top: 20px;
padding: 40px 0;
}
#footer_wrapper footer{
text-align: center;
}
    这样,footer_wrapper负责整体的网页布局,footer负责内容的布局,而且依然不失语义性。

2 使用header语义标签布局

    大多网页头部都有logo、搜索框、导航栏等,这几块可以使用header语义标签布局。其中logo和搜索框可以使用div布局,导航栏则使用语义标签nav。
案例代码:
<header>
<div class="container">
<! --logo 和搜索框-->
</div>
<div id="nav">
<nav class="container">
</nav>
<! --导航栏内容-->
</div>
</header>

3 用ul和li标签制作横排菜单栏

    这是在网站开发中用的很多的技术。例如,如果在nav标签中,需要制作横排的导航,那么就在nav中添加ul和li标签,css样式如下:
nav li{
//去掉项目符号,并且作为行内元素显示。
//list-style:none;仅仅是去掉li 前面的项目符号。
display: inline-block;
line-height: 60px;}//让文字垂直居中

4 内容部分两边对齐

    一般的网页body内容部分都不是全屏,可以给div设置一个class,这样在其他布局中,可以直接添加这个class皆可,从而轻松保证了整个网页的内容部分两边对齐。
案例代码:
<div class="container"></div>
.container{
width: 1000px;
margin: 0 auto;
}

5 正文和侧边栏布局

    正文部分可以使用语义标签<article>包裹,在里面再根据内容使用<section>。侧边部分使用<aside>,里面再根据内容使用<section>。
正文部分布局:
<article>
<sectionid="lunbotu">
<! --内容部分一-->
</section>
<section id="xinwen">
<! --内容部分二-->
</section>
</article>
侧边栏部分布局:
<aside>
<section id="bowen">
<! --内容部分一-->
</section>
<section id="lianjie">
<! --内容部分二-->
</section>
</aside>

6 页脚就使用<footer>标签

<div id="footer_wrapper">
<footer class="container">
</footer>
</div>
    网页布局遵从“从大到小”原则,即先设置最外层布局,再设置里面的布局,最后到最里层的每一个元素的放置。

    文章说明:本站发布的所有文章,版权均属于智达维网络科技。如需转载、摘编或利用其它方式使用上述作品,请注明“转载自:智达维网络科技”或“转载自:智达维网络科技/网站建设相关文章”,谢谢您的浏览!

相关推荐
热线:0531-87583458 电话:0531-66812586 QQ:2676834962
Copyright 智达维网络科技 版权所有
ICP备案编号:鲁ICP备11034527号-1 鲁公网安备 37010402000703号

扫二维码加微信咨询

拨打客服热线

0531-87583458

在线客服