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

2016-02-19 14:32 33 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格式的网页文档就能看到效果了。

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

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

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

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; ...

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%;...

用Class组合实现Div+CSS布局

标签： Web开发

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

WPS如何批量实现一列一行加减乘除

标签： wps教程 wps office教程

WPS如何批量实现一列一行加减乘除对于这个问题我们自然想到了利用，当你利用工式输入A1=A1+8时，你会得到EXCEL的一个警告：WPS表格不能计算该公式只有自己想办法了，这里介绍一种简单的方法：第一步: 在想要修改的列(假设为A列)的旁边，插入一个临时的新列(为B列)，并在B列的第一个单元格(B1)里输入8。 2、把鼠标放...

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

标签： Web开发

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

查看更多精彩>>