使用Html/Css简单创建一个菜单

效果图：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>菜单</title><style type="text/css">*{margin: 0;padding: 0;}body{font: 12px/1 宋体;/*12像素 一倍行高 宋体*/}.external{width: 300px;/*height: 500px;*/margin: 50px auto;/*background-color: darkgrey;*/}.one{border-top:2px #32a490 solid;/*上边框 实线*/height: 50px;background-color: #f5f5f5;line-height: 50px;/*设置字体行间距间接设置行高 来使字体居中*/padding: 0px 30px 0px 20px;}.one a{float: right;color: red;}.one h3{float: left;font: 20px/50px "微软雅黑";}.two{border: 1px #deddd9 solid;padding: 0px 30px 0px 20px;}.two a{color:seagreen;text-decoration: none;/*去除下划线*/font-weight: bold;/*加粗*/}ul{list-style: none;/*去除项目符号*/font-size: 14px;border-bottom: 1px #deddd9 dashed;}.more{color: blue;}.two .right{float: right;}.two h3{margin-top: 14px;margin-bottom: 8px;}.two li{margin-bottom: 4px;}.two .no{border: none;}a:hover{color: crimson;text-decoration: underline;/*下划线*/}</style>
</head>
<body><div class="external"><div class="one"><h3>最新菜单</h3><a href="#">本店优惠详情</a></div><div class="two"><h3 >好吃不腻肉菜系列 <a href="#"><span class="more">更多</span></a></h3><ul><li>可乐鸡翅：36<a href="#" class="right">详细介绍</a></li><li>铁锅焖鱼：56<a href="#" class="right">详细介绍</a></li><li>红烧排骨：38<a href="#" class="right">详细介绍</a></li><li>宫保鸡丁：26<a href="#" class="right">详细介绍</a></li><li>麻辣小龙虾：86<a href="#" class="right">详细介绍</a></li></ul><h3 >经济实惠素菜系列 <a href="#"><span class="more">更多</span></a></h3><ul><li>素拍黄瓜：10<a href="#" class="right">详细介绍</a></li><li>地三鲜：26<a href="#" class="right">详细介绍</a></li><li>老虎菜：18<a href="#" class="right">详细介绍</a></li><li>麻辣豆皮：16<a href="#" class="right">详细介绍</a></li><li>凉拌腐竹：16<a href="#" class="right">详细介绍</a></li></ul><h3 >管饱管够主食系列 <a href="#"><span class="more">更多</span></a></h3><ul><li>馒头：1<a href="#" class="right">详细介绍</a></li><li>米饭：1<a href="#" class="right">详细介绍</a></li><li>担担面：12<a href="#" class="right">详细介绍</a></li><li>黄面条：26<a href="#" class="right">详细介绍</a></li><li>混沌：86<a href="#" class="right">详细介绍</a></li></ul ><h3 >无限畅饮饮品系列 <a href="#"><span class="more">更多</span></a></h3><ul class="no"><li>红牛：10<a href="#" class="right">详细介绍</a></li><li>矿泉水：2<a href="#" class="right">详细介绍</a></li><li>可乐：3<a href="#" class="right">详细介绍</a></li><li>雪碧：3<a href="#" class="right">详细介绍</a></li><li>开胃（大）：15<a href="#" class="right">详细介绍</a></li></ul></div></div>
</body>
</html>

使用Html/Css简单创建一个菜单相关推荐

在CSS中创建径向菜单
本文翻译自:Creating a Radial Menu in CSS How do I create a menu which looks like this... 如何创建一个看起来像这样的菜单. ...
[css] 使用纯css来创建一个滑块
[css] 使用纯css来创建一个滑块 .checke{position: relative;-webkit-appearance: none;width:90px;height: 44px;line ...
css按钮大小固定,在CSS中创建一个固定宽度的按钮
我有几个可变宽度的按钮,我希望它们都是一定的宽度.当我尝试添加width: 150px;时,它不起作用.如何创建这些全部具有设定宽度的按钮?在CSS中创建一个固定宽度的按钮 HTML Lorem Lo ...
【前端实例代码】如何使用 HTML 和 CSS 快速创建一个响应式导航栏
效果图: 大屏: 小屏: bilibili在线视频演示地址: [前端实例代码]如何使用 HTML 和 CSS 快速创建一个响应式导航栏nav_哔哩哔哩_bilibili完整代码在这里:https:// ...
css+html创建一个大风车
最近刚学习了css3的动画,创建了一个大风车巩固知识,大家轻点喷首先建立一个div盒子 div {position: relative;width: 400px;height: 400px;marg ...
不到50行代码，HTML+CSS+JS创建一个简单的色轮
简单,其实就是调库! 文档在这里 Get Started | iro.js 我也写了一个简单的样例在下面可以参考一下
html+css简单下拉菜单制作
额,今天心血来潮做了个简单的下拉菜单,不过用的css操作的,啧! 最终效果: 代码: <!DOCTYPE html> <html> <head><title& ...
怎样创建两个菜单JAVA_java – 如何创建一个菜单的JButton？
这在Swing比在需要是更困难的方式.因此,我不是指向你的教程,我创建了一个完全工作的例子. import javax.swing.*; import java.awt.*; import java. ...
教大家用html/css简单写一个心形，表白必学
1,建议大家使用Sublime编辑软件去编写,先给大家看个效果图标题二,教程开始,图像是由三个图像合成的,两个圆形,一个正方形,大部分用div布局完成的 1,首先建一个大的div 效果图 2,建一 ...

使用Html/Css简单创建一个菜单

使用Html/Css简单创建一个菜单相关推荐

最新文章

热门文章