css与导航网页布局.doc

Css hack1 使用css hack我们可以针对不同的浏览器做单独的样式设置_background-color：orange；在css中的代码前面加下划线单独对ie6有效+background-color：orange +对ie7有效background-color：orange0 0对ie8有效background-color：orange9 9对所有的ie浏览器有效2 行内优先级最高 然后是内页样式 最后是外部样式3 不透明度Opacity：0.9 取值范围是0.0,1.0 ie9以上浏览器有效，不透明度为90%Filter：alpha（opacity=90）取值范围0,100 对ie6,7有效插入视频4 public.css/*基本格式开始*/body,div,ul,ol,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,input,textarea,pmargin: 0px;padding: 0px;font-size: 14px;ullist-style: none;img,a imgborder: none;atext-decoration: none;a:hovertext-decoration: underline;.autowidth: 960px;margin: 0 auto;/居中#topheight: 46px;margin-top:15px; auto也设置margin margin-top防止覆盖bodybackground: url(body_img.img) repeat-x;height: 2000px;/2000PX看起来舒服一点#top .navigationheight: 46px;background: url(img2.img) repeat-x;/top下面的navigation#top .navigation .samewidth: 10px;height: 46px;#top .nav .leftfloat: left;#top .nav .rightfloat: right;width: 205px;/div块级元素长度定下来#top .navigatopn .mainNavwidth: 800px;float: left;#top .navigation .mainNav .logowidth: 164px;height: 150px;float: left;display: block;#top .nav .mainNav ulwidth: 770px;float: left;margin: 15px 0 0 0;/横着放#top .nav .mainNav ul lifloat: left;font-size: 14px;display: block;width: 135px;height: 46px;line-height: 46px;text-align: center;/本来内联标签 点击变块 上下居中设置一样 水平方向居中 li添加浮没有高度动脱离标准流,ul#top .navigation form .searchwidth: 173px;height: 3px;background: url(brn.img);#top .navigation form .search .keywords width: 140px;height: 20px;background: pink;margin: 3px 0 0 0;display: inline;border: 0px solid black;/inline 防止浏览器2倍浮动 0px去边框#top .navigation form .search .btnwidth: 15px;height: 16px;background: url(btn.img);border: none;cursor: pointer;margin: 2px 0 0 2px;display:block;float: left;块级元素独占一行 ,left左浮动在一行#mainclear: both;background:url(main_bg.jpg) repeat-x;#main .auto .img1border: 2px solid black;display: block;#main .auto .titleheight: 40px;line-height: 40px;background: url(title.gif) 0px bottom no-repeat;/文字上下居中 长度一样 图片到下面#main .auto .title hcolor: black;font-family: 微软雅黑;font-size: 16px;width: 200px;float: left;text-indent: 15px;/缩进15px#main .auto .title afloat: left;color: #000000;#main .auto .box .imgListwidth: 239px;height: 302px;border-left: 1px solid black;border-bottom: 1px solid black;float: left;text-align: center;clear: both;/横着放 清除浮动 不受其他元素影响#details .shoppingwidth: 300px;float: left;#details .shopDetailswidth: 610px;float: right;#details .shopDetails dl dtcolor: #000000;font-weight: bold;border-bottom: 1px solid #FF0000;#details .shopDetail dl ddborder-bottom: 1px dashed #FFFFFF;导航.cssimg src=1.gif/圆角图片首页手机1手机1手机1手机1手机1/导航列表 ul块级元素掉下来,登录注册购物车0件/包起来占一行/div更好定位 一下更多<&l