01网易云首页导航栏html制作（李游精品前端课程笔记）

<!doctype html>
<html>
<head> <meta charset="utf-8"> <title>网易云课堂</title><style type="text/css">*{margin: 0;padding: 0;list-style: none;text-decoration: none;}
/*topNode*/.topNode{height: 56px;background: #303440;}.topNode .topNodeContent{width: 1206px;height: 100%;background: -pink;margin: 0 auto;}.topNode .topNodeContent .logo{margin-top: 14px ;float: left;}.topNode .topNodeContent .searchNode{width: 357px;height: 36px;border: 1px solid #191e2b;float: left;background: #fff;border-radius: 19px;margin: 9px 0 0 17px;overflow: hidden;}.topNode .topNodeContent .searchNodeLeft{width: 44px;height: 100%;float: left;font-size: 13px;line-height: 36px;margin-left: 18px;background: url(image/jt-b.gif) no-repeat right 14px;}.topNode .topNodeContent .searchNodeInput{width: 198px;height: 36px;float: left;line-height: 36px;border: none;outline: none;font-size: 15px;margin-left: 14px;color: #a2a2a2;}.topNode .topNodeContent .searchNodeRight{width: 80px;height: 100%;float: right;font-size: 15px;line-height: 36px;color: white;text-indent: 29px;background: url(image/search.gif) no-repeat 10px center,#4aaf4f;}.topNode .bannerTop{width: ;height: 100%;float: left;margin-left: 31px;background: -red;}.topNode .bannerTop li{width: ;height: 100%;float: left;margin: 0 9px;font-size: ;color: #f4f4f5;line-height: 56px;text-shadow: 0 0 1px #000312;}.topNode .bannerTop li.downloadAPP{padding-left: 18px;background: url(image/download.gif) no-repeat left center;}.topNode .bannerTop li.see{padding-left: 20px;background: url(image/lw.gif) no-repeat left center;}.topNode .bannerTop li.line{width: 5px;background: url(image/sg.gif) no-repeat center center;}.topNode .bannerTop li.bell{width: 17px;background: url(image/tx.gif) no-repeat center center;}.topNode .bannerTop li.shoppingCart{width: 18px;background: url(image/gwc.gif) no-repeat center center;}.topNode .bannerTop li.shoppingCart{width: ;height: 100%;float: left;}.topNode .user span{float: left;font-size: 13px;line-height: 56px;color: white;}.topNode .user img{width: 34px;height: 34px;float: left;border: 1px solid #1c2535;border-radius: 50%;margin-top: 11px;}</style>
</head>
<body><div class="topNode"><div class="topNodeContent"><a class="logo" href="#"><img src="data:image/logo.gif"></a><div class="searchNode"><div class="searchNodeLeft">课程</div><input class="searchNodeInput" type="" name="" value="零基础学JavaScript"><a class="searchNodeRight" href="#">搜索</a></div><ul class="bannerTop"><li class="downloadAPP">下载APP</li><li class="see">关注领福利</li><li>会员中心</li><li class="line"></li><li>管理后台</li><li>我的学习</li><li class="bell"></li><li class="shoppingCart"></li><li class="line"></li></ul><div class="user"><span  class="username">李游</span><img src="data:image/F07F9E9C63CDA35AB0E00DA054402EC2.png"></div></div></div></body>
</html>

01网易云首页导航栏html制作（李游精品前端课程笔记）相关推荐

01网易首页静态页面笔记（李游精品前端课程）
首先cs样式布局都是按照老师讲解的课程一步一步写完 *{margin: 0;padding: 0;list-style: none;text-decoration: none;} /* topNode ...
项目总结3 类似网易云音乐导航栏指示器(个性推荐、歌单等)的简单实现(一)
我们先来看看网易云音乐导航栏指示器是什么样的. 箭头指向的蓝色框就是导航指示器,点击之后下面的view会跟着移动,每个button下面还有个小红线跟着.这个效果其实不难实现,我们先来分析分析. 在iO ...
CSS学习案例（16）：网易云音乐导航栏
网易云音乐官网点这里原版: 自己做的: 网易云logo图标和搜索放大镜图标在阿里巴巴矢量图标库找 <div class="container"><div cl ...
精讲前端实战项目之移动端网易云首页（附源码）
本篇文章分享给学习前端的朋友,可能你们长时间的学习了理论知识,对html,css,JavaScript等基础知识已经是相当熟悉了.但是没有一个自己的作品,那是因为缺乏练习一些实战项目.今天这个就是一个 ...
演练网站的头部导航栏的制作 1014 HTML
演练网站的头部导航栏的制作 1014 HTML 视频演练菜单按钮的制作 HTML5 2216 - 西瓜视频 https://www.ixigua.com/6883480625635033613/ ...
通栏导航栏的制作，综合使用CSS属性，代码不超过30行
这篇文章,小编带领大家一同做一个利用CSS技术实现的导航栏.通过这个导航栏的制作,希望大家能够对前几篇文章中学习到的CSS属性能有一个整体的认识,并能够达到灵活运用的程度. 承接文章:灵活控制块级元素 ...
使用php制作导航栏,如何制作简单导航栏
如何制作简单导航栏导语:一个网页必不可少的元素之一,导航,虽然各种创新已经逐渐把导航栏的"栏"给去掉了,以非栏架的`形式制作出导航.所以,导航是一个网页友好的入口,要学习网页制作 ...
HTML+CSS 简单的顶部导航栏菜单制作
导航栏的制作: 技术要求: CSS HTML各类标签实现目的: 制作导航栏菜单代码分析: 基本样式清除无序列原点删除下划线删除文字默认居中 a标签设置块级元素伪类选择器对a状态修饰分步实 ...
仿安居客首页导航栏及二级下拉菜单Html+Css+JavaScript
这次仿写的是安居客的首页导航栏,要求实现二级下拉菜单首先,这是原网页的效果接下来是html部分 <div class="box1"><ul id=" ...

01网易云首页导航栏html制作（李游精品前端课程笔记）

01网易云首页导航栏html制作（李游精品前端课程笔记）相关推荐

最新文章

热门文章