CSS之咖啡菜单网页设计
2024-08-28 17:56:48
今天记录学习的设计网站首页的咖啡菜单，综合运用所学习的html，css背景，文本，字体，链接，表格，盒子，选择器，定位，以及css3的阴影，圆角边框，2d变换等内容。
㈠咖啡菜单整体样式
运用html和css知识做出来的整体效果图，如下图所示：
⑴左侧的小咖啡图片是广告位，不随页面变动而变动；
⑵表头部分右下角采用层定位放置四个小图标；
⑶导航栏部分放置五个链接，采用伪类链接方式，鼠标悬停在链接上颜色为黄；
⑷主体部分分为左右两栏，在左侧边栏设计了一个表格，上面放置价格表；
⑸下面采用2d变换，阴影效果，圆角边框设置四个图片，第一张和第三张顺时针旋转7度，第二张那个和第四张逆时针旋转7度；
⑹这个旋转方式也可以采用奇偶选择器进行设计；
⑺在右侧主体部分采用浮动定位进行图片的位置设定和文字设定，图片边框采用虚线设计；
⑻在页脚部分采用清除两侧浮动进行设计；
⑼以上就是这个咖啡菜单网页的主要设计。
㈡html代码
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>icafe咖啡馆</title>
6 <link rel="stylesheet" href="css/style.css" />
7 </head>
8 <body>
9
10 <div id="container">
11
12 <div id="header">
13 <p> <img src="data:images/banner.jpg"></p>
14 <div id="icon-list">
15 <img src="data:images/1.bmp">
16 <img src="data:images/2.bmp">
17 <img src="data:images/3.bmp">
18 <img src="data:images/4.bmp">
19 </div>
20 </div>
21
22 <div id="nav">
23 <p>
24 <a href="#">咖啡MENU</a>|
25 <a href="cook.html">咖啡COOK</a>|
26 <a href="#">咖啡STORY</a>|
27 <a href="#">咖啡NEWS</a>|
28 <a href="#">咖啡PARTY</a>
29 </p>
30 </div>
31
32 <div id="main">
33 <div id="aside">
34 <h2>咖啡MENU</h2>
35 <table >
36 <tr>
37 <th ></th>
38 <th >拿铁<br />Latte</th>
39 <th >卡布奇诺<br />Cappuccino</th>
40 <th >摩卡<br />Mocha</th>
41 <th >浓缩咖啡<br />Espresso</th>
42 </tr>
43 <tr>
44 <th scope="row" >大杯</th>
45 <td>35</td>
46 <td>35</td>
47 <td>35</td>
48 <td>30</td>
49 </tr>
50 <tr>
51 <th scope="row" >中杯</th>
52 <td>30</td>
53 <td>30</td>
54 <td>30</td>
55 <td >25</td>
56 </tr>
57 <tr>
58 <th scope="row" >小杯</th>
59 <td>25</td>
60 <td>25</td>
61 <td>25</td>
62 <td>20</td>
63 </tr>
64 </table>
65 <div id="imglist">
66 <div class="polaroid rotate_left">
67 <img src="data:images/Mocha.jpg" />
68 </div>
69
70 <div class="polaroid rotate_right">
71 <img src="data:images/Latte.jpg" />
72 </div>
73 <div class="polaroid rotate_left">
74 <img src="data:images/Espresso.jpg" />
75 </div>
76
77 <div class="polaroid rotate_right">
78 <img src="data:images/Cappuccino.jpg" />
79 </div>
80 </div>
81 </div>
82
83 <div id="content">
84 <div class="subcont">
85 <img src="data:images/Latte.jpg" alt="">
86 <div class="subtext">
87 <h2>拿铁Caffè Latte</h2>
88 <p>这是一种传统的经典饮料——浓缩咖啡调入热牛奶，其上覆盖一层轻盈的奶沫。<br>品尝此款咖啡时，您可以选择特别加入某种口味（如香草，焦糖或杏仁口味）的糖浆。</p>
89 </div>
90 </div>
91 <div class="subcont">
92 <img src="data:images/Cappuccino.jpg" alt="">
93 <div class="subtext">
94 <h2>卡布奇诺Cappuccino</h2>
95 <p>这款咖啡沿袭传统技法，由我们技艺娴熟的咖啡吧员将手工制作的热奶与细腻奶泡轻柔地浇在浓缩咖啡之上制作而成。</p>
96 </div>
97 </div>
98 <div class="subcont">
99 <img src="data:images/Mocha.jpg" alt="">
100 <div class="subtext">
101 <h2>摩卡Caffè Mocha</h2>
102 <p>这款咖啡由醇香的摩卡酱，浓缩咖啡和蒸奶相融相合，上面覆以搅打奶油。<br>寒冷的日子里，忧伤的时光中,任何人都无法抵抗她的诱惑。</p>
103 </div>
104 </div>
105 <div class="subcont">
106 <img src="data:images/Espresso.jpg" alt="">
107 <div class="subtext">
108 <h2>浓缩咖啡Espresso</h2>
109 <p>这是咖啡的精粹，以最浓缩的方式显现。浓缩咖啡带点焦糖味道，浓厚馥郁。</p>
110 </div>
111 </div>
112 </div>
113 </div>
114
115 <div id="footer">
116 <p>咖啡菜单小设计</p>
117 </div>
118 </div>
119
120 <div id="l-fix">
121 <p> <img src="data:images/Latte.jpg"></p>
122 </div>
123
124 </body>
125 </html>
㈢css样式部分的代码
*{
margin: ;
padding: ;
}
body {
font-family:"微软雅黑";
font-size:16px;
color: #;
}
#container {
margin: auto;
width:900px;
}
#header {
height:220px;/*必须添加，否则header下面有10px而不是5px空白*/
margin-bottom:5px;
position:relative; /*父层定位*/
}
#icon-list{
position:absolute;/*子层定位*/
top:170px;
right: 30px;
width: 130px;
height: 30px;
font-size: 0px;
/*background: white;*/
}
#icon-list img{
margin-left:5px;
}
#nav{
height:30px;
margin-bottom:5px;
background:#09c;
font: 18px/30px 微软雅黑;
color: #fff;
letter-spacing: 2px;
text-align: center;
}
a:link{
color: #fff;
text-decoration: none;
}
a:visited{
color: #fff;
text-decoration: none;
}
a:hover{
color: yellow;
text-decoration: none;
}
a:active{
color: #fff;
text-decoration: none;
}
#main{
background:red;
/*margin-bottom:5px;已经坍缩为0,放在子容器内设置*/
}
#aside {
float:left;
width:300px;
background:#6cf;
text-align: center;
font-size: 14px;
color: #;
}
#aside h2{
margin: 20px;
}
#imglist{
width: 130px;
margin: auto;
}
.polaroid
{
width:85px;
padding: 10px;
background-color: #eee;
border:1px solid #BFBFBF;
box-shadow:2px 2px 4px #aaa;
border-radius: 5px;
}
.rotate_left
{
-ms-transform:rotate(7deg); /* IE 9 */
-moz-transform:rotate(7deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
-o-transform:rotate(7deg); /* Opera */
transform:rotate(7deg);
}
.rotate_right
{
-ms-transform:rotate(-8deg); /* IE 9 */
-moz-transform:rotate(-8deg); /* Firefox */
-webkit-transform:rotate(-8deg); /* Safari and Chrome */
-o-transform:rotate(-8deg); /* Opera */
transform:rotate(-8deg);
}
#imglist img{
height: 95px;
width: 85px;
margin: auto;
font-size: ;
}
#imglist img:hover{
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
#content{
float:right;
width:595px;
margin-bottom:5px;
background:#cff;
}
.subcont{
width: 570px;
margin: 10px auto;
clear: both;
}
.subcont img{
margin: 5px;
padding: 5px;
float: left;
border: 1px dashed #;
}
.subcont .subtext{
width: %;
float: left;
margin: 5px;
}
.subcont h2{
margin: 5px;
}
.subcont p{
font:16px/2em 微软雅黑;
}
#footer {
height:60px;
line-height: 60px;
background:#6cf;
clear:both; /*新加代码*/
margin-top: 5px;
text-align: center;
}
#l-fix{
position: fixed;
top:100px;
left:5px;
}
#l-fix img{
height: 100px;
width: 100px;
}
以上就是咖啡菜单网页的全部代码和效果图了，希望有所帮助。
最新文章
- 在桌面程序上和Metro/Modern/Windows store app的交互(相互打开，配置读取)
- Android Build System
- 教你看懂GERBER中的钻孔（.txt）文件
- Unity3d 音效模块相关
- 24.C#LINQ TO XML(十二章12.3)
- UIBarButtonItem不能获取frame
- PHP框架_Smarty_实现登录功能
- es watcher
- vue + socket.io实现一个简易聊天室
- 基于python的web应用开发-添加关注者
- ch11 持有对象
- java设计模式--观察者模式(Observer)
- leetcode刷题正则表达式
- aspnet core2中使用csp内容安全策略
- 第七节：WebApi与Unity整合进行依赖注入和AOP的实现
- lua-01
- 四、XML语言学习（2）
- 全志A33 lichee 搭建Qt App开发环境编写helloworld
- Django的Rbac介绍1
- [MVC] 自定义ActionSelector，根据参数选择Action