慕课网电商网站开发实例（4）

                                                      首页开发之导航栏

css代码：

.navBox{height: 35px;background-color: #1369c0;color: white;}

.shopClass{width: 190px; position: relative;}

.shopClass h3{line-height: 35px; text-align: center;}

.shopClass i{width: 11px;height: 7px; overflow: hidden;

background: url(./1.首页_r2_c2.gif)left center no-repeat;display: inline-block;margin-left: 11px;}

.nav,.shopClass h3 {font-family: "微软雅黑";}

.nav{line-height: 35px;}

.nav li{float: left;}

.nav a{height: 35px;display: inline-block;padding: 0 35px;color: white;}

.nav .active{background-color: lightgray;}

---

关于边框：border：1px solid red;代表1像素，红色的实线。

border-style（边框样式）

常见样式有：<br><br> dashed（虚线）| dotted（点线）| solid（实线）。

 text-indent 属性规定文本块中首行文本的缩进。如text-indent:50px;就是向右边移动50个像素。

对于background的属性：例如background:url(nav-bar.gif) no-repeat right center;

是如下写法的缩写：

background-image:url(nav-bar.jpg);

background-repeat:no-repeat;

background-position:right center

行内元素无法给与宽度和高度，需要在css样式中加入display:inline-block;让他也有每次都从新行开始的属性(块元素属性)

这样就可以设置宽高了。

 font-weight:bold;(加粗)； 标签：<strong>是加重语气标签； <b>是粗体标签。

 <dl> 标签（定义了列表）结合 <dt> （定义列表中的项目）和 <dd> （描述列表中的项目）

font-weight: bold;font-size: 14px;font-family: "Microsoft YaHei","微软雅黑"; 可缩写为：font:bold 14px/1 "Microsoft YaHei","微软雅黑"; /*1表示字体高度与行高相同*/

font:字体加粗 字体大小/行高 字体类型，如果字体加粗没写，默认为normal

---

fireworks切图

使用firework导出"合约机"后面的背景图：选中文字——delete键删除-选中背景图-优化图像选择png32,色板选中透明按钮-导出切片保存