前台的技术有很多种，流行的框架也是枚不胜举，在这里我们只讨论html，css，js这些基本的技术，相信大家如果掌握了这些最基本的技术，其他的技术也就会使用了。

下面是一个案例的形式来讲解上述的技术。

　　首先我们在开发界面的时候，都需要先把网页的框架搭建起来，网页的框架一般都会分为三部分，头部，中间部分，底部

　　

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title>网站</title>

	</head>

	<link rel="stylesheet" type="text/css" href="css/index.css"/>

	<body>

		<div id="header">顶部</div>

		<div id="main">

			<div id="main1">

				<div style="height: 600px;"></div>

			</div>

		</div>

		<div id="footer">底部</div>

	</body>

</html>

框架搭建好之后就是写我们的样式：样式的编写的时候，首先把不需要的样式去掉，在这里我自恋的把它命名为网页的初始化样式嘿嘿。

body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,input,textarea{

	margin: 0px;

	padding: 0px;

	font-size: 13px;

}

ul{

	list-style: none;

}

img,a img{

	border: 0px;

	text-decoration: none;

}

a{

	text-decoration: none;

}

a:hover{

	text-decoration: underline;

}

页面样式的初始化完成之后，就是写我们自己在html中定义的div的样式，这些样式是我们根据需求来完成。

#header{

	height: 452px;

	background: url(../img/top_bg.jpg) repeat-x;

}

#main{

	background: url(../img/main_top_bg.jpg) repeat-x;

}

#main1{

	background:url(../img/main1_bottom_bg.jpg) 0px bottom repeat-x;

}

#footer{

	height: 100px;

	background: url(../img/footer_bg.jpg) repeat-x;

}

Web前台学习总结的更多相关文章

  1. web前端学习就这9个阶段，你属于哪个阶段？

    第一阶段:HTML+CSS: HTML进阶.CSS进阶.div+css布局.HTML+css整站开发. JavaScript基础:Js基础教程.js内置对象常用方法.常见DOM树操作大全.ECMAsc ...

  2. Web前端学习攻略

    HTML+CSS: HTML进阶.CSS进阶.div+css布局.HTML+css整站开发. JavaScript基础: Js基础教程.js内置对象常用方法.常见DOM树操作大全.ECMAscript ...

  3. 风炫安全web安全学习第三十四节课 文件包含漏洞防御

    风炫安全web安全学习第三十四节课 文件包含漏洞防御 文件包含防御 在功能设计上不要把文件包含的对应文件放到前台去操作 过滤各种../,https://, http:// 配置php.ini文件 al ...

  4. 每天成长一点---WEB前端学习入门笔记

    WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...

  5. 【web前端学习部落22群】分享 碰撞的小球开源小案例

    对于课程中的疑问,大家可以加 web前端学习部落22群 120342833和其他老师还有众多的小伙伴们进行沟通交流哦,群里还有不少技术大拿.行业大牛 可以一起探讨问题,我们也会安排专业的技术老师为大家 ...

  6. web前端学习部落22群开源分享 左边菜单导航

    有大量web前端开发工具及学习资料,可以搜群[ web前端学习部落22群 ]进行下载,遇到学习问题也可以问群内专家以及课程老师哟 <!DOCTYPE html> <html lang ...

  7. 【前端】移动端Web开发学习笔记【2】 & flex布局

    上一篇:移动端Web开发学习笔记[1] meta标签 width设置的是layout viewport 的宽度 initial-scale=1.0 自带 width=device-width 最佳实践 ...

  8. 【前端】移动端Web开发学习笔记【1】

    下一篇:移动端Web开发学习笔记[2] Part 1: 两篇重要的博客 有两篇翻译过来的博客值得一看: 两个viewport的故事(第一部分) 两个viewport的故事(第二部分) 这两篇博客探讨了 ...

  9. 【前端】Web前端学习笔记【2】

    [2016.02.22至今]的学习笔记. 相关博客: Web前端学习笔记[1] 1. this在 JavaScript 中主要有以下五种使用场景 在全局函数调用中,this 绑定全局对象,浏览器环境全 ...

随机推荐

  1. 超全面的JavaWeb笔记day07<Java基础加强>

    1.myeclipse安装和使用(**) 2.debug调试模式(**) - F6: 单步执行 - F8:结束断点,后面有断点到下一个断点 3.myeclipse快捷键(**) 4.junit单元测试 ...

  2. Extjs3.4--TabpanelDemo

    Ext.onReady(function () { var tab = new Ext.TabPanel({ renderTo: Ext.getBody(), height: 500 }) tab.a ...

  3. Mac下，如何把Github上的仓库删除掉

    这个虽然简单,但是还是做个记录,当初也是找不到地方,最终还是去百度了,步骤很简单: 如下: 1.进入Github主页,选中你要删除的仓库,点击进入到如下页面:

  4. Android 能够暂停的录音功能

    Android ApI提供了MediaRecorder和AudioRecord两个类给开发者来很方便地实现音视频的录制(前者可以实现音频和视频的录制,后者只能实 现音频的录制).这两个类都提供了sta ...

  5. django model 数据类型

    转自:http://www.cnblogs.com/lhj588/archive/2012/05/24/2516040.html Django 通过 models 实现数据库的创建.修改.删除等操作, ...

  6. 管理开机启动：systemd

    一.CentOS7 systemd 介绍 在 CentOS7 中,使用 systemd 来管理其他服务是否开机启动,systemctl 是 systemd 服务的命令行工具 [root@localho ...

  7. Vitamio视频播放器

    前言 虽然Android已经内置了VideoView组件和MediaPlayer类来支持开发视频播放器,但支持格式.性能等各方面都十分有限,这里与大家一起利用免费的Vitamio来打造属于自己的And ...

  8. STM32总线结构和存储器

    也就说我们所操作的就是别名区的位

  9. Fatal error Using $this when not in object context in

    大致意思是 $this 没有上下文,原因是没有对此类进行实例化. 出现此错误的原因是:在FileCommand.php中使用 $this->方法/属性. $this 不是不可以用,而是要看情况用 ...

  10. 【原创】asp.net内部原理（三） 第三个版本 (最详细的版本)

    前言: 今天继续吧这个系列补齐,这几天公司的项目比较忙,回到家已经非常的累了,所以也没顾得上天天来这里分享一些东西和大家一起探讨,但是今天晚上我还是坚持打开电脑,分享一些asp.net生命周期的知识, ...