barger

最新推荐文章于 2025-05-06 16:33:34 发布

江淼11

最新推荐文章于 2025-05-06 16:33:34 发布

阅读量136

点赞数

分类专栏： html 文章标签： html

本文链接：https://blog.youkuaiyun.com/m0_69422950/article/details/124426780

版权

html 专栏收录该内容

12 篇文章

订阅专栏

<!DOCTYPE html>

<head>

<title>berger&fohr</title>

<style>

/* 公共样式 */

html {

font-size:62.5% ;

}

a,span{

color: #000;

font-size: 2rem;

}

nav{

width: 80%;

height: 60px;

background-color: #fff;

position: fixed;

top:0;

}

nav ul {

width: 100%;

height: 60px;

}

</style>

</head>

<body>

<nav>

<li>

<a href="#">Berger & Fohr</a>

</li>

<li>

<a href="#">Identities</a>

<a href="#">About</a>

</li>

<li>

<a href="#">Art</a> / <a href="#">Store</a>

</li>

</ul>

<li><a href="#">Berger & Fohr</a> </li>

</ul>

</nav>

<main>

<p><a href="#">Identity Gallery</a></p>

</div>

<p><a href="#">LifeLabs</a></p>

</div>

<p><a href="#">I can't Breathe</a></p>

</div>

</div>

<p><a href="#">Burton</a></p>

</div>

<p><a href="#">ATLAS Institute</a></p>

</div>

</div>

<p><a href="#">Alleans Renewables</a></p>

</div>

<p><a href="#">Saatchi & Saatchi</a></p>

</div>

</main>

<p><a href="#">@bergerfohr</a></p>

<p><a href="#">hello@bergerfohr.com</a></p>

</footer>

</div>

</body>

</html>

pc.css

.wrap {

width: 80%;

margin: 0 auto;

padding-top: 80px;

}

.phone {

display: none;

}

.pc li{

line-height: 60px;

font-size: 2rem;

overflow: hidden;

}

.pc li:nth-of-type(1) {

width: 30%;

height: 100%;

float: left;

}

.pc li:nth-of-type(2) {

width: 40%;

height: 100%;

float: left;

text-align: center;

}

.pc li:nth-of-type(2) a{

margin: 0 5px;

}

.pc li:nth-of-type(3) {

width: 30%;

height: 100%;

float: left;

text-align: right;

}

main {

overflow: hidden;

}

main .item {

width: 32%;

float: left;

margin-right: 2%;

}

main .item:nth-of-type(3n) {

margin-right: 0;

}

main .item img {

display: block;

width: 100%;

}

main .item p {

height: 5rem;

line-height: 5rem;

}

footer {

height: 5rem;

}

footer P {

height: 100%;

line-height:5rem ;

float: left;

width: 30%;

}

footer p:nth-of-type(2){

width: 40%;

text-align: center;

}

footer p:nth-of-type(3){

text-align: right;

}

phone.css

.wrap {

width: 92%;

margin: 0 auto;

padding-top: 80px;

}

nav {

width: 92%;

}

.pc {

display: none;

}

.phone {

width: 100%;

height: 60px;

}

.phone li {

width: 50%;

height: 60px;

line-height: 60px;

font-size:2rem ;

float: left;

}

.phone li:nth-of-type(2) a {

float: right;

width: 20px;

height: 20px;

background-image: url(../img/menu.png);

background-size: 100% 100%;

margin-top:20px ;

}

main {

overflow: hidden;

}

main .item {

width: 100%;

}

main .item:nth-of-type(3n) {

margin-right: 0;

}

main .item img {

display: block;

width: 100%;

}

main .item p {

height: 5rem;

line-height: 5rem;

}