Embed Size (px)
Citation preview
2016/6/5 CSS - HTML CSS Vol. 12 - DESIGNMAP
http://www.designmap.info/tobewebdesigner/tutorial/zero_html12/ 1/9
2016/6/5 CSS - HTML CSS Vol. 12 - DESIGNMAP
http://www.designmap.info/tobewebdesigner/tutorial/zero_html12/ 2/9
...<div id="visual"> <div class="inner"> <p><img src="images/visual.jpg"></p> </div></div><div id="content"> <div class="inner">
</div></div><div id="footer"> <div class="inner"> <p>Copyright (C) 2015 Ncoffee. All Rights Reserved.</p> </div></div></body></html>
<div id="visual"> <div class="inner"> <p><img src="images/menu_visual.jpg" alt=""></p> </div></div>
2016/6/5 CSS - HTML CSS Vol. 12 - DESIGNMAP
http://www.designmap.info/tobewebdesigner/tutorial/zero_html12/ 3/9
.main_content {
.sidebar p {
line‐height:1.5;
}
@charset "utf‐8";
.main_content { float: left; margin‐right:50px; }
.main_content h2 { margin:20px 0 10px; }
.main_content dt { margin:0 0 5px 0; background:url(../images/bullet.png) no‐repeat 0 4px; padding‐left:10px; }
.main_content dd { margin:0 0 15px 0; }
.sidebar { float:left; }
.sidebar h2 { margin:20px 0 10px; }
.sidebar p { line‐height:1.5;
2016/6/5 CSS - HTML CSS Vol. 12 - DESIGNMAP
http://www.designmap.info/tobewebdesigner/tutorial/zero_html12/ 4/9
}
@charset "utf‐8";
body { background:#342c1c; }
.inner { width:960px; margin:0 auto; }
#header { background:#f4f0e9; }
#header .inner { position:relative; padding‐bottom:10px; }
#header h1 { text‐align:center; padding:20px 0; }
#header li { float:left; }
#header ul { overflow:hidden; }
#header a { text‐decoration:none; color:#301907; }
#header a:hover { color:#7d4212;
2016/6/5 CSS - HTML CSS Vol. 12 - DESIGNMAP
http://www.designmap.info/tobewebdesigner/tutorial/zero_html12/ 5/9
}
#header .utility_nav { position:absolute; right:0; top:5px; }
#header .utility_nav li { margin‐right:20px; font‐size:12px; }
#header .utility_nav li:last‐child { margin‐right:0; }
#header .global_nav { margin:0 auto; width:447px; }
#header .global_nav li { margin‐right: 50px; font‐size:15px; }
#header .global_nav li:last‐child { margin‐right: 0; }
#visual { background: #f4f2e7 url(../images/bg_body.png); }
#content { background:#e4ded2; overflow:hidden; padding‐bottom:30px; }
#footer { color:#FFF; text‐align:center; padding:20px 0;
2016/6/5 CSS - HTML CSS Vol. 12 - DESIGNMAP
http://www.designmap.info/tobewebdesigner/tutorial/zero_html12/ 6/9
font‐size:12px; }
<!doctype html><html><head> <meta charset="utf‐8"> <title>N����</title> <link href="css/reset.css" rel="stylesheet"> <link href="css/common.css" rel="stylesheet"> <link href="css/home.css" rel="stylesheet"></head>
@charset "utf‐8";
body { background:#F00; }
<!doctype html><html><head><meta charset="utf‐8"><title>N����</title><link href="css/reset.css" rel="stylesheet"><link href="css/common.css" rel="stylesheet"><link href="css/menu.css" rel="stylesheet"></head><body>
2016/6/5 CSS - HTML CSS Vol. 12 - DESIGNMAP
http://www.designmap.info/tobewebdesigner/tutorial/zero_html12/ 7/9
@charset "utf‐8";
...
<div id="content"> <div class="inner"> <ul> <li class="section"></li> <li class="section"></li> <li class="section"></li> <li class="section"></li> </ul> </div></div><div id="footer"> <div class="inner"> <p>Copyright (C) 2015 Ncoffee. All Rights Reserved.</p> </div></div></body></html>
<div id="content"> <div class="inner"> <ul> <li class="section"> <p class="photo"><img src="images/menu_coffee.jpg" alt="N����"></p> <div class="desc"> <h3>N����</h3> <p>���������深煎��仕上�����深��������������香���当店自慢
��������������������一杯��提供������</p> </div>
2016/6/5 CSS - HTML CSS Vol. 12 - DESIGNMAP
http://www.designmap.info/tobewebdesigner/tutorial/zero_html12/ 8/9
</li> <li class="section"> <p class="photo"><img src="images/menu_castella.jpg" alt="N����"></p> <div class="desc"> <h3>N����</h3> <p>当店自慢�逸品���奄美大島産�黒糖�����濃厚�味���是非�N���������
召���������</p> </div> </li> <li class="section"> <p class="photo"><img src="images/menu_tart.jpg" alt="N����"></p> <div class="desc"> <h3>������</h3> <p>���������新��触感������������������</p> </div> </li> <li class="section"> <p class="photo"><img src="images/menu_raisinsand.jpg" alt="�������"></p> <div class="desc"> <h3>�������</h3> <p>����新触感���������濃厚�����������������������</p> </div> </li> </ul> </div></div>
2016/6/5 CSS - HTML CSS Vol. 12 - DESIGNMAP
http://www.designmap.info/tobewebdesigner/tutorial/zero_html12/ 9/9
![[HTML, Css] HTML & Css Learning](https://img.pdfslide.tips/doc/110x75/55cf9813550346d0339570eb/html-css-html-css-learning.jpg)
