「パスタ屋」のページを製作
htmlソース
<html>
<head>
<meta charset="utf-8">
<title>パスタとワインの店 アテラ</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="css/jquery.bxslider.css">
<link rel="stylesheet" href="css/lightbox.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/jquery.bxslider.js"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
</head>
<script>
$(document).ready(function(){
$(".bxslider").bxSlider({
mode: 'fade',
auto: true,
autoControls: true
});
});
</script>
<body>
<div id="container">
<div id="header">
<h1>パスタとワインの店 アテラ</h1>
<div class="slider">
<img id="logo" src="img/logo.png" alt="">
<ul class="bxslider">
<li><a href="img/mainimage01.jpg" data-lightbox = "group" data-title = "ちょっといいパスタをどうぞ"><img src="img/mainimage01.jpg" alt="" ></a></li>
<li><a href="img/mainimage02.jpg" data-lightbox = "group" data-title = "新鮮な素材をお届けします"><img src="img/mainimage02.jpg" alt="" ></a></li>
<li><a href="img/mainimage03.jpg" data-lightbox = "group" data-title = "イタリアから取り寄せたワインをご提供"><img src="img/mainimage03.jpg" alt="" ></a></li>
</ul>
</div>
<div id="nav">
<ul>
<li id="concept"><a href="#">concept</a></li>
<li id="pasta"><a href="#">pasta</a></li>
<li id="drink"><a href="#">drink</a></li>
<li id="side"><a href="#">side</a></li>
<li id="access"><a href="#">access</a></li>
</ul>
</div>
</div>
<div id="content">
<div id="menu">
<ul>
<li id="menu1"><a href="#">Lunch</a></li>
<li id="menu2"><a href="#">Pasta</a></li>
<li id="menu3"><a href="#">Wine</a></li>
</ul>
</div>
<div id="information">
<h2><img src="img/campain.png" alt="現在実施中のキャンペーンやお得な情報"></h2>
<div id="today">
<h3>今日のパスタ</h3>
<h4>Today's Pasta 今日の日替わりパスタ</h4>
<p>ペンネアラビアータ<br>
（ピリ辛トマトソースのペンネ）</p>
</div>
<div id="news">
<h3>news</h3>
<dl>
<dt>2015.3.24</dt>
<dd>今年も冷製パスタをお出しし始めました</dd>
<dt>2015.3.18</dt>
<dd>トマトソースの作成ビデオを公開しました</dd>
</dl>
</div>
<div id="coupon">
<h3><a href="#">CouponTickets</a></h3>
<p>ランチセットご注文時ドリンク１杯無料</p>
</div>
<div id="video">
<video width="270" height="152" poster="img/poster.jpg" controls >
<source src="img/pastaSauce.mp4" type="video/mp4">
<source src="img/pastaSauce.webm" type="video/webm">
</video>
</div>
</div>
</div>
</div>
<div id="footer">
<p>(c)2015 パスタとワインの店アテラ</p>
</div>
</body>
</html>
@charset "UTF-8";
html, body, div, h1, h2, h3, h4, h5, h6,p,ul,ol,li,dl,dd,dt{
margin: 0;
padding: 0;
line-height: 1.0;
font-family:
"Lucida Grande",
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
}
ul, ol {
list-style: none;
}
a {
text-decoration: none;
}
body {
font-size: 16px;
background:url(img/back.jpg) repeat;
}
#container {
width: 980px;
margin: 0 auto;
padding-bottom:30px;
margin-bottom:20px;
}
#header {
position:relative;
}
#header h1{
margin: 0;
white-space:nowrap;
text-indent: 100%;
overflow : hidden;
}
#header img#logo{
position: absolute;
left: 40px;
top: 37px;
z-index:1000;
}
#nav{
margin-bottom: 30px;
}
#nav ul{
width:980px;
overflow:hidden;
}
#nav li a{
width:196px;
height: 60px;
display: block;
float:left;
white-space:nowrap;
text-indent:100%;
overflow:hidden;
}
#nav li#concept a{
background:url(img/menu_concept.png) no-repeat left top;
}
#nav li#pasta a{
background:url(img/menu_pasta.png) no-repeat left top;
}
#nav li#drink a{
background:url(img/menu_drink.png) no-repeat left top;
}
#nav li#side a{
background:url(img/menu_side.png) no-repeat left top;
}
#nav li#access a{
background:url(img/menu_access.png) no-repeat left top;
}
#content{
width: 880px;
margin: 0 auto ;
}
#menu {
width: 880px;
overflow:hidden;
margin-left: 5px;
margin-bottom: 30px;
}
#menu li a{
width: 250px;
height: 165px;
float:left;
overflow:hidden;
white-space:nowrap;
text-indent:100%;
}
#menu li#menu1 a{
margin-right: 60px;
background:url(img/subimage01.jpg) no-repeat left top;
}
#menu li#menu2 a{
margin-right: 60px;
background:url(img/subimage02.jpg) no-repeat left top;
}
#menu li#menu3 a{
background:url(img/subimage03.jpg) no-repeat left top;
}
#information{
width:880px;
overflow:hidden;
padding-left: 5px;
}
#information h2{
width:880px;
margin: 5px auto 30px auto;
height:60px;
}
#information h2 img{
text-align: center;
box-shadow: 0px 0px 5px #666;
}
#today{
width:558px;
height:163px;
float:left;
background:url(img/todaypasta.jpg) no-repeat top left #F5F2EB;
border:1px solid #999;
margin-bottom: 20px;
}
#today h3{
white-space: nowrap;
overflow:hidden;
text-indent:100%;
}
#today h4{
height: 49px;
background:url(img/todaypastaText.png) no-repeat center top;
white-space: nowrap;
overflow:hidden;
text-indent:100%;
margin : 0 0 0 250px;
}
#today p{
font-weight: bold;
margin : 20px 0 20px 250px;
line-height:1.5;
text-align:center;
text-shadow: 0px 0px 3px #333;
}
#news{
width:558px;
height:150px;
float: left;
border:1px solid #999;
background:#F5F2EB;
}
#news h3{
margin: 20px 0;
height:23px;
white-space: nowrap;
overflow:hidden;
text-indent:100%;
background:url(img/newsText.png) no-repeat center top;
margin-bottom:20px;
}
#news dl{
color:#333;
overflow:hidden;
width: 500px;
margin:0px auto;
}
#news dt{
width: 150px;
float: left;
clear:both;
}
#news dd{
width: 350px;
float: right;
margin-bottom:0.6em;
}
#coupon{
width:270px;
height: 140px;
float: right;
overflow:hidden;
white-space:nowrap;
text-indent: 100%;
margin-right: 8px;
margin-top:-185px;
background:url(img/coupon.png) no-repeat left top;
border-radius: 4px;
}
#coupon p a{
width: 270px;
height: 140px;
display: block;
}
#video{
margin-right: 8px;
width:270px;
height: 152px;
float: right;
background-color: #aaa;
}
#footer{
color : #4b7900;
text-align:center;
margin-bottom:20px;
}
