技術標籤：筆記

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>