HTML、CSS产品主页注意事项
来源:互联网 发布:html5制作淘宝网首页 编辑:程序博客网 时间:2024/05/23 11:46
构建项目
第一件事–设计页面架构
在使用HTML&CSS在构建现在很流行的扁平化风格的页面的时候(或者其它所有的静态页面的时候),第一件事就是需要进行页面结构的设计,不要一上来就手撸代码,有时候重新架构一个项目的难度远远大于从头开始写这个项目。
需要语义化的使用各种HTML标签,不要将所有的标签都用<div>
来设置,这样会使后面的维护变得越来越困难。
下面是简书的一个页面的部分HTML标签:
可以看到里面使用了许多语义化的标签<li>
、<span>
、<em>
等,这些语义化标签可以更好的帮助我们来结构化我们的代码,并且使得维护更加轻松。
下面是一些常用的语义化标签的说明和适用条件:
<a>
:超链接,用于支持跳转的文本内容。<address>
:文档或者文章的作者的联系信息。<article>
:块级元素,表示一篇文章或者一个文档。<blockquote>
:引用块,表示这部分内容是引用别人的。<caption>
:定义表格的标题。<button>
:按钮,这个就不多说了。<code>
:代码块,表示里面是一部分代码块。<div>
:division,表示一个部分,基本没有什么语义性。<figure>
&<figcaption>
:分别为图片块以及内部的图片标题。<footer>
:页脚,一般使用在页面最底部的较短的一块。<img>
:图片元素。<input>
:表单输入框。<li>
&<ol>
&<ul>
:列表元素、有序列表块和无序列表块,在出现一列相同样式元素的时候使用。<nav>
:导航链接部分,适用于页面中的导航栏。<option>
&<select>
:表示下拉菜单的选择框和各个供选择的条目。<p>
:paragraph,段落,表示文章的某一个段落。<pre>
:源代码,这个标签中的内容会用等宽字体显示,并且会保留所有的tab、空格以及换行等样式。<progress>
:进度,HTML5新特性,可以用来显示一个任务当前的进度。高度语义化的一个标签。<section>
:文档中的区段或者某一个部分。<big>
&<small>
:标签内的字号会大一号或者小一号。<span>
:组合文档中的行内元素,并且为其添加样式。<del>
:带有删除线的文本。<sub>
&<sup>
:下标文本和上标文本,用来进行设置上下标的,高度语义化。<table><td><tr><th><tfoot><thead>
:与表格相关的一些标签,具体使用方法可以自行查看HTML表格
用CSS来实现样式
使用语义化的HTML标签是为了让我们更容易理解自己页面的架构,但是并不是用来为元素添加样式的,由于各个浏览器对于标签的渲染是不一样的,所以为了样式可以在各种浏览器上都做到兼容,仍旧需要使用CSS来添加样式,这时,就需要首先移除掉所有标签原本的样式。
比如,在初始化的HTML中,body会有一定的边距,这种样式对我们来说是完全无用的。怎么移除这些无用的样式呢?
可以使用normalize.css这个样式表,normalize.css可以帮助我们移除无用的默认样式。
normalize.css
A modern, HTML5-ready alternative to CSS resets
0 0
- HTML、CSS产品主页注意事项
- html+css主页页眉实现
- html+css注意事项
- html/css书写注意事项
- HTML&CSS简介以及注意事项
- 用HTML加CSS模仿的W3school的主页
- 仿京东商城H5主页面源代码,html、css、js
- IE6下的 CSS 和 HTML 注意事项
- 将小型、现代的产品主页由psd转换成XHTML/CSS模板
- div+css主页布局
- CSS样式主页布局
- 利用html 和css模仿必应搜索主页。(一)
- 做邮件样式注意事项 email html css 要点
- IE 6下Html和CSS的注意事项
- Html+CSS text-indent 意义 负值用法与注意事项
- CSS及HTML 常见误区和注意事项(一)
- 学习HTML(十四)——CSS中的一些注意事项
- CSS注意事项
- react native 命令行运行app的时候缺少的文件寻找方法
- 数据结构实验之图论七:驴友计划
- JavaScript等同和相等运算符
- P1009 立体图
- 汇编之将数字转化为十进制显示在屏幕上
- HTML、CSS产品主页注意事项
- 相邻元素的margin和padding的解析分析
- [乐意黎转载]从零开始学习jQuery (一) 开天辟地入门篇
- ndk
- 静态路由
- [JQuery] jquery.fonticonpicker.min.js实现下拉选择图标
- 西电ACM 1005 xry111的音频传输
- Android SDK Manager无法正常更新列表的方法
- java webservice 的发布过程