这个效果怎么弄？_html/css_WEB-ITnose-html教學-PHP中文網

首頁

web前端

html教學

这个效果怎么弄？_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 09:32 AM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><style>.overdiv{width:920px;overflow:hidden;background-color:#fff;font-size:12px;border:1px solid #ccc;}.overdiv ul{list-style:none;width:920px;margin:0;padding:0;}.overdiv li{width:270px;height:18px;margin-right:10px;padding-top:10px;padding-left:12px;line-height:15px;overflow:hidden;}</style></head><body><div class="overdiv"><ul id="aki"><li>1.AAAAAAAA</li><li>2.BBBBBBBB</li><li>3.CCCCCCCC</li><li>4.DDDDDDDD</li><li>5.EEEEEEEE</li><li>6.FFFFFFFF</li><li>7.GGGGGGGG</li><li>8.HHHHHHHH</li><li>9.KKKKKKKK</li></ul></div></body></html>

效果:

1.AAAAAAAA  4.DDDDDDDD 7.GGGGGGGG

2.BBBBBBBB  5.EEEEEEEE 8.HHHHHHHH

3.CCCCCCCC  6.FFFFFFFF 9.KKKKKKKK

回复讨论(解决方案)

li加上float:left;

改成

1.AAAAAAAA

2.BBBBBBBB

3.CCCCCCCC

4.DDDDDDDD

5.EEEEEEEE

6.FFFFFFFF

7.GGGGGGGG

8.HHHHHHHH

9.KKKKKKKK

用表格比较方便

改成

1.AAAAAAAA

2.BBBBBBBB

3.CCCCCCCC

4.……

++++++1

改成

1.AAAAAAAA

2.BBBBBBBB

3.CCCCCCCC

4.……

这样把程序写死了，做循环怎么写？

所以采用我的方法，只在li设float:left; 加上你原来设置的宽度这样就会3个成1行第4个因为没位置了就会自动换到第二行如此重复，其他代码可以不去动

汗仔细看了你是要纵列！！！我想想

如果是想用一个ul来实现上面的话你可以改变里面的内容，li里面的内容比如这样：

1.AAAAAAAA

4.DDDDDDDD

7.GGGGGGGG

2.BBBBBBBB

5.EEEEEEEE

8.HHHHHHHH

3.CCCCCCCC

6.FFFFFFFF

9.KKKKKKKK

然后设置他的宽度，宽度不够的时候他会自动换行的。当然这样写是写死了的。如果要是导航栏那一类可以写死了的话，是可以这样写的

这个有点难。

i%3相同即可。但是2楼那个更好点，只是标签那个啥，滥用。

1....

2....

3....

如果是想用一个ul来实现上面的话你可以改变里面的内容，li里面的内容比如这样：

1.AAAAAAAA

4.DDDDDDDD

7.GGGGGGGG

2.BBBBBBBB

5.EEEEEEEE

8.HHHHHHHH

3.CCCCCCCC

6.……

如果是想用一个ul来实现上面的话你可以改变里面的内容，li里面的内容比如这样：

1.AAAAAAAA

4.DDDDDDDD

7.GGGGGGGG

2.BBBBBBBB

5.EEEEEEEE

8.HHHHHHHH

3.CCCCCCCC

6.F……

这个数据是循环读出来的。

如果是想用一个ul来实现上面的话你可以改变里面的内容，li里面的内容比如这样：

1.AAAAAAAA

4.DDDDDDDD

7.GGGGGGGG

2.BBBBBBBB

5.EEEEEEEE

8.HHHHHHHH

3.CCCCCCCC

6.F……

不是导航栏是一个列表哦

改成横排
要不就写死宽度，固定几列。
要不很难写，只能js动态控制

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

纵排
<script></script>
<script> <br /> $(function(){ <br /> $main_li = $(".main>ul>li"); <br /> for(i=0; i<$main_li.length; i++) { <br /> if(i%3 == 0) { <br /> $main_li.eq(i).css({"left":(i/3)*200 +"px", "top":"0px"}); <br /> } <br /> if(i%3 == 1) { <br /> $main_li.eq(i).css({"left":((i-1)/3)*200 +"px", "top":"30px"}); <br /> } <br /> if(i%3 == 2) { <br /> $main_li.eq(i).css({"left":((i-2)/3)*200 +"px", "top":"60px"}); <br /> } <br /> } <br /> }) <br /> </script>

1.AAAAAAAA
2.BBBBBBBB
3.CCCCCCCC
4.DDDDDDDD
5.EEEEEEEE
6.FFFFFFFF
7.GGGGGGGG
8.HHHHHHHH
9.IIIIIIII

so easy

上面再完善下，给li的样式加个防止溢出的样式，改后
.main li{position:absolute; width:180px; padding:0px 10px; overflow:hidden;}

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

HTML和代碼：仔細觀察術語Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代碼” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代碼”代碼“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract

HTML，CSS和JavaScript：Web開發人員的基本工具Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web開發的三大支柱。 1.HTML定義網頁結構，使用標籤如、等。 2.CSS控製網頁樣式，使用選擇器和屬性如color、font-size等。 3.JavaScript實現動態效果和交互，通過事件監聽和DOM操作。

HTML，CSS和JavaScript的角色：核心職責Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

HTML容易為初學者學習嗎？Apr 07, 2025 am 12:11 AM

HTML適合初學者學習，因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩，易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高，可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

HTML中起始標籤的示例是什麼？Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。