div+css布局中选择使用html标签的方法

   2015-11-09 0
核心提示:这篇文章主要介绍了div+css布局中选择使用html标签的方法,需要的朋友可以参考下

这里为大家简单介绍在DIV+CSS布局中如何选择HTML标签:

1、框架布局(使用DIV标签)
在网页中框架布局一般使用DIV布局,无论大小DIV盒子一般均使用DIV标签(<div> </div>)布局。

2、列表型布局(使用ul li标签)
遇到图片列表、文章标题列表,通常使用ul li列表标签进行布局。当然使用这些标签时要进行设置需要CSS样式达到布局效果。这样程序调用数据时候更容易做循环内容。

3、标题型布局(使用h1、h2、h3、h4标签)
遇到独立的栏目标题、正文标签,通常使用h1、h2、h3、h4标题标签,这样布局内容具有层次感。同时考虑SEO来说适当使用这些标题标签有利于优化排名。

4、内容独立样式型(使用span)
在一段文字中,有几个文字需要单独设置一个颜色值,这个时候可以对这几个文字加span标签,对span标签单独设置class或直接CSS样式达到效果,一般来说布局框架很少使用span。

5、功能型布局(img、b、strong、u、s等标签)
遇到网页中引人图片使用Img标签;遇到文字加粗可以使用b标签或strong标签、遇到下划线可以使用u标签、遇到文字贯穿线(删除线)使用s标签等,有时不一定使用CSS来实现这些功能布局,适当选用这些HTML标签从SEO方面更加好些。

6、段落(p标签)
一般文章段落都是使用p标签,即每段文字开始时候使用<p>结束时使用</p>,这样文章段落分明。

7、手动强行换行布局(br标签)
遇到文字需要换行的使用br标签即“<br />”,值得注意br标签是单独的标签非盒子标签,独立的一个标签,什么地方需要换行就使用br标签。

8、表格型(table表格标签)
在HTML布局中,学习DIV CSS并不意味着放弃table标签,这个有时还是需要table标签的,比如遇到表格型布局的,还是需要table tr td标签布局,这个时候使用表格布局优于div标签。

9、表单布局(form、input等)
遇到表单布局,比如注册、登录、填写数据提交地方等,均是使用表单标签。
其它标签有待您发现与使用。在DIVCSS5培训中,也教了同学什么情况下选择什么标签,实践熟悉后自然会知道如何选择HTML标签布局网页。

 
标签: DIV css HTML
反对 0举报 0 评论 0
 

免责声明:本文仅代表作者个人观点,与乐学笔记(本网)无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
    本网站有部分内容均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责,若因作品内容、知识产权、版权和其他问题,请及时提供相关证明等材料并与我们留言联系,本网站将在规定时间内给予删除等相关处理.

  • javascript怎么清空一个div里面的内容 jquery
    document.getElementById('BIGDraw').innerHTML = "";$('#BIGDraw').html("");清空div内容  两种都可以 版权声明:本文为博主原创文章,未经博主允许不得转载。
    03-08
  • JavaScript监听滚动条停止滚动 js监听div滚动事
    需求:当滚动条滚动时将x元素隐藏掉,当滚动条停止滚动时再将元素x显示出来。let scrollTop = 0;let scrollEndTop = 0;let timer = null;document.onscroll = function() {clearTimeout(timer);timer = setTimeout(isScrollEnd, 500);scrollTop = document.do
    03-08
  • JavaScript动态加载资源 js动态加载div
    //动态加载样式function dynamicLoadingCss(path){if(!path || path.length === 0){return false;}var head = document.getElementsByTagName('head')[0];var link = document.createElement('link');link.href = path;link.rel = 'stylesheet';link
    03-08
  • div style标签内嵌CSS样式
    div style标签内嵌CSS样式
    我们在DIV标签内、SPAN标签内、p标签等html标签内使用style属性直接设置div的样式。一、在div标签内使用style设置css样式   -   TOP1、实例html源代码片段:div style="font-size:14px; color:#F00"设置字体大小14px,颜色为红色/div 2、div标签内使用style
    03-08
  • 转 Div+Css控制背景图片水平垂直居中显示 背景
    在Web开发中我们经常要碰到这样的问题:在为一个页面设置背景图片之后往往希望图片能够在分辨率比较大的情况下水平垂直都居中显示。通常水平居中显示在Css中是很容易做到的,而垂直居中就需要使用一些Css的技巧:1. 首先为了能使得网站能够根据浏览器大小自适
    03-08
  • 异步加载统计图组件(jquery+css+div)
    异步加载统计图组件(jquery+css+div)
    操作:http://localhost/test/zimg.html效果: ===============zimg.html代码===============!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"html xmlns="http://www.w3.org/19
    03-08
  • CSS画行内分隔线 css在div里加一条分割线
    为行内元素画长宽可变化的居中分隔线1、采用display:inline-block样式这个属性通俗一点的解释就是让块级元素可以在一行显示。既是块级元素又可以在同一行显示就可以设置display:inline-block.1 pdiv/divlalalalalaladiv/div/pcss部分:1 div {2 display: inli
    03-08
  • DIV+CSS实现自适应表格布局 div自适应内容
    DIV+CSS实现自适应表格布局 div自适应内容
    效果: 代码: !DOCTYPE htmlhtmlheadmeta charset="utf-8" meta name="viewport" content="width=device-width, initial-scale=1"style type="text/css".customer-page {background: #FFFFFF;box-shadow: 0 2px 4px 0 rgba(147, 157, 165
    03-08
  • css3如何让div一直循环自转圈,附带:网络请求通知图片一直在转圈实例
    css3如何让div一直循环自转圈,附带:网络请求
    css3如何让div一直循环自转圈代码如下:div{ -webkit-transition-property: -webkit-transform;-webkit-transition-duration: 1s;-moz-transition-property: -moz-transform;-moz-transition-duration: 1s;-webkit-animation: rotate 3s linear infinite;-moz
    03-08
  • CSS设置DIV居中 css中让div居中
    style type="text/css"body{ text-align:center;}.divs{margin:0 auto;}/stylebody div class="divs"CSS设置DIV居中/div/body
    03-08
点击排行