近日，林柯想制作一份小菜单，经过沟通，木可用illustrator帮林柯完成了一份设计稿，效果如下：

菜单

不过，怎么样用HTML实现这个效果图呢？木可把刚学会的ul、li和dl标签派上了用场，下面让我们来看看具体的实现过程吧。

第一步：搭建基本结构

1. 搭建背景

背景分为两层：红色底层和黄色上层。

2. 搭建三个部分

菜单内容分为三个部分：顶部招牌菜、左侧热卖小吃和右侧菜品介绍。

书写CSS样式，实现如下效果：

第二步：完善内容和效果

1. 完成招牌菜部分

招牌菜用无序列表ul标签书写，HTML内容如下：

• 剁椒鱼头
• 红 烧 肉
• 血  鸭
• 辣 子 鸡

2. 完成热卖小吃部分

热卖小吃用有序列表ol标签书写，HTML内容如下：

1. 蒜香鸡爪
2. 香辣鸡翅
3. 牛肉丸
4. 铁板豆腐
5. 酸辣鸭掌

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;

}