常用代码结构:

div:主要用于布局,分割页面的结构
ul/ol:用于无序/有序列表
span:没有特殊的意义,可以用作排版的辅助,例如: 引用内容
<li><span>(4.23)</span>随心生活</li>
然后在css中定义span为右浮动,实现了日期和标题分两侧显示的效果

h1-h6:标题
h1-h6 根据重要性依次递减
h1位最重要的标题

label:为了使你的表单更有亲和力而且还能辅助表单排版的好东西,例如:
引用内容
<label for="user-password">密 码</label> 
<input type="password" name="password" id="user-password" /> 
fieldset & legend:fildset套在表单外,legend用于描述表单内容。例如: 
<form> 
<fieldset> 
<legend>title</legend> 
<label for="user-password">密 码</label> 
<input type="password" name="password" id="user-password" /> 
</fieldset> 
</form>
dl,dt,dd:当页面中出现第一行为类似标题/简述,然后下面为详细描述的内容时应该使用该标签,例如:
引用内容
<dl> 
<dt>什么是CSS?</dt> 
<dd>CSS就是一种叫做样式表(stylesheet)的技术。也有的人称之为层叠样式表(Cascading Stylesheet)。<dd> 
<dt>什么是XHTML?</dt> 
<dd>XHTML是一个基于XML的置标语言,看起来与HTML有些想像,只有一些小的但重要的区别。可以这样看,XHTML就是一个扮演着类似 HTML的角色的XML。本质上说,XHTML是一个桥接(过渡)技术,结合了XML(有几分)的强大功能及HTML(大多数)的简单特性。</dd> 
</dl>

C #content
S #subcol
M #maincol
X #xcol

这是纵向布局的XHTML结构,c-smx表示网页有三个纵栏, c-sm表示有两个纵栏, c-mx表示有两个纵栏其中一个是附属的, c-m表示一个纵栏。

其中在三纵栏的布局需要分为两层 第一层是#subcol与#main第二层是#main中的#maincol与#xcol。

自定义命名:
根据w3c网站上给出的,最好是用意义命名
比如:是重要的新闻高亮显示(像红色)
有两种

引用内容
.red{color:red} 
.important-news{color:red}

很显然第二种传达的意义更加明确,所以尽量不要用意义不明确的作为自己自定义的名字

常用的CSS命名规则:

头:header  内容:content/container  尾:footer  导航:nav  侧栏:sidebar
栏目:column  页面外围控制整体布局宽度:wrapper  左右中:left right center
登录条:loginbar  标志:logo  广告:banner  页面主体:main  热点:hot
新闻:news  下载:download  子导航:subnav  菜单:menu
子菜单:submenu  搜索:search  友情链接:friendlink  页脚:footer
版权:copyright  滚动:scroll  内容:content  标签页:tab
文章列表:list  提示信息:msg  小技巧:tips  栏目标题:title
加入:joinus  指南:guild  服务:service  注册:regsiter
状态:status  投票:vote  合作伙伴:partner

(二)注释的写法:

  /* Footer */

  内容区

  /* End Footer */

(三)id的命名:

(1)页面结构

  容器: container  页头:header  内容:content/container
  页面主体:main  页尾:footer  导航:nav
  侧栏:sidebar  栏目:column  页面外围控制整体布局宽度:wrapper
  左右中:left right center

(2)导航

  导航:nav  主导航:mainbav  子导航:subnav
  顶导航:topnav  边导航:sidebar  左导航:leftsidebar
  右导航:rightsidebar  菜单:menu  子菜单:submenu
  标题: title  摘要: summary

(3)功能

  标志:logo  广告:banner  登陆:login  登录条:loginbar
  注册:regsiter  搜索:search  功能区:shop
  标题:title  加入:joinus  状态:status  按钮:btn
  滚动:scroll  标签页:tab  文章列表:list  提示信息:msg
  当前的: current  小技巧:tips  图标: icon  注释:note
  指南:guild 服务:service  热点:hot  新闻:news
  下载:download  投票:vote  合作伙伴:partner
  友情链接:link  版权:copyright

(四)class的命名:

