search

博客列表 >1223-1226作业

1223-1226作业

玩泥巴白头少年
玩泥巴白头少年原创
2019年12月27日 15:05:44501浏览

1.默写flex属性

2.制作头部导航

效果链接
https://zhhacker.com/1226/public/components/public/public_header/public_header.html
html代码如下：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>公共表头</title>
  6.     <link rel="stylesheet" href="public_header.css">
  7. </head>
  8. <body>
  9. <div class="public-header">
  10.     <a href="">网站首页</a>
  11.     <a href="">专题</a>
  12.     <a href="">网站导航</a>
  13.     <a href="">二手商品</a>
  14.     <a href="">讨论区</a>
  15.     <span>
  16.         <a href=""><i class="iconfont icon-huiyuan2"></i></a>
  17.         <a href="">登录</a>
  18.         <a href="">免费注册</a>
  19.     </span>
  21. </div>
  22. </body>
  23. </html>

css代码如下：

  1. @import url(../public_reset.css);
  2. .public-header{
  3.     height: 44px;
  4.     background-color: black;
  5.     padding: 0 20px;
  6.     line-height: 44px;
  7.     display: flex;
  8. }
  9. .public-header a{
  10.     padding: 0 10px;
  11.     /*line-height: 44px;*/
  12.     color: #cccccc;
  13.     font-size: 16px;
  14. }
  15. .public-header > a:hover{
  16.     color: #404040;
  17.     background-color: #efefef;
  18.     /*font-size: 18px;*/
  19.     font-weight: bold;
  20. }
  21. .public-header > span {
  22.     margin-left: auto;
  23. }
  24. .public-header > span i.iconfont{
  25.     font-size: 1.3rem;
  26. }

重置初始样式表

  1. @import "iconfont.css";
  2. *{
  3.     margin: 0;
  4.     padding: 0;
  5.     /*参考线*/
  6. /*outline: 1px dashed red;*/
  7. }
  8. body{
  9.     font-size: 14px;
  10.     color: #555555;
  11.     background-color: #efefef;
  12. }
  13. a{
  14.     color: #404040;
  15.     text-decoration: none;
  16.     font-size: 13px;
  17. }
  18. li{
  19.     list-style: none;
  20. }

3.二手交易商店

