首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

【CSS】课程网站头部制作 ② ( 导航测量 | 导航编写 | 代码示例 )

文章目录 一、 导航测量 1、 左侧边界 2、 文本测量 3、 底部边框测量 二、 导航代码编写 1、 HTML 标签结构 2、 CSS 样式 3、最终显示效果 三、 完整代码 1、 HTML...标签结构 2、 CSS 样式 一、 导航测量 ---- 1、 左侧边界 导航 最左侧位置 , 距离 logo 盒子 有 70 像素 , 考虑到设置外边距 , 这里将 logo 盒子 与 导航之间的距离设置成...工具 , 点击文字内容 ; 在文字工具中 , 会显示文字大小 18 像素 , 点击右侧的颜色 , 还会弹出 " 拾色器 ( 文本颜色 ) " 对话框 , 其中显示了文本颜色 #050505 ;...3、 底部边框测量 底部边框 2 像素 , 使用吸管工具吸取颜色 , 可得到颜色值 #00a4ff ; 二、 导航代码编写 ---- 1、 HTML 标签结构 导航使用 无序列表 实现 ,...: 2px solid #00a4ff; } 3、最终显示效果 此时 , 鼠标经过 导航的 首页 选项 ; 三、 完整代码 ---- 1、 HTML 标签结构 完整代码 : <!

3.9K20

原生JS实现可折叠导航

但在代码中,并不能真的用for循环来做,那样在移动过程中js就会一直卡在循环中而不能执行其他代码,所以这里可以使用setInterval函数来做,它会每隔一段时间调用一次某个方法,格式为setInterval...为了使移动更平滑,每次调用时只移动到目标位置之间的距离的10%.实现折叠的函数代码如下: /*关闭/打开导航*/ function closeNav(nav,body,navTargetWidth){...,鼠标移出导航三种。...当点击按钮后,判断当前导航是收缩还是展开状态,如果是收缩状态就将导航的宽和内容块的左外边距逐渐增长为展开时的值,反之同理。而判断是通过一个变量来标识导航状态实现。...leftNavIsClose; } 当鼠标进入和离开导航时: document.getElementsByClassName("left-nav")[0].onmouseenter = function

7.4K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    html导航纵向代码,html横向导航怎么做?横向导航代码实例

    有不少小伙伴在刚学习 html 的时候都会遇到这样一个问题:html 横向导航怎么做?今天W3Cschool小编就为大家分享一下简单的横向导航代码,相信会对大家有所帮助。...html 横向导航一般用两种方法来制作:第一种,我们使用块状结构结合行内结构来制作。第二种,我们使用​float​属性来制作。由于第一种比较常用,一下就以第一种方式来介绍。...横向导航代码实例: ul { list-style-type:none; margin:0; padding:0; overflow:hidden; } li { float:left; }...hover,a:active { background-color:#e6e6e6; } W3Cschool 入门教程 编程课程 编程实战 以上就是本文的全部内容了,今天和大家分享了 html 横向导航怎么做

    6.3K30

    【Flutter】底部导航实现 ( BottomNavigationBar 底部导航 | BottomNavigationBarItem 导航条目 | PageView )

    文章目录 一、Scaffold 组件 二、底部导航整体架构 三、BottomNavigationBar 底部导航 四、BottomNavigationBarItem 导航条目 五、PageView...Scaffold 提供了显示左侧侧拉导航 , 底部导航 , 浮动按钮等 API ; Scaffold 构造函数如下 : class Scaffold extends StatefulWidget {...底部导航组件 , 该底部导航的 item 设置图标与文字组件数组 , onTap 字段设置 ValueChanged 点击回调方法 , 通过该方法设置当前选择的页面索引值 ; Scaffold...fixedColor, super(key: key); 代码示例 : BottomNavigationBar( /// 设置当前的导航页面索引 currentIndex: _currentIndex...---- 完整代码示例 : import 'package:flutter/material.dart'; /// 底部导航示例 void main() { runApp( BottomNavigatorWidget

    6.1K50

    【CSS】课程网站 Banner 制作 ③ ( Banner 右侧课程盒子测量及样式 | Banner 版心盒子模型右侧课程代码示例 )

    文章目录 一、Banner 右侧课程盒子测量及样式 1、盒子尺寸测量 2、课程表头部样式 3、列表样式 4、最下方按钮样式 二、Banner 版心盒子模型右侧课程代码示例 1、HTML 标签结构...课程表 底部按钮 - 鼠标经过时的样式 */ .all:hover { background-color: #00a4ff; color: #fff; } 二、Banner 版心盒子模型右侧课程代码示例...-- 左侧 侧导航 --> <!...的外边距 */ margin-right: 60px; } /* 导航设置 左浮动 */ .nav { float: left; } /* 导航栏内部 的 无序列表 设置左浮动 */ .nav...样式 */ /* 侧导航 样式 */ .subnav { /* 设置左浮动 */ float: left; /* 左侧侧导航 190 x 420 , 左右两侧各 20 像素内边距 */

    3.6K60

    TabLayout用法,android顶部导航,android底部导航

    TabLayout是android.support.design里的一个控件,使用它可以很方便的做出顶部导航和底部导航。类似于这样的,能设置选中时字体的颜色和选中时的图片。 ? ?..., "第二", "第三"}); viewpager.setAdapter(adapter); tabLayout.setupWithViewPager(viewpager...下面说第二种带图片的底部导航, 其实也很简单,就是把TabLayout放到底部,上面是viewpager,然后给text设置个图片就行了。...:drawable = "@drawable/nav_home" android:state_selected = "false" /> OK,以上做完就可以了,带图片的底部导航就做好了...以上的代码可以从oschina的git托管http://git.oschina.net/tianyalei/MDDesignLib获取,TabLayout相关的在Sample的TabActivity那里

    4.1K10
    领券