Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 1223-1226作业
Blogger Information
Blog 3
fans 0
comment 0
visits 1734
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
1223-1226作业
玩泥巴白头少年
Original
495 people have browsed it

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;？

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：box-sizing, 与padding, border的添加顺序无关, 只要加上就会有效
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post