网页技巧用UL实现非Table四行三列布局

2016-02-19 17:23 16 1 收藏

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

【 tulaoshi.com - Web开发】

　　先看看效果：

　　效果图

　　下面是源代码：

htmlheadtitletest/titlestyle 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/headbodyulli&nbsp;/lili&nbsp;/lili class="border-r"&nbsp;/li/ululli&nbsp;/lili&nbsp;/lili class="border-r"&nbsp;/li/ululli&nbsp;/lili&nbsp;/lili class="border-r"&nbsp;/li/ululli class="border-b"&nbsp;/lili class="border-b"&nbsp;/lili class="border-l"&nbsp;/li/ul/body/html

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

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

上一篇：数据库规范化技巧
下一篇：优化你的网站--三大网页辅助工具简介

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

网页制作学习：用CSS创建三栏页布局

标签： Web开发

三栏布局是目前最常见的网页布局，主要页内容放在中间一栏，边上的两栏放置导航链接之类的内容。基本布局一般是标题之下放置三栏，三栏占据整个页面的宽度，最后在页的底端放置页脚，页脚也占据整个页面宽度。绝大多数网页设计者都熟悉传统的网页设计技术，用这些技术可以生成带有表格、创建固定宽度...

CSS网页布局实例:三栏等高布局

标签： Web开发

首先，三栏等高布局，顾名思义，可以概括为以下特征： 1、3列（白痴也知道） 2、这3列高等相等 3、这3列的高度不是固定不变，而是随着内容的变化而变化 Step 1: xhtml代码： div id="header"#header/div div id="container" ...

CSS高级技巧:网页布局

标签： Web开发

上一篇 CSS教程文章：CSS高级技巧:文字环绕图片布局 CSS至关重要的作用, CSS的设计初衷. CSS布局和几年前table横行时的布局又不太一样, 在结构化语义化的HTML文档后面, CSS在格式化文档的渲染效果, 把结构化文档用表现化语言来描述. 简而言之, 就是CSS不需要表现性标签! CSS布局技术依赖于三个基本概念: 定位, 浮动, margin操纵. 布局...

网页布局 CSS简单实现垂直居中

标签： Web开发

英文原文： http://www.search-this.com/2008/05/15/easy-vertical-centering-with-css/ 中文译文： http://www.12sui.cn/blog/71.html 本人英语还没过四级，所以不能说是翻译把，只能说是按照自己的理解去叙述了一遍作者的意思，请各位多多指教。译文内容：当你发觉你曾经以为的事实其实并不是那样，你会感觉很开心。旧的方法 ...

CSS初学者入门:使用table布局网页不明智

标签： Web开发

使用Table布局页面为什么是不明智的？大家看到标题，不要误解认为在页面中不能使用Table，而是可以使用Table，但是尽量不要用Table去布局页面，为什么这么说呢，因为使用Table布局页面会使页面失去灵活性，怎么个灵活法呢，比如今天你好不容易做出来的页面，第二天老板说我不喜欢登录模块放到右边，还是放到左边，通知板块放...

查看更多精彩>>