ZIPcss布局示例.zip 2.94MB

2401_87635415需要积分:4(1积分=1元)

资源文件列表:

css布局示例.zip 大约有82个文件
  1. 5-1 浮动属性.html 2.85KB
  2. 5-10 position案例-垂直时间线.html 2KB
  3. 5-11 fixed固定的广告栏.html 10.94KB
  4. 5-12 粘性定位的菜单和搜索栏.html 10.44KB
  5. 5-13 多列属性.html 2.12KB
  6. 5-14 弹性盒子0.html 2.04KB
  7. 5-15 弹性盒子1.html 1.62KB
  8. 5-16 弹性布局实例-导航栏.html 1.64KB
  9. 5-17 类似瀑布流flexd布局示例.html 1.84KB
  10. 5-18 simple-grid.html 2.29KB
  11. 5-19 fluid-grid.html 2.37KB
  12. 5-2 floa伪元素实现首字下沉和首字放大.html 1.19KB
  13. 5-20 bootstrap-grid.html 743B
  14. 5-21 flex-grid.html 1.73KB
  15. 5-22 grid模型.html 1.86KB
  16. 5-23 grid-template-areas.html 1.42KB
  17. 5-24 左侧固定右侧自适应的二列布局.html 5.83KB
  18. 5-25 静态布局.html 2.16KB
  19. 5-26 圣杯布局-float.html 3.24KB
  20. 5-27 双飞翼布局-float.html 3.15KB
  21. 5-28 emrem单位.html 1.97KB
  22. 5-29 视口单位.html 1.88KB
  23. 5-3 局部布局-图文混排.html 1.26KB
  24. 5-30 响应式二列布局.html 2.52KB
  25. 5-31 f响应式三列布局.html 3.54KB
  26. 5-32 响应式三列布局-2.html 4.07KB
  27. 5-33 圣杯布局-flex.html 3.59KB
  28. 5-34 水平居中设置.html 3.03KB
  29. 5-35 垂直居中设置.html 2.13KB
  30. 5-4 float水平导航栏.html 1.39KB
  31. 5-5 相对定位.html 893B
  32. 5-6 绝对定位.html 2.17KB
  33. 5-7 绝对定位应用案例-文本图标对齐.html 4.01KB
  34. 5-8 position案例-叠加标题和说明的图片幻灯片.html 2.74KB
  35. 5-9 position案例-水平进度条.html 2.16KB
  36. bookstore-flex-layout.html 6.55KB
  37. bookstore-layout-素材.html 4.86KB
  38. css/
  39. css/bookstore-flex-layout.css 1.65KB
  40. css/div-float.css 507B
  41. css/layout-base.css 259B
  42. float两列布局.html 1.31KB
  43. float实现水平导航菜单-小众商城.html 1.81KB
  44. images/
  45. images/1.jpg 55.15KB
  46. images/16452324180.jpg 940.15KB
  47. images/3.jpg 44.45KB
  48. images/4.jpg 51.65KB
  49. images/ad.png 107.28KB
  50. images/banner.jpg 367.71KB
  51. images/banner.png 1.23MB
  52. images/beauty1.jpg 8.83KB
  53. images/beauty2.jpg 9.25KB
  54. images/beauty3.jpg 8.29KB
  55. images/bg.gif 4.36KB
  56. images/feed.jpg 4.85KB
  57. images/girl.jpg 42KB
  58. images/icon.gif 4.84KB
  59. images/icon1.gif 296B
  60. images/icon2.gif 281B
  61. images/icon_close.png 2.91KB
  62. images/icon_warn.gif 198B
  63. images/image1.jpg 17.13KB
  64. images/localnav_bg.png 25.29KB
  65. images/mooc1.jpg 7.72KB
  66. images/nav_blue.jpg 936B
  67. images/show1.jpg 13.25KB
  68. images/show2.jpg 13.51KB
  69. images/show4.jpg 13.35KB
  70. images/show5.jpg 13.81KB
  71. images/ver_code.jpg 3.01KB
  72. images/xrx.jpg 2.16KB
  73. js/
  74. test.html 221B
  75. 布局实例-微博.html 4.52KB
  76. 弹性布局实例-双排导航图票.html 4.25KB
  77. 水平居中-不定宽块.html 1.05KB
  78. 热卖商品模块.html 2.74KB
  79. 相对定位.html 1.11KB
  80. 简化圣杯布局-float.html 2.91KB
  81. 绝对定位.html 707B
  82. 绝对定位应用实例-图标覆盖.html 2.78KB

