Home >Web Front-end >HTML Tutorial >A list page implemented by HTML/CSS_html/css_WEB-ITnose
A list page implemented by HTML/CSS_html/css_WEB-ITnose
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
- 2016-06-24 11:44:231474browse
It’s another day off. During the day, I went shopping with my friends and chatted. It was evening and the Internet was boring, so I thought it was time to practice.
This time I made one On the page, there is a banner at the top. A jQuery logic is used to determine that when the initial top value of the banner is less than the top value of the window, the top of the banner is designated as 0px pixels.
The middle of the page is made with ul li div nesting List can be used as a template to read data in the background to generate a product display page. There is no pagination or sidebar. The style is a bit ugly, I can’t help it, it’s not as good as the designer’s, and I hope an expert can give me some advice.
Below are the codes and renderings
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>