(一)常用代码结构:
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" />
即鼠标点到 “密 码”上面,光标就定位到密码输入框中,如果是radio框,则该radio呗选中。
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
参照:
http://hi.baidu.com/hxzon/blog。
分享到:
相关推荐
综上所述,"html+css简单介绍与使用"这个主题覆盖了HTML的基本结构和标签,CSS的样式定义以及JavaScript的基础和交互性。通过这些文件的学习,你可以掌握创建静态网页的基本技能,并为进一步学习动态网页开发打下...
这个名为"html+js+css自我介绍"的项目,显然利用这三种语言创建了一个动态的个人简历展示页面,其中包含了滑动滚轮效果来切换不同的界面内容。让我们详细探讨一下这三个关键元素以及它们如何协同工作来实现这样的...
**CSS3视频教程 1 CSS3介绍** 在深入学习CSS3之前,首先我们需要理解什么是CSS。CSS,全称层叠样式表(Cascading Style Sheets),是用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档样式的语言。自1996年...
- **DIV+CSS布局**: 是一种流行的网页布局方式,通过使用 `<div>` 标签配合CSS样式来实现网页的布局。这种方式具有良好的灵活性和可维护性,尤其适用于响应式设计,能够适应不同屏幕尺寸的设备。 - **浮动布局**: ...
### CSS技术介绍与网页制作技术 #### CSS技术概述 CSS(Cascading Style Sheets),即层叠样式表,是用于定义HTML文档外观的一种语言。它主要用于网页布局设计、颜色、字体大小等外观属性的控制,使得网页内容与...
作者简单介绍了几个常见的数据类型,如长度单位、颜色、百分比等,帮助读者理解CSS属性值的定义语法。同时,书中还讨论了CSS全局关键字,如`inherit`、`initial`、`unset`和`revert`,这些关键字在处理继承和重置...
教你简单的css入门,让新手也能快速了解css。css对于制作网页来说是一件必不可少的工具。
以下是一个简单的CSS样例: ```css /* 基本样式 */ body { font-family: Arial, sans-serif; color: #333; line-height: 1.6; margin: 0; padding: 0; } .wrapin { width: 960px; margin: 0 auto; } ...
书中会简单介绍它们的工作原理和优势,帮助开发者提高代码组织和复用性。 8. **CSS变量和自定义属性**:讲解CSS变量(Custom Properties)的使用,让开发者能够更方便地管理和复用样式,实现动态主题切换。 9. **...
比如,`radial-gradient`和`conic-gradient`的增强让创建复杂渐变变得更加简单,而`shape-outside`属性则支持非矩形内容流布局,可以创建出更具创意的设计。 尽管CSS4.0的许多特性目前仅在实验性浏览器中可用,但...
"一些简单的CSS样式"这个主题旨在介绍CSS的基础知识,帮助初学者快速上手。 1. **CSS基本概念**: - CSS是层叠样式表的缩写,它主要负责定义网页元素的外观、布局和结构。 - CSS通过分离内容和表现,使得网页设计...
网页设计是创建交互式、视觉吸引的网页的过程,其中“Div+CSS”是一种常见的布局技术,用于实现网页的结构化和样式控制。Div(层)是HTML中的一个块级元素,用于组织页面上的内容,而CSS(层叠样式表)则负责定义...
例如,我们可以定义一个简单的从左到右移动的动画: ```css @keyframes slideInFromLeft { 0% { transform: translateX(-100%); } 100% { transform: translateX(0); } } ``` 这个例子中,`0%`表示动画开始时,...
6. 动画和过渡:虽然项目没有使用JavaScript,但CSS可以实现简单的动画效果,如淡入淡出、滑动等。 7. 响应式图像:利用`<img>`标签的`srcset`和`sizes`属性,根据设备的视口大小加载不同的图像资源。 8. CSS预...
【简单橙色CSS网页模板】是一种适用于商务、企业、商业公司设计的网页设计资源,它以其醒目的橙色调和简洁的设计风格吸引用户。在网页设计领域,CSS(层叠样式表)是用于控制网页元素样式和布局的重要技术,而HTML...
**CSS(层叠样式表)**是网页设计中不可或缺的一部分,它用于定义和控制网页的外观和布局。这个“CSS教程宝典”旨在为初学者提供一个基础的指引,帮助他们理解和掌握CSS的核心概念。 首先,我们需要理解CSS的基本...
- **TextPad**: 一款简单的文本编辑器,支持语法高亮等功能。 - **Notepad++**: 一款免费的源代码编辑器和Notepad替代工具,支持多种编程语言。 ### 7. 网页设计原则 - **页面风格统一**: 所有页面应保持一致的布局...
【简单蓝色CSS网页模板】是一种常见的网页设计资源,主要用于创建具有蓝色调的清新、简约风格的网站。在网页设计领域,CSS(层叠样式表)是用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档样式的语言,它...
这些 CSS 新特性在现阶段可以说都是非常强大和完善的,您只需要加入几行简单的 CSS 代码便可以实现出一系列令人眼前一亮的效果,这比我们之前用 JavaScript 去模拟这样的效果要好得多,不仅降低了复杂度,变得易维护...