当前位置:   article > 正文

WEB前端(4)—— CSS经典案例(DIV+CSS布局)_css布局经典案例

css布局经典案例

超实用的div+css布局

附加html和css代码:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>CSS案例</title>
  8. </head>
  9. <style>
  10. * {
  11. margin: 0;
  12. padding: 0;
  13. list-style: none;
  14. text-decoration: none;
  15. }
  16. /* 动画 */
  17. @keyframes banner{
  18. 0%{
  19. top:50px
  20. }
  21. 50%{
  22. top: 220px;
  23. }
  24. 100%{
  25. top: 50px;
  26. }
  27. }
  28. /* 公共标题 */
  29. .title{
  30. margin-top: 80px;
  31. }
  32. .title h3{
  33. font-size: 30px;
  34. color: #333;
  35. font-weight: 100;
  36. }
  37. .title p{
  38. font-size: 14px;
  39. color: #888;
  40. margin: 10px 0 25px;
  41. }
  42. .title b{
  43. display: block;
  44. width: 70px;
  45. height: 2px;
  46. background: #444;
  47. margin: 0 auto;
  48. }
  49. /* 头部区域 */
  50. .header {
  51. width: 1160px;
  52. height: 80px;
  53. margin: 0 auto;
  54. }
  55. .logo {
  56. float: left;
  57. margin-top: 10px;
  58. }
  59. .nav {
  60. float: left;
  61. margin-left: 80px;
  62. }
  63. .nav li{
  64. float: left;
  65. position:relative;
  66. }
  67. .nav li a {
  68. display: block;
  69. line-height: 80px;
  70. padding: 0 25px;
  71. font-size: 16px;
  72. color: #333;
  73. }
  74. .nav li:hover a{
  75. color: #009ee6;
  76. }
  77. .down{
  78. width: 150px;
  79. background: #333;
  80. border-top: 2px solid #009ee6;
  81. position: absolute;
  82. top: 80px;
  83. left: 0;
  84. display: none;
  85. }
  86. .down .list{
  87. height: 40px;
  88. line-height: 40px;
  89. }
  90. .list p{
  91. float: left;
  92. margin-left: 10px;
  93. color: #ccc;
  94. }
  95. .list .box{
  96. width: 10px;
  97. height: 10px;
  98. border-radius:50%;
  99. border: 2px solid #ccc;
  100. float: left;
  101. margin-top: 12px;
  102. margin-left: 5px;
  103. }
  104. .list:hover{
  105. background: #fff;
  106. }
  107. .list:hover .box{
  108. border-color: #009ee6;
  109. }
  110. .nav li:hover .down{
  111. display: block;
  112. }
  113. .tel {
  114. float: right;
  115. text-align: right;
  116. margin-top: 15px;
  117. }
  118. .tel p {
  119. font-size: 14px;
  120. color: #666;
  121. }
  122. .tel span {
  123. font-size: 22px;
  124. color: #333;
  125. }
  126. /* 海报区域 */
  127. .banner{
  128. width: 100%;
  129. height: 1270px;
  130. background:url(/image/1160.jpg) no-repeat center;
  131. position:relative;
  132. }
  133. .banner img{
  134. position: absolute;
  135. right: 10%;
  136. top: 10px;
  137. animation: banner 3s linear infinite;
  138. }
  139. /* 产品区域 */
  140. .pro{
  141. width: 1920px;
  142. height: 680px;
  143. margin: 0 auto;
  144. text-align: center;
  145. overflow: hidden;
  146. }
  147. .pro_con{
  148. width: 1160px;
  149. height: 350px;
  150. margin: auto;
  151. margin-top: 40px;
  152. }
  153. .pro_con li{
  154. width: 290px;
  155. height: 350px;
  156. position: relative;
  157. float: left;
  158. }
  159. .pro_con .black{
  160. width: 290px;
  161. height: 350px;
  162. background: rgba(0, 0, 0, 1);
  163. position: absolute;
  164. left: 0;
  165. top: 0;
  166. overflow: hidden;
  167. }
  168. .black img{
  169. margin-top: 95px;
  170. transition: 0.3s;
  171. }
  172. .black i{
  173. display: block;
  174. width: 20px;
  175. height: 2px;
  176. background: #fff;
  177. margin: 27px auto 20px;
  178. transition: 0.3s
  179. }
  180. .black h4{
  181. font-size: 22px;
  182. color: #fff;
  183. font-weight: 100;
  184. }
  185. .black p{
  186. padding: 0 10px;
  187. color: #fff;
  188. font-size: 14px;
  189. margin: 38px 0 40px;
  190. opacity: 0;
  191. transition: 0.3s
  192. }
  193. .black a{
  194. display: block;
  195. width: 98px;
  196. height: 28px;
  197. color: #fff;
  198. font-size: 14px;
  199. border: 1px solid #fff;
  200. margin:0 auto;
  201. opacity: 0;
  202. transition: 0.3s;
  203. line-height: 28px;
  204. }
  205. .pro_con li:hover .black{
  206. background: rgba(31, 133, 244, 0.5);
  207. }
  208. .pro_con li:hover .black img{
  209. margin-top: 45px;
  210. }
  211. .pro_con li:hover .black i{
  212. opacity: 0;
  213. margin-top: 0;
  214. }
  215. .pro_con li:hover .black p{
  216. opacity: 1;
  217. }
  218. .pro_con li:hover .black a{
  219. opacity: 1;
  220. }
  221. .btn{
  222. width: 130px;
  223. height: 32px;
  224. color: #009ee6;
  225. font-size: 14px;
  226. border: 1px solid #009ee6;
  227. display: block;
  228. text-align: center;
  229. line-height: 32px;
  230. margin: 30px auto 0;
  231. border-radius: 16px;
  232. }
  233. .btn:hover{
  234. background: #009ee6;
  235. color: #fff;
  236. }
  237. /* 底部区域 */
  238. .footer1{
  239. width: 1920px;
  240. height: 230px;
  241. background: #413e3e;
  242. margin: auto;
  243. }
  244. .ft_center{
  245. width: 1160px;
  246. height: 230px;
  247. border: 1px solid #fff;
  248. margin: 0 auto;
  249. }
  250. .ft_center h1{
  251. text-align: center;
  252. color: #fff;
  253. margin-top: 50px;
  254. }
  255. </style>
  256. <body>
  257. <!-- 头部区域 -->
  258. <div class="header">
  259. <a href="#" class="logo"><img src="image/Logo.jpg" alt=""></a>
  260. <ul class="nav">
  261. <li><a href="#">首页</a></li>
  262. <li><a href="#">关于我们</a>
  263. <div class="down">
  264. <div class="list">
  265. <div class="box"></div>
  266. <p>公司简历</p>
  267. </div>
  268. <div class="list">
  269. <div class="box"></div>
  270. <p>公司简历</p>
  271. </div>
  272. </div>
  273. </li>
  274. <li><a href="#">解决方案</a></li>
  275. <li><a href="#">成功案例</a></li>
  276. <li><a href="#">新闻中心</a></li>
  277. <li><a href="#">联系我们</a></li>
  278. </ul>
  279. <div class="tel">
  280. <p>全国统一电话:<br><span>123-456-789</span></p>
  281. </div>
  282. </div>
  283. <!-- 海报区域 -->
  284. <div class="banner">
  285. <img src="/image/002.jpg" alt="">
  286. </div>
  287. <!-- 产品区域 -->
  288. <div class="pro">
  289. <div class="title">
  290. <h3>《智慧校园》解决方案</h3>
  291. <p>Solution Show</p>
  292. <b></b>
  293. </div>
  294. <ul class="pro_con">
  295. <li>
  296. <img src="/image/1.jpg" alt="">
  297. <div class="black">
  298. <img src="/image/Logo.jpg" alt="">
  299. <i></i>
  300. <h4>智慧中心</h4>
  301. <p>专注健康,关注校园,服务校园...</p>
  302. <a href="#">了解详情</a>
  303. </div>
  304. </li>
  305. <li>
  306. <img src="/image/1.jpg" alt="">
  307. <div class="black">
  308. <img src="/image/Logo.jpg" alt="">
  309. <i></i>
  310. <h4>智慧中心</h4>
  311. <p>专注健康,关注校园,服务校园...</p>
  312. <a href="#">了解详情</a>
  313. </div>
  314. </li>
  315. <li>
  316. <img src="/image/1.jpg" alt="">
  317. <div class="black">
  318. <img src="/image/Logo.jpg" alt="">
  319. <i></i>
  320. <h4>智慧中心</h4>
  321. <p>专注健康,关注校园,服务校园...</p>
  322. <a href="#">了解详情</a>
  323. </div>
  324. </li>
  325. <li>
  326. <img src="/image/1.jpg" alt="">
  327. <div class="black">
  328. <img src="/image/Logo.jpg" alt="">
  329. <i></i>
  330. <h4>智慧中心</h4>
  331. <p>专注健康,关注校园,服务校园...</p>
  332. <a href="#">了解详情</a>
  333. </div>
  334. </li>
  335. </ul>
  336. <a href="#" class="btn">查看更多</a>
  337. </div>
  338. <!-- 底部区域 -->
  339. <div class="footer1">
  340. <div class="ft_center">
  341. <h1>底部展示</h1>>
  342. </div>
  343. </div>
  344. <div class="footer2">
  345. </div>
  346. </body>
  347. </html>

运行效果图如下:

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/空白诗007/article/detail/758536
推荐阅读
相关标签
  

闽ICP备14008679号