html在页面中间一块白色,footer 中加了标签就会和上一个div中间出现了白色间隔...

这篇博客探讨了如何使用HTML和CSS创建一个完整的网页布局,包括头部、主体和底部。头部采用#4CAF50背景色,占据屏幕的10%,而导航栏高度为40%,整个页面具有平滑的过渡效果,特别是当鼠标悬停在导航栏上时,会进行180度旋转。此外,针对电脑和移动设备分别设置了不同的背景颜色。
摘要由CSDN通过智能技术生成

html>

网页头部

脚部

html,

body {

width: 100%;

height: 100%;

margin: 0px;

padding: 0px;

color: white;

text-align:center

}

header {

background-color: #4CAF50;

height: 10%

}

nav {

height: 40%;

width: 100%;

}

footer{

background-color: #;

height: 10%;

background-color: #FFC90E;

}

#computer {

width: 100%;

height: 100%;

background-color: #F36F36;

margin: auto;

}

#mobile {

width: 100%;

height: 100%;

background-color: #00A89C;

}

nav {

-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */

transition: width 2s, height 2s, transform 2s;

/*background-color: #F36F36;*/

}

nav:hover {

-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */

transform: rotate(180deg);

}

b0e4570067da0abc555db141cdc9516a.png

footer中不写标签则全部贴合在一起

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值