资源介绍:

css布局示例.zip
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>position实现固定的广告栏</title> <style> body { width: 90%; max-width: 1000px; margin: 0 auto; } nav { background-color: rgb(212, 212, 206); position: sticky; top:0px; } nav li { list-style-type: none; display: inline-block; width: 80px; line-height: 2em; } nav li.formtab { width: 200px; vertical-align: middle; } footer{ text-align: center; height: 60px; background-color: rgb(213, 228, 228); } .ad{ position: fixed; right: 0px; top: 40%; } #btn-close{ position: absolute; top: 0px; left: 150px; } </style> </head> <body> <nav> <ul> <li>书店主页</li> <li>图书分类</li> <li>书店动态</li> <li>图书预订</li> <li>优惠信息</li> <li>读者服务</li> <li>读书笔记</li> <li>用户登录</li> <li class="formtab"> <form action="search.html" method="post"> <input type="text" name="keyword" size="10" /> <input type="submit" value="搜索"> </form> </li> </ul> </nav> <header> <img src="images/banner.jpg"> </header> <article> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et diam leo. Quisque tempor, libero in condimentum faucibus, ante ipsum fermentum ante, vel facilisis leo orci et dui. In magna enim, elementum consequat felis ut, aliquet tempus mi. Integer id fringilla ex. Sed maximus consequat fermentum. Praesent sit amet metus eros. Vivamus mollis lorem sed massa suscipit facilisis. Nunc lacus mi, dapibus vel vehicula sed, pretium at mi. Praesent massa sapien, venenatis ac varius consectetur, iaculis eget ex. Aliquam suscipit ipsum sagittis, convallis libero nec, sodales lacus. Ut mattis, quam non elementum mattis, diam ligula facilisis diam, nec volutpat velit erat ut turpis. Ut elementum vehicula magna.</p> <p>Nunc dignissim ut massa nec luctus. Etiam posuere ultrices ultrices. Vestibulum eu malesuada massa. In vel efficitur diam. Morbi faucibus ipsum non massa gravida, vel rhoncus velit iaculis. Cras interdum ac dui quis auctor. Praesent hendrerit lacinia elit, a posuere justo viverra non. Ut ligula ex, facilisis sit amet feugiat id, dapibus eget quam. Nulla vel dictum ipsum. Cras ut rutrum ante, sed euismod metus. Morbi a augue a purus iaculis consectetur ac vel urna. Suspendisse at ipsum at arcu dapibus gravida. Integer sit amet purus dolor. Fusce non risus diam. Aliquam erat volutpat. Morbi nec luctus arcu.</p> <p>Pellentesque condimentum egestas orci in aliquet. Curabitur dictum et nisl eu sollicitudin. Integer ut elit ullamcorper, sodales est sed, ullamcorper nisi. Duis porta nisl magna, vel vestibulum massa tempus vitae. Curabitur sagittis elit quis eros sodales, non sodales purus scelerisque. Maecenas quis ornare dui, vitae convallis velit. Nunc sed condimentum mauris. Aenean dictum, orci quis aliquam volutpat, sem felis tincidunt urna, quis vulputate nunc eros nec augue. Quisque iaculis tellus id ante condimentum pellentesque. Pellentesque volutpat mauris in erat iaculis maximus. Etiam arcu tortor, iaculis at libero ut, sodales euismod odio.</p> <p>Vestibulum vitae sollicitudin leo, eu porta tortor. Fusce scelerisque ultrices mi, a scelerisque nunc gravida id. Aliquam faucibus sapien vel dictum tempus. Maecenas quis condimentum augue. Integer sit amet odio eget enim fermentum porttitor in eu ante. Fusce nec leo tempor, dictum neque nec, lobortis ipsum. Sed malesuada orci ac tellus tristique convallis. Duis rhoncus vestibulum tellus. Vestibulum dignissim ligula in ligula rhoncus maximus. Morbi congue dapibus massa et faucibus. Proin nec dui id orci scelerisque gravida. Proin ultricies quam nec arcu dictum, eu tempus ante euismod. Morbi ullamcorper dui blandit, elementum nulla ut, bibendum erat.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et diam leo. Quisque tempor, libero in condimentum faucibus, ante ipsum fermentum ante, vel facilisis leo orci et dui. In magna enim, elementum consequat felis ut, aliquet tempus mi. Integer id fringilla ex. Sed maximus consequat fermentum. Praesent sit amet metus eros. Vivamus mollis lorem sed massa suscipit facilisis. Nunc lacus mi, dapibus vel vehicula sed, pretium at mi. Praesent massa sapien, venenatis ac varius consectetur, iaculis eget ex. Aliquam suscipit ipsum sagittis, convallis libero nec, sodales lacus. Ut mattis, quam non elementum mattis, diam ligula facilisis diam, nec volutpat velit erat ut turpis. Ut elementum vehicula magna.</p> <p>Nunc dignissim ut massa nec luctus. Etiam posuere ultrices ultrices. Vestibulum eu malesuada massa. In vel efficitur diam. Morbi faucibus ipsum non massa gravida, vel rhoncus velit iaculis. Cras interdum ac dui quis auctor. Praesent hendrerit lacinia elit, a posuere justo viverra non. Ut ligula ex, facilisis sit amet feugiat id, dapibus eget quam. Nulla vel dictum ipsum. Cras ut rutrum ante, sed euismod metus. Morbi a augue a purus iaculis consectetur ac vel urna. Suspendisse at ipsum at arcu dapibus gravida. Integer sit amet purus dolor. Fusce non risus diam. Aliquam erat volutpat. Morbi nec luctus arcu.</p> <p>Pellentesque condimentum egestas orci in aliquet. Curabitur dictum et nisl eu sollicitudin. Integer ut elit ullamcorper, sodales est sed, ullamcorper nisi. Duis porta nisl magna, vel vestibulum massa tempus vitae. Curabitur sagittis elit quis eros sodales, non sodales purus scelerisque. Maecenas quis ornare dui, vitae convallis velit. Nunc sed condimentum mauris. Aenean dictum, orci quis aliquam volutpat, sem felis tincidunt urna, quis vulputate nunc eros nec augue. Quisque iaculis tellus id ante condimentum pellentesque. Pellentesque volutpat mauris in erat iaculis maximus. Etiam arcu tortor, iaculis at libero ut, sodales euismod odio.</p> <p>Vestibulum vitae sollicitudin leo, eu porta tortor. Fusce scelerisque ultrices mi, a scelerisque nunc gravida id. Aliquam faucibus sapien vel dictum tempus. Maecenas quis condimentum augue. Integer sit amet odio eget enim fermentum porttitor in eu ante. Fusce nec leo tempor, dictum neque nec, lobortis ipsum. Sed malesuada orci ac tellus tristique convallis. Duis rhoncus vestibulum tellus. Vestibulum dignissim ligula in ligula rhoncus maximus. Morbi congue dapibus massa et faucibus. Proin nec dui id orci scelerisque gravida. Proin ultricies quam nec arcu dictum, eu tempus ante euismod. Morbi ullamcorper dui blandit, elementum nulla ut, bibendum erat.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et diam leo. Quisque tempor, libero in condimentum faucibus, ante ipsum fermentum ante, vel facilisis leo orci et dui. In magna enim, elementum consequat felis ut, aliquet
100+评论
captcha
    相关资源
    类型标题大小时间
    ZIP留言墙 - 副本.zip63.22MB5月前
    ZIP11.13资料.zip2.58MB5月前
    ZIP新生报道管理系统 SSM毕业设计 附带论文.zip14.82MB5月前
    ZIP网络直播带货查询系统 SSM毕业设计 附带论文.zip23.42MB5月前
    ZIP3.+LSLIDAR_CX_ROS_V4.3.1_240409.zip4.21MB5月前
    ZIPDLTJNJ1993-2023.zip9.07KB5月前
    ZIP测试文件顺德区奥德赛dao40.25KB5月前
    ZIP鼠标选择点云某个点，就打印某个点的坐标411.95KB5月前