HTML

HTML

Layout with <div> tag

refer:
The render tree relation to the DOM tree
positioning scheme

display blocks using <div> tag with none property float

HTML code:

<html>
<head>
<title>Example</title>
<style>
* {
  margin:0;
}
 
body {
  text-align:center;
}
 
#wrapper {
  margin:auto;
  width:300px;
}
 
#header {
  height:30px;
  background:#99CC66;
}
#body_left {
  width:20%;
  height:100px;
  background:#FF9900;
}
 
#body_main {
  width:80%;
  height:100px;
  background:#99CCFF;
}
#footer {
  height:30px;
  background:#339933;
}
</style>
</head>
 
<body>
<div id="wrapper">
  <div id="header">header</div>
  <div id="body">
    <div id="body_left">body_left</div>
    <div id="body_main">body_main</div>
  </div>
  <div id="footer">footer</div>
</div>
</body>
</html>

display in ie

display in chrome

display blocks using <div> tag with property float and none tag <div style="clear:both">

footer display correctly in ie but wrong in chrome

<style>
#body_left {
  float:left;
  width:20%;
  height:100px;
  background:#FF9900;
}
 
#body_main {
  float:left;
  width:80%;
  height:100px;
  background:#99CCFF;
}
</style>

display in ie

display in chrome

display blocks using <div> tag with property float and tag <div style="clear:both"/>

<html>
<head>
<title>Example</title>
<style>
* {
  margin:0;
}
 
body {
  text-align:center;
}
 
#wrapper {
  margin:auto;
  width:300px;
}
 
#header {
  height:30px;
  background:#99CC66;
}
#body_left {
  float:left;
  width:20%;
  height:100px;
  background:#FF9900;
}
 
#body_main {
  float:left;
  width:80%;
  height:100px;
  background:#99CCFF;
}
#footer {
  height:30px;
  background:#339933;
}
</style>
</head>
 
<body>
<div id="wrapper">
  <div id="header">header</div>
  <div id="body">
    <div id="body_left">body_left</div>
    <div id="body_main">body_main</div>
  </div>
  <div style="clear:both"/>
  <div id="footer">footer</div>
</div>
</body>
</html>

Display correctly in both ie and chrome

A Simple Menu Using HTML Lists And CSS

vertical menu

<html>
<div id="menu">
    <ul>
        <li><a href="#">Who</a></li>
        <li><a href="#">What</a></li>
        <li><a href="#">Where</a></li>
    </ul>
</div>
</html>

  <ul>
      <li><a href="#">Who</a></li>
      <li><a href="#">What</a></li>
      <li><a href="#">Where</a></li>
  </ul>

</div> </html>

Horizontal menu with property float in tag <li>

<html>
<style>
#menu li
{
    float: left;
    margin-right: 0.5em;
}
</style>
<div id="menu">
    <ul>
        <li><a href="#">Who</a></li>
        <li><a href="#">What</a></li>
        <li><a href="#">Where</a></li>
    </ul>
</div>
</html>

<html> <style> #menu1 li {

  float: left;
  margin-right: 0.5em;

} </style> <div id=“menu1”>

  <ul>
      <li><a href="#">Who</a></li>
      <li><a href="#">What</a></li>
      <li><a href="#">Where</a></li>
  </ul>

</div> </html>

Horizontal menu with property display:inline in tag <li>

<html>
<style>
#menu li
{
    display: inline;
    margin-right: 0.5em;
}
</style>
<div id="menu">
    <ul>
        <li><a href="#">Who</a></li>
        <li><a href="#">What</a></li>
        <li><a href="#">Where</a></li>
    </ul>
</div>
</html>

<html> <style> #menu2 li {

  display: inline;
  margin-right: 0.5em;

} </style> <div id=“menu2”>

  <ul>
      <li><a href="#">Who</a></li>
      <li><a href="#">What</a></li>
      <li><a href="#">Where</a></li>
  </ul>

</div> </html>

HTML blocks and inline element

HTML elements can be grouped together with <div> and <span>.

HTML Block Elements

Most HTML elements are defined as block level elements or as inline elements.

Block level elements normally start (and end) with a new line when displayed in a browser.

Examples: <h1>, <p>, <ul>, <table>

HTML Inline Elements

Inline elements are normally displayed without starting a new line.

Examples: <b>, <td>, <a>, <img>

The HTML <div> Element

The HTML <div> element is a block level element that can be used as a container for grouping other HTML elements.

The <div> element has no special meaning. Except that, because it is a block level element, the browser will display a line break before and after it.

When used together with CSS, the <div> element can be used to set style attributes to large blocks of content.

Another common use of the <div> element, is for document layout. It replaces the “old way” of defining layout using tables. Using <table> elements for layout is not the correct use of <table>. The purpose of the <table> element is to display tabular data.

