HTML侧边栏菜单_html sidebar-程序员宅基地

HTML侧边栏菜单

在这里插入图片描述

用div做一个侧边菜单栏样式,没有导航功能,还没学会,大家不要介意。

在这里插入图片描述

HTML:

<div class="sidebar">
	<div class="tab"  id="cate0"><i class="reorder"></i> 全部教程</div>
 	<div class="design" id="cate1">
		<div class="navto-nav"><i class="imooc-icon"></i> HTML / CSS</div>
	</div>
	<div class="design" id="cate2">
		<div class="navto-nav"><i class="imooc-icon"></i> JavaScript</div>
	</div>
	<div class="design" id="cate3">
		<div class="navto-nav"><i class="imooc-icon"></i> 服务端</div>
	</div>
	<div class="design" id="cate4">
		<div class="navto-nav"><i class="imooc-icon"></i> 数据库</div>
	</div>
	<div class="design" id="cate5">
		<div class="navto-nav"><i class="imooc-icon"></i> 移动端</div>
	</div>
	<div class="design" id="cate6">
		<div class="navto-nav"><i class="imooc-icon"></i> XML 教程</div>
	</div>
	<div class="design" id="cate7">
		<div class="navto-nav"><i class="imooc-icon"></i> ASP.NET</div>
	</div>
	<div class="design" id="cate8">
		<div class="navto-nav"><i class="imooc-icon"></i> Web Service</div>
	</div>
	<div class="design" id="cate9">
		<div class="navto-nav"><i class="imooc-icon"></i> 开发工具</div>
	</div>
	<div class="design" id="cate10">
		<div class="navto-nav"><i class="imooc-icon"></i> 网站建设</div>
	</div>
</div>

CSS:

.sidebar{
    
	width:175px;
	border-color: #fffffff;
}
.tab{
    
	font-size:12px;
	height:27px;
	width:175px;
	background: #eeeeee;
	line-height: 27px; /*把line-height高度设置和height一样就可以让字体垂直居中*/
	border-width: 1px 1px 1px 1px;
	border-style: solid;
	border-color: #efefef;
	border-radius:2px 2px 0px 0px;
}
.reorder{
    
	margin-left:10px;
	content: url(tap.png);
}
.navto-nav{
    
	font-size:12px;
	height:45px;
	width:175px;
	background: #fbfbfb;
	line-height: 45px; /*把line-height高度设置和height一样就可以让字体垂直居中*/
	border-width: 0px 1px 1px 1px;
	border-style: solid;
	border-color: #efefef;
}
.imooc-icon{
    
	margin-left:10px;
	content: url(icon.png);
}

效果图:

在这里插入图片描述
知识点:

  1. 让文字在<div>中垂直居中的方法:设置line-height值跟height一样。
  2. border-width 边框像素值:top right bottom left
  3. border-radius 边框圆角值:top right bottom left
  4. <i>标签添加icon(图标),标签添加类选择器,代码格式为:imooc-icon{margin-left:10px;content: url(icon.png);}
border-style
dotted 点状
solid 实线
double 双实线
dashed 虚线

div就是一块区域,并且可以嵌套使用,侧边菜单栏的就是一个长方形的<div>里面有n个小的<div>

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_44589374/article/details/104663616

智能推荐

python:输入要查找的数,若在列表中找到,则返回其下标(索引)_python编写函数,根据关键字查询列表,返回下标。-程序员宅基地

文章浏览阅读3.4k次,点赞5次,收藏8次。废话不多说,直接上代码代码如下:nums = [1, 3, 5, 8, 8, 9, 10, 14, 15, 19, 19, 20, 25, 28, 29, 35, 37, 44, 49]w = int(input('请输入要查找的数据:'))while True: if w in nums: print(f'{w}的下标为{nums.index(w)}') break else: print('找不到该数据') .._python编写函数,根据关键字查询列表,返回下标。

【bzoj3555】[Ctsc2014]企鹅QQ_一个企鹅船新体验-程序员宅基地

文章浏览阅读701次。题目描述:PenguinQQ是中国最大、最具影响力的SNS(Social Networking Services)网站,以实名制为基础,为用户提供日志、群、即时通讯、相册、集市等丰富强大的互联网功能体验,满足用户对社交、资讯、娱乐、交易等多方面的需求。小Q是PenguinQQ网站的管理员,他最近在进行一项有趣的研究——哪些账户是同一个人注册的。经过长时间的分析,小Q发现同一个人注册的账户名_一个企鹅船新体验

LuaXml使用_lua操作xml格式文件-程序员宅基地

