html css网页制作咖啡馆

追梦少年2024

于 2024-07-19 09:54:41 发布

阅读量1.6k

点赞数 33

文章标签： html css 前端

本文链接：https://blog.csdn.net/2401_84713739/article/details/140540607

版权

css：

*{
   margin: 0;
   padding: 0;
}
body{

}
.container{
   width: 900px;
   /*在父容器中水平居中*/
   margin: 0 auto;
}
.header{
   height: 220px;
   margin-bottom: 5px;
}
.nav{
   height: 30px;
   font-size: ;
   font-family: ;
leletter-spacing: 2px;
color: #fff;
background-color: #09c;
line-height: 30px;
text-align: center;
}
a{
   color: #fff;
   text-decoration: none;
}
a:hover{
   color: yellow;
}
.main{

}
.aside{
   width: 300px;
   background-color: #6cf;
   font-size: 14px;
   float: left;
   margin-right: 5px;
}
.piclist{
   width: 110px;
   margin: 0 auto;
}
.pic{
   width: 85px;
   height: 95px;
   padding: 10px;
   background-color: #eee;
   border: 1px solid #bfbfbf;
   /*圆角边框*/
   border-radius: 5px;
   /*盒子阴影*/
   box-shadow: 2px 2px 2px #000;
}
.pic img{
   width: 85px;
   height: 95px;
}
.pic img:hover{
   transform: scale(1.2);
}
.rotate_r{
   transform: rotate(8deg);
}
.rotate_l{
   transform: rotate(-7deg);
}
.content{
   width: 595px;
   float: left;
   background-color: #cff;
   }
   .bufen{
       width: 570px;
       clear: both;
   }
.bufen img{
   padding: 5px;
   margin: 5px;
   border: 1px dotted#000;
   float: left;
}
.jieshao{
   float: left;
   width: 60%;
   margin: 5px;
   font-size: 16px;
   line-height: 2em;
   font-family: "";
}
.footer{
   height: 60px;
   background-color: #6cf;
   clear: both;
   text-align: center;
   margin-top: 5px;
   height: 60px;
   line-height: 60px;
}
.l-fixd{
   position: fixed;
   top:100px;
   left:5px;
}
.l-fixd img{
height: 100px;
   width: 100px;
}

html:

<!DOCTYPE html>
<html lang="zh">
<head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
   <title>Document</title>
   <link rel="stylesheet" href="zw1.css" />
</head>
<body>
<div class="container">
    <div class="header">
        <img src="banner.jpg"/>
    </div>
    <div class="nav">
        咖啡MENU
        咖啡MENU
        咖啡MENU
        咖啡MENU
    </div>
    <div class="main">
        <div class="aside">
            <h3></h3>
            <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>30</td>
       <td>30</td>
       <td>30</td>
       <td>30</td>
       </tr>
       <tr>
       <th scope="row" >中杯</th>
       <td>30</td>
       <td>30</td>
       <td>30</td>
       <td>30</td>
       </tr>
       <tr>
       <th scope="row" >小杯</th>
       <td>30</td>
       <td>30</td>
       <td>30</td>
       <td>30</td>
       </tr>
            </table>
            <div class="piclist">
                <div class="pic rotate_r">
                    <img src="4.jpg"/>
                </div>
            </div>
                <div class="piclist">
                <div class="pic rotate_l">
                    <img src="3.jpg"/>
            </div>
        </div>
           <div class="piclist">
            <div class="pic rotate_r">
                    <img src="2.jpg"/>
        </div>
    </div>
        <div class="piclist">
                <div class="pic rotate_l">
                    <img src="Cappuccino.jpg"/>
                    </div>
                </div>
            </div>
        <div class="content">
            <div class="bufen">
                <img src="Cappuccino.jpg"/>
                <div class="jieshao">
                    <h3>拿铁</h3>
                    <p>这是一种传统的经典饮料——浓缩咖啡调入热牛奶，其上覆盖一层轻盈的奶沫。品尝此款咖啡时，您可以选择特别加入某种口味（如香草，焦糖或杏仁口味）的糖浆。</p>
                </div>
            </div>
            <div class="bufen">
                <img src="2.jpg"/>
                <div class="jieshao">
                    <h3>卡布奇诺</h3>
                    <p>这款咖啡沿袭传统技法，由我们技艺娴熟的咖啡吧员将手工制作的热奶与细腻奶泡轻柔地浇在浓缩咖啡之上制作而成。。</p>
                </div>
            </div>
            <div class="bufen">
                <img src="3.jpg"/>
                <div class="jieshao">
                    <h3>拿铁</h3>
                    <p>这款咖啡由醇香的摩卡酱，浓缩咖啡和蒸奶相融相合，上面覆以搅打奶油。寒冷的日子里，忧伤的时光中,任何人都无法抵抗她的诱惑。</p>
                </div>
            </div>
            <div class="bufen">
                <img src="4.jpg"/>
                <div class="jieshao">
                    <h3>拿铁</h3>
                    <p>这是一种传统的经典饮料——浓缩咖啡调入热牛奶，其上覆盖一层轻盈的奶沫。品尝此款咖啡时，您可以选择特别加入某种口味（如香草，焦糖或杏仁口味）的糖浆。</p>
                </div>
            </div>
        </div>
    </div>
    <div class="footer">
        网站设计案例2020年12月
    </div>
</div>
<div class="l-fixd">
    <img src="Cappuccino.jpg"/>
</div>
</body>
</html>

追梦少年2024

关注

33
点赞
踩
26

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