The HTML <span> Element

The HTML <span> element is an inline element that can be used as a container for text.

The <span> element has no special meaning.

When used together with CSS, the <span> element can be used to set style attributes to parts of the text.

HTML Grouping Tags

Tag	Description
<div>	Defines a section in a document (block-level)
<span>	Defines a section in a document (inline)

CSS

CSS Selectors

refer: http://www.w3schools.com/cssref/css_selectors.asp

Selector	Example	Example description	CSS
.class	.intro	Selects all elements with class=“intro”	1
#id	#firstname	Selects the element with id=“firstname”	1
*	*	Selects all elements	2
element	p	Selects all <p> elements	1
element,element	div, p	Selects all <div> elements and all <p> elements	1
element element	div p	Selects all <p> elements inside <div> elements	1
element>element	div > p	Selects all <p> elements where the parent is a <div> element	2
element+element	div + p	Selects all <p> elements that are placed immediately after <div> elements	2
element1~element2	p ~ ul	Selects every <ul> element that are preceded by a <p> element	3
[attribute]	[target]	Selects all elements with a target attribute	2
[attribute=value]	[target=_blank]	Selects all elements with target=“_blank”	2
[attribute~=value]	[title~=flower]	Selects all elements with a title attribute containing the word “flower”	2
:active	a:active	Selects the active link	1
::after	p::after	Insert content after every <p> element	2
::before	p::before	Insert content before the content of every <p> element	2
:checked	input:checked	Selects every checked <input> element	3
:disabled	input:disabled	Selects every disabled <input> element	3
:empty	p:empty	Selects every <p> element that has no children (including text nodes)	3
:enabled	input:enabled	Selects every enabled <input> element	3
:first-child	p:first-child	Selects every <p> element that is the first child of its parent	2
::first-letter	p::first-letter	Selects the first letter of every <p> element	1
::first-line	p::first-line	Selects the first line of every <p> element	1
:first-of-type	p:first-of-type	Selects every <p> element that is the first <p> element of its parent	3
:focus	input:focus	Selects the input element which has focus	2
:hover	a:hover	Selects links on mouse over	1
:in-range	input:in-range	Selects input elements with a value within a specified range	3
:invalid	input:invalid	Selects all input elemets with an invalid value	3
:lang(language)	p:lang(it)	Selects every <p> element with a lang attribute equal to “it” (Italian)	2
:last-child	p:last-child	Selects every <p> element that is the last child of its parent	3
:last-of-type	p:last-of-type	Selects every <p> element that is the last <p> element of its parent	3
:link	a:link	Selects all unvisited links	1
:not(selector)	:not(p)	Selects every element that is not a <p> element	3
:nth-child(n)	p:nth-child(2)	Selects every <p> element that is the second child of its parent	3
:nth-last-child(n)	p:nth-last-child(2)	Selects every <p> element that is the second child of its parent, counting from the last child	3
:nth-last-of-type(n)	p:nth-last-of-type(2)	Selects every <p> element that is the second <p> element of its parent, counting from the last child	3
:nth-of-type(n)	p:nth-of-type(2)	Selects every <p> element that is the second <p> element of its parent	3
:only-of-type	p:only-of-type	Selects every <p> element that is the only <p> element of its parent	3
:only-child	p:only-child	Selects every <p> element that is the only child of its parent	3
:optional	input:optional	Selects input elements with no “required” attribute	3
:out-of-range	input:out-of-range	Selects input elements with a value outside a specified range	3
:read-only	input:read-only	Selects input elements with the “readonly” attribute specified	3
:read-write	input:read-write	Selects input elements with the “readonly” attribute NOT specified	3
:required	input:required	Selects input elements with the “required” attribute specified	3
:root	:root	Selects the document's root element	3
::selection	::selection	Selects the portion of an element that is selected by a user
:target	#news:target	Selects the current active #news element (clicked on a URL containing that anchor name)	3
:valid	input:valid	Selects all input elements with a valid value	3
:visited	a:visited	Selects all visited links	1

Table of Contents

HTML

Layout with <div> tag

display blocks using <div> tag with none property float

display in ie

display in chrome

display blocks using <div> tag with property float and none tag <div style="clear:both">

display in ie

display in chrome

display blocks using <div> tag with property float and tag <div style="clear:both"/>

Menu

A Simple Menu Using HTML Lists And CSS

vertical menu

Horizontal menu with property float in tag <li>

Horizontal menu with property display:inline in tag <li>

HTML blocks and inline element

HTML Block Elements

HTML Inline Elements

The HTML <div> Element

The HTML <span> Element

HTML Grouping Tags

CSS

CSS Selectors

Some Examples with CSS