老规矩效果，先放效果。特点：利用弹性盒子挤压实现鼠标滑动，突出图片效果
效果链接
https://zhhacker.com/1226/public/components/public/public_second_hand/public_second_hand.html
html代码如下：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>二手商品交易</title>
  6.     <!--    引入头部标题样式-->
  7.     <link rel="stylesheet" href="../public_headline/public_headline.css">
  8.     <link rel="stylesheet" href="public_second_hand.css">
  9. </head>
  10. <body>
  11. <!--引入头部标题-->
  12. <div class="public-headline">
  13.     <span>二手交易</span>
  14. </div>
  15. <!--商品展示区-->
  16. <div class="public-second-hand">
  17.     <div class="title1">
  18.         <a href="">抢好货</a>
  19.         <span>0低价，便捷，安全，快速</span>
  20.     </div>
  21.     <div class="title2">
  22.         <span>热门分类</span>
  23.         <a href="">美女写真</a>
  24.         <a href="">日本美女</a>
  25.         <a href="">美国美女</a>
  26.         <a href="">国内美女</a>
  27.         <a href="">AV美女</a>
  28.     </div>
  29.     <!--    商品展示-->
  30.     <div class="goods">
  31.         <!--        左边图片列表-->
  32.         <div class="good-list">
  33.             <div class="information">
  34.                 <a href=""><img src="../../../images/shop/shop1.jpg" alt=""></a>
  35.                 <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  36.                 <div>
  37.                     <span>¥333</span>
  38.                     <span>美女</span>
  39.                 </div>
  40.             </div>
  41.             <div class="information">
  42.                 <a href=""><img src="../../../images/shop/shop2.jpg" alt=""></a>
  43.                 <a href="">美女性感写真海报墙艺术装饰画贴画图2</a>
  44.                 <div>
  45.                     <span>¥333</span>
  46.                     <span>美女</span>
  47.                 </div>
  48.             </div>
  49.             <div class="information">
  50.                 <a href=""><img src="../../../images/shop/shop3.jpg" alt=""></a>
  51.                 <a href="">美女性感写真海报墙艺术装饰画贴画图3</a>
  52.                 <div>
  53.                     <span>¥333</span>
  54.                     <span>美女</span>
  55.                 </div>
  56.             </div>
  57.             <div class="information">
  58.                 <a href=""><img src="../../../images/shop/shop4.jpg" alt=""></a>
  59.                 <a href="">美女性感写真海报墙艺术装饰画贴画图4</a>
  60.                 <div>
  61.                     <span>¥333</span>
  62.                     <span>美女</span>
  63.                 </div>
  64.             </div>
  65.             <div class="information">
  66.                 <a href=""><img src="../../../images/shop/shop5.jpg" alt=""></a>
  67.                 <a href="">美女性感写真海报墙艺术装饰画贴画图5</a>
  68.                 <div>
  69.                     <span>¥333</span>
  70.                     <span>美女</span>
  71.                 </div>
  72.             </div>
  73.             <div class="information">
  74.                 <a href=""><img src="../../../images/shop/shop6.jpg" alt=""></a>
  75.                 <a href="">美女性感写真海报墙艺术装饰画贴画图6</a>
  76.                 <div>
  77.                     <span>¥333</span>
  78.                     <span>美女</span>
  79.                 </div>
  80.             </div>
  81.             <div class="information">
  82.                 <a href=""><img src="../../../images/shop/shop7.jpg" alt=""></a>
  83.                 <a href="">美女性感写真海报墙艺术装饰画贴画图7</a>
  84.                 <div>
  85.                     <span>¥333</span>
  86.                     <span>美女</span>
  87.                 </div>
  88.             </div>
  89.             <div class="information">
  90.                 <a href=""><img src="../../../images/shop/shop8.jpg" alt=""></a>
  91.                 <a href="">美女性感写真海报墙艺术装饰画贴画图8</a>
  92.                 <div>
  93.                     <span>¥333</span>
  94.                     <span>美女</span>
  95.                 </div>
  96.             </div>
  97.         </div>
  98.         <!--        右边快速入口+广告-->
  99.         <div class="quick-entry">
  100.             <div class="enter">
  101.             <a href=""><img src="../../../images/ad/1.png" alt=""></a>
  102.             <a href=""><img src="../../../images/ad/2.png" alt=""></a>
  103.             <a href=""><img src="../../../images/ad/3.png" alt=""></a>
  104.             <a href=""><img src="../../../images/ad/4.png" alt=""></a>
  105.             </div>
  106.             <div class="ads">
  107.                 <a href=""><img src="../../../images/ad/image.png" alt=""></a>
  108.                 <a href=""><img src="../../../images/ad/ad2.jpg" alt=""></a>
  109.             </div>
  110.         </div>
  111.     </div>
  112. </div>
  113. </body>
  114. </html>

