用Gridg与Flex写PC端淘宝

建二个文件 1.html 2.css

html

用Grid与Flex写PC端淘宝

{

}

{

查询}

{}

分类 女装/内衣/奢品 女鞋/男鞋/箱包 美妆/饰品/洗护 男装/运动/百货 手机/数码/企业礼品 家装/电器/车品 食品/生鲜/母婴 医药/保健/进品 </html>

css

css/nav.css

{

margin: 0;

padding: 0;

box-sizing: border-box;

}

header {

background-color: #333;

}

header .wrap {

width: 1000px;

margin: auto;

display源码搭建wcqh.cn: flex;

place-items: center center;

}

header .wrap .logo {

padding: 1em;

transition: background-color 0.3s linear;

}

header .wrap .logo,

header .wrap .login a {

color:#bbb;

text-decoration:none;

}

header .wrap .login {

margin-left: auto;

display: flex;

}

header .wrap .login a: hover{

background-color: seagreen;

color源码搭建wcqh.cn: white;

}

main .container {

width: 1800px;

display: grid;

grid-template-columns: repeat(3,300px);

grid-template-rows: repeat(2,300px);

grid-auto-flow: row;

place-content: center center;

}

main .container .item {

width: 9rem;

height: 5rem;

}

图示