高仿国美在线顶部实现

视频课堂https://edu.csdn.net/course/play/7621

具体HTML页面代码如下：

<body style="text-align:center;"><div id="header"><div id="top"><img src="img/top.jpg"/></div><!-- 图片 --><div id="nav"><ul id="left"><li><a href="https://club.gome.com.cn/?intcmp=sy-public01053">国美会员</a></li><li>登录</li><li><a href="#" style="color:#f5004b;float:left;">注册有礼</a><i></i></li></ul><ul id="right"><li>我的订单</li><li>我的国美</li><li>企业采购</li><li id="service"><em></em><a href="#" style="color:#f5004b;float:left;margin-left:5px;">服务中心</a></li><li>网站导航</li><li id="phone"><em></em><a href="#" style="float:left;margin-left:5px;">手机国美</a></li></ul></div><!-- 定义会员登录行,结束 --><div id="cate"><ul id="cateu"><li  id="logo"><a href="#"></a></li><li id="two"><a href="#"></a></li><li><a href="#">影视</a></li><li><a href="#">食品</a></li><li><a href="#">家具</a></li><li><a href="#">健康</a></li><li><a href="#">母婴</a></li><li><a href="#">海购</a></li><li><a href="#">汽车</a></li><li><a href="#">金融</a></li></ul></div><!-- 横向导航菜单 --></div></body>

具体的CSS样式代码如下：

<style>/*只出来一个横线，这叫做浮动塌陷;父元素包含子元素，父元素不设置高度；子元素全部浮动，则会出来浮动塌陷，像一条线；ul li div:都叫块状元素；特征：独占一行； 可以设置宽 高;*/*{font-size:14px;margin:0px;padding:0px;}ul#left{/*border:1px solid #f00; 含义  1像素 固定边框 红色;*/overflow:auto;/*让父元素自动适应子元素*/float:left;/*左浮动*/margin-top:0px;}ul#right{float:right;margin-right:20px;}#top{background-color:#EAEAEA;margin:0px auto;}#nav,#cate{width:1200px;margin:0px auto;overflow:auto;margin-top:10px;}a{text-decoration:none;color:#CACACA;/*字体颜色*/}/*选择器 选择器：空格表示下一级;逗号可以像java一样定义多个选择器，这样他们的属性值就一致了；*/ul li{float:left;/*把li变成浮动元素*/color:#CACACA;/*字体颜色*/margin-left:15px;/*居左*/list-style:none;/*把列表符号去掉*/}#cateu{overflow:auto;}#cateu li{width:9.66%;margin:0px;padding:0px;height:50px;}#cateu li a{float:left;color:#000;line-height:42px;padding:4px 0px 4px 0px;}#cateu #logo,#cateu #two{margin-right:20px;}#logo a{float:left;width:111px;height:42px;background:url(img/logo.png);background-size:111px 50px;}#two a{float:left;width:100px;height:42px;background:url(img/touzi.gif);background-size:100px 50px;}#left li i{background:url(img/ui.png);display: inline-block;width:12px; height:13px;background-position:-145px -1496px;margin-left:5px; margin-top:-4px;background-repeat: no-repeat;}#right li em{background:url(img/ui.png);display:inline-block;color: #dd00a7;background-position:-0px -513px;width:16px; height:16px;padding-left:2px;float:left;} #right li#service{margin-top:0px;}ul#right li#phone em{background:url(img/ui.png);display:inline-block;font-size: 17px;background-position:-198px -134px;width:8px; height:16px;color: #dd00a7;margin-right: 6px;}</style>

高仿国美在线顶部实现相关推荐

高仿国美在线底部代码实现
视频课堂https://edu.csdn.net/course/play/7621 国美在线效果图如下: 具体代码实现,已经在图片上截图给大家显示出来了,可以仔细研究下.
iOS高仿国美商城、仪表盘、卡片日记、快速拨号、换主题、3D 动画等源码
iOS精选源码高仿腾讯qq浏览器探索界面的 3D UI 动画AISphereView 仪表盘.指示器.温度计 react-native-diary 模仿卡片日记 ZZFLEX-界面构建从未如此简单 ...
iOS高仿国美商城、仪表盘、卡片日记、快速拨号、换主题、3D 动画等源码 1
iOS精选源码高仿腾讯qq浏览器探索界面的 3D UI 动画AISphereView 仪表盘.指示器.温度计 react-native-diary 模仿卡片日记 ZZFLEX-界面构建从未如此简单 ...
iOS高仿国美、二次元应用、点赞喷射动画、电影筛选页等源码
iOS精选源码高仿国美 iOS 弹幕库仿直播321倒计时动画高仿网易二次元GACHA iOS 中间带凸起旋转按钮的TabBar iOS架构实践干货:AOP替代基类 + MVVM + Reacti ...
双12营销大战：淘宝防御、京东低调、国美在线进击
双11刚刚结束没多久,双12战役又已拉开序幕,淘宝.京东和国美在线继续鏖战互联网,使尽浑身解数吸引用户来一场年终狂欢.不过,从笔者所收集到的信息来看,几家电商平台在双12期间的营销策略已经大不相同,在 ...
以健康之名冠海尔之姓，418海尔国美在线放大招
随着经济高速发展,人们的生活节奏越来越快,对生活质量要求越来越高.特别在购买长期使用的家电时,消费者对健康问题.科技元素.价格要求日益提高,健康家电时代已经到来.为了满足消费者对高端品质家电的需求,4 ...
国美在线技术团队如何做绩效管理的PPT曝光！
于斌平先生是国美在线的CTO,他几乎经历过IT行业的所有角色,他被称为电商信息化实施领头人.2010年追随创始团队筹建国美在线至今,全面负责国美在线的IT规划和建设工作. 最初,国美在线团队组建的时候 ...
国美在线2014情人节报告：80后最浪漫
今年情人节,国美在线联手权威问卷调查网站SOJUMP(问卷星)做了一次关于恋爱的大规模调查,共有16000名出生在上世纪70.80.90年代的中青年参加.调查结果显示,不同年代出生的人,其态度呈现出比 ...
高仿最美应用项目源码
源码下载: http://code.662p.com/view/12434.html 用到的第三方库 AFNetworking : OC的网络请求库 YYWebImageView : YY大神的图片加 ...
小米、阿里巴巴、国美、新鸿基、花旗、力拓等公司高管变动
一周企业高管变动要闻. 中国小米集团公布最新高管任命,碧桂园原副总裁彭志斌加入小米,出任小米集团副总裁.首席人才官(CHO).彭志斌将负责小米集团人力资源战略规划及制定.人力资源管理体系建设等工作. ...

高仿国美在线顶部实现

高仿国美在线顶部实现相关推荐

最新文章

热门文章

高仿国美在线 顶部实现

高仿国美在线 顶部实现相关推荐

最新文章

热门文章

高仿国美在线顶部实现

高仿国美在线顶部实现相关推荐