CSS如何显示一个从左上角开始展开的弹窗，最终是显示在屏幕中间，思路是什么，请大神指导下。

html-css016

CSS如何显示一个从左上角开始展开的弹窗，最终是显示在屏幕中间，思路是什么，请大神指导下。,第1张

思路应该是一个从0%到100%的动画展开的效果，大概需要写0%，50%，100%三个样式。 弹窗的css代码大概是:position: fixedz-index: 2000left: 0top: 0这样弹窗的左上角原点在页面最左上角，如果要调整位置要用CSS变换特效(transform)的平移translate函数达到目的: translate(x, y)（长度值或者百分比）：在水平方向、垂直方向平移元素。    translateX(value)：水平方向平移。    translateY(value)：垂直方向平移。    scale(x, y)、scaleX(value)、scaleY(value)：在水平方向、垂直方向或者两个方向上缩放元素。    rotate()、rotateX()、rotateY()、rotateZ()：rotate支持3D效果，可在x、y、z轴上旋转元素。    skew()、skewX()、skewY()：在水平方向、垂直方向或者两个方向倾斜一定的角度。  另外弹窗展开的动画要用到css3的动画属性:    animation-delay：设置动画开始前的延迟时间。    animation-direction：设置动画循环播放的时候是否方向播放，包含normal和alternate两个值。    animation-duration：设置动画播放持续的时间。    animation-interacion-count：设置动画的播放次数，可以为具体数据或者无限循环关键字infinite。    animation-name：指定动画名称。    animation-play-state：允许动画暂停和重新播放，包含running、paused。    animation-timing-function：指定如何计算中间动画值，

只能通过JS脚本来弄，样式无法做到，想实现的话那就在再作div的嵌套，利用123嵌入一个div内，4再嵌入一个div内

其实楼主的想法是完全没有意义的，怎么说呢，因为绝大部分页面我们只要求宽度自适应，就如楼主所提到的第一个横排换行，可以根据float:left样式属性来布局，页面窄了就换行，宽了下排的就补上去，从而达到页面的美观；还有就是用户使用浏览器的习惯，鼠标滚轮是可以让页面上下滚动的，虽然左右滚动也可以，但是需要按住滚轮来操作，这个大部分用户是不习惯使用的，有滚动都是通过拖动滚动条来浏览；当然为什么样式只有横向可以换行一时半会也说不清楚，原因有很多，其中人们的操作习惯很重要

楼主的第二个想法已经说明楼主已经在认真的学习了，对于这个问题的思考是值得表扬的，不过楼主不用再继续考虑这个问题了，你做页面只需要关注横向就行了

根据你的图片里面的代码我重新写了一遍并做了一些修改，代码如下：

<style type="text/css">

body{ margin:0 padding:0 background:url(images/E4%B8%9C%E9%98%B2%E.png) no-repeat font:12px/40px "Stout Deco" color:#fff}

#zongti{ width:1400px}

#boo{ float:left margin:0 padding:0 list-style-type:none}

#boo li{ float:left}

#boo li.booimg{ margin:10px 10px 0px 10px}

.aoo{ float:right margin:0 padding:0 list-style-type:none}

.aoo li{ float:right margin-right:15px}

#boo a,.aoo a{ text-decoration:none color:#fff}

</style>

</head>

<body>

 <div id="zongti">

  <ul id="bobo">

   <li><a href="#"><img src="images/头像.png" width="36" height="36" /></a></li>

   <li><a href="#">Username</a></li>

  </ul>

  <ul class="aoo">

   <li><a href="#"><img src="images/其他.png" width="36" height="36" /></a></li>

   <li><a href="#">Conloct</a></li>

   <li><a href="#">Journal</a></li>

   <li><a href="#">About</a></li>

   <li><a href="#">Work</a></li>

  </ul>

 </div>

</body>

先指出你一个很明显的错误，就是id重复调用了，如果你不了解id是怎么回事那就老老实实用class好了；我这里也大概写了一个参照例子，你自己注意一下，其他问题就不多说了，都是些小问题，以后学习过程中一般都能改过来，至于控制左上角图片位置也不是很难，最简单的就是调整#boo li.booimg{ margin:10px 10px 0px 10px} 这段样式的值就好了

其实，如果你刚学不久的话对样式使用不熟悉，那就干脆用绝对定位 position:absolute把位置定死好了，而且绝对定位你想怎么调整位置就怎么调整，出错率并不大，只不过对页面调整性差了点而已，但是这对于新手而言问题不大