Web前端课程 HTMLCSS基础 2013

Web HTML/CSS
ctech.baidu.com/fe
demo

Web
Web
HTMLCSSdemo
Web
InternetWWW
HTML

Internet & WWW

Internet
1969
ARPANET
Internet & WWW

WWWInternet
1989 at CERN
Tim Berners-Lee
Tim Berners-Lee
Hypertext
Tim Berners-Lee
Hypertext

HTTPHyperText Transfer
Protocol
HTMLHyperText Markup
Language
URLUniform Resource
Locator
1994IETFHTMLW3C
HTML
1995HTML 2
1996HTML 3
1997HTML 4
1999HTML 4.01
2000XHTML 1.0
2001XHTML 1.1
2008HTML 5
WAPWML
1998WML 1.1
2001WML 2.0
XHTML Mobile Profile

HTML5
1990WorldWideWeb
Internet Explorer
Firefox
Chrome
Safari
Opera
Web
Web

HTML
Web
Web
VimEmacsEditplusNotepad++
TextMateBBEditSublime Text
DreamweaverExpression Web
EclipseVisual Studio
Web
Firebug - FF
Web Developer Tools - IE
Developer Tools ChromeSafari
Dragonfly - Opera
HTML

<html>
<head>
<title>Web</title>
</head>
<body>
<h1>Hello, HTML and CSS!</h1>
</body>
</html>

<tagName>

<tagName></tagName>
/
<title></title>
<title>Web</title>

+ + =

img
input
<img src="logo.png" />

p
span
<p></p>
<p id="p1">Web</p>
<p id="p1">Web</p>

HTML

<!doctype html>
<html>
<head>
<title>Web</title>
</head>
<body>
<h1>Hello, HTML and CSS!</h1>
</body>
</html>
HTML

<ol>
<li><h1>Its All Right Now</h1></li>
<li><h1>KIM NEWMAN JAGO</h1></li>
<li><h1>The Season Ticket</h1></li>
</ol>
demo
HTML
- HTML
HTML
Web
HTML
HTML

html

css

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
</html>

<body>

<div id="header"></div>

<div id="body"></div>

<div id="footer">©<em id="page-date">2013
</em> CopyLeft <a href="#">DEMO</a></div>
</body>

div
id
&copy
header
body
footer

<div class="userbar">
<div class="info">
<span class="date"><em id="show-datetip"></em></span>
<span class="browser"><em
id="show-browser"></em></span>
</div>
</div>
<div class="banner">
<a class="logo" href="#" title="back
HOME">home</a>
</div>

aWeb
href
<a href="http://www.baidu.com">
</a>

<div class="search-box">
<form id="search-form" action="#">
<input class="search-input"
id="search-filed-word" name="word" />
<input class="search-button"
type="submit" value="" />
</form>
</div>

form
inputtype
text
button
submit
reset
password
checkbox

<div id="body">
<div class="nav"></div>
<div class="pic-wrapper"></div>
</div>

id
HTMLid
-
class

nav
pic-wrapper

<div class="nav">
<ul class="tab">
<li class="item current">xx</li>
<li class="item">xx</li>
...
</ul>
</div>

olulli
<ul>
<li></li>
<li></li>
</ul>

W3C: HTML Specification
W3CSchool
sitepoint.com

<div class="pic-wrapper">
<ul class="pic-column"></ul>
</div>

<ul class="pic-column">
<li class="pic-item">
<a class="pic" href="#"
target="_blank"><img width="222" height="301"
src="./photo/p1.jpg" alt="" /></a>
<div class="info">
<div class="tool"></div>
<p class="desc"></p>
</div>
</li>
...
</ul>

img
src
<img src="pic.jpg" />
GIF
size
JPEG

size
PNG

size

CSS
CSS

HTML
CSS
Cascading Style Sheet
CSS
inline style
embedded style(internal style)
external style
CSS
body {
background-color: gray;
text-align:center;
}
h1 {
font-size:30px;
color:white;
}
CSS

h1 {color:blue;}
CSS
- CSS
CSS
CSS
CSS

<link rel="stylesheet" type="text/css"
href="./static/our-photo.css">

/*reset*/
body,p { margin:0; }
ul { list-style: none; margin: 0; padding:0; }
img { border: none; }
/*tool*/
.clearfix:after { content: ''; display: block;
visibility: hidden; clear: both; line-height: 0;
font-size: 0; }
.clearfix { *zoom:1; }
CSS Hack

