Web前端速成(Html+Css+JavaScript+jQuery)-14.页面布局

乐地课堂

已于 2023-06-11 00:53:12 修改

阅读量243

点赞数

分类专栏：前端开发文章标签：前端 css javascript html jquery

于 2023-05-12 17:34:06 首次发布

本文链接：https://blog.csdn.net/dhldhl/article/details/130624185

版权

前端开发专栏收录该内容

25 篇文章 1 订阅

订阅专栏

内容摘要：
- 以案例为分析讲解页面布局的思路

14.页面布局

知识点：

把文字，图片，链接等html元素通过css的样式设定，按美工设计的样式在页面指定的位置展示出来这样的过程就是页面布局过程。
页面布局思路
- step1
  - 分析页面整体结构
  - 实现整体页面框架布局
    - HTML设置布局元素
    - CSS写样式文件
    - 调试预览
- step2
  - 分析页面局部结构
编写顺序原则先全局再到局部，按从上到下，从外到里的顺序。

实例分析：

备注：

请亲自动手模仿着去实践。
整体页面结构提供了分析和代码。
局部部分请按整体页面的实现思路去实践。

以京东官网首页参考

https://global.jd.com/

分析页面结构。
- (1)整体页面划分

实现整体页面框架布局
- 设置HTML布局元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>整体页面划分布局</title>
  <link rel="stylesheet" type="text/css" href="all.css?v=4">   
</head>
<body>
	  <div id="topBanner" >
	  </div>
	  <div id="header" >
	  </div>
	  <div id="middle">
	    <div class="content">
	      <div class="floor f1">
	      </div>
	      <div class="floor f2">  
	      </div>
	      <div class="floor f3">  
	      </div>
	    </div> 
	  </div>
	  <div id="bottom">   
	  </div>  
</body>
</html>

写CSS样式文件

 /*全局属性设定*/body {
    -webkit-font-smoothing: antialiased;
    background: #f5f5f5;
    color: #666;
    font-family: Microsoft YaHei;
    font-size: 12px;  
}

a, address, b, big, blockquote, body, center, cite, code, dd, del, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, label, legend, li, ol, p, pre, small, span, strong, u, ul, var {
    margin: 0;
    padding: 0;
}

div {
    display: block;
}

/*Banner设定*/
#topBanner {
    width: 100%;
    height: 30px;
    line-height: 30px;
    background: #e3e4e5;
    border-bottom: solid 1px #ddd;
}

/*头部设定*/
#header {
    background: #f0f3ee;
    height: 139px;
}

/*中部设定*/
#middle {
    width: 100%;
    /*此处background便于查看元素位置用，实际使用时要清理*/
    background: #94a38a;    
}
/*中部内容设定*/
.content {
    width: 100%;
    height: 1050px;
    /*此处background便于查看元素位置用，实际使用时要清理*/     
    background: #2626dd;
}
/*中部内容公共部分设定*/
.floor {
    margin-left: auto;
    margin-right: auto;
    width: 1190px; 
    overflow: unset;
    position: relative;
    /*此处background便于查看元素位置用，实际使用时要清理*/
    background: #e4eadf;   
}
/*中部内容各部分设定*/
.f1 {
    height: 250px;   
    /*此处background便于查看元素位置用，实际使用时要清理*/
    background: #26dd4b;
}
.f2 {    
    height: 350px;
    /*此处background便于查看元素位置用，实际使用时要清理*/
    background: hsl(53, 81%, 55%);
}
.f3 {
    height: 450px;
    /*此处background便于查看元素位置用，实际使用时要清理*/
    background: #f22f35;
}
/*底部设定*/
#bottom {
    background: #3d860b;
    height: 150px;
}

2.) 分析页面局部结构-部分例子