近日,林柯想制作一份小菜单,经过沟通,木可用illustrator帮林柯完成了一份设计稿,效果如下:
菜单
不过,怎么样用HTML实现这个效果图呢?木可把刚学会的ul、li和dl标签派上了用场,下面让我们来看看具体的实现过程吧。
第一步:搭建基本结构
1. 搭建背景
背景分为两层:红色底层和黄色上层。
2. 搭建三个部分
菜单内容分为三个部分:顶部招牌菜、左侧热卖小吃和右侧菜品介绍。
书写CSS样式,实现如下效果:
第二步:完善内容和效果
1. 完成招牌菜部分
招牌菜用无序列表ul标签书写,HTML内容如下:
- 剁椒鱼头
- 红 烧 肉
- 血 鸭
- 辣 子 鸡
2. 完成热卖小吃部分
热卖小吃用有序列表ol标签书写,HTML内容如下:
- 蒜香鸡爪
- 香辣鸡翅
- 牛肉丸
- 铁板豆腐
- 酸辣鸭掌
3. 完成菜品介绍部分
菜品介绍用定义列表dl标签书写,HTML内容如下(图片链接已屏蔽):
-
剁椒鱼头
-
- 剁椒鱼头是湖南省的传统名菜,以鳙鱼鱼头、剁椒为主料,配以豉油、姜、葱、蒜等辅料蒸制而成。菜品色泽红亮,肉质细嫩,口感软糯,鲜辣适口。
-
血鸭
-
- 血鸭是湖南省永州市的一道特色名菜,以鸭肉、鸭血为主料,以葱、辣椒、姜片等为佐料炒制而成。菜品美味可口,具有开胃凉血的功效。
为各部分书写CSS样式,实现菜单效果图。
下面提供木可书写的完整代码,欢迎大家批评指正。
菜单body{
font-family: "微软雅黑",sans-serif;
}
/* 背景 */
.container{
width: 600px;
height: 300px;
background-color: #A93028;
margin: 100px auto 0;
position: relative;
}
.content{
width: 570px;
height: 270px;
background-color: #F3E4C3;
border-radius: 8px;
position: absolute;
top: 15px;
left: 15px;
}
/* 招牌菜 */
.specialty{
width: 531px;
height: 45px;
margin: 17px auto 0;
}
.specialty ul{
list-style-type: none;
padding: 0;
margin: 0;
}
.specialty li{
width: 123px;
height: 45px;
color: #fff;
font-size: 26px;
font-weight: bold;
line-height: 45px;
text-align: center;
background-color: #A93028;
border-radius: 5px;
box-shadow: 2px 2px 1px rgba(0,0,0,0.6);
float: left;
}
.specialty li:not(:last-child){
margin-right: 13px;
}
/* 热卖小吃 */
.hot{
width: 120px;
height: 171px;
border: 2px solid #A93028;
border-radius: 5px;
margin: 17px 0 0 19.5px;
float: left;
}
.hot h2{
color: #A93028;
font-size: 21px;
text-align: center;
margin: 10px 0 0;
}
.hot ol{
list-style-type: none;
padding: 0;
margin: 8px 0 0 43px;
}
.hot li{
color: #A93028;
font-size: 14px;
font-weight: bold;
line-height: 24px;
position: relative;
}
/* 用伪元素实现序号 */
.hot li::before{
width: 16px;
height: 16px;
color: #fff;
font-size: 14px;
font-weight: bold;
line-height: 16px;
text-align: center;
background-color: #A93028;
border-radius: 3px;
position: absolute;
top: 4px;
left: -24px;
}
.hot li:first-child::before{
content: "1";
}
.hot li:nth-child(2)::before{
content: "2";
}
.hot li:nth-child(3)::before{
content: "3";
}
.hot li:nth-child(4)::before{
content: "4";
}
.hot li:last-child::before{
content: "5";
}
/* 菜品介绍 */
.introduce{
width: 390px;
height: 171px;
border: 2px dashed #A93028;
border-radius: 5px;
margin: 17px 19.5px 0 0;
float: right;
}
.introduce dl{
height: 65px;
margin: 13px 0 0 15px;
position: relative;
}
.introduce dt,
.introduce dd{
margin: 0;
position: absolute;
}
.introduce dt{
color: #A93028;
font-size: 18px;
font-weight: bold;
line-height: 21px;
top: 0;
left: 77px;
}
.introduce img{
vertical-align: top;
border: none;
}
.introduce dd:nth-child(2){
width: 65px;
height: 65px;
border-radius: 5px;
overflow: hidden;
}
.introduce dd:nth-child(3){
font-size: 12px;
line-height: 14px;
top: 23px;
left: 77px;
}
.introduce dl.fish img{
width: 65px;
}
.introduce dl.duck img{
height: 65px;
margin-left: -18px;
}
- 剁椒鱼头
- 红 烧 肉
- 血 鸭
- 辣 子 鸡
热卖小吃
- 蒜香鸡爪
- 香辣鸡翅
- 牛肉丸
- 铁板豆腐
- 酸辣鸭掌
-
剁椒鱼头
-
- 剁椒鱼头是湖南省的传统名菜,以鳙鱼鱼头、剁椒为主料,配以豉油、姜、葱、蒜等辅料蒸制而成。菜品色泽红亮,肉质细嫩,口感软糯,鲜辣适口。
-
血鸭
-
- 血鸭是湖南省永州市的一道特色名菜,以鸭肉、鸭血为主料,以葱、辣椒、姜片等为佐料炒制而成。菜品美味可口,具有开胃凉血的功效。