- PDF Free Download

2004-2006

2004-2006 CSS Web

Quiz

LOVE

2012 4 Windows 8

/ CPP Fluid PE CSS3 RWD

Quiz

1. 2. 3. 4.

CSS3

#btn {! display:block;! width:300px;! font-size:28px;! font-weight:bold;! text-align:center;! line-height:2em;! height:2em;! text-decoration:none;! border:1px solid #225588;! color:#ffffff;! background:#337fcc;! border-radius:5px;! text-shadow:0-2px 0px #225588, 0-2px 0px #225588;bac! background:-webkit-gradient(linear, 100% 0%, 100% 100%! box-shadow:1px 2px 2px rgba(0,0,0,0.3), 0px 1px 0px rg } #btn:hover {! background:-moz-linear-gradient(rgba(34,85,136,0.4), r 20 background:-webkit-gradient(linear, 100% 0%, 100% 100% }

Internet Explorer

2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 6 6.0 11 7.0 3 3 11 8.0 8.0 9.0 3 9.0 Internet Explorer (Win) 12 5.1 6 5.2 1 Internet Explorer (Mac) 9 0.1 (Phoenix) (Firebird) 11 1.0 11 1.5 10 2.0 6 3.0 6 3.5 1 7 3.6/4.0 3 4.0 12 9.0 3 /11.0 Firefox 8 6.1 8 5 7.0 7.1 7.2 8.0 8.1 10 9.0 3 Netscape 11 6.0 1 7.0 4 8.0 6 9.0 10 9.6 9 10.0 12 11.0 12 11.6 Opera 1 6 1.0 4 2.0 10 3.0 3 3.1 3 4.0 6 5.0 7 5.1 Safari 3.0 Mac 12 1.0 3 2.0/3.0 10 12 7.0/8.0 2 12 9.0/16.0 Google Chrome

Samsung Galaxy S IV Nexus 4 Nexus 7 HTC One Samsung Galaxy Note II

div.wrapper { } width: 940px;

div.wrapper { } width: 90

.main_column 690px.sub_column 217px 940px 18px

.main_column 74.53%.sub_column 23.5937% 90-95% 1.875%

img { max-width: 100%; height: auto; }

CSS

A flexible grid Flexible images Media Queries

.sub-column.main-column.column2-left.column2-right.sub-column.main-column

.main-column.sub-column.column2-left.column2-right.main-column

.sub-column.main-column.column2-left.column2-right.sub-column.main-column

.sub-column.main-column float: right;.column2-left.column2-right.sub-column.main-column

.main-column.sub-column float: none;.column2-left.column2-right.main-column

.main-column.sub-column.column2-right.main-column.column2-left.sub-column

.main-column.sub-column.column2-left.column2-right.main-column

.main-column.sub-column display: none;.column2-right.main-column.column2-left.sub-column

.sub-column.main-column.main-column.main-column.column2-left.main-column.column2-right.sub-column.sub-column.column2-left.column2-right.column2-right.main-column.main-column

768px 320px.sub-column.main-column.main-column.main-column.column2-left.main-column.column2-right.sub-column.sub-column.column2-left.column2-right.column2-right.main-column.main-column

768px 320px <link href="cs/phone.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 0px) and (max-width: 320px)" /> <link href="css/tablet.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 321px) and (max-width: 768px)" /> <link href="css/desktop.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 769px)" />

768px 320px <link href="cs/phone.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 0px) and (max-width: 320px)" /> <link href="css/tablet.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 321px) and (max-width: 768px)" /> min-width max-width <link href="css/desktop.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 769px)" />

Quiz

$blue: #3bbfce;.navigation { } color: #3bbfce;.navigation { } color: $blue;.border { } color: #3bbfce;.border { } color: $blue;

$blue: #3bbfce;.navigation { } color: $blue;.navigation { } color: #3bbfce;.border { } color: $blue;.border { } color: #3bbfce;