进击 of python
Learning the front - page analysis
After school finished html related to simple, entry-level tag, then we are more popular web for
Conduct some web page structure analysis, that is, an analysis of its skeleton
Millet Mall
Construction division
That such a long web page from scratch, we should analyze
Green part: This is the navigation bar on the part of the navigation bar can be called a sub
When we put the mouse on top of the time, it becomes a little hand icon, descriptive text using a label written
Red part: This is really the navigation bar, the logo is generally believed that the line is the navigation bar
When we put the mouse on top of the time, it becomes a little hand icon, descriptive text using a label written
Blue section: in fact, most low-end of the page, about this position, the content of this section is a page of
Pink part: This part is the information page, including hotlines, etc.
So it can be seen, roughly divided into a web page: the navigation bar, the main page, the page information three parts, like the head and body as the foot!
Jingdong and Taobao site to practice their own division structure Well
Analysis of the entire station
he came! he came! He took divthe way up! Remember div is doing it, it is not to divide the page, ah
That we now come up with this part of careful study:
You can see the separation of the two parts of pink and yellow, and the yellow part of the separation of the green and red portions
left 12个链接 a
right 1个链接 a
right 1个链接 aThen Analysis:
Seen here divided into three parts:
lift logo
图片链接 a+img
mid 9个链接 a
right 搜索
from表单
inputProbably like it
That this has anything to do with div? ? ? Promising ah! Next is the pseudo-code time!
<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>You can keep up? ? ? That continues!
<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>Finally, we add a little detail:
<!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>
Some students might say, this layout does not, ah, not in line ah ~
This does not look good ah! This picture what the background color?
Rest assured that location to learn the layout and CSS, these problems solved!
Look, the tip is so simple!
Try to look at yourself and Jingdong Taobao ah!