前端小项目（四）| 咖啡厅网页页面

---

前言

mooc上的作业，用html和css做的一个简单的web页面，关于咖啡厅的~
代码放在：https://github.com/titibabybaby/FED/tree/main/coffee
长这样：

---

一、HTML

web页面几个重要部分：
header
navigator
main
footer

1.header部分

header这里就放了一张图片，iconlist是header右下角的小图标。

<div id="header">
            <img src="E:/web/coffee/images/banner.png"
             alt="">
            <!--alt 属性是一个必需的属性，它规定在图像无法显示时的替代文本。
            如果图像包含信息，使用 alt 描述图像。
            <!--层定位-->
            <div class="iconlist">
                <img src="E:/web/coffee/images/8.jpg" alt="">
                <img src="E:/web/coffee/images/8.jpg" alt="">
                <img src="E:/web/coffee/images/8.jpg" alt="">
            </div>
        </div>

2.navigator部分

 <div id="nav">         
            <a href="#">首页</a>
            <a href="#">咖啡menu</a>
            <a href="#">近日活动</a>
            <a href="#">咖啡故事</a>
        </div> 

3.main部分

具体的内容，将页面分为左右两个部分，aside和content：aside是放咖啡菜单，和展示咖啡图片。content主要是介绍咖啡相关的东西。

<div id="main">
            <div id="aside">
                <div class="subaside">
                    <h2>咖啡menu</h2>
                    <table>
                        <tr>
                            <th>  </th>                           
                            <th>拿铁</th>
                            <th>卡布</th>
                            <th>脏</th>
                            <th>澳白</th>
                        </tr>

。。。放部分

<div id="content">
                <div class="subcon"> 
                    <img src="E:/web/coffee/images/3.png" alt="">
                    <div class="subtext">
                        <h2>咖啡从哪来</h2>
                        <p>咖啡（世界三大无酒精饮料之一)是用经过烘焙的咖啡豆制作出来的饮料。 咖啡”（Coffee）一词源自埃塞俄比亚埃塞俄比的一个名叫卡法（kaffa）的小镇，在希腊语中“Kaweh”的意思是“力量与热情”。最早种植咖啡，并把它作为饮料的是的阿拉伯人。咖啡树是属茜草科常绿小乔木，日常饮用的咖啡是用咖啡豆配合各种不同的烹煮器具制作出来的，而咖啡豆就是指咖啡树果实内之果仁，再用适当的烘焙方法烘焙而成。</p>
                    </div>
                </div>

4.footer部分

footer也很简单，这里就走形式搞了一个

<div id="footer">
            <p>titi’s cafe</p>

二、CSS

1.header部分

body {
    font-size: 14px;
    color:sienna;
}
#container{
    width: 900px;
    margin: 0 auto; /*上下、左右，auto自动适应浏览器*/
}
#header{
    height: 200px;
    margin-bottom: 5px;
    position: relative;
}
.iconlist{
    position: absolute; /*层定位：父元素header定位relative，
                       子元素定位absolute，则在它上面*/
    float: right;
    top: 170px;
    right: 10px;
}
.iconlist img{
    width: 20px;
    height: 20px;
}

2.navigator部分

#nav{
    height: 50px;
    line-height: 50px;/*这个和height设置为一样的，文字垂直居中*/
    margin: 5px 0px;
    background-color: steelblue;
    font: 20px/50px Georgia ; /*字号/行高 字体，都必须写，不然不生效，要垂直居中行号要等与height*/
    color: white;
    letter-spacing: 2px;
    text-align: center;
}
#nav a{
    text-decoration: none;
}

/*active必须位于:hover之后！！放在上面才能激活*/
a:visited{
    color:white;
}
a:link{
    color:white;
}
a:hover{
    color: saddlebrown;
}
a:active{
    color: saddlebrown;
}

3.main部分

#main{
    background-color: black;
 
}
#aside{
    float:left;
    width: 300px;
    height: 1000px;
    background-color:burlywood;
    font-size: 14px;
    text-align: center;
}
.subaside{
    width:250px;
    margin: 0 auto;
    padding: 5px;
    clear: both;
}
.subaside table{
    border-collapse: collapse;
    width: 100%;
    
    
}
.subaside table,tr,th,td{
    border: 1px solid black;
    font-size: 16px;
    text-align: center;
    color: black;
    margin-top: 5px;
    
}
.subaside imglist{
    width: 150px;
    margin: 0 auto;/*水平居中*/
    
}
.pol{
    width: 100px; 
    margin: 0 auto;/*这里，使方块块pol水平居中*/
    padding: 5px;
    background-color:darksalmon;
    border:1px solid black;
    border-radius: 5px;
    box-shadow:2px 2px 2px;
}
#imglist img{
    width: 85px;
    height: 85px;
    margin:0 auto;/*水平居中*/
}
.rotate-left{
    transform: rotate(-7deg); 
    -ms-transform: rotate(-7deg);
    -webkit-transform: rotate(-7deg);
}
.rotate-right{
    transform: rotate(7deg);
    -ms-transform: rotate(7deg);
    -webkit-transform: rotate(7deg);
}
#content{
    float: right;
    width:595px;
    background-color: lemonchiffon;
    margin-bottom: 5px;
}
.subcon{
    width: 500px;
    margin:10px auto;
    padding: 5px;
    clear: both;
}
.subcon img{
    width:220px;
    height:300px;
    margin: 2px;
    padding: 5px;
    float: left;
    border:sienna 2px solid;
}
.subcon .subtext{
    float: left;
    margin: 5px;
    width: 50%;
    
}
.subcon h2{
    margin:5px;
}
.subcon p{
    font: 16px/3em ; /*16个像素大小。3倍行高*/
    margin:5px;
}

4.footer部分

#footer{
    height: 60px;
    line-height: 60px; /*高度和行高一致，则垂直居中*/
    background-color: lightsalmon;
    clear: both; /*为了避免footer移上去，设置两个方向清楚浮动*/
}