為什么在網(wǎng)頁上測試是顯示三個頁面，正確不是一個嗎？？？
<!DOCTYPE html>
<html>
<head>
? ? <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
? ? <title>慕課七夕主題</title>
? ? <script src="http://img1.sycdn.imooc.com//down/55ac9a860001a6c500000000.js"></script>
? ? <style type="text/css">
? ? * {
? ? ? ? padding: 0;
? ? ? ? margin: 0;
? ? }
? ? ul,
? ? li {
? ? ? ? list-style-type: none;
? ? }
? ? /*主體部分*/
? ? #content {
? ? ? ? width ? ?: 60%;
? ? ? ? height ? : 60%;
? ? ? ? top ? ? ?: 20%;
? ? ? ? left ? ? : 20%;
? ? ? ? overflow : hidden;
? ? ? ? position : absolute;
? ? ? ? border ? : 1px solid #ccc;
? ? }
? ??
? ? .content-wrap {
? ? ? ? position: relative;
? ? }
? ? .content-wrap > li {
? ? ? ? width: 100%;
? ? ? ? height: 100%;
? ? ? ? background: #CAE1FF;
? ? ? ? color: red;
? ? ? ? float: left;
? ? ? ? overflow: hidden;
? ? ? ? position: relative;
? ? }
? ? li:nth-child(2) {
? ? ? ?background: #9BCD9B;
? ? }
? ?
? ? li:nth-child(3) {
? ? ? ?background: yellow;
? ? }
? ??
? ? </style>
</head>
<body>
? ? <div id='content'>
? ? ? ? <ul class='content-wrap'>
? ? ? ? ? ? <!-- 第一副畫面 -->
? ? ? ? ? ? <li> 頁面1 </li>
? ? ? ? ? ? <!-- 第二副畫面 -->
? ? ? ? ? ? <li> 頁面2 </li>
? ? ? ? ? ? <!-- 第三副畫面 -->
? ? ? ? ? ? <li> 頁面3 </li>
? ? ? ? </ul>
? ? </div>
? ? <script type="text/javascript">
? ? ? ? var container = $("#content");
? ? ? ? // 獲取第一個子節(jié)點
? ? ? ? var element = container.find(":first");
? ? ? ? // li頁面數(shù)量
? ? ? ? var slides = element.find("li");
? ? ? ? // 獲取容器尺寸
? ? ? ? var width = container.width();
? ? ? ? var height = container.height();
? ? ? ? // 設置li頁面總寬度
? ? ? ? element.css({
? ? ? ? ? ? width ?: (slides.length * width) + 'px',
? ? ? ? ? ? height : height + 'px'
? ? ? ? });
? ? ? ? // 設置每一個頁面li的寬度
? ? ? ? $.each(slides, function(index) {
? ? ? ? ? ? var slide = slides.eq(index); //獲取到每一個li元素 ? ?
? ? ? ? ? ? slide.css({
? ? ? ? ? ? ? ? width:width+'px',
? ? ? ? ? ? ? ? height:height+'px'
? ? ? ? ? ? })
? ? ? ? });
? ? </script>
</body>
</html>
2017-10-03
我也是誒，解決了嗎
2017-09-13
對，按了全屏按鈕后就是三行了，自己在網(wǎng)頁上測試只有一種顏色
2017-09-12
正確的是只有一個。你顯示3個是按了‘全屏’按鈕？ 即使是按了‘全屏’按鈕后的，也不是正確的。應該是豎著擺放的。