用UL实现非Table四行三列布局

2016-02-19 14:32 32 1 收藏

生活已是百般艰难,为何不努力一点。下面图老师就给大家分享用UL实现非Table四行三列布局，希望可以让热爱学习的朋友们体会到设计的小小的乐趣。

【 tulaoshi.com - Web开发】

　　先看看效果：

　　下面是源代码：

html
head
titletest/title
style type="text/css"
ul{
margin:0px;
padding:0px;
width:200px;
}
ul li{
float:left;
list-style-type:none;
border-top:#000 solid 1px;
                border-left:#000 solid 1px;
width:65px;
}
.border-r{
               border-right:#000 solid 1px;
                }
.border-b{
               border-bottom:#000 solid 1px;
                }
.border-l{
               border-right:#000 solid 1px;
               border-bottom:#000 solid 1px;
                }
/style
/head
body
ul
li /li
li /li
li class="border-r" /li
/ul
ul
li /li
li /li
li class="border-r" /li
/ul
ul
li /li
li /li
li class="border-r" /li
/ul
ul
li class="border-b" /li
li class="border-b" /li
li class="border-l" /li
/ul
/body
/html

　　将上面的代码保存成html格式的网页文档就能看到效果了。

来源:https://www.tulaoshi.com/n/20160219/1607173.html

上一篇： CSS顶级技巧
下一篇： Windows 8资源监视器怎么用？

看过《用UL实现非Table四行三列布局》的人还看了以下文章更多>>

使用 JavaScript 获取 table 行号和列号

标签： Web开发

怎样获取预定义的table的行号和列号呢？很简单，只需要了解table的几个属性值用法即可。Table的总行数可以通过标记“tr”得到，但是table的列数却不能直接获取，它需要借助rows通过标记“th”和“td”得到。为了更直观，下面以示例来说明如何得到行号和列号。点击Id为'MyTable'的表格的任意单元时，返回该单元的行号和列号！...

CSS布局实例代码:两列布局实例

标签： Web开发

CSS两列布局，右侧固定，左侧自适应宽度div style="width:90%; margin:0 auto;" div style="width:200px; float:right;"这是右侧的内容/div div style=" margin-right:210px;"这是左侧的内容，自适应宽度/div /divCSS两列布局，左侧固定，右侧自适应宽度div style="width:90%;...

CSS三行三列DIV高度自适应的设置

标签： Web开发

用脚本控制三行三列div高度自适应的设置方法，其实不必如此麻烦，只要给父div设置一个固定高度，比如10px,其子div的height:100%就可实现高度自适应，不信，看代码： head style body { font-family: arial, helvetica, sans-serif; color: black; margin: 5px; background:#ffc url(d:/8767a.gif) repeat-y; padding: 0; ...

用javascript/css实现GridView行背景色交替、点击行变色

标签： Web开发

面是代码，注释应该还算比较详细，比较适合初学者，可以把下面两个文件的代码直接复制到你的项目中直接执行。最下面有文件的下载地址，也可以直接下载后运行，代码在IE7和Firefox2下测试通过，有任何问题，请在下面留言，我将尽量及时回复。 BackgroundColor.aspx 主要包含一个GridView，是我们折腾的重点对象，还有一堆javascr...

用Class组合实现Div+CSS布局教程

标签： Web开发

现在编写xhtml，我们强烈不推荐此种方法，应该是id，class综合应用。此文章只是讲述一种思维，并非建站过程中的方法！用标准件的方式来组装网页DIV布局。我把class分为2种：布局class；风格class。布局class是骨架，风格class是衣服。举个例子：比如布局中的左栏。首先它的属性有：是左栏，宽度，背景颜色，字体颜色等。 1、首先会定义一...

查看更多精彩>>