接下来的下面代码，只是给了一个大的前端编写布局，如果你已经是牛人了，就当没看到，如果是一些初学者，不妨拿去用用，里面也写了一些常用的css样式，现在虽然有很多牛逼的前段框架，用起来也非常得心应手，但是如果你要对自己很多定制化需求，最后肯定是要自己来编写前端页面的

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <!--网页标题-->

    <title>我搜</title>

    <!--网页图标-->

    <link rel="icon" href="//www.jd.com/favicon.ico">

    <!--文件引入CSS样式-->

    <link rel="stylesheet" href="niubi.css">

    <style>

        *{

           margin:0px;

           border:0px;

           padding:0px;

           font-size:14px;

        }

        ul{

            list-style:none;

        }

        .test{

            border:2px yellow bolid;

        }

        a{

            text-decoration:none;

        }

        body{

            background:white;

        }

        .w{

            width:980px;

            margin:0 auto;

        }

        .clear{

            clear:both;

        }

        .d{

            position:relative;

        }

    </style>

</head>

<body>

    <!--页面布局-->

    <div class="pg-header">

        <div class="w"></div>

    </div>

    <div class="pg-body">

        <div class="w"></div>

    </div>

    <div class="pg-foot">

        <div class="w"></div>

    </div>

    <!--文件引入js-->

    <script src="jquery-1.8.2.js"></script>

    <script>

        //增加其他代码

    </script>

</body>

</html>

HTML页面布局的更多相关文章

  1. 前端框架 EasyUI （2）页面布局 Layout

    在 Web 程序中,页面布局对应用程序的用户体验至关重要. 在一般的信息管理类的 Web 应用程序中,页面结构通常有一个主工作区,然后在工作区上下左右靠近边界的区域设置一些边栏,用于显示信息或放置一些 ...

  2. Xamarin+Prism开发详解五：页面布局基础知识

    说实在的研究Xamarin到现在,自己就没设计出一款好的UI,基本都在研究后台逻辑之类的!作为Xamarin爱好者,一些简单的页面布局知识还是必备的. 布局常见标签: StackLayout Abso ...

  3. CSS3与页面布局学习总结（八）——浏览器兼容与前端性能优化

    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

  4. CSS3与页面布局学习总结（七）——前端预处理技术（Less、Sass、CoffeeScript、TypeScript）

    CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象 ...

  5. CSS3与页面布局学习总结（四）——页面布局大全

    一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...

  6. 【Android】纯代码创建页面布局（含异步加载图片）

    开发环境:macOS 10.12 + Android Studio 2.2,MinSDK Android 5.1 先看看总体效果 本示例是基于Fragment进行的,直接上代码: [界面结构] 在 F ...

  7. 如何在ASP.NET Web站点中统一页面布局[Creating a Consistent Layout in ASP.NET Web Pages(Razor) Sites]

    如何在ASP.NET Web站点中统一页面布局[Creating a Consistent Layout in ASP.NET Web Pages(Razor) Sites] 一.布局页面介绍[Abo ...

  8. CSS3与页面布局学习笔记（四）——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)

    一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...

  9. CSS3与页面布局学习笔记（八）——浏览器兼容性问题与前端性能优化方案

    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

  10. SharePoint 2013 入门教程之创建页面布局及页面

    在SharePoint的使用过程中,页面布局和页面时很重要的两个概念,主要用于数据个性化展示,下面,我们简单介绍一下SharePoint的页面布局和页面的个性化. 一. SharePoint页面模型概 ...

随机推荐

  1. windows 2008 R2 x64安装oracle12c报INS-30131

    问题描述:Window 2008 R2 x64安装Oracle12c报[INS-30131]执行安装程序验证所需的初始设置失败 解决方法:先在控制面板的“服务”,看SERVER服务是否启动,如果没有启 ...

  2. EditPlus设置html和js文件的注释快捷键

    EditPlus默认是可以通过快捷键注释html的,格式是 <!-- </label> <label>类型</label> <label> --& ...

  3. ZOJ 3827 Information Entropy （2014牡丹江区域赛）

    题目链接:ZOJ 3827 Information Entropy 依据题目的公式算吧,那个极限是0 AC代码: #include <stdio.h> #include <strin ...

  4. python元组、列表的异同总结

    定义的异同: 列表(list):[] list是一种有序的集合,能够随时加入和删除当中的元素.用 [] 表示. 列表的三个特性:①创建之后也能够加减改动元素. ②元素能够是数字.字符.变量等.也能够混 ...

  5. 浅谈C语言中断处理机制

    一.中断机制 1.实现中断响应和中断返回 当CPU收到中断请求后,能根据具体情况决定是否响应中断,如果CPU没有更急.更重要的工作,则在执行完当前指令后响应这一中断请求.CPU中断响应过程如下:首先, ...

  6. [na]esxi6.5的vmware安装

    安装exsi6.5(最新的软件见评论区) ,安装 ,激活(可选) ,浏览器登录(.5好像没客户端了,所以就用浏览器,挺方便的) 安装包和key包在网盘里: 链接:https://pan.baidu.c ...

  7. php画图应用之验证码

    在画图里面,就像之前所说的.php的画图是真正动态画图,尽管自己承认会出的图是非常不好看的.但我们主要关注的应该还是数据处理. 验证码我们差点儿无处不见,它的产生和画图技术是密不可分的.事实上,简单的 ...

  8. Ionic学习笔记1_基本布局

    <body> <!-- 头部 -->                               bar里嵌入子元素:title,button,button-bar和 inpu ...

  9. __attribute__系列之aligned

    __attribute__的属性aligned,作用是为了设置字节对齐. aligned是对 变量和结构体进行 字节对齐的属性设置. 通过aligned属性设置(aligned(对齐字节数)),可以显 ...

  10. iOS多线程（转）

    关于iOS多线程,你看我就够了 字数8596 阅读28558 评论74 喜欢313 在这篇文章中,我将为你整理一下 iOS 开发中几种多线程方案,以及其使用方法和注意事项.当然也会给出几种多线程的案例 ...