文档章节

下拉列表实现

hyssop
 hyssop
发布于 2014/12/08 15:43
字数 392
阅读 17
收藏 0

悲催不,我本来不想写,可是自我放弃显然不是自己的风格,但是在工作时间搞这个确实。。。生活不如意可以哭,更可以微笑面对。我选择后者。

 

下拉列表一直是最为常用的功能。代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>下拉列表</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
.nav{
 width: 400px;
 margin: auto;
}
.nav ul{
 list-style-type: none;
  
}
.nav ul li{
  float: left;
  width: 99px;
  background-color: #8bd400;
  margin-right: 1px;
  height: 30px;
  text-align: center;
  line-height: 30px;

}
ul,li{
 margin: 0px;
 padding: 0px;
 height: 30px

}
a{
 text-decoration: none;
 color: #2b3f00;
 display: block;
}
a:hover{
background-color: #6da203;
color: #e4ffd3;
}

</style>
</head>
<body>
 <div class="nav">
   <ul >
     <li><a href="#">首页</a></li>
     <li><a href="#">产品</a></li>
     <li><a href="#">留言</a></li>
     <li><a href="#">其它</a></li>
      </ul>
 <div>
  

</body>
</html>

整体思路就是盒子模型。讲ul套入到<div>里面。

第一个要解决的问题:是ul li模式是纵向列表如何改为横向列表。

.nav ul li{
  float: left;

第二个是解决是由于margin导致ul的宽度和li宽度和不同的现象。解决办法是

ul,li{
 margin: 0px;

这样ul的宽度和四个li的数值相等。

第三个要解决的问题

在<ul><li>结构里面会有不好看的逗点,那么采用ul部分增加list-style-type: none;删除。

第四个汉字的位置调整:

 height: 30px;
  text-align: center;
  line-height: 30px;

设置整个li的高度、行高、汉字居中。

display: block;//可以将汉字颜色传递到li层

 

© 著作权归作者所有

hyssop
粉丝 20
博文 102
码字总数 111521
作品 0
昌平
程序员
私信 提问
支持大数据渲染下拉列表组件开发 SuperSelect(基于antd Select)

功能简介 antd 的 Select 组件不支持大数据量的下拉列表渲染,下拉列表数量太多会出现性能问题, SuperSelect 基于 antd 封装实现,替换原组件下拉列表,只渲染几十条列表数据,随下拉列表滚...

千水南
05/23
0
0
一天搞定jQuery(五)——使用jQuery完成下拉列表左右选择

使用jQuery完成下拉列表左右选择 有这样一个需求,在(商品)分类的修改页面中,如下这样一个页面: 有某个分类下的所属的商品信息,我们应该可以对这些商品信息进行选择。即在修改分类的时候可...

yerenyuan_pku
2017/07/06
0
0
【Android笔记】Spinner

一、使用步骤 第一步:添加一个下拉列表项的list,这里添加的项就是下拉列表的菜单项 第二步:为下拉列表定义一个数组适配器(ArrayAdapter) 第三步:为适配器设置下拉列表下拉时的菜单样式...

大道无名
2016/09/28
24
0
UISearchBar的使用以及下拉列表框的实现

在IOS混饭吃的同志们都很清楚,搜索框在移动开发应用中的地位。今天我们就结合下拉列表框的实现来聊聊UISearchBar的使用。本人新入行的菜鸟一个,不足之处请多多指教。直接上代码。 UISearch...

开发问道
2013/02/22
6.9K
0
ajax 动态生成二级联动下拉列表

无限级二级菜单,越来越多的被应用,譬如省级->市级的二级菜单 思路:一级下拉列表select 绑定一个id, jqury获取到该下拉列表的checked属性值,通过ajax请求获取到该值所对应的二级内容,然...

喜欢敲代码的感觉
2014/10/28
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

vue 2打包注意点

使用npm run build打包之后往往直接本地运行,路径类似这样:http://127.0.0.1:5500/xa/dist/index.html 或者http://127.0.0.1:5500/dist/index.html。然后页面打开是空白的,打开控制台查看...

牧云橙
7分钟前
1
0
归并排序

1.原理图 2.代码 public static void merge(int []a,int left,int mid,int right){ int []tmp=new int[a.length];//辅助数组 int p1=left,p2=mid+1,k=left;//p1、p2是检测......

wen123
11分钟前
2
0
css实现透明的两种方法

一、opacity:0~1 值越高,透明度越低: div{opacity:0.5 } 选择器匹配到的节点们,包括节点们的孩子节点,都会实现%50透明,另 0.5 可直接写成 .5 二、rgba(0~255,0~255,0~255,0~1) r...

Bing309
14分钟前
2
0
Tomcat 配置访问路径

此处只是部署完成后idea打开的默认路径,并非项目部署路径, 此处才是项目实际部署路径,可以有多个项目部署路径,idea可以配置默认打开一个

Aeroever
17分钟前
2
0
将ApiBoot Logging采集的日志上报到Admin

通过ApiBoot Logging可以将每一条请求的详细信息获取到,在分布式部署方式中,一个请求可能会经过多个服务,如果是每个服务都独立保存请求日志信息,我们没有办法做到统一的控制,而且还会存...

恒宇少年
17分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部