前端小项目(四)| 咖啡厅网页页面
2021/12/5 23:17:33
本文主要是介绍前端小项目(四)| 咖啡厅网页页面,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
文章目录
- 前言
- 一、HTML
- 1.header部分
- 2.navigator部分
- 3.main部分
- 4.footer部分
- 二、CSS
- 1.header部分
- 2.navigator部分
- 3.main部分
- 4.footer部分
前言
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移上去,设置两个方向清楚浮动*/ }
这篇关于前端小项目(四)| 咖啡厅网页页面的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-01前端项目部署入门:新手必读指南
- 2024-11-01富文本编辑器学习:从入门到初步掌握
- 2024-11-01前端项目部署学习:从入门到实践
- 2024-11-01动态主题处理:WordPress新手指南
- 2024-11-01前端项目部署指南:从零开始的部署教程
- 2024-11-01Element-Plus入门指南:轻松开始你的前端项目
- 2024-11-01TagsView标签栏导航入门教程
- 2024-11-01富文本编辑器课程:新手入门教程
- 2024-10-31前端项目部署课程:从入门到实践指南
- 2024-10-31用Angular实现服务器端渲染以提升SEO效果