ホームページ > ウェブフロントエンド > htmlチュートリアル > HTML/CSS_html/css_WEB-ITnoseで実装されたリストページ

HTML/CSS_html/css_WEB-ITnoseで実装されたリストページ

WBOY
リリース: 2016-06-24 11:44:23
オリジナル
1458 人が閲覧しました

今日も休みです。日中は買い物に行ったり、友達とおしゃべりしたりすることがありませんでした。夕方になり、ネットサーフィンをするのは退屈だったので、今度は練習する時間だと思いました。上部にバナーがあり、jQuery のロジックにより、バナーの上部の初期値がウィンドウの上部の値より小さい場合、バナーの上部が 0px ピクセルとして指定されると決定されます。 page は ul li div ネストで作成されたリストで、バックグラウンドでデータを読み取って商品を表示するためのテンプレートとして使用できます。ページネーションやサイドバーはありません。スタイルは少し醜いですが、デザイナーの作品には及ばないので仕方ありません。専門家にアドバイスをいただければと思います。

コードとレンダリングは以下の通りです

  1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  2 <html xmlns="http://www.w3.org/1999/xhtml">  3 <head>  4     <title></title>  5     <script src="jquery-1.8.3.js" type="text/javascript"></script>  6     <style>  7         body {  8             background-color: #e5e7e8;  9         } 10  11         #demoFixed { 12             position: fixed; 13             width: 100%; 14             right: 0%; 15             height: 50px; 16             opacity: 0.6; 17             background-color: red; 18             text-align: center; 19             box-shadow: 6px 10px 10px #808080; 20             border-radius: 10px 10px 10px 10px; 21             letter-spacing: 5em; 22             display: inline-block; 23             line-height: 50px; 24         } 25  26         #uu { 27             text-align: center; 28             list-style-type: none; 29             margin-top: 40px; 30         } 31  32             #uu .lli li { 33                 display: inline-block; 34                 padding-left: 10px; 35                 list-style-type: none; 36                 text-align: center; 37                 line-height: 30px; 38             } 39  40                 #uu .lli li div { 41                     width: 120px; 42                     height: 150px; 43                     display: inline-block; 44                     text-align: center; 45                     line-height: 150px; 46                     transition: border-radius 0.5s, box-shadow 0.5s,line-height 0.5s, background-color 0.5s; 47                 } 48  49                     #uu .lli li div:hover { 50                         cursor: pointer; 51                         border: 1px solid #ff6a00; 52                         border-radius: 40px 40px 40px 40px; 53                         background-color: #ff6a00; 54                         box-shadow: 10px 10px 20px #ff6a00; 55                     } 56     </style> 57     <script type="text/javascript"> 58         $(function () { 59             var aa = $("#demoFixed"); 60             var wistart = $(aa).offset().top; 61             $(window).bind("scroll", function () { 62                 var wi = $(window).scrollTop(); 63                 //  $(aa).css("display", ((wistart) > wi) ? "fixed" : "absolute"); 64                 $(aa).css("top", ((wi) > wistart) ? '0px' : ''); 65             }); 66         }) 67     </script> 68 </head> 69 <body> 70     <div id="demoFixed"> 71         haha你好吗Walcome 72         <input type="button" style="opacity:0.8; margin-top:-240px;" value="案例" /> 73     </div> 74     <ul id='uu'> 75         <li class="lli"> 76             <ul> 77                 <li><div>马达加斯加</div></li> 78                 <li><div>马达加斯加</div></li> 79                 <li><div>马达加斯加</div></li> 80                 <li><div>马达加斯加</div></li> 81                 <li><div>马达加斯加</div></li> 82             </ul> 83         </li> 84         <li class="lli"> 85             <ul> 86                 <li><div>马达加斯加</div></li> 87                 <li><div>马达加斯加</div></li> 88                 <li><div>马达加斯加</div></li> 89                 <li><div>马达加斯加</div></li> 90                 <li><div>马达加斯加</div></li> 91             </ul> 92         </li> 93         <li class="lli"> 94             <ul> 95                 <li><div>马达加斯加</div></li> 96                 <li><div>马达加斯加</div></li> 97                 <li><div>马达加斯加</div></li> 98                 <li><div>马达加斯加</div></li> 99                 <li><div>马达加斯加</div></li>100             </ul>101         </li>102         <li class="lli">103             <ul>104                 <li><div>马达加斯加</div></li>105                 <li><div>马达加斯加</div></li>106                 <li><div>马达加斯加</div></li>107                 <li><div>马达加斯加</div></li>108                 <li><div>马达加斯加</div></li>109             </ul>110         </li>111         <li class="lli">112             <ul>113                 <li><div>马达加斯加</div></li>114                 <li><div>马达加斯加</div></li>115                 <li><div>马达加斯加</div></li>116                 <li><div>马达加斯加</div></li>117                 <li><div>马达加斯加</div></li>118             </ul>119         </li>120     </ul>121 </body>122 </html>
ログイン後にコピー

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート