前端小项目(四)| 咖啡厅网页页面
作者:互联网
文章目录
前言
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移上去,设置两个方向清楚浮动*/
}
标签:网页,header,color,咖啡厅,width,5px,height,margin,页面 来源: https://blog.csdn.net/qq_43248263/article/details/121736259