html 如何将下面的图片改成横排显示啊!!

html 如何将下面的图片改成横排显示啊!!,第1张

<!--f4--><divclass="f11"><ahref="/a/n/hd/"><imgsrc="/templets/default/theme/bg/1_07.gif"></a>

</div>

<!--f4--><divclass="page"><divclass="dede_pages"><ulclass="pagelist">

<li style="float:left"  >首页</li>

<li style="float:left"    class="thisclass">1</li>

<li style="float:left"  ><ahref='list_11_2.html'>2</a></li>

<li style="float:left"  ><ahref='list_11_2.html'>下一页</a></li>

<li style="float:left"  ><ahref='list_11_2.html'>末页</a></li>

<li style="float:left"  ><selectname='sldd'style='width:34px'onchange='location.href=this.options[this.selectedIndex].value'><optionvalue='list_11_1.html'selected>1

  </option>

  <optionvalue='list_11_2.html'>2

  </option>

  </select>

</li>

<li style="float:left"  ><spanclass="pageinfo">共 <strong>2</strong>页<strong>13</strong>条</span></li>

</ul>

</div>

</div>

</div>

<!--s3 end--><!--footer-->

</div>

<!--footer--><divclass="bottom">

</div>

横排显示添加 float:left样式即可

HTML页面图片横向滚播效果:

<html>

<head>

<style>

body{margin:0px}

ul{list-style:noneborder:0padding:0pxmargin:0px}

li{list-style:nonefloat:leftborder:0padding:0pxmargin:0px}

img{border:0px padding:0pxmargin:0px}

</style>

</head>

<body>

<center><div id="div1" style="overflow:hiddencursor:handmargin-top:50px" onmouseover="stop()" onmouseout="ss()">

<ul id="img" style="clear:both"><!--放图片的容器,此容器在div1里滚动-->

<!--以下是要滚动的内容-->

<li><img id="img0" src="http://www.alixixi.com/images/index180.gif" width="100" height="100" style="display:block" /></li>

<li><img id="img1" src="http://www.alixixi.com/images/index180.gif" width="100" height="100" style="display:block" /></li>

<li><img id="img2" src="http://www.alixixi.com/images/index180.gif" width="100" height="100" style="display:block" /></li>

<li><img id="img3" src="http://www.alixixi.com/images/index180.gif" width="100" height="100" style="display:block" /></li>

</ul>

</div>

</center>

<script language="javascript">

var w,h,id,speed,Html

w=400//-------滚动容器的宽度--------//

h=100//-------滚动容器的高度--------//

id="div1"//-------滚动容器的id--------//

direction="left"//-------滚动方向有四个值

1、新建html文档。

2、书写hmtl代码。 <!-- 横向排列 -->  ,  <div id="nav">,<div id="box1">1</div>,<div id="box2">2</div>,<div id="box3">3</div>,</div>。

3、初始化css代码。<style>*{margin:0padding:0font-size:12pxfont-family:'Microsoft YaHei'},  </style>。

4、书写总体的css代码。

5、代码整体结构。

6、查看效果。


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/zaji/7074734.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-01
下一篇 2023-04-01

发表评论

登录后才能评论

评论列表(0条)

保存