css中如何控制页面横向用滚动条控制,而纵向用鼠标滚轮控制

html-css040

css中如何控制页面横向用滚动条控制,而纵向用鼠标滚轮控制,第1张

纵向使用鼠标滚轮控制:可以设置页面的长度大于显示屏分辨率(可以设置body的height参数为3000px),多余的部分就以鼠标滚轮查看。

横向滚动条控制:在内容div或者article中设置横向长度大于屏幕分辨率,或者在父盒子设置overflow:scroll,多出的部分就使用滚动条显示。

从网页的美观性和用户体验角度,最好设置页面单向(纵向滚动)。横向滚动用户体验效果不是很好。

横向排列相当于文字绕排的处理

一、table中有属性align设置值为left则如果下一个表格的宽度加当前表格宽度不超过当前区域的宽度则横排例如:

<table width="300" border="1">

<tr>

<td><table width="100" border="1" align="left">

<tr>

<td> </td>

</tr>

</table>

<table width="100" border="1">

<tr>

<td> </td>

</tr>

</table></td>

</tr>

</table>

二、DIV+css横排

同一的绕排原理,DIV的样式中有float:left和float:right可以实现绕排.例如(例子中使用了边框样式,为了明显表达效果):

<div style="width:400pxborder:#FF0000 1px solid">

<div style="width:198pxfloat:leftborder:#000000 1px solid">测试文字</div>

<div style="width:198pxborder:#000000 1px solidfloat:right">测试文字2</div>

</div>

将ul里面的li标签都设置为右浮动即可。如:

<ul style="overflow:hidden display:block">

    <li class="float:right padding:10px>项目1</li>

    <li class="float:right padding:10px>项目1</li>

    <li class="float:right padding:10px>项目1</li>

    <li class="float:right padding:10px>项目1</li>

</ul>