Copy a homepage by Grid - - php中文网博客

首页 > 博客列表 > Copy a homepage by Grid

博主信息

博文 22

粉丝 0

访问量 19599

专题推荐

更多>

2. Body: 12 columns + 3 rows items;

3. link to css;

4. in css, write details: margin, padding, sizes, colors;

example

code1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>grid homework</title>
<link rel="stylesheet" href="gridhomework.css" />
</head>
<body>
<header>TRADESY</header>
<div class="main-top">

<nav class="menus">Categary</nav>
<ul class="navs">
  <!-- li*8>a{menu$} -->
  <li><a href="">New</a></li>
  <li><a href="">On Sale</a></li>
  <li><a href="">Clothing</a></li>
  <li><a href="">Bags</a></li>
  <li><a href="">Shoes</a></li>
  <li><a href="">Accessories</a></li>
  <li><a href="">Weddings</a></li>
  <li><a href="">Designers</a></li>
  <input type="search" placeholder="key words" />
</ul>

code 2
<div class="main-courses">
<h2>Popular products</h2>
<ul class="course-list">
<li>
<a href=""><img src="https://img-static.tradesy.com/item/25709942/theory-white-side-slit-hi-rise-pants-size-4-s-27-0-1-650-650.jpg" alt="" /></a>
</li>
<li>
<a href=""><img src="https://img-static.tradesy.com/item/27854378/khaite-new-hunter-green-lace-up-slit-ribbed-knit-long-casual-maxi-dress-size-2-xs-0-1-650-650.jpg" alt="" /></a>
</li>
<li>
<a href=""><img src="https://img-static.tradesy.com/item/25416507/chloe-pale-rose-42-wide-leg-pants-size-8-m-29-30-0-3-650-650.jpg" alt="" /></a>
</li>
<li>
<a href=""><img src="https://img-static.tradesy.com/item/28014660/farm-rio-multicolor-modern-chevron-sweater-long-casual-maxi-dress-size-4-s-0-0-650-650.jpg" alt="" /></a>
</li>
<li>
<a href=""><img src="https://img-static.tradesy.com/item/26072874/monse-white-asymmetric-mid-length-short-casual-dress-size-4-s-0-1-650-650.jpg" alt="" /></a>
</li>
<li>
<a href=""><img src="https://img-static.tradesy.com/item/27854378/khaite-new-hunter-green-lace-up-slit-ribbed-knit-long-casual-maxi-dress-size-2-xs-0-1-650-650.jpg" alt="" /></a>
</li>
<li>
<a href=""><img src="https://img-static.tradesy.com/item/26260872/balenciaga-multicolor-knotted-scarf-night-out-dress-size-4-s-0-1-650-650.jpg" alt="" /></a>
</li>
<li>
<a href=""><img src="https://img-static.tradesy.com/item/28793550/staud-white-swells-puff-sleeve-a-line-square-neck-linen-midi-mid-length-casual-maxi-dress-size-10-m-0-1-650-650.jpg" alt="" /></a>
</li>
<li>
<a href=""><img src="https://img-static.tradesy.com/item/28797337/jonathan-simkhai-tangerine-orange-anessa-silk-hi-low-long-cocktail-dress-size-2-xs-0-0-650-650.jpg" alt="" /></a>
</li>
<li>
<a href=""><img src="https://img-static.tradesy.com/item/28886213/self-portrait-black-abstract-geo-print-off-shoulder-maxi-long-formal-dress-size-2-xs-0-0-650-650.jpg" alt="" /></a>
</li>
<li>
<a href=""><img src="" alt="" /></a>
</li>
<li>
<a href=""><img src="" alt="" /></a>
</li>
<li>
<a href=""><img src="" alt="" /></a>
</li>
<li>
<a href=""><img src="" alt="" /></a>
</li>
<li>
<a href=""><img src="" alt="" /></a>
</li>
<li>
<a href=""><img src="" alt="" /></a>
</li>
<li>
<a href=""><img src="" alt="" /></a>
</li>
<li>
<a href=""><img src="" alt="" /></a>
</li>
<li>
<a href=""><img src="" alt="" /></a>
</li>
<li>
<a href=""><img src="" alt="" /></a>
</li>
<li>
<a href=""><img src="" alt="" /></a>
</li>
<li>
<a href=""><img src="" alt="" /></a>
</li>
<li>
<a href=""><img src="" alt="" /></a>
</li>
<li>
<a href=""><img src="" alt="" /></a>
</li>
<li>
<a href=""><img src="" alt="" /></a>
</li>
<li>
<a href=""><img src="" alt="" /></a>
</li>
<li>
<a href=""><img src="" alt="" /></a>
</li>
<li>
<a href=""><img src="" alt="" /></a>
</li>
<li>
<a href=""><img src="" alt="" /></a>
</li>
<li>
<a href=""><img src="" alt="" /></a>
</li>
<li>
<a href=""><img src="" alt="" /></a>
</li>
<li>
<a href=""><img src="" alt="" /></a>
</li>
<li>
<a href=""><img src="" alt="" /></a>
</li>
<li>
<a href=""><img src="" alt="" /></a>
</li>
<li>
<a href=""><img src="" alt="" /></a>
</li>
<li>
<a href=""><img src="" alt="" /></a>
</li>
</ul>
</div>
code 3

{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #dfdedf;
}
li {
list-style: none;
}
a {
text-decoration: none;
color: #444;
}
header {
height: 4em;
background-color: white;
margin-bottom: 30px;
}
footer {
height: 10em;
background-color: #444;
color: #ccc;
}

.main-top {
height: 510px;
width: 1200px;
margin-bottom: 30px;

display: grid;
grid-template-columns: 216px 1fr;
grid-template-rows: 60px 1fr 120px;
margin: auto;
}

.main-top > ul.navs {
background-color: whitesmoke;
display: grid;
grid-template-columns: repeat(8, 83px) 1fr;
place-items: center;
border-radius: 0 20px 0 0;
}
.main-top > ul.navs > li:last-of-type {
place-self: center start;
padding-left: 30px;
}

.slider {
background-color: lightblue;
}
.main-top > ul.courses {
background-color: wheat;
padding: 10px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;

border-radius: 0 0 20px 0;
}
.main-top > ul.courses > * {
background-color: violet;
border-radius: 10px;
}

body img {
width: 100%;
border-radius: 20px 20px 0 0;
}

.main-courses {
height: 646px;
width: 1200px;
background-color: #fff;

padding: 3em;
margin: 30px auto;
display: grid;
grid-template-rows: 50px 1fr;
gap: 20px;
border-radius: 20px;

box-shadow: 0 0 10px #efefef;
}
.main-courses h3 {
text-align: center;
color: #555;
margin-top: 30px;
}

.main-courses .course-list {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 20px;
}
.main-courses .course-list > * {
background-color: whitesmoke;
border-radius: 20px;

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

如何使用 Markdown and Emmet

2021-03-29 02:22:32

1. Banner: write 8 <li> in a html;

2. Body: 12 columns + 3 rows items;

3. link to css;

4. in css, write details: margin, padding, sizes, colors;