|
用CSS实现分栏及弹出式窗口 2、clear：它与float同时使用，在空间足够的情况下，任何元素都会移动到浮动元素旁边，这时想让它清除，即让它保持在浮动元素下方。清除属性可理解为填满或补足浮动元素旁边的空间。 3、position定位： A、static(静态定位）：默认方式，自上而下相继排列。 B、relative(相对定位)：相对于文档流中正常自己位置移动元素，其它元素位置保持不变。 C、absolute(绝对定位)：将元素完全移出文档流，默认的定位环境为body。 D、fixed(固定定位)：页面滚动时固定定位的元素不会移动，像导航条。 4、定位环境：将元素的任何一个祖先元素的positon 设置为relative，就可使该祖先元素成为这个元素的定位元素。 5、display属性： A、块级元素(block)：如段落、标题、列表，显示时一个位于另一个上方，即下一行。 B、行内元素(inline)：如a、span、img，在一行内显示，若空间不够放到下一行。 C、display:none：不显示，不占用空间，而visibility:(visible,hidden)不显示，但仍然占用空间，哈哈我一直想着是visible方式。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www./TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www./1999/xhtml" lang="en" xml:lang="en"> <head> <title>Float and clear demo</title> <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Language" content="en-us" /> <link href="demo_styles.css" rel="stylesheet" type="text/css" /> <style type="text/css"> body {background-color:#FFC;} p {width:500px;margin:0 0 10px 0;} img {float:left; clear:both;margin:0 4px 4px 0;} /* 将此img设为浮动的，若旁边有多余空间，进行添充(clear)。这样实现分栏了。不管在此浮动元素是什么元素，都会移动 */ </style> <body> <img src="images/dartmoor-view.jpg" alt="View of Dartmoor" /> <p>Here's a lovely picture of Dartmoor in Devon, England, where the ponies roam wild. On a sunny summer's day, it is a wonderful place to hike and enjoy the incredible views. When the mist and rain roll in, Dartmoor can be a lonely and scary place where it's easy to lose your way—it's where Sherlock Holmes met the Hound of the Baskervilles. Because this text is longer than the picture of the moorlands, the next image of the Devon cottage is over to the left side as part of a new paragraph, which is exactly what we want to have happen.</p> <img src="images/english-cottage.jpg" alt="Devon Cottage" /> <p> My sister lived in this delightful cottage by a stream in Devon until very recently—my daughter said she saw fairies in the garden one summer night. Because this text is short, the next image and text also move up next to the floated image of the cottage.</p> <img src="images/windsor-castle_walls.jpg" alt="Windsor Castle, England" /> <p>The Queen of England prefers somewhere a little more spacious and secure. Windsor Castle is her favorite place to hang out with the family and her Corgi dogs. With the clearing element added, this text now clears (moves below) the previous floated elements and sits correctly alongside this image. </p> </body> </html> 现附上一个弹出式窗口的实例： 意义：弹窗应用十分广泛，这便是最原始的html+css实现。当然用telerik时，可直接调用其控件即可。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www./1999/xhtml"> <head> <title>Display rollover demo</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> background-color:#FFC;} img {border:none;} div {position:relative; width:92px; border:2px solid #069; padding:5px;} /* 将此div位置设为relative,意味着此为定位环境 */ h2, p {font-size:.7em; font-family:Arial, sans-serif; margin:0;} /* 段落为弹窗内容，设外边距为0, */ p {position:absolute; display:none; width: 80px; left:30px; top:15px; border:1px solid gray; padding:.3em; background-color:#FFD;} /* 此内容为绝对定位，设置为偏移量 */ div:hover p, p:hover {display:block;} /* 本来用javascript实现，但用css伪类实现，很简洁，当hover此元素时，显示 */ </style> </head> <body> <div class="video_selection"> <a href="#"><img src="images/23_diabetes_testimonial-1.jpg" alt="Blood pressure video" /></a> <p> Bobby is a #2 Diabetic who weighed 274 pounds. After a change in diet he is no longer on medication. Runtime: 46 sec.</p> <h2><a href="#">Living with Diabetes; Bobby's story</a></h2> </div> </body> </html> |
|
|
来自： 昵称10134216 > 《Html CSS》
