网页设计之侧边框菜单栏的设计

网页设计之侧边框菜单栏的设计_第1张图片
通过学习17sucai网上的案例,我打算在网页左边设置以Iconfont为图标的菜单栏,通过之前的学习我们知道,菜单栏就是相当于链接的列表。首先我们第一步要完成从Iconfont网上找到我们需要的图标,根据我的需求——我的菜单需要有导入,维护,展示,任务管理以及权限管理这些功能,因此我在Iconfont找到这些图标。
网页设计之侧边框菜单栏的设计_第2张图片
我采用的引用这些图标的方法是第一种Unicode方法:(这种方法适用性最强,但是没有色彩)
首先通过Unicode方法得到font-face的代码(相当于引用到这些图标,并且把这些图标转换成字体,可以通过iconfont这个类去设置图标的属性,并且图标的代码就是名称下面那串):

@font-face {
  font-family: 'iconfont';  /* project id 1298408 */
  src: url('//at.alicdn.com/t/font_1298408_bdpdezgjt7n.eot');
  src: url('//at.alicdn.com/t/font_1298408_bdpdezgjt7n.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_1298408_bdpdezgjt7n.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_1298408_bdpdezgjt7n.woff') format('woff'),
  url('//at.alicdn.com/t/font_1298408_bdpdezgjt7n.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_1298408_bdpdezgjt7n.svg#iconfont') format('svg');
}

设置iconfont

.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;}

最后,选择合适的位置根据图标代码应用我们的图标。

3

现在我们拥有形状为这些图标的字体,下面我们来设置我们的侧边框:
尝试一个早上之后,发现怎样都不怎么好看。然后看别人的项目是集合Layui来设计,因此我想单独创建一个侧边框的项目来练习一下:
出现的问题有:
1.点击菜单链接按钮,按钮显示不完全
2.大小控制不好
反思:
先要自己想好一个“容器”套一个容器,依此的顺序是什么样子的,还有背景颜色设置,要在哪一个标签里面,配色可以找找网上优秀的例子来学习。
最后的成果:
网页设计之侧边框菜单栏的设计_第3张图片
代码如下:

.leftside-nav {
				list-style-type: none;
				margin:0 ;
				font-size: 14px;
				font-weight: 560;
				padding: 0;
				width: 200px;
				background-color: none;
			}
			
			.leftside-nav .leftside-nav-item {
				line-height: 40px;
			}


			.leftside-nav .leftside-nav-item a {
				display: block;
				color: darkslateblue;
				padding: 0px 16px;
				text-decoration: none;
			}
			
			.leftside-nav .leftside-nav-item a.active {
				color:  darkslateblue;
				background-color: transparent;
			}


			.leftside-nav .leftside-nav-item a:hover:not(.active) {
				color: white;
				background-color: darkslateblue ;
			}

你可能感兴趣的:(网页设计之侧边框菜单栏的设计)