前言

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移上去，设置两个方向清楚浮动*/
}

前端小项目（四）| 咖啡厅网页页面相关推荐

前端小练习——走马灯效果+网页页面换肤效果
一.需要掌握的知识? 二.思路阐述及代码运行结果一.需要掌握的知识 html的background 无序列表盒子模型浮动 css动画伪类一些css常用文本格式理解 javascript怎 ...
前端小项目（一）| 电影院座位预定（html，css，js）
前端小项目(一)| 电影院座位预定前言开始好好学习前端啦.学紫色爱心记录一波!! 初步学了html,css,js,在github上找了几个前端小项目模仿着练练手.第一个就是电影院座位预定页面,主要 ...
白天、暗夜双重模式+自作潜水俱乐部前端小项目+学习经验总结(一)
嗨,这里是X,今天带来最近写的一个前端小项目,还挺不错的,所以就在这里分享一下
web前端小项目个人实例_Web前端：小程序界面与逻辑项目实训
大家好,我来了!本期为大家带来的Web前端学习知识是"Web前端:小程序界面与逻辑项目实训",喜欢Web前端的小伙伴,一起看看吧! 主要内容数据绑定渲染界面层数据渲染事件处 ...
前端小项目——模拟微信界面对话框
最近看网课做了个小项目,用到了前端很多知识点用到的知识点: HTML知识点: div大盒子,id为contentALL:包含所有的内容 div头部小盒子,id为header:包含整个对话框的头部信息 ...
618快到了送上自制前端小项目（html css js）
目录 ??.自定义播放器 ??.图片自动消失 .小轮播图 ??.旋转音乐盒前言:这些小项目全都是自创的. 如果需要应用,或则转发的话请与博主联系,感谢你们的理解, 1.自定义播放器在页面中放置2 ...
50天50个前端小项目（纯html+css+js）第六天（页面滚动动画）
今天我们来实现的是页面滚动动画,比如说页面使用鼠标滚轮向下滚动的时候,内容区域会分别从左从右滑动到居中的内容区域,大概效果如下: 接下来来看实现首先是html: 没什么特别的地方,主要就是设置一些内 ...
前端小项目之在线便利贴
实现的效果如下: 界面可能不是太好看?,考虑到容器的高度会被拉长,因此没有用图片做背景. 预览便利贴涉及的知识点 sass(css 预编译器) webpack(自动化构建工具,实现LESS,CSS ...
（云服务器+JQuery+JS+BootStrap+Navicat+AJAX+JavaScript）第一个前端小项目【面试】
目录第一步:登录云服务器查看根目录运行jar包端口被占用 ps -ef:查看使用的端口号 kill -9 端口号:杀掉该进程,取消端口占用 1.配置数据库 2.启动jar包 3.测试swag ...
Python小项目四：实现简单的web服务器
本博客是整理在学习实验楼的课程过程中记录下的笔记形成的,参考:https://www.shiyanlou.com/courses/552.不同之处在于实验楼使用python2.7,而博主这里使用的是p ...

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

文章目录

前言

一、HTML

1.header部分

2.navigator部分

3.main部分

4.footer部分

二、CSS

1.header部分

2.navigator部分

3.main部分

4.footer部分

前端小项目（四）| 咖啡厅网页页面相关推荐

最新文章

热门文章