HTML页面布局
接下来的下面代码，只是给了一个大的前端编写布局，如果你已经是牛人了，就当没看到，如果是一些初学者，不妨拿去用用，里面也写了一些常用的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页面布局的更多相关文章
- 前端框架 EasyUI （2）页面布局 Layout
在 Web 程序中,页面布局对应用程序的用户体验至关重要. 在一般的信息管理类的 Web 应用程序中,页面结构通常有一个主工作区,然后在工作区上下左右靠近边界的区域设置一些边栏,用于显示信息或放置一些 ...
- Xamarin+Prism开发详解五：页面布局基础知识
说实在的研究Xamarin到现在,自己就没设计出一款好的UI,基本都在研究后台逻辑之类的!作为Xamarin爱好者,一些简单的页面布局知识还是必备的. 布局常见标签: StackLayout Abso ...
- CSS3与页面布局学习总结（八）——浏览器兼容与前端性能优化
一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
- CSS3与页面布局学习总结（七）——前端预处理技术（Less、Sass、CoffeeScript、TypeScript）
CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象 ...
- CSS3与页面布局学习总结（四）——页面布局大全
一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
- 【Android】纯代码创建页面布局（含异步加载图片）
开发环境:macOS 10.12 + Android Studio 2.2,MinSDK Android 5.1 先看看总体效果 本示例是基于Fragment进行的,直接上代码: [界面结构] 在 F ...
- 如何在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 ...
- CSS3与页面布局学习笔记（四）——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)
一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
- CSS3与页面布局学习笔记（八）——浏览器兼容性问题与前端性能优化方案
一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
- SharePoint 2013 入门教程之创建页面布局及页面
在SharePoint的使用过程中,页面布局和页面时很重要的两个概念,主要用于数据个性化展示,下面,我们简单介绍一下SharePoint的页面布局和页面的个性化. 一. SharePoint页面模型概 ...
随机推荐
- Spring核心项目及微服务架构方向
spring 顶级项目:Spring IO platform:用于系统部署,是可集成的,构建现代化应用的版本平台,具体来说当你使用maven dependency引入spring jar包时它就在工作 ...
- 转：EMQ（emqttd） 2.x 安装和使用（物联网传输控制协议的Broker）
支持下国产开源. MQTT物联网传输控制协议:<MQTT-3.1.1-CN.pdf> 下载:emqttd-centos64-v2.0-rc.2-20161019.zip 安装: $ unz ...
- HIVE中join、semi join、outer join
补充说明 left outer join where is not null与left semi join的联系与区别:两者均可实现exists in操作,不同的是,前者允许右表的字段在select或 ...
- sql中的笛卡尔积
sql中的笛卡尔积 我们对数据库表进行操作时,经常会对多张表进行关联,多表连接查询大家肯定不会陌生,但是一不小心很容易出来庞大冗余的数据. 笛卡尔积数学概念 笛卡尔积是指在数学中,两个集合X和Y的笛卡 ...
- 5 月 35 日临近，Google 无法访问，可以使用 Google IP 来解决。
每年都会有几天那啥,你懂的. 直接使用 Google 的域名访问经常会打不开,而使用 Google 的 IP 就会很顺畅. 使用 Chrome 浏览器我们经常都会在地址栏直接搜索,所以我们只要添加一个 ...
- C语言指针解说
指针是C语言的一种数据类型.类似于C中的其它类型,比如int ,char 等.既然指针是一种类型,当我们定义该类型变量.该类型变量就称为指针变量. C中有了指针就有了指向. 指向:指针变量指向本身保存 ...
- MySQL同步状态双Yes的假象及 seconds_behind_master的含义
MySQL同步状态双Yes的假象及seconds_behind_master的含义 近期由于特殊原因有一台主库宕机了一个小时没有处理,说起来这是个挺不好啥意思的事情,但是由于这个事情反而发现个比较 ...
- CentOS 7 换yum源
备份原来的源 sudo mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.bk 下载阿里源 $ cd /et ...
- postgresql on centos (sequelize+pg+nodejs):Failed to find PostgresSQL server.Pleast double check your settings
公司的一个项目,使用的nodejs做服务端,数据库是postgresql,在本地时一切ok,放在centos时,postgresql配置ok,可以远程访问,但是nodejs在centos启动时,就会报 ...
- error LNK2019: unresolved external symbol 的一个解决方法
在VS2010中使用opencv时,有时会出现如下类似的连接错误: 解决方法:根据头文件手动指定lib文件 #ifdef _DEBUG #pragma comment(lib,"*.lib& ...