文章导航绿软下载站软件下载安卓资源苹果资源专题

您当前所在位置:首页网络编程DIVCSS → DIV+CSS网页布局常用的一些基础知识整理

DIV+CSS网页布局常用的一些基础知识整理

时间:2020/2/4 23:28:56来源:IT猫扑网作者:网管联盟我要评论(0)

CSS命名规范

一.文件命名规范

全局样式:global.css;

框架布局:layout.css;

字体样式:font.css;

链接样式:link.css;

打印样式:print.css;

二.常用类/ID命名规范

页 眉:header

内 容:content

容 器:container

页 脚:footer

版 权:copyright

导 航:menu

主导航:mainMenu

子导航:subMenu

标 志:logo

标 语:banner

标 题:title

侧边栏:sidebar

图 标:Icon

注 释:note

搜 索:search

按 钮:btn

登 录:login

链 接:link

信息框:manage

常用类的命名应尽量以常见英文单词为准,做到通俗易懂,并在适当的地方加以注释。对于二级类/ID命名,则采用组合书写的模式,后一个单词的首字母应大写:诸如"搜索框"则应命名为"searchInput"、"搜索图标"命名这"searchIcon"、"搜索按钮"命名为"searchBtn"等等。

CSS书写规范及方法

一. 常规书写规范及方法

1. 选择DOCTYPE:

XHTML 1.0 提供了三种DTD声明可供选择:

过渡的(Transitional):要求非常宽松的DTD,它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。完整代码如下:

XML/HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

严格的(Strict):要求严格的DTD,你不能使用任何表现层的标识和属性,例如<br>。完整代码如下:

XML/HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

框架的(Frameset):专门针对框架页面设计使用的DTD,如果你的页面中包含有框架,需要采用这种DTD。完整代码如下:

XML/HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

理想情况当然是严格的DTD,但对于我们大多数刚接触web标准的设计师来说,过渡的DTD(XHTML 1.0 Transitional)是目前理想选择(包括本站,使用的也是过渡型DTD)。因为这种DTD还允许我们使用表现层的标识、元素和属性,也比较容易通过W3C的代码校验。

关于DTD您可以参考:

https://www.w3school.com.cn/dtd/index.asp 

2. 指定语言及字符集:

为文档指定语言:

XML/HTML代码

<html xmlns="http://www.w3.org/1999/xhtml">

为了被浏览器正确解释和通过W3C代码校验,所有的XHTML文档都必须声明它们所使用的编码语言;如:

常用的语言定义:

XML/HTML代码

<meta http-equiv="Content-Type" content="text/html; charset=utf-8&Prime; />

标准的XML文档语言定义:

XML/HTML代码

<?xml version="1.0&Prime; encoding=" utf-8&Prime;?>

针对老版本的浏览器的语言定义:

XML/HTML代码

<meta http-equiv="Content-Language" content=" utf-8&Prime; />

为提高字符集,建议采用"utf-8"。

3. 调用样式表:

外部样式表调用:

页面内嵌法:就是将样式表直接写在页面代码的head区。 如:

XML/HTML代码

<style type="text/css"><!&ndash; body { background : white ; color : black ; } &ndash;> </style>

外部调用法:将样式表写在一个独立的.css文件中,然后在页面head区用类似以下代码调用。

XML/HTML代码

<link rel="stylesheet" rev="stylesheet" href="css/style.css" type="text/css" media="all" />

在符合web标准的设计中,推荐使用外部调用法,可以不修改页面只修改.css文件而改变页面的样式。如果所有页面都调用同一个样式表文件,那么改一个样式表文件,可以改变所有文件的样式。

4、选用恰当的元素:

根据文档的结构来选择HTML元素,而不是根据HTML元素的样式来选择。例如,使用P元素来包含文字段落,而不是为了换行。如果在创建文档时找不到适当的元素,则可以考虑使用通用的div 或者是span;

避免过渡使用div和span。少量、适当的使用div和span元素可以使文档的结构更加清晰合理并且易于使用样式;

尽可能少地使用标签和结构嵌套,这样不但可以使文档结构清晰,同时也可以保持文件的小巧,在提高用户下载速度的同时,也易于浏览器对文档的解释及呈视;

5、派生选择器:

可以使用派生选择器给一个元素里的子元素定义样式,在简化命名的同时也使结构更加的清晰化,如:

XML/HTML代码

.mainMenu ul li {background:url(images/bg.gif;)}

关于选择器,您可以参考:

https://www.w3school.com.cn/cssref/css_selectors.asp

关键词标签:Dreamweaver,网页设计

相关阅读 网页设计中常用的19个Web安全字体网页设计常用Javascript经典代码Dreamweaver中数据库路径的使用网页设计必须注意和掌握的几个问题网页设计中的各种分辨率下的标准尺寸5日精通CSS层叠样式表之第二天

文章评论
发表评论

热门文章 DIV+CSS网页布局常用的一些基础知识整理DIV+CSS网页布局常用的一些基础知识整理

相关软件 adobe dreamweaver cc 2017简体中文破解版 Adobe Dreamweaver CC 2017绿色精简版 adobe dreamweaver cc 2017破解补丁 Adobe dreamweaver CC 2018汉化补丁 Adobe Dreamweaver CC 2019破解版 Adobe Dreamweaver CC 2019破解补丁 Adobe Dreamweaver cc 2020中文破解版 adobe dreamweaver cc2015破解补丁

人气排行 DIV CSS完美兼容IE6/IE7/FF的通用方法CSS实例:list-style-type在IE与FF中奇怪的现象解析-CSS布局实例CSS实例:通过定义渐变边框给图片加阴影CSS常用技巧之一 禁止文字自动换行解决用CSS控制DIV居中失效的问题css div设置float后高度不能自动增加网页页面设计中CSS十大注意让CSS兼容IE和Firefox的技巧集合