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 ...
随机推荐
- 关于deepin装机的一些经验总结
最近win10用的有一点腻,虚拟机很久之前就装上了deepin,乌班图,红帽等隶属于Linux一些操作系统,但是终究还是虚拟机所以还是想在真机上试试,所以照着deepin网上的流程装好了deepin并 ...
- RramSim2
1.官网 http://www.computer.org/csdl/letters/ca/2011/01/lca2011010016-abs.html 2.介绍 http://blog.csdn.ne ...
- MVC与MTV模型及Django请求的生命周期
MVC模型 MVC:Model View Controller M: 模型.是应用程序中用于处理应用程序数据逻辑的部分 V:视图.是应用程序汇总处理数据显示的部分 C:控制器.是应用程序中处理用户交互 ...
- Ubuntu18.04 出现E: Sub-process /usr/bin/dpkg returned an error code (100)
You might want to reinstall dpkg by doing the following: sudo -i mkdir /tmp/dpkg cd /tmp/dpkg Mind t ...
- (转)Redis持久化的几种方式
radis持久化的几种方式 1.前言 Redis是一种高级key-value数据库.它跟memcached类似,不过数据可以持久化,而且支持的数据类型很丰富.有字符串,链表,集 合和有序集合.支持在服 ...
- EBS自动行号，行金额自动汇总到头，金额根据币种编号总结
一.自动行号实现 1.方法一: 只需要将“序号”定义成公式,并将公式设置为:get_block_property('block_name',current_record)就可以实现了,或者把这行语句放 ...
- 总结 | 慢 SQL 问题经验总结
1. 导致慢 SQL 的原因 在遇到慢 SQL 情况时,不能简单的把原因归结为 SQL 编写问题(虽然这是最常见的因素),实际上导致慢 SQL 有很多因素,甚至包括硬件和 mysql 本身的 bug. ...
- 特产网站自适应CSS
下面是一个特产网站自适应CSS,这个特产自适应CSS通过屏幕宽度大小来进行适应的,而不是根据UA来判断,就加快了判断的速度,所以速度很快 中国特产站排名还是很好的,特别是手机端 li { list-s ...
- 第十四篇 JS实现加减乘除 正则表达式
JS实现加减乘除 这节课,将会继续使用到if判断,会让同学们再看到一个新的,else if判断语句,意思是:否则如果,是基于if下的判断语句,就是说,if不成立则再来判断else if,可以这样,假如 ...
- Firefox 的User Agent 将移除 CPU 架构信息
Mozilla 计划从 Firefox 的 User Agent(用户代理)和几个支持的 API 中移除 CPU 架构信息,以减少 Firefox 用户的“数字指纹”.Web 浏览器会自动向用户在应用 ...