文章浏览阅读1k次。LuaXml使用版本Lua 5.3写入再读取XML操作xml = require('LuaXml')local xNewFile = xml.new()-- 一级标题xNewFile[0] = "CATALOG"--[[-- 再增加一级标题写法local describ = {"Empire Burlesque"}local price = {30}local title..._lua操作xml格式文件

数据库高级语言-开窗函数-行转列-listagg_listagg over partition-程序员宅基地

文章浏览阅读942次。一,开窗函数:为了解决复杂的子查询引入进来的,开窗函数也是对行集组进行聚合计算的,并且它返回是多个值,目前oracle db2 sqlserver都支持,但是mysql不支持1.row number() over partition by :分组排名SELECT ORDER_NUMBER, PRODUCT_TYPE, ROW_NUMBER() OVER ( PARTITION BY O..._listagg over partition

Java文本框内文字显示不同颜色、字号等属性【函数调用一键实现】_java编写多线程聊天室时改变不同信息的字体颜色-程序员宅基地

文章浏览阅读6.8k次,点赞35次,收藏8次。Hello!你好哇,我是灰小猿!最近在做聊天室相关项目的开发的时候,需要对文本框中的字体进行区别显示,但是由于JTextArea文本框属于纯文本形式的,无法对其中的文本进行不同格式的显示,所以这个时候就需要使用JTextPane文本域进行文本内容的显示了。其主要原因是:JTextPane文本域中可以设置html样式JTextArea文本框不可以设置html样式这就造成了JTextPane文本域中的内容可以根据需要自行设置属性,从而实现不同文字内容的颜色、字号等属性。通过以下函数可以直_java编写多线程聊天室时改变不同信息的字体颜色

Ubuntu 16.04无法登录图形界面_ubuntu16.04图形界面登录失败-程序员宅基地

文章浏览阅读3k次。Ubuntu 16.04无法登录图形界面0、分析个人猜测,这个问题,有可能是图形界面文件受损,或者没有安装图形界面,或者图形界面没有设置默认Ubuntu开机启动1、方法1:重装Ubuntu图形界面(1)、如果不知道是否安装了图形界面,可以通过下面指令测试出:sudo apt-get install ubuntu-desktop如果存在安装了的图形界面,那么会有信息提示(2)、卸载图形界面sudo apt-get --purge remove ubuntu-desktop上面这条命令操作_ubuntu16.04图形界面登录失败

随便推点

Linux运维之(三)Samba服务器原理及安装配置_linux操作系统samba的工作原理-程序员宅基地

文章浏览阅读1.7k次。Samba服务器原理及安装简介Samba是在Linux系统上实现SMB(Session MessageBlock)协议的一个免费软件,以实现文件共享和打印机服务共享。服务器组件samba有两个主要的进程smbd和nmbd。smbd进程提供了文件和打印服务,而nmbd则提供了NetBIOS名称服务和浏览支持,帮助SMB客户定位服务器,处理所有基于UDP的协议。安装[root@..._linux操作系统samba的工作原理

异步FIFO(verilog简单实现)_verilog 简单fifo-程序员宅基地

文章浏览阅读273次。对其他网友的代码进行了改进纠正,使代码更加完整,并用vivado2020.1进行了仿真测试源代码(不到100行):`timescale 1ns/1psmodule test #(parameter data_width =4,depth =8,addr_width=3)( wclk,rst_w,w_en,din,w_ptr, rclk,rst_r,r_en,dout,r_ptr, fifo_empty,fifo_full);input wclk,rst_w,w_en;i_verilog 简单fifo

怎样用异或查找出多出的字母_已知异或怎么求字符-程序员宅基地

文章浏览阅读2.1k次。今天刷leetcode,遇到了一道题,很有意思,就是给了俩字符串,一个A,一个B,字符串B是这样子的,先把字符串A打乱,然后随机在A中加入一个任意字母,就变成了B。问加入的是啥字母?   举个例子:   A:“abc”   B:“cbea”   那么很明显,加入的字母是e。如何求出来呢?   这里介绍一种非常简答的方法,就是使用异或。   因为字母是char类型,char类型可以当做in_已知异或怎么求字符

计算机驱动空间的c盘不足怎么办,c盘空间不足-程序员宅基地

文章浏览阅读5.7k次。c盘空间不足怎么办?尽管现在的硬盘普通都已以T记,但系统分区一般我们还是分得比较小的,电脑久用未清理时较常出现安装软件或运行程序时会提示空间不足,或磁盘空间不够的提示,那么出现c盘空间不足怎么解决呢?下面就来简单介绍一下。c盘空间不足解决一: 将页面分区文件移到其它分区1、将系统页面文件从C盘移走,该文件比较大:2、右击“计算机”,选择“属性”:3、在弹出的“系统属性”对话框中,选择“高级”选项卡..._驱动器c空间不足怎么办

CSS3各个模块详解-程序员宅基地

文章浏览阅读2.2k次。一, CSS3 盒子 阴影 属性 box- shadow 也是 CSS3 新增 的 一个 重要 属性, 用来 定义 元素 的 盒子 阴影。inset: 阴影 类型, 可选 值。 如果不 设置, 其 默认 的 投影 方式 是 外 阴影; 如果 取其 唯一 值“ inset”, 就是 给 元素 设置 内 阴影。 x- offset: 阴影水平偏移量, 其值可以是正负值。 如果取正值, 则..._css3模块包括:盒子模型、列表模块、

layui upload 上传无反应_layui upload 超时时间-程序员宅基地

文章浏览阅读5.4k次,点赞2次,收藏2次。upload.js中://防止事件重复绑定 if(options.elem.data('haveEvents')) return; …… options.elem.data('haveEvents', true);第一次render之后,button '#selectFileBtn' 会被添加属性haveEvents 值为true;下一次render,haveEvents的值依然为tru..._layui upload 超时时间