초보자 기사: ccs를 사용하여 간단한 레이아웃을 만드는 방법(코드 포함)
- 奋力向前원래의
- 2021-09-03 17:29:132593검색
이전 글 "css3를 사용하여 멋진 네비게이션 바 효과를 만드는 방법을 단계별로 가르쳐주세요(자세한 코드 설명) "에서는 CSS3를 사용하여 멋진 네비게이션 바 효과를 만드는 방법을 소개했습니다. 다음 기사에서는 HTML을 사용하여 간단한 레이아웃을 만드는 방법을 소개합니다.
생활 속 인터넷이 발달하면서 웹페이지에 이런 레이아웃이 나오는 경우가 많습니다. 렌더링 효과를 본 후 이를 구현하는 방법을 연구하고 div+css 레이아웃을 설명하겠습니다. 여러분. 기본 과정.
1. html
Html 편집 코드 예제
<!DOCTYPE html> <html> <head> <title></title> </head> <body> </body> </html>
2를 생성합니다. 텍스트가 포함된 div 제목을 정의하고 class 속성을 사용하여 스타일을 지정합니다. div大标题同时使用class属性向样式。
<div class="title">顶部</div> <div class="footer">底部</div>
3、在style之间，对body进行样式初始化，添加设置外边距margin为0，内边距padding为0，然后使用设置文字居中text-align。
<style type="text/css">
body{text-align: center;margin: 0;padding: 0}
</style>4、在style之间，对div进行样式添加设置所有的div高度为200px，内容的颜色为红色。
div{height: 200px;color: red;} 5、在style之间，对title进行样式使用div创建网页的头部，使用margin:0 auto设置div居中，同时设置其宽度为800px，背景颜色为灰色。
.title{margin: 0 auto; width: 800px; background-color: #ccc}6、在style之间，使用div创建网页的底部，使用clear:both清除上面div的浮动，避免影响底部的布局。接着使用margin:0 auto设置div居中，又使用设置其宽度为800px，最后背景颜色为#000fff
.footer{clear: both;margin: 0 auto;width: 800px;clear: both;background-color:#000fff}3. style 사이에 body 스타일을 초기화하고 외부 여백 margin을 0으로 추가하고 내부 여백 padding은 0이고, text-align을 사용하여 텍스트를 중앙에 배치합니다. <!DOCTYPE html>
<html>
<head>
<title>布局</title>
</head>
<body>
<style type="text/css">
body{text-align: center;margin: 0;padding: 0}
div{height: 200px;color: red;}
.title{margin: 0 auto; width: 800px; background-color: #ccc}
.footer{clear: both;margin: 0 auto;width: 800px;clear: both;background-color:#000fff}
</style>
<div class="title">顶部</div>
<div class="footer">底部</div>
</body>
</html>4. style 사이에 div에 스타일을 추가하고 모든 div의 높이를 200px로 설정하고 콘텐츠의 색상을 빨간색. rrreee
5. style, style title 사이에 div를 사용하여 웹페이지의 헤드를 만들고 margin:0 auto를 사용하여 set div는 중앙에 위치하며 너비는 800px로 설정되고 배경색은 회색입니다.
6. style 사이에서 div를 사용하여 웹페이지 하단을 만들고, clear:both를 사용하여 위의 divcode>는 하단 레이아웃에 영향을 주지 않도록 플로팅됩니다. 그런 다음 margin:0 auto를 사용하여 div를 중앙에 배치하고 너비를 800px로 설정하고 마지막으로 배경색은 #000fff입니다. 코드>.
7. 브라우저에서 파일을 열어서 효과를 확인해 보세요.
🎜🎜전체 코드🎜rrreee🎜추천 학습: 🎜CSS 비디오 튜토리얼🎜🎜위 내용은 초보자 기사: ccs를 사용하여 간단한 레이아웃을 만드는 방법(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!