DIV+CSS 中UL,LI的运用

wangjinpeng95

wangjinpeng95

2016-02-19 17:00

下面是个简单易学的DIV+CSS 中UL,LI的运用教程,图老师小编详细图解介绍包你轻松学会,喜欢的朋友赶紧get起来吧!

  在做导航条或产品目录的样式都差不时习惯用到ul,在做圆角这样的图形我也喜欢,用到他们可以最小化减少DIV的套用。但有几个地方需要在CSS控制,不然会出现左边会出现很大的空边。

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

  下面是登陆窗口的CSS代码,为了避免DIV的嵌套,所以运用了DIV.开始未对ul进行定义,只对ul li进行定义,结果左边空出很大的空隔,看来偷懒是不行的。

  #login{
  width:217px;
  height:150px;
  margin:0;
  padding:0;
  border:#ff0000 solid 1px;
  }
  #login ul {
  list-style:none;
  margin:0px;
  padding:0px;
  }
  #login ul li{
  margin:0;
  padding:0;
  }
  #login #log_t{
  width:217px;
  height:36px;
  background:url('log_t.jpg') no-repeat;
  }
  #login #log_m{
  width:217px;
  height:63px;
  background:url('log_m.jpg') no-repeat;
  }
  #login #log_b{
  width:217px;
  height:49px;
  background:url('log_b.jpg') no-repeat;
  }

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

  今天发现ul里最好设置好padding和margin的值,不然IE和FIREFOX默认是有设置的。

展开更多 50%)
分享

猜你喜欢

DIV+CSS 中UL,LI的运用

Web开发
DIV+CSS 中UL,LI的运用

DIV+CSS中ID和CLASS

Web开发
DIV+CSS中ID和CLASS

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

DIV+CSS技术入门

Web开发
DIV+CSS技术入门

什么是DIV+CSS?

Web开发
什么是DIV+CSS?

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

Div+CSS布局入门

Web开发
Div+CSS布局入门

DIV+CSS常见的错误

Web开发
DIV+CSS常见的错误

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

QQ圈子是什么?

QQ圈子是什么?

深度探索C++对象模型(1)

深度探索C++对象模型(1)
下拉加载更多内容 ↓