京东首页之页面分析

亦凉 2022-07-13 13:23 1783阅读 0赞

京东首页效果图：

![Center][]

当面对一张设计师给出的网页效果时，我们切不可急忙着手去敲代码实现相应的效果。这样做可能在后续工作中会让我们因当初的考虑不周而事倍功半。所以为了防止这样的情况出现，我觉得应该按照以下步骤去执行，可能效率会更高。

1、根据效果图，先分析页面的基本布局；

2、从上到下，由左至右，详细分析；

3、分块实现

此页面分析如下：本京东首页页面由上到下共分为7个部分；分别是：页面顶部、Logo&搜索框、主导航、banner广告部分、页面主体、配送方式、备案号。（注：各部分已在上图用序号详细标出）

基本结构：

![Center 1][]

jd\_index.html

<!doctype html>
    <html>
    	<head>
    		<title>Insert your title</title>
    		<meta charset="utf-8">
    		<link rel="stylesheet" href="jd_index.css">
    	</head>
    	<body>
    		
    		<header id="top">页面顶部</header>
    		
    		<div id="top_main">LOGO 和 搜索框</div>
    		
    		<nav id="nav">主导航</nav>
    		
    		<div id="banner">banner广告部分</div>
    		
    		<section id="main">页面主体</section>
    		
    		<footer id="foot_box">配送方式</footer>
    		
    		<footer id="footer">备案号</footer>
    	</body>
    </html>

jd\_index.css

/*测试属性*/
    #top,#top_main,#nav,#banner,#main,#foot_box,#footer{
    	border:1px solid black;
    }
    /*通用*/
    body{
    	font:12px "microsoft yahei",Arial,Helvetica,sans-serif;
    	color:#666;
    	margin:0;
    }
    ul,p,h1,h2,h3,h4,h5,h6,ol,dl,dd{
    	margin:0;
    	padding:0;
    	list-style:none;
    }
    img{vertical-align:bottom;}
    a{
    	color:#666;
    	text-decoration:none;
    }
    a:hover{
    	color:#FF0700;
    	text-decoration:underline;
    }
    .lf{float:left;}
    .rt{float:right;}
    .clear{clear:both;}
    
    /**布局元素样式**/
    #top,#top_main,#nav,#banner,#main,#foot_box,#footer{
    	width:1211px;
    	margin:0 auto;
    }

[Center]: /images/20220713/996e975b6e104ebd9cfab65d6c4fe578.png
[Center 1]: /images/20220713/3bcdd1cd56cf411cbb068201b841134b.png