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 ...
随机推荐
- 浏览器渲染优化4(styles and layout)
你已经学会了查找和解决问题.希望你的js能正常运行了,但这只是制作帧的一小部分.在这节课里,你将处理样式,也就是像开发工具里标记的那样,重新计算样式.学完这节课后,你将学会从样式计算过程中找到性能问题 ...
- coredump产生的几种可能情况
coredump产生的几种可能情况 造成程序coredump的原因有很多,这里总结一些比较常用的经验吧: 1,内存访问越界 a) 由于使用错误的下标,导致数组访问越界. b) 搜索字符串时,依靠字符串 ...
- Eclipse 新建.jsp页面后，页面头部标签报错的解决方法
Eclipse 新建.jsp页面后,页面头部标签报错的解决方法 1.报错地方: 2.解决方法: .jsp页面右键==>BUild Path ==>Configure Build Path. ...
- 【2017.12.02】C组比赛总结
这次考得不怎么样,只有200分! T1:读书 这题水水水! 这题就是一道循环题嘛! 直接一边循环一边做就好了! T2:恐怖分子 这题我是直接暴力的. 这题就是求至少用多少条经过(x0,y0)的不同直线 ...
- CSS(上)
目录 CSS(上) 什么是CSS? CSS的优点 CSS的引入方式 行内样式 内部样式 外部样式 CSS的两大特性 CSS选择器 基本选择器 组合选择器 更多选择器 选择器的优先级 CSS(上) 什么 ...
- Redis安全策略
1. 开启redis密码认证,并设置高复杂度密码 描述 redis在redis.conf配置文件中,设置配置项requirepass, 开户密码认证. redis因查询效率高,auth这种命令每秒能处 ...
- 常用的TCP/UDP端口
已知的TCP/UDP端口可以在wikipedia上找到: List of TCP and UDP port numbers, 太多了,按组列举了最常用的,如下: FTP:21SSH:22Telnet: ...
- MySQL索引详解（优缺点，何时需要/不需要创建索引，索引及sql语句的优化）
一.什么是索引? 索引是对数据库表中的一列或多列值进行排序的一种结构,使用索引可以快速访问数据库表中的特定信息. 二.索引的作用? 索引相当于图书上的目录,可以根据目录上的页码快速找到所需的内容,提 ...
- GO语言（golang）官方网站！
GO语言官方网站,在上面可以查看所有API文档.使用在线工具编写程序,你可以去看看!! https://golang.org/
- h5图片展示和ajax上传
<img src="" id="img"/> <script src="http://static.lamian.tv//pc/pu ...