咖啡案例

效果图

css：

*{
    margin: 0;
    padding: 0;
}
body { 
    font-family:"微软雅黑"; 
    font-size:16px; 
    color: #673929;
}
#container {
    margin:0 auto; 
    width:900px;     
}
#header { 
    height:220px;/*必须添加，否则header下面有10px而不是5px空白*/
    margin-bottom:5px;
    position:relative; /*父层定位*/
}

#icon-list{
    position:absolute;/*子层定位*/
    top:170px;
    right: 30px;
    width: 130px;
    height: 30px;    
    font-size: 0px;
    /*background: white;*/
}
#icon-list img{
    margin-left:5px;
}
#nav{ 
    height:30px;    
    margin-bottom:5px;
    background:#09c;         
    font: 18px/30px 微软雅黑;
    color: #fff;
    letter-spacing: 2px;
    text-align: center;
}
a:link{
    color: #fff;
    text-decoration: none;
}
a:visited{
    color: #fff;
    text-decoration: none;
}
a:hover{
    color: yellow;
    text-decoration: none;
}
a:active{
    color: #fff;
    text-decoration: none;
}
#main{ 
    background:red; 
    /*margin-bottom:5px;已经坍缩为0,放在子容器内设置*/
}
#aside { 
    float:left; 
    width:300px; 
    background:#6cf;
    text-align: center;
    font-size: 14px;
    color: #000;
}
#aside h2{
    margin: 20px;
}
#imglist{
    width: 130px;
    margin: 0 auto;         
}
.polaroid
{
    width:85px;        
    padding: 10px;
    background-color: #eee;
    border:1px solid #BFBFBF;
    box-shadow:2px 2px 4px #aaa;
    border-radius: 5px;
}

.rotate_left
{
    -ms-transform:rotate(7deg); /* IE 9 */
    -moz-transform:rotate(7deg); /* Firefox */
    -webkit-transform:rotate(7deg); /* Safari and Chrome */
    -o-transform:rotate(7deg); /* Opera */
    transform:rotate(7deg);
}

.rotate_right
{
    -ms-transform:rotate(-8deg); /* IE 9 */
    -moz-transform:rotate(-8deg); /* Firefox */
    -webkit-transform:rotate(-8deg); /* Safari and Chrome */
    -o-transform:rotate(-8deg); /* Opera */
    transform:rotate(-8deg);
}
#imglist img{
    height: 95px;
    width: 85px;
    margin: 0 auto;
    font-size: 0;
}
#imglist img:hover{
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
}
#content{ 
    float:right; 
    width:595px; 
    margin-bottom:5px;
    background:#cff;
}
.subcont{
    width: 570px;
    margin: 10px auto;    
    clear: both;
}
.subcont img{
    margin: 5px;
    padding: 5px;
    float: left;
    border: 1px dashed #000;
}
.subcont .subtext{
    width: 60%;
    float: left;
    margin: 5px;
}
.subcont h2{
    margin: 5px;
}
.subcont p{    
    font:16px/2em 微软雅黑;
}
#footer { 
    height:60px; 
    line-height: 60px;
    background:#6cf;
    clear:both; /*新加代码*/
    margin-top: 5px;
    text-align: center;
}

#l-fix{
    position: fixed;
    top:100px;
    left:5px;
}
#l-fix img{
    height: 100px;
    width: 100px;
}

html：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>icafe咖啡馆</title>    
    <link rel="stylesheet" href="css/style.css" />
</head>
<body>



<div id="container">
 
  <div id="header">
      <p>    <img src="images/banner.jpg"></p>
      <div id="icon-list">
         <img src="images/1.bmp">
         <img src="images/2.bmp">
         <img src="images/3.bmp">
         <img src="images/4.bmp">
    </div>
  </div>
  
  <div id="nav">
          <p>
            <a href="#">咖啡MENU</a>|
            <a href="cook.html">咖啡COOK</a>|
            <a href="#">咖啡STORY</a>|
            <a href="#">咖啡NEWS</a>|
            <a href="#">咖啡PARTY</a>
        </p>
  </div>

  <div id="main"> 
      <div id="aside">
          <h2>咖啡MENU</h2>
        <table >
          <tr>
              <th ></th>
            <th >拿铁<br />Latte</th>
            <th >卡布奇诺<br />Cappuccino</th>
            <th >摩卡<br />Mocha</th>
            <th >浓缩咖啡<br />Espresso</th>
          </tr>
          <tr>
            <th scope="row"  >大杯</th>
            <td>35</td>
            <td>35</td>
            <td>35</td>
            <td>30</td>
          </tr>
          <tr>
            <th scope="row"  >中杯</th>
            <td>30</td>
            <td>30</td>
            <td>30</td>
            <td >25</td>
          </tr>
          <tr>
            <th scope="row"  >小杯</th>
            <td>25</td>
            <td>25</td>
            <td>25</td>
            <td>20</td>
          </tr>
        </table>
        <div id="imglist">
            <div class="polaroid rotate_left">
                <img src="images/Mocha.jpg"  />    
            </div>

            <div class="polaroid rotate_right">
                <img src="images/Latte.jpg"  />    
            </div>
            <div class="polaroid rotate_left">
                <img src="images/Espresso.jpg"  />    
            </div>

            <div class="polaroid rotate_right">
                <img src="images/Cappuccino.jpg"  />    
            </div>
        </div>
      </div>

      <div id="content">
        <div class="subcont">              
            <img src="images/Latte.jpg" alt="">
            <div class="subtext">
                <h2>拿铁Caffè Latte</h2>
                <p>这是一种传统的经典饮料——浓缩咖啡调入热牛奶，其上覆盖一层轻盈的奶沫。<br>品尝此款咖啡时，您可以选择特别加入某种口味（如香草，焦糖或杏仁口味）的糖浆。</p>
            </div>
        </div>    
        <div class="subcont">
            <img src="images/Cappuccino.jpg" alt="">
            <div class="subtext">
                <h2>卡布奇诺Cappuccino</h2>
                <p>这款咖啡沿袭传统技法，由我们技艺娴熟的咖啡吧员将手工制作的热奶与细腻奶泡轻柔地浇在浓缩咖啡之上制作而成。</p>
            </div>
        </div>
        <div class="subcont">    
            <img src="images/Mocha.jpg" alt="">
            <div class="subtext">
                <h2>摩卡Caffè Mocha</h2>
                <p>这款咖啡由醇香的摩卡酱，浓缩咖啡和蒸奶相融相合，上面覆以搅打奶油。<br>寒冷的日子里，忧伤的时光中,任何人都无法抵抗她的诱惑。</p>
            </div>
        </div>
        <div class="subcont">
            <img src="images/Espresso.jpg" alt="">    
            <div class="subtext">            
                <h2>浓缩咖啡Espresso</h2>
                <p>这是咖啡的精粹，以最浓缩的方式显现。浓缩咖啡带点焦糖味道，浓厚馥郁。</p>
            </div>
        </div>
      </div>
  </div>

  <div id="footer">
      <p>网站设计课程版权 2015-2020</p>
  </div>
</div>

<div id="l-fix">
      <p>    <img src="images/Latte.jpg"></p>    
</div>

</body>
</html>

posted @ 2021-12-04 16:10 坤k 阅读(32) 评论(0) 收藏举报

刷新页面返回顶部

坤

咖啡案例

效果图

css：

html：

公告