# Code snippet for Web Programming at 2012/10/1,
# slide at http://zoro.ee.ncku.edu.tw/wp2012/res/03-html-css.pdf
################################################################################
# tag
Text in tag 'b' is usually shown in bold
# tag
bold and italic
# nesting tags
what the hell?
# (invalid) crossing tags
################################################################################
# same tag, different attributes
google
yahoo
################################################################################
# various attributes
google
################################################################################
# CSS selectors (HTML part)
not selected
################################################################################
# CSS selectors (CSS part)
footer a.date { color: red; }
################################################################################
# image to web (HTML part)
################################################################################
# image to web (CSS part)
body {
background: url(http://zoro.ee.ncku.edu.tw/wp2012/res/03-html-css/bg50.png) no-repeat;
margin: 0; width: 1247px;
}
#header { background-color: #3B5998; height: 38px; opacity: .5; }
#main, #sidebar, #content { height: 300px; }
#main { background-color: transparent; margin-left: 73px; opacity: 1; width: 980px; }
#sidebar { background-color: transparent; float: left; opacity: 1; width: 180px; }
#sidebar dl { background-color: transparent; font-size: 12px; margin-top: 77px; opacity: 1;}
#sidebar dt { margin: 11px 0 5px 0; }
#sidebar dd { line-height: 21px; margin-left: 0; padding-left: 28px; }
#sidebar dd.active { background-color: #D8DFEA; font-weight: bold; opacity: 1; }
#content { background-color: transparent; margin-left: 180px; opacity: 1; }
# vi:nowrap:sw=4:ts=4