2020-12-30

Css
*{
margain:0;
padding: 0;
}
#container{
margin: 0 auto;
width: 900px;
}
#header{
height: 220px;
margin-bottom: 5px;
}
#nav{
height: 30px;
font: 18px/30px “微软雅黑”;
letter-spacing: 2px;
color: #fff;
background-color: #09c;
text-align: center;
margin-bottom: 5px;
}
#nav a{
color: white;
text-decoration: none;
}
#nav a:hover{
color: yellow;
}
#main{}
#aside{
float: left;
width: 300px;
background-color: #6cf;
font-size: 14px;
text-align: center;
}
#imglist{
width: 130px;
margin: 0 auto;
}
.public{
width: 85px;
height: 95px;
padding: 10px;
background: #eee;
border: 1px solid #bfbfbf;
box-shadow: 2px 2px 3px #000;
border-radius: 5px;
}
.public img{
width: 85px;
height: 95px;
}
.public img:hover{
transform: scale(1.2);
}
.rotate-right{
transform: rotate(7deg);
}
.rotate-left{
transform: rotate(-7deg);
}
#content{
float: right;
width: 595px;
background-color: #cff;
margin-bottom: 5px;
}
.subcont{
clear: both;
width: 570px;
}
.subcont img{
float: left;
padding: 5px;
margin: 5px;
border: 1px dashed
}
.subcont{
float: left;
width: 60%;
margin: 5px;
}
.subcont p{
font: 16px/2em “微软雅黑”;
}
#footer{
height: 60px;
background-color: #6cf;
clear: both;
line-height: 60px;
text-align: center;
}
#l-fixed{
position: fixed;
left: 10px;
top: 100px;
}
#l-fixed img{
width: 100px;
height: 100px;
}

Html

咖啡MENU 咖啡COOK 咖啡STOR 咖啡NEWS

咖啡MENU

	拿铁	卡布奇诺	摩卡	浓缩咖啡
大杯	35	35	35	35
中杯	28	28	28	28
小杯	20	20	20	20

拿铁Coffe Latte

这是一种传统的经典饮料--浓缩咖啡调入热牛奶，其上覆盖一层轻盈的奶沫。品尝

卡布奇诺Cappuccino

这款咖啡沿袭传统技法，由我们技艺娴熟的咖啡吧员将手工制作的热奶与细腻奶泡车

摩卡Coffe Mocha

这款咖啡由醇香的摩卡酱，浓缩咖啡和蒸奶相融相合，上面覆以搅

浓缩咖啡Espresso

这是咖啡的精粹，以最浓缩的方式显现。浓缩啡带点焦糖味道，浓厚

网站设计案例 2020年12月

</div>
<div id="1-fixed"><img src="images/1.jpg" alt=""></div>