前台的技术有很多种，流行的框架也是枚不胜举，在这里我们只讨论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 Item43 -- Struts2开发入门

    一.Struts2概述 1.Struts2是什么? Struts2是一个M(模型-域–范围模型)V(View视图)C(控制器)框架(模型2).框架都是一个半成品. 提高开发效率. Struts1是一个 ...

  2. POJ 1243 One Person

    题意: 猜数字, 给定 G, L, G 表示可以猜的次数, 每猜一次, G减一, 假如猜的 number 大于 target, L 还需减一, 当 L == -1 或者 G==0 时, 若还没猜中, ...

  3. ios开发之--简单动画效果的添加

    记录一个简单的动画效果,自己写的,很简单,仅做记录. 附一个demo的下载地址: https://github.com/hgl753951/hglTest.git 代码如下: 1,准备 BOOL _i ...

  4. laravel 模版引擎使用

    laravel 模版引擎以 @标签 开头,以 @end标签 结尾,常用有 foreach foreachelse if for while等 1)foreach 和 foreachelse 差不到,区 ...

  5. eclipse、tomca和jvm的相关内存配置

    1,  设置Eclipse内存使用情况        修改eclipse根目录下的eclipse.ini文件        -vmargs  //虚拟机设置        -Xms40m        ...

  6. C++11新特性之四——nullptr

    1. 引入nullptr的原因 引入nullptr的原因,这个要从NULL说起.对于C和C++程序员来说,一定不会对NULL感到陌生.但是C和C++中的NULL却不等价.NULL表示指针不指向任何对象 ...

  7. 日记整理---->2016-11-22

    这里记录一些关于jquery的一些知识.这里面主要是$().method方法的书写框架以及jquery中each函数的使用.等待太久得来的东西,多半已经不是当初想要的样子了. 一.基于$().meth ...

  8. js的声明提前

    由于js声明提前的作用,所以在js中后面定义的函数也可以再前面使用. 不过,项目中看到过这样的写法 var a = function(){}, b = function(){}; 这种写法使代码看上去 ...

  9. ios 的ASIHTTPRequest学习

    发起一个同步请求 同步意为着线程阻塞,在主线程中使用此方法会使应用Hang住而不响应任何用户事件.所以,在应用程序设计时,大多被用在专门的子线程增加用户体验,或用异步请求代替(下面会讲到). - (I ...

  10. 熵 互信息 Gini指数 和 不纯度

    在学习决策树类的算法时,总是绕不开 信息熵.Gini指数和它们相关联的概念,概念不清楚,就很难理解决策树的构造过程,现在把这些概念捋一捋. 信息熵 信息熵,简称熵,用来衡量随机变量的不确定性大小,熵越 ...