前台的技术有很多种，流行的框架也是枚不胜举，在这里我们只讨论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. Swift - UITableView的用法

    因为倾向于纯代码编码,所以不太喜欢可视化编程,不过也略有研究,所以项目里面的所有界面效果,全部都是纯代码编写! 终于到了重中之重的tableview的学习了,自我学习ios编程以来,工作中用得最多的就 ...

  2. python2.0_s12_day13_javascript&Dom&jQuery

    今天主要内容:JavaScriptDomjQuery http://www.cnblogs.com/wupeiqi/articles/5369773.html 今天主要内容大致了解:javascrip ...

  3. shell基础（八）-循环语句

    国庆过后:感觉有点慵懒些了:接着上篇:我们继续来学习循环语句. 一. for循环 与其他编程语言类似,Shell支持for循环. for循环一般格式为: for 变量 in 列表 do command ...

  4. Windows上Tomcat启动，服务中没有Tomcat

    首先需要查看Tomcat的bin目录下是否有service.bat,如果没有需要去下载一版bin目录下有service.bat的Tomcat,只有Windows版本的Tomcat的bin目录下才有se ...

  5. 第七篇：Logistic回归分类算法原理分析与代码实现

    前言 本文将介绍机器学习分类算法中的Logistic回归分类算法并给出伪代码,Python代码实现. (说明:从本文开始,将接触到最优化算法相关的学习.旨在将这些最优化的算法用于训练出一个非线性的函数 ...

  6. 免费在线的web性能测试网站

    由于需要测试网站并发,所以去百度搜了搜,最开始找了个webkaka结果告知,已下线,好像是个很好的在线网站.现在只有网站速度诊断的http://pagespeed.webkaka.com/

  7. Android开发 Android Studio2.0 教程从入门到精通Windows版 - 入门篇

    第一篇 介绍了Android Studio开发环境以及Genymotion虚拟机安装方法,本节将给大家介绍如何使用Android Studio开发应用. 开发第一应用 可以开发属于自己的应用,是否有点 ...

  8. css基础---->学习html(一)

    这里零散的总结一下观看css权威指南书的知识.生命中的诸多告别,比不辞而别更让人难过的,是说一句再见,就再也没见过. 一.首字母与首行的伪类 <dvi> <p>I love y ...

  9. Atlassian Confluence任意文件读取漏洞

    Atlassian Confluence Atlassian Confluence是澳大利亚Atlassian公司的一套专业的企业知识管理与协同软件,也可以用于构建企业WiKi.该软件可实现团队成员之 ...

  10. 学习POC框架pocsuite--编写hellowordPOC

    在这里,首先向安全圈最大的娱乐公司,某404致敬. 参考博文 https://www.seebug.org/help/dev 向seebug平台及该文原作者致敬,虽然并不知道是谁 长话短说其实,可自由 ...