ホームページ > 記事 > ウェブフロントエンド > HTML/CSS_html/css_WEB-ITnoseで実装されたリストページ
HTML/CSS_html/css_WEB-ITnoseで実装されたリストページ
- WBOYオリジナル
- 2016-06-24 11:44:231438ブラウズ
今日も休みです。日中は買い物に行ったり、友達とおしゃべりしたりすることがありませんでした。夕方になり、ネットサーフィンをするのは退屈だったので、今度は練習する時間だと思いました。上部にバナーがあり、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>
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。