이 글에서 공유한 내용은 반응형 웹 디자인 구현에 관한 내용입니다. 도움이 필요한 친구들에게 도움이 되기를 바랍니다.
#🎜 🎜#
# 🎜🎜#예 르# 🎜🎜#
html:nbsp;html> <meta> <title>响应式设计</title> <link> <link> <link> <p>头部</p> <p> </p><p>左边</p> <p>中间</p> <p>右边</p> <p>底部</p>
.body{ margin:0; } .top,.zhong,.xia{ width:100%; margin:0 auto; } .top{ height:100px; background:#00f; } .zhong{ overflow:hidden; } .xia{ height:100px; background:#ff0; } .left,.zhon,.right{ float:left; } .left{ width:100%; height:200px; background:#0f0; } .zhon{ width:100%; height:350px; background:#f00; } .right{ width:100%; height:200px; background:#00f; }
.body{ margin:0; } .top,.zhong,.xia{ width:100%; margin:0 auto; } .top{ height:100px; background:#00f; } .zhong{ overflow:hidden; } .xia{ height:100px; background:#ff0; } .left,.zhon,.right{ float:left; } .left{ width:30%; height:200px; background:#0f0; } .zhon{ width:70%; height:350px; background:#f00; } .right{ width:100%; height:200px; background:#00f; }
관련 권장 사항:
CSS 반응형 구현 코드 및 효과 정보#🎜 🎜# 반응형 레이아웃을 구현하는 CSS 방법
위 내용은 반응형 웹 디자인을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!