DIV+CSS 中UL,LI的运用

2016-02-19 17:00 7 1 收藏

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

【 tulaoshi.com - Web开发 】

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

(本文来源于图老师网站,更多请访问http://www.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;
  }

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

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

来源:http://www.tulaoshi.com/n/20160219/1613820.html

延伸阅读
标签: Web开发
CSS+DIV 是网站标准(或称WEB标准)中常用的术语之一,通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用css+div的方式实现各种定位。应用应用DIV+CSS编码时很容易犯一些错误。本文列举了一些常见的错误: 1. 检查HTML元素是否有拼写错误、是否忘记结束标记 ...
标签: Web开发
div+css实现圆角边框,在网络上查看了一下,很多都是实现圆角的矩形的方法,我在这里介绍的是实现圆角矩形边框的方法。 用代码说明问题: html head style #a{ border-left:1px #333 solid; border-right:1px #333 solid; width:300px; height:500px; } .b{ height:1px; overflow:hidden; border-left:1px #333 solid; border-right:1px #333...
标签: Web开发
你正在学习CSS布局吗?是不是还不能完全掌握纯CSS布局?通常有两种情况阻碍你的学习: 第一种可能是你还没有理解CSS处理页面的原理。在你考虑你的页面整体表现效果前,你应当先考虑内容的语义和结构,然后再针对语义、结构添加CSS。这篇文章将告诉你应该怎样把HTML结构化。 另一种原因是你对那些非常熟悉的表现层属性(例如:cellpadd...
标签: Web开发
“重构”的春风吹遍大江南北,互联网一时间风声鹤唳,“div+CSS”俨然已成为一种“时尚”,难以尽数的网站都不约而同地开始了自己的“重构”。然而打开这形形色色网站的源代码,却时常令人哑然失笑—— 我们看到有嵌套6、7层的div布局,有不用table的表格,有纯div+a构成的页面,有成百上千的表现层class……现在关于标准的书籍越来越...
    业界越来越关注DIV+CSS的标准化设计,大到各大门户网站,小到不计其数的个人网站,在Div+CSS标准化的影响下,网页设计人员已经把这一要求作为行业标准。那么什么是Div+CSS标准?Div+CSS的标准化设计到底有什么好处?      Div 全称 division 意为“区分”使用 DIV 的方法跟使用其他 tag 的方法一样。 &...

经验教程

152

收藏

83
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部