1、打开Adobe Dreamweaver CC 2015。
4、<body>和</body>之间添加"<ul></ul>"，如下图所示。【基本语法】<ul> ....</ul>【语法说明】在HTML文件中，可以利用成对的<ul></ul>标记插入无序列表。其里面有列表项标记<li></li>。
7、<style type="text/css">和</style>之间添加"#menu{border:1px solid #ccc; 茑霁酌绡height:26px; background:#0000ff;} #menu ul{list-style:none; margin:0px;}#menu ul li{float:left; padding:0px 40px; line-height:26px;}"，如下图所示。border属性：规定图像周围的边框的宽度，就是说可以增加或去掉图像的边框。height属性：设置高度。background属性：设置背景色。list-style属性：设置列表样式。margin属性：设置边框外的距离。float属性：定义元素在哪个方向浮动。padding属性：设置边框内的距离。#menu：对应于页面中id为menu的元素#menu ul：对应于页面中id为menu的元素里的<ul>无序列表。#menu ul li：对应于页面中id为menu的元素里<ul>无序列表里面的<li>列表项目。
8、保存网页文件，按住F12键可以在浏览器中预览效果，如下图所示。
