0 0 4 4 - Web最常用布局之#格子布局 | 【入门】,Web密训营,Web开发,鱼C论坛

charles_2268 发表于 2018-8-25 20:05:06

当只设置一个值时，上下左右都是1px，两幅图中间就会重叠在一起变为2px。。。

怎么办呢？

很简单先设置每幅图的上面和左面有框线：这里写错了，应该是下面

小丸子hjm 发表于 2018-11-5 09:46:23

{:9_236:}

莫希发表于 2019-1-12 10:48:48

RE: 0 0 4 4 - Web最常用布局之#格子布局 | 【入门】 [修改]

不需要排面 发表于 2019-6-28 10:01:35

{:10_249:}11111111111111

你在意在便在 发表于 2019-11-1 11:30:13

以后还是附个图好了 {:10_334:}继续学习~

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
section {
   width:666px;
}
article {
   box-sizing:border-box;
   width:333px;
   height:333px;
   padding:20px;
   text-align:center;
   float:left;
   border-left: 1px solid rgba(0,0,0,.3);
   border-bottom: 1px solid rgba(0,0,0,.3);
}
article:nth-child(even) {
   border-right: 1px solid rgba(0,0,0,.3);
}
article:nth-child(1) {
   border-top:1px solid rgba(0,0,0,.3)
}
article:nth-child(2) {
   border-top:1px solid rgba(0,0,0,.3);
}
img {
   height: 200px;
   width: 200px;
}
h1 {
   font-size:33px;
   margin:10px 0;
   color:#e74c3c;
}
p {
   font-size:16px;
   background:#e67e22;
   color:white;
   font-family: "NSimSun";
}
</style>
</head>
<body>
<section>
   <article>
            <h1>招财树</h1>
            <p>招财进宝，日入斗金</p>
            <img src="1.png" alt="Fortune tree">
   </article>
   <article>
            <h1>金元宝</h1>
            <p>敛福生财，兴隆大业</p>
            <img src="2.png" alt="Gold ingot">
   </article>
   <article>
            <h1>锦绣狮</h1>
            <p>心想事成,吉祥如意</p>
            <img src="3.png" alt="Splendid lion">
   </article>
   <article>
            <h1>八卦图</h1>
            <p>日转千阶,源源不断</p>
            <img src="4.png" alt="Eight Diagrams">
   </article>
</section>
</body>
</html>

suweixuan1998 发表于 2020-1-5 10:42:06

谢谢老师，老师加油，我也加油。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无题</title>
<style type="text/css">
section{
width: 666px;

}
article{
box-sizing: border-box;
width: 333px;
height: 333px;
padding: 20px;
text-align: center;
float: left;
border-bottom: 1px solid rgba(0,0,0,.3);
border-left: 1px solid rgba(0,0,0,.3);

}
article:nth-child(even){
border-right: 1px solid rgba(0,0,0,.3);

}
article:nth-child(1){
border-top: 1px solid rgba(0,0,0,.3);

}
article:nth-child(2){
border-top: 1px solid rgba(0,0,0,.3);

}
article h1{
font-size: 33px;
margin: 10px 0;
color: #F08;
}
article p{
font-size: 20px;
background-color: #F33;
color: #FFF;
font-family:"NSimSun";
}
img{
width: 200px;

}
</style>
</head>
<body>
<section>
<article>
<h1>高胖红灯笼</h1>
<p>随风飘荡，喜庆</p>
<img src="./img/img/1.png" alt="灯笼">
</article>
<article>
<h1>胖红灯笼</h1>
<p>随风飘荡，喜庆</p>
<img src="./img/img/2.png" alt="灯笼">
</article>
<article>
<h1>高瘦红灯笼</h1>
<p>随风飘荡，喜庆</p>
<img src="./img/img/3.png" alt="灯笼">
</article>
<article>
<h1>矮胖红灯笼</h1>
<p>随风飘荡，喜庆</p>
<img src="./img/img/4.png" alt="灯笼">
</article>

</section>

</body>
</html>

小脑斧 发表于 2020-3-15 11:34:24

287187056 发表于 2020-4-1 05:08:18

1041556532 发表于 2020-5-28 21:45:34

什么小技巧阿

tianyuan 发表于 2020-5-30 21:18:29

{:10_277:}

1428375758 发表于 2020-6-6 16:41:06

我爱小甲鱼

kmq116 发表于 2020-7-19 15:19:56

1111111111111111111

qiuwanzi 发表于 2020-7-20 09:42:11

属性加框线的方法

红tea少年 发表于 2020-8-16 23:57:49

想看

败者食尘 发表于 2020-9-19 21:49:17

1111111

以梦喂马 发表于 2021-1-13 13:20:56

111

宇治松千夜 发表于 2021-1-23 00:07:36

有图片吗

宇治松千夜 发表于 2021-1-23 00:24:12

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
   img{
         width: 160px;
   }
   section{
         width: 666px;
   }
   article{
         box-sizing: border-box;
         width: 333px;
         height: 333px;
         padding: 20px;
         text-align: center;
         float: left;
         border: 1px solid rgba(0,0,0,0.3);
   }
   article:nth-child(2n){
         border-left: 0;
   }
   article:nth-child(-n+2){
         border-bottom: 0;
   }
</style>
</head>
<body>
<section>
   <article>
            <h1>招财树</h1>
            <p>招财进宝，日入斗金</p>
            <img src="img1.gif" alt="Fortune tree">
   </article>
   <article>
            <h1>金元宝</h1>
            <p>敛福生财，兴隆大业</p>
            <img src="img1.gif" alt="Gold ingot">
   </article>
   <article>
            <h1>锦绣狮</h1>
            <p>心想事成,吉祥如意</p>
            <img src="img1.gif" alt="Splendid lion">
   </article>
   <article>
            <h1>八卦图</h1>
            <p>日转千阶,源源不断</p>
            <img src="img1.gif" alt="Eight Diagrams">
   </article>
</section>
</body>
</html>

ainz42 发表于 2021-3-24 21:44:30

学习

omg123460 发表于 2021-5-29 22:43:16

页: 1 [2] 3

鱼C论坛's Archiver