*selectorIE6IE7
CSS
/* */

elementelement
<div>content</div>
<p></p>
div{color:black;}
Grouping
selector1, selector2
p{color:black;}
div{color:black;}
p, div{color:black;}
id
#idid
<div id="main"></div>
<div id="content"></div>
#main{width:300px}
margin
border
padding
width/heigh
t
margin:20px; border:10px solid red;

padding:40px; width:300px; height:100px
margin-top
margin-left
margin-right
margin-bottom

:before
:after

/*base*/
body { font: 12px/1.333 arial,helvetica,clean;
background: #F0F1F4 url('./img/list-bg.jpg')
repeat 0 0; }
.userbar{ position: absolute; top: 0px; width:
100%; height: 30px; background-color: black;
opacity: 0.7; }
.userbar .info { margin: 0 auto; width: 960px;
text-align:right; font:12px Arial; lineheight:28px; color: white; }

selector1 selector2
selector1
selector2
<div id="main">
<p class="normal"></p>
<p></p>
</div>
<p class="normal"></p>
#main .normal{color:red}

/*base*/
.banner { width: 960px; height: 60px; margin: 0
auto; background-color: gray; }
.banner .logo { position: absolute; z-index: 2;
width: 137px; height: 46px; background-color:
#00008b; text-indent: -10000px; }
class
.class class

<div class="f"></div>
<div class="f"></div>
<div></div>
.f{color:white}
font-size
font-family
font-style
font-weight
font

color
rgb: #453211#ffff00#ff0
whiteblackred
text-decoration
underline
overline
line-through
blink

background
background-image
background-repeat
background-position
background-color
background
1px
background-repeat:repeat-x

.search-box { width: 960px; margin:20px auto; }
.search-box .search-input { float: left; overflow:
hidden; height: 20px; font-size: 14px; padding:
4px 0 3px 10px; width: 500px; margin-right:
15px; }
.search-box .search-button { width: 95px; height:
31px; border: 1px solid gray; background-color:
#EEE; cursor: pointer; }
.search-box .search-button:hover { backgroundcolor: orange; }

:hover
:visited

cursor
default
pointer
wait
help
.cur

float

div1
div2
div2
div1
float:right
div1
div2
float:left
div1
div2
float:left
float:left
div1
div2
div1
div2
float:left
float:left
div1
div2
clear float

.tab { width: 960px; margin: 0 auto; borderbottom: 1px solid red; padding-top: 10px; }
.tab .item { width: 142px; float: left; height:
38px; background: #D7F5FF; color: #333; overflow:
hidden; font: 18px "Microsoft Yahei"; lineheight: 40px; border: 1px solid #D7F5FF; textalign: center; border-radius: 10px 10px 0 0;
cursor: pointer; }
.tab .current{ position: relative; margin-bottom:
-1px; height: 39px; border: 1px solid red;
background-color: #EDD; border-bottom-color:
#EDD; cursor: default; }
floatli
li
li
li
li
li
float:left
li

position:
staticrelativeabsolutefix
div1
div2
div3
position:static
div1
div2
div3
position:relative
div1
div3
div2
position:absolute

.pic-wrapper { width: 960px; margin: 0 auto;
margin-top: 20px; }
.pic-column { float: left; width: 230px; marginright: 13px; }
.pic-column:last-child { margin-right: 0; }
.pic-item { position: relative; margin-bottom:
10px; background-color: white; box-shadow: 0 1px
3px #BBB; padding: 4px; line-height: 0; }
.pic-item .pic { z-index: 16; }

.pic-item .info { position: absolute; bottom: 4px;
left: 4px; z-index: 20; width: 202px; padding:
10px; overflow: hidden; word-wrap: break-word;
word-break: break-all; opacity: 0.7; backgroundcolor: black; color: white; display: none; }
.pic-item:hover .info { display: block; }
block
divph1-h6
blockinline
inline
aimgspan
inline

display
blockinline
none
pinterest.com
faxianla.com

CSS: The Definitive Guide

http://www.w3.org/
http://www.w3cschool.cn/
http://www.sitepoint.com/
Q&A

Web前端课程 HTMLCSS基础 2013

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web前端课程 HTMLCSS基础 2013

Uploaded by

Copyright:

Available Formats

Web HTML/CSS

Internet & WWW

Internet & WWW

XHTML Mobile Profile

<img src="logo.png" />

<img src="pic.jpg" />

margin:20px; border:10px solid red;

.pic-item:hover .info { display: block; }

You might also like