CSS之咖啡菜单网页设计
今天记录学习的设计网站首页的咖啡菜单，综合运用所学习的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;
}
以上就是咖啡菜单网页的全部代码和效果图了，希望有所帮助。
CSS之咖啡菜单网页设计的更多相关文章
- paip.自适应网页设计 跟 响应式 设计的区别跟原理and实践总结
paip.自适应网页设计 跟 响应式 设计的区别跟原理and实践总结 响应式Web设计(Responsive Web design)的理念是: 1 #-----------自适应布局VS响应式布局 2 ...
- paip.自适应网页设计 同 响应 与设计的原理的差and实践总结
paip.自适应网页设计 同 响应 与设计的原理的差and实践总结 响应式Web设计(Responsive Web design)的理念是: 1 #-----------自适应布局VS响应式布局 2 ...
- 网页基础:网页设计(我所知道的所有的html和css代码(含H5和CSS3)),如有错误请批评指正
最基础的网页设计,就是给你一个图片你做成一个网页,当然,我的工作是C#,个人网页的功底不是很高首先先认识一下网页的一些相关知识: 一般的,现在一个html网页一般包含html文件,css文件,js文件 ...
- 网页设计（CSS&JS）
实验一 简单静态网页设计 一. 实验目的: 复习使用记事本编辑网页的方法. 熟悉不同表单控件类型的应用. 练习使用记事本在网页中添加表单与表单元素. 二. 实验内容: 根据提供的素材设计在线调查问卷 ...
- 手机web——自适应网页设计（html/css控制）
一. 允许网页宽度自动调整: "自适应网页设计"到底是怎么做到的? 其实并不难. 首先,在网页代码的头部,加入一行viewport元标签. <meta name=" ...
- css+div网页设计（二）--布局与定位
在网页设计中,能否控制好各个模块中在页面中的位置是非常关键的,与传统的表格定位不同,css+div定位方式更加的灵活,本篇博客将为大家介绍css+div的布局与定位. 一.盒子模型 由图可以看出 盒子 ...
- 【转】手机web——自适应网页设计（html/css控制）
手机web——自适应网页设计(html/css控制) 就目前形势来看,Web App 正是眼下的一个趋势和潮流,但是,对于Web App的设计可能大家有的不是很了解,下面就将整理好的网页设计的技巧奉献 ...
- 手机web——自适应网页设计（html/css控制） - 51CTO.COM
body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...
- 手机web——自适应网页设计（html/css控制）【转】
一. 允许网页宽度自动调整: "自适应网页设计"到底是怎么做到的?其实并不难. 首先,在网页代码的头部,加入一行viewport元标签. <meta name="v ...
随机推荐
- delphi 连接各中数据库方法
---恢复内容开始--- 数据库连接字符串的拼写规则的决定条件: • 连接的数据库的类型:SQL Server,Oracle,MySQL,Acess,MogoDB,Visual FoxPro(dBAS ...
- CF171C 【A Piece of Cake】
遵从题意枚举暴力读人n,再求出$\sum^n_1a[i]*i$然后输出答案,(记得开个long long以免炸掉)以下是代码: #include<bits/stdc++.h> using ...
- php设计模式之注册模式
注册模式,解决全局共享和交换对象.已经创建好的对象,挂在到某个全局可以使用的数组上,在需要使用的时候,直接从该数组上获取即可.将对象注册到全局的树上.任何地方直接去访问. <?php class ...
- Docker学习1
命名空间(Namesaoces):Linux内核提供的一种对进程资源隔离的机制,例如网络.进程.挂载点等资源. 控制组(CGroups):Linux内核提供的一种限制进程资源的机制:例如CPU.内存等 ...
- cut,sort,awk,sed,tr,find,wc,uniq在Linux中的用法
cut语法cut [-bn] [file]cut [-c] [file]cut [-df] [file] -b :以字节为单位进行分割.这些字节位置将忽略多字节字符边界,除非也指定了 -n 标志.-c ...
- 网站更换服务器出现加载不了js css文件的问题
原因是 里面加找不到.woff类型,后面把上面注释掉就可以了
- Vue报错:Property or method "XXX" is not defined on the instance but referenced during render. Make sure that this property is reactive...
在Vue中定义方法或者属性时,因为粗心疏忽可以能会报该错误 [Vue warn]: Property or method "search" is not defined on th ...
- chrome79开发者工具代码高亮失效的解决办法
升级chrome最新版本后,存在开发者工具Sources内代码高亮失效的情况 解决办法: 1. 开发者工具面板右上角菜单->Setting->Preferences 2. 将Theme切换 ...
- Hyperledger Fabric（3）通道与组织
1,通道的结构 通道是Fabric中非常重要的概念(类似微信群?),它实质是由排序节点划分和管理的私有原子广播通道,目的是对通道的信息进行隔离,使得通道外的实体无法访问通道内的信息,从而实现交易的隐私 ...
- Spark报错java.io.IOException: Could not locate executable null\bin\winutils.exe in the Hadoop binaries.
Spark 读取 JSON 文件时运行报错 java.io.IOException: Could not locate executable null\bin\winutils.exe in the ...