进击은 python
전면 학습 - 페이지 분석
간단 엔트리 레벨 태그와 관련된 학교 완성 된 HTML 후, 우리는 더 인기있는 웹 있습니다
그 골격의 분석이다 일부 웹 페이지 구조 분석을 실시
밀레 몰
건설 부문
처음부터 그런 긴 웹 페이지 그건, 우리가 분석해야
녹색 부분이 탐색 바의 부분의 탐색 바는 서브이라 할 수있다
우리는 시간의 상단에 마우스를 넣을 때 약간 손 아이콘, 레이블을 사용하여 설명 텍스트가 기록된다
빨간 부분이 정말 탐색 모음이며, 로고는 일반적으로 라인 탐색 줄 것으로 믿어진다
우리는 시간의 상단에 마우스를 넣을 때 약간 손 아이콘, 레이블을 사용하여 설명 텍스트가 기록된다
블루 섹션 : 사실, 페이지의 가장 저가형은이 위치에 대해이 부분의 내용의 페이지입니다
핑크 부분 :이 부분은 등 핫라인을 포함한 정보 페이지입니다
이 볼 수 있도록, 대략 웹 페이지로 나누어 탐색 모음, 메인 페이지, 페이지 정보 세 부분, 발과 머리와 몸처럼!
Jingdong 및 Taobao의 사이트는 잘 자신의 분할 구조를 연습
전체 역의 분석
그는 왔어요! 그는 왔어요! 그는 갔다 div방식 위로! 그것이 아, 페이지를 분할하지 않는 것입니다, DIV가 그 일을 기억하십시오
우리는 지금주의 연구의이 부분을 마련한다 :
당신은 분홍색과 노란색의 두 부분으로 분리하고, 녹색과 빨간색 부분의 분리의 노란색 부분을 볼 수 있습니다
left 12个链接 a
right 1个链接 a
right 1个链接 a그런 다음 분석 :
여기에 본 세 부분으로 나누어 :
lift logo
图片链接 a+img
mid 9个链接 a
right 搜索
from表单
input아마 그것을 좋아
이 사업부와 아무 상관이 있는지? ? ? 유망 아! 다음 의사 코드 시간입니다!
<body>
副导航
left 12个链接 a
right 1个链接 a
right 3个链接 a
主导航
lift logo
图片链接 a+img
mid 9个链接 a
right 搜索
from表单
input
网页主体
网页尾部
</body><body>
<div>
<!--副导航-->
left 12个链接 a
right 1个链接 a
right 3个链接 a
</div>
<div>
<!--主导航-->
lift logo
图片链接 a+img
mid 9个链接 a
right 搜索
from表单
input
</div>
<div><!--网页主体--></div>
<div><!--网页尾部--></div>
</body><body>
<div>
<!--副导航-->
<div>
<!--left 12个链接 a-->
</div>
<div>
<!--right 1个链接 a-->
</div>
<div>
<!--right 3个链接 a-->
</div>
</div>
<div>
<!--主导航-->
<div>
<!--lift logo-->
<!--图片链接 a+img-->
</div>
<div>
<!--mid 9个链接 a-->
</div>
<div>
<!--right 搜索-->
<!--from表单-->
<!--input-->
</div>
</div>
<div><!--网页主体--></div>
<div><!--网页尾部--></div>
</body>당신은 유지할 수 있습니다? ? ? 즉 계속된다!
<body>
<div>
<!--副导航-->
<div>
<!--left 12个链接 a-->
<a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a
href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a>
</div>
<div>
<!--right 1个链接 a-->
<a href=""></a>
</div>
<div>
<!--right 3个链接 a-->
<a href=""></a>
<a href=""></a>
<a href=""></a>
</div>
</div>
<div>
<!--主导航-->
<div>
<!--lift logo-->
<img src="" alt="">
<!--图片链接 a+img-->
<a href=""></a>
</div>
<div>
<!--mid 9个链接 a-->
<a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a
href=""></a><a href=""></a><a href=""></a>
</div>
<div>
<!--right 搜索-->
<!--from表单-->
<!--input-->
<form action="">
<input type="text">
<input type="submit">
</form>
</div>
</div>
<div><!--网页主体--></div>
<div><!--网页尾部--></div>
</body>마지막으로, 우리는 약간의 세부 사항을 추가 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>body标签的使用</title>
</head>
<body>
<div>
<!--副导航-->
<div>
<!--left 12个链接 a-->
<a href="">小米商城</a>
<a href="">MIUI</a>
<a href="">IoT</a>
<a href="">云服务</a>
<a href="">金融</a>
<a href="">有品</a>
<a href="">小爱开放平台</a>
<a href="">企业团购</a>
<a href="">资质证照</a>
<a href="">协议规则</a>
<a href="">下载app</a>
<a href="">Select Location</a>
</div>
<div>
<!--right 3个链接 a-->
<a href="">登录</a>
<a href="">注册</a>
<a href="">消息通知</a>
</div>
<div>
<!--right 1个链接 a-->
<a href="">购物车</a>
</div>
</div>
<div>
<!--主导航-->
<div>
<!--lift logo-->
<!--图片链接 a+img-->
<a href=""><img src="#" alt=""></a>
</div>
<div>
<!--mid 9个链接 a-->
<a href="">小米手机</a>
<a href="">Redmi 红米</a>
<a href="">电视</a>
<a href="">笔记本</a>
<a href="">家电</a>
<a href="">路由器</a>
<a href="">智能硬件</a>
<a href="">服务</a>
<a href="">社区</a>
</div>
<div>
<!--right 搜索-->
<!--from表单-->
<!--input-->
<form action="">
<input type="text" placeholder="Redmi Note 8 pro 小米9">
<input type="submit" value="#">
</form>
</div>
</div>
<div><!--网页主体--></div>
<div><!--网页尾部--></div>
</body>
</html>
어떤 학생들은 ~이 레이아웃이 아닌 줄 아에, 아,하지 않습니다, 말할 수있다
이 좋은 아를 보이지 않습니다! 이 그림 어떤 배경 색상?
나머지는 레이아웃과 CSS를 배우고 그 위치를 보장, 이러한 문제가 해결!
끝이 너무 간단 봐!
자신과 Jingdong Taobao의 아 살펴보십시오!