固始县住房和城乡规划建设局网站,使用百度地图导航收费吗,湖北省城乡建设厅网站首页,《php网站开发》电子课件目录 nav导航栏
footer部分
mod-copyright nav导航栏
nav盒子通栏有高度#xff0c;有下边框 1号盒子左浮动#xff0c;dropdown 2号盒子左侧浮动#xff0c;navitems导航栏组
先看dropdown里#xff0c;先表头#xff0c;这里意思是description term, 然后是一系列表… 目录 nav导航栏
footer部分
mod-copyright nav导航栏
nav盒子通栏有高度有下边框 1号盒子左浮动dropdown 2号盒子左侧浮动navitems导航栏组
先看dropdown里先表头这里意思是description term, 然后是一系列表格内容其中text-alignline-height调整
整个盒子距离边框有2px距离此外文字距离盒子要有10px padding值
利用伪元素以及icomoon字体图标设置小三角利用absolute定位三角
当鼠标经过后字体要变色背景要变色字体变色通过li:hover a来表示意思是鼠标经过后a里字有变化
.nav {height: 47px;border-bottom: 2px solid red;
}.nav .dropdown {float: left;height: 45px;width: 210px;background-color: red;
}.nav .navitems {float: left;
}.dropdown .dt {width: 100%;height: 100%;color: #fff;text-align: center;line-height: 45px;font-size: 16px;
}.dropdown .dd {display: none;width: 210px;height: 465px;background-color: red;}.dropdown .dd ul li {position: relative;height: 31px;line-height: 31px;padding-left: 10px;margin-left: 2px;color: #fff;
}.dropdown .dd ul li::after {position: absolute;top: 1px;right: 10px;font-family: icomoon;content: \e920;
}.dropdown .dd ul li:hover a {/* 表示鼠标经过后a变颜色 */color: red;
}.dropdown .dd ul li:hover {background-color: #fff;
}.dropdown .dd ul li a {font-size: 14px;color: #fff;
}.navitems ul li {float: left;
}div classdropdowndiv classdt全部商品样式/divdiv classddullia href#家用电器/a/lilia href#手机/a、a href#数码/a、a href#电器/a/lilia href#电脑、办公/a/lilia href#家用电器/a/lilia href#家用电器/a/lilia href#家用电器/a/li/ul/div/div
navitems用无序列表写他们都是并列的文字要垂直居中防止文字个数不一样使用margin最好给a这样用户点击链接跳转范围大
.navitems ul li a {display: block;height: 45px;line-height: 45px;font-size: 16px;padding: 0 25px;
}
footer部分 准备modify-service大盒子给下边框一共1200让每个li浮动指定padding-left 对于盒子右边有文字的情况让盒子浮动文字自然就环绕了 这里盒子背景是精灵图定位通过坐标。
准备.mod_help大类注意这里盒子间间距通过宽度来设置每个盒子都由data list组成但是最后一个list因此会掉下去通过last-child选中后重新设置宽度。
.footer {padding-top: 30px;height: 415px;background-color: #f5f5f5;
}.mod_service {height: 80px;border-bottom: 1px solid #ccc;
}.mod_service ul li {float: left;width: 300px;height: 50px;/* background-color: pink; */padding-left: 30px;/* 盒子右边有文字的情况让盒子浮动文字自然就围绕了 */
}.mod_service ul li h5 {float: left;width: 50px;height: 50px;/* background-color: purple; */background: url(../images/icons.png) no-repeat -252px -3px;/* 这里好离谱向左侧是负的越大向下侧是负的越小 */margin-right: 8px;
}.service_txt h4 {font-size: 14px;
}.service_txt p {font-size: 12px;
}.mod_help {height: 185px;border-bottom: 1px solid #ccc;padding-top: 20px;padding-left: 50px;
}.mod_help dl {float: left;/* 间距通过设置宽度 */width: 200px;
}.mod_help dl:last-child {width: 90px;text-align: center;}.mod_help dl dt {/* definition list定义列表termdefinition */font-size: 16px;margin-bottom: 10px;}.mod_help dl dd {font-size: 14px;
}
footer classfooterdiv classwdiv classmod_serviceullih5/h5div classservice_txth4正品保障/h4p正品保障提供发票/p/div/lilih5/h5div classservice_txth4正品保障/h4p正品保障提供发票/p/div/lilih5/h5div classservice_txth4正品保障/h4p正品保障提供发票/p/div/lilih5/h5div classservice_txth4正品保障/h4p正品保障提供发票/p/div/li/ul/divdiv classmod_helpdldt服务指南/dtdda href#购物流程/a/dddda href#购物流程/a/dddda href#购物流程/a/dddda href#购物流程/a/dddda href#购物流程/a/dd/dldldt服务指南/dtdda href#购物流程/a/dddda href#购物流程/a/dddda href#购物流程/a/dddda href#购物流程/a/dddda href#购物流程/a/dd/dldldt服务指南/dtdda href#购物流程/a/dddda href#购物流程/a/dddda href#购物流程/a/dddda href#购物流程/a/dddda href#购物流程/a/dd/dldldt服务指南/dtdda href#购物流程/a/dddda href#购物流程/a/dddda href#购物流程/a/dddda href#购物流程/a/dddda href#购物流程/a/dd/dldldt服务指南/dtdda href#购物流程/a/dddda href#购物流程/a/dddda href#购物流程/a/dddda href#购物流程/a/dddda href#购物流程/a/dd/dldldt服务指南/dtddimg srcimages/wx_cz.jpg品优购客户端/dd/dl/div mod-copyright 版权部分links里设置好边距后copyright部分设置行高links里的链接之间设置margin
div classmod_copyrightdiv classlinks关于我们 | 联系我们 | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 品优购社区 | 品优购公益 | English Site | Contact U/divdiv classcopyright地址北京市昌平区建材城西路金燕龙办公楼一层 邮编100096 电话400-618-4000 传真010-82935100 邮箱: zhanghjitcast.cn京ICP备08001421号京公网安备110108007702/div/div
.mod_copyright {text-align: center;padding-top: 20px;/* 首先所有文字都居中 */
}.links {margin-bottom: 15px;}.links a {margin: 0 3px;
}.copyright {line-height: 20px;
}