css代码如下：

  1. @import "../public_reset.css";
  2. .public-second-hand {
  3.     width: 1200px;
  4.     padding: 10px;
  5.     box-sizing: border-box;
  6.     margin: auto;
  7.     background-color: #ffffff;
  8.     border-radius: 10px;
  9.     display: flex;
  10.     /*竖直排列*/
  11.     flex-flow: column nowrap;
  12. }
  13. .public-second-hand:hover{
  14.     box-shadow: 0 0 3px #888;
  15. }
  16. .public-second-hand > .title1 {
  17.     height: 50px;
  18.     border-bottom: 1px solid #cccccc;
  19.     box-sizing: border-box;
  20. }
  21. .public-second-hand > .title1 a{
  22.     padding: 0 5px;
  23.     font-size: 23px;
  24.     box-sizing: border-box;
  25. }
  26. .public-second-hand > .title1 span{
  27.     margin-left: 20px;
  28.     color: #ff0000;
  29. }
  30. .public-second-hand > .title2 {
  31.     height: 55px;
  32. }
  33. .public-second-hand > .title2 span{
  34.     padding: 0 5px;
  35.     color: red;
  36.     font-size: 23px;
  37.     box-sizing: border-box;
  38. }
  39. .public-second-hand > .title2 a{
  40.     padding: 5px;
  41.     box-sizing: border-box;
  42. }
  43. .public-second-hand > .title2 a:hover{
  44.     color: #f08080;
  45. }
  46. .public-second-hand > .goods {
  47.     height: 440px;
  48.     padding: 0 5px;
  49.     box-sizing: border-box;
  50.     display: flex;
  51.     flex-flow: row nowrap;
  52. }
  53. .public-second-hand > .goods > .good-list{
  54.     padding: 0 10px;
  55.     box-sizing: border-box;
  56.     flex-basis: 800px;
  57.     display: flex;
  58.     flex-flow: row wrap;
  59.     justify-content: space-between;
  60. }
  61. .public-second-hand > .goods > .good-list > .information{
  62.     width: 178px;
  63.     height: 200px;
  64.     display: flex;
  65.     flex-flow: column nowrap;
  66.     justify-content: space-between;
  67. }
  68. .public-second-hand > .goods > .good-list > .information img{
  69.     width: 178px;
  70.     height: 122px;
  71.     box-shadow: 0 0 2px #f08080;
  72. }
  73. /*利用弹性盒子增加图片放大效果*/
  74. .public-second-hand > .goods > .good-list > .information img:hover{
  75.     box-shadow: 0 0 3px red;
  76.     height: 125px;
  77. }
  78. .public-second-hand > .goods > .good-list > .information div{
  79.     display: flex;
  80.     justify-content: space-between;
  81.     /*outline: 1px solid red;*/
  82. }
  83. .public-second-hand > .goods > .good-list > .information span:first-child{
  84.     color: red;
  85. }
  86. .public-second-hand > .goods > .good-list > .information span:last-child{
  87.     background-color: #55ce9f;
  88.     color: white;
  89.     padding: 0 5px;
  90. }
  91. .public-second-hand > .goods >.quick-entry{
  92.     padding: 0 5px 10px;
  93.     box-sizing: border-box;
  94.     flex-basis: 400px;
  95.     display: flex;
  96.     flex-flow: column nowrap;
  97.     justify-content: space-between;
  98. }
  99. .public-second-hand > .goods >.quick-entry> .enter {
  100.     flex-basis: 300px;
  101.     display: flex;
  102.     flex-flow: row wrap;
  103.     justify-content: space-between;
  104. }
  105. /*增加图片放大效果*/
  106. .public-second-hand > .goods >.quick-entry> .enter img:hover{
  107.     width: 205px;
  108.     height: 128px;
  109.     box-shadow: 0 0 3px #55ce9f;
  110. }
  111. .public-second-hand > .goods >.quick-entry> .ads{
  112.     flex-basis: 140px;
  113.     display: flex;
  114.     flex-flow: column nowrap;
  115.     justify-content: space-between;
  116. }
  117. .public-second-hand > .goods >.quick-entry> .ads img{
  119. }

头部标题css代码

  1. @import "../public_reset.css";
  2. .public-headline{
  3. padding: 30px 0;
  4.     text-align: center;
  5. }
  6. .public-headline span{
  7.     line-height: 44px;
  8.     padding-bottom: 6px;
  9.     font-size: 30px;
  10.     font-weight: bold;
  11.     border-bottom: 2px solid #ff0000;
  12. }

4.用户评论页面

下次补

5.疑问

1.box-sizing: border-box; 参考网上资料，控制影响值为padding和border,我理解是使用padding或者border之后添加box-sizing: border-box; 但实际情况并不是每次都需要，老师能不能简单点帮我总结一下，什么时候必须使用box-sizing: border-box;？

上一条：flex高级与实战（12.25作业）+ PHP培训十期线上班下一条：1225-flex项目上的6个属性
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多