Community Learn Tools Library Leisure
search
English
Home > List of blog posts > grid容器网站
Blogger Information
Blog 15
fans 0
comment 0
visits 10870
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
grid容器网站
安
Original
654 people have browsed it

二手交易网
<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="public_second_hand.css">
<title>公共二手交易区组件</title>
</head>

<body>
<!--引入大标题-->

<div class="public-headline">
<span>二手交易</span>
</div>

<!--二手交易专区-->

<div class="public-second-hand">
<div class="title1">
<a href="">抢好货</a>
<span>0底价，便捷，安全，快速</span>
</div>
<div class="title2">
<span>热门分类</span>
<a href="">美女写真</a>
<a href="">日本美女</a>
<a href="">美国美女</a>
<a href="">国内美女</a>
<a href="">AV美女</a>
</div> 

  1. <div class="goods">
  2.     <!--商品列表-->
  3.     <div class="goods-list">
  4.         <!--商品简介-->
  5.         <div class="intro">
  6.             <a href=""><img src="../images/shop/shop1.jpg" width="176" height="120" alt=""></a>
  7.             <a href="">美女性感写真 海报墙艺术装饰画帖画图1</a>
  8.             <div>
  9.                 <span>&yen;333</span>
  10.                 <span>美女</span>
  11.             </div>
  12.         </div>
  13.         <div class="intro">
  14.             <a href=""><img src="../images/shop/shop1.jpg" width="176" height="120" alt=""></a>
  15.             <a href="">美女性感写真 海报墙艺术装饰画帖画图1</a>
  16.             <div>
  17.                 <span>&yen;333</span>
  18.                 <span>美女</span>
  19.             </div>
  20.         </div>
  21.         <div class="intro">
  22.             <a href=""><img src="../images/shop/shop1.jpg" width="176" height="120" alt=""></a>
  23.             <a href="">美女性感写真 海报墙艺术装饰画帖画图1</a>
  24.             <div>
  25.                 <span>&yen;333</span>
  26.                 <span>美女</span>
  27.             </div>
  28.         </div>
  29.         <div class="intro">
  30.             <a href=""><img src="../images/shop/shop1.jpg" width="176" height="120" alt=""></a>
  31.             <a href="">美女性感写真 海报墙艺术装饰画帖画图1</a>
  32.             <div>
  33.                 <span>&yen;333</span>
  34.                 <span>美女</span>
  35.             </div>
  36.         </div>
  37.         <div class="intro">
  38.             <a href=""><img src="../images/shop/shop1.jpg" width="176" height="120" alt=""></a>
  39.             <a href="">美女性感写真 海报墙艺术装饰画帖画图1</a>
  40.             <div>
  41.                 <span>&yen;333</span>
  42.                 <span>美女</span>
  43.             </div>
  44.         </div>
  45.         <div class="intro">
  46.             <a href=""><img src="../images/shop/shop1.jpg" width="176" height="120" alt=""></a>
  47.             <a href="">美女性感写真 海报墙艺术装饰画帖画图1</a>
  48.             <div>
  49.                 <span>&yen;333</span>
  50.                 <span>美女</span>
  51.             </div>
  52.         </div>
  53.         <div class="intro">
  54.             <a href=""><img src="../images/shop/shop1.jpg" width="176" height="120" alt=""></a>
  55.             <a href="">美女性感写真 海报墙艺术装饰画帖画图1</a>
  56.             <div>
  57.                 <span>&yen;333</span>
  58.                 <span>美女</span>
  59.             </div>
  60.         </div>
  61.         <div class="intro">
  62.             <a href=""><img src="../images/shop/shop1.jpg" width="176" height="120" alt=""></a>
  63.             <a href="">美女性感写真 海报墙艺术装饰画帖画图1</a>
  64.             <div>
  65.                 <span>&yen;333</span>
  66.                 <span>美女</span>
  67.             </div>
  68.         </div>
  69.     </div>
  71.     <!--功能入口-->
  72.     <div class="quick-entry">
  73.         <div class="quick-en">
  74.         <a href=""><img src="../images/ad/1.png" alt=""></a>
  75.         <a href=""><img src="../images/ad/2.png" alt=""></a>
  76.         <a href=""><img src="../images/ad/3.png" alt=""></a>
  77.         <a href=""><img src="../images/ad/4.png" alt=""></a>
  78.         </div>
  79.         <div class="quick-an">
  80.             <a href=""><img src="../images/ad/image.png" alt=""></a>
  81.             <a href=""><img src="../images/ad/ad2.jpg" alt=""></a>
  82.         </div>
  83.     </div>
  85. </div>

</div>
</body>
</html>
css
@import “../public_resel.css”;

@import “../public-headline.css”;

/二手交易专区/

.public-second-hand{
width: 1200px;
padding: 10px;
box-sizing: border-box;
margin: auto;
border-radius: 5px;
background-color: #fff;
}

.public-second-hand:hover{
box-shadow: 0 0 5px #888;
}

.public-second-hand > .title1 {
height: 50px;
border-bottom: 1px solid #cccccc;
box-sizing: border-box;
}

.public-second-hand > .title1 > a {
font-size: 23px;
margin-right: 20px;
}
.public-second-hand > .title1 > span{
color: red;
}
.public-second-hand > .title2 {
height: 55px;
}
.public-second-hand > .title2 > span{
color: red;
font-size: 23px;
}
.public-second-hand > .title2 > span ~ a{
padding-left: 20px;
}
.public-second-hand > .title2 > span ~ a:hover{
color: #0077aa;
}

/商品区/

.public-second-hand > .goods {
margin-top: 10px;
margin-left: 10px;
padding-bottom: 10px;
display:grid;
grid-template-columns:8fr 4fr;
grid-template-rows:1fr;
}
/商品左侧/
.public-second-hand > .goods > .goods-list {
display:grid;
grid-template-columns:repeat(4,1fr);
grid-template-rows: repeat(2,1fr);
}
.public-second-hand > .goods > .goods-list img {
width: 176px;
height: 120px;
}
.public-second-hand > .goods > .goods-list > .intro {
margin-top: 10px;
display: grid;
grid-auto-columns: 180px;
grid-template-rows: 130px 2fr 0.6fr;
}
.public-second-hand > .goods > .goods-list > .intro > div {
display: flex;
justify-content: space-between;
}
.public-second-hand > .goods > .goods-list > .intro > div > :first-child{
color: #ff0000;
}
.public-second-hand > .goods > .goods-list > .intro > div > :last-child {
background-color: #55a532;
border-radius: 5px;
color:#EFEFEF;
}
/商品右侧/
.public-second-hand > .goods > .quick-entry {
margin-top: 10px;
display: grid;
grid-auto-columns: 1fr;
grid-template-rows: 1.9fr 1fr;
}
.public-second-hand > .goods > .quick-entry > .quick-en {
display: grid;
grid-template-columns: repeat(2,1fr);
grid-template-rows: repeat(2,1fr);
}
.public-second-hand > .goods > .quick-entry > .quick-an {
display: grid;
grid-template-rows: repeat(2,1fr);
}

图片详情

手写grid属性

Correcting teacher：天蓬老师天蓬老师

Correction status：unqualified

Teacher's comments：代码无高亮
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