视频剪辑软件 JAVA学习 dart join networking mysqli sass vue全局组件 js的点击事件 spark大数据处理技术 docker查看所有容器 配置tomcat环境变量 mysql时间戳转换日期 python正则匹配数字 python自定义异常 java使用mysql java注释 java获取当前ip java基础框架 java中的map java常用数据结构 linuxgrep linux内核编程 服务器系统下载 内存整理软件 手机照片恢复免费软件 苹果手机老是自动重启 隐藏进程 ip地址切换器 foobar2000插件 祸星龙 dll注入器 ansys安装 origin柱状图 js添加节点 android浏览器 腾讯手机管家root qq网盘在哪里 决战者 微信小程序下载
当前位置: 首页 > 学习教程  > 编程语言

CSS实现移动端横向滚动导航条

2020/8/31 14:51:55 文章标签:

HTML代码
<div class="nav">
    <a href="#">关注</a>
    <a href="#">推荐</a>
    <a href="#">新闻</a>
    <a href="#">社会</a>
    <a href="#">国际</a>
    <a href="#">军事</a>
    <a href="#">娱乐</a>
    <a href="#">三农</a>
    <a href="#">直播</a>
    <a href="#">小视频</a>
    <a href="#">问答</a>
    <a href="#">体育</a>
    <a href="#">科技</a>
</div>
<div>
    正文<br>
    正文<br>
    正文<br>
    正文<br>
    正文<br>
</div>
.nav {
	width: 100%;
	height: 50px;
	line-height: 50px;
	/*段落中文本不换行*/
	white-space: nowrap;
	/*阴影*/
	box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
	/*设置横向滚动*/
	overflow-x: scroll;
	/*禁止纵向滚动*/
	overflow-y: hidden;
	/*文本平铺*/
	text-align: justify;
	/*背景颜色*/
	background: #F4F5F6;
	padding: 0px 5px;
	margin-bottom: 10px;
	/*设置边距改变效果为内缩*/
	box-sizing: border-box;
}

.nav a {
	color: #505050;
	/*取消超链接下划线*/
	text-decoration: none;
	margin: auto 10px;
}

.nav::-webkit-scrollbar {
	/*隐藏滚动条*/
	display: none;
}

本文链接: http://www.dtmao.cc/news_show_150297.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?