(1)颜色:使用颜色的名称或者16进制代码,如

  .red { color: red; }
    .f60 { color: #f60; }
  .ff8600 { color: #ff8600; }

(2)字体大小,直接使用’font+字体大小’作为名称,如

  .font12px { font-size: 12px; }
  .font9pt {font-size: 9pt; }

(3)对齐样式,使用对齐目标的英文名称,如

  .left { float:left; }
  .bottom { float:bottom; }

(4)标题栏样式,使用’类别+功能’的方式命名,如

  .barnews { }
  .barproduct { }

注意事项::

  1.一律小写;
  2.尽量用英文;
  3.不加中杠和下划线;
  4.尽量不缩写,除非一看就明白的单词.
  主要的 master.css  模块 module.css  基本共用 base.css
  布局,版面 layout.css  主题 themes.css  专栏 columns.css

  文字 font.css  表单 forms.css  补丁 mend.css  打印 print.css

转载于:https://blog.51cto.com/800myweb/108742

最完整的div+css技术入门知识(一)相关推荐

  1. 【入门须知】学DIV CSS技术如何入门?

    [入门须知]学DIV CSS技术如何入门? 引言: 引用一本书中的一段文字:"当我第一次开始学习汉语时,我的家庭老师老王给了我一本汉英字典.一本汉语语法书和一本初级教程.但是,他将这些书放 ...

  2. DIV+CSS技术的研究

    第一章 DIV+CSS技术的基础知识 第一节DIV+CSS的基本概念 DIV+CSS是网站标准(或称"WEB标准")中常用术语之一,通常为了说明与HTML网页设计语言中的表格(ta ...

  3. html中的分离式布局,DIV+CSS技术在网页布局中的应用

    摘 要 信息科学技术的进步使得互联网技术行业快速发展起来.其中网页设计作为互联网技术行业中重要的一部分,应用先进技术提高其工作效率与工作质量具有重要意义.DIV+CSS技术在网页布局中的优势作用使得其 ...

  4. html如何实现表格效果,DIV+CSS技术实现类似table表格的效果

    当前位置:网站首页 >> 网站技术 >> DIV+CSS技术实现类似table表格的效果 [发布人:站长之家    发布日期:2015-04-03] 表格在网页制作中使用非常广 ...

  5. div css教程 属性,Div+CSS布局入门教程

    在网页制作中,有许多的术语,例如:CSS.HTML.DHTML.XHTML等等.在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础 ...

  6. Div+CSS布局入门教程(一) 页面布局与规划

    在网页制作中,有许多的术语,例如:CSS.HTML.DHTML.XHTML等等.在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础 ...

  7. Div+CSS布局入门教程(二) 写入整体层结构与CSS

    接下来我们在桌面新建一个文件夹,命名为"DIV+CSS布局练习",在文件夹下新建两个空的记事本文档,输入以下内容: <!DOCTYPE html PUBLIC "- ...

  8. Div+CSS布局入门教程(五) 页面制作-用好border和clear 附加:1.DIV+CSS设计原则 2.DIV+CSS中标签ul ol li dl dt dd用法

    这一节里面,主要就是想告诉大家如何使用好border和clear这两个属性. 首先,如果你曾用过table制作网页,你就应该知道,如果要在表格中绘制一条虚线该如何做,那需要制作一个很小的图片来填充,其 ...

  9. 更完整更系统的python入门知识总结分享

    随着人工智能.大数据的时代到来,学习Python的必要性已经显得不言而喻. 只要接触一点编程的同学就知道,我一点也没有言过其实.对于学习Python的重要性,这里不再赘述.今天整理的教程,是给零基础的 ...

最新文章

  1. Java 面试知识点解析(三)——JVM篇
  2. 一个好的软件开发人员的标准
  3. keras从入门到放弃(三)逻辑回归 softmax
  4. 【浏览器】浏览器模式与文档模式区别
  5. 14、查找最接近的元素
  6. oracle财务软件报表,甲骨文推出Oracle 财务管理分析软件
  7. Tensorflow 循环神经网络03 LSTM长短时记忆神经网络
  8. mysql主从之slave-skip-errors和sql_slave_skip_counter
  9. 在lua中调用DLL
  10. java毕业设计美发门店管理系统Mybatis+系统+数据库+调试部署
  11. 计算机二级c语言的书籍,全国计算机二级c语言
  12. c语言棋类ai怎么写搜索,新手立体四子棋AI教程(4)——启发式搜索与主程序
  13. linux+硬盘rd5,BackTrack5(BT5)硬盘安装完美教程 亲测可用
  14. 趋势科技移动客户端病毒报告
  15. selenum登录163邮箱
  16. 编写一个求和函数sum,用于计算 1+2+…+n ,在主函数调用该函数求和。
  17. 计算机学院姚茜,2019年东南大学计算机科学与工程学院硕士研究生拟录取名单公示...
  18. mos管的rc吸收电路计算_正激式RC吸收电路计算
  19. iOS客户端技术支持
  20. antd design mobile +react 动态生成表单

热门文章

  1. dw属性面板 的HTML,Dreamweaver中AP Div属性面板
  2. mybatis逆向工程用idea通过pom插件generator生成代码指令(mysql,oracle,sqlserver)
  3. history.go(-1)返回页面后,此页面中的input标签隐藏域中的值消失
  4. static关键字_一题搞定static关键字
  5. Android Studio 忽略_Android性能优化--启动优化
  6. L1-026 I Love GPLT
  7. 未找到插件 ‘org.springframework.bootspring-boot-maven-plugin‘(已解决 )
  8. 实验7-3-4 字符串替换 (15 分)
  9. 朴素贝叶斯-垃圾邮件(中文的)处理
  10. java 找到一行 更换单词_Java实现对一行英文进行单词提取功能示例