前台的技术有很多种，流行的框架也是枚不胜举，在这里我们只讨论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. Windows之Xmanager连接linux打开Oracle视图操作

    前提:安装Xmanager 能够百度Xmanager下载其破解版或者带注冊机的版本号,也能够官网下载.只是须要秘钥(建议下载企业版) 官网下载地址:http://www.netsarang.com/d ...

  2. Java中自己定义缓存方式

    说说自己在开发中经常用到的写法. /** * 数据缓存 * @author * */public class DataCache {    /** 对象缓存*/    public static Ma ...

  3. complex()

    complex() 用于将一个对象转换为复数 In [1]: complex(123) # 将整数转换为复数 Out[1]: (123+0j) In [2]: complex(') # 将纯数字的字符 ...

  4. ftp服务通信操作

    1.将本地虚拟机网卡设置ip--->2.将虚拟机系统的网卡ip设置--->3.虚拟机设置特定网络模式vm8nat模式: (1) (2) (3) 保证正常互ping 通信, 4.在虚拟机系统 ...

  5. ajax如何上传文件

    PHP: <?php /** * Created by PhpStorm. * User: DELL * Date: 2017/11/23 * Time: 10:57 */ header(&qu ...

  6. thinkphp5 Windows下用Composer引入官方GitHub扩展包

    很多新手,比如说我,写代码就是在windows下,所以总会遇到很多不方便的地方,比如说GitHub上面的代码更新了,要是你在linux,只要几行命令就可以搞定更新了,在windows下面,你需要用到C ...

  7. 【Linux】 ftp 主动被动模式

    LNMP 搭建得服务器,在使用ftp时候,报如下错误: 经查,是ftp 主动模式被动模式问题 工具:  Xftp5   ,把被动模式勾 取消 (其他客户端可以网上查一下 相应的 被动模式转主动模式设置 ...

  8. struts2基础---->自定义类型转换器

    这一章,我们开始struts2中自定义类型转换器的学习. 自定义类型转换器

  9. Java三方---->Thumbnailator框架的使用

    Thumbnailator是一个用来生成图像缩略图的 Java类库,通过很简单的代码即可生成图片缩略图,也可直接对一整个目录的图片生成缩略图.有了它我们就不用在费心思使用Image I/O API,J ...

  10. 网络虚拟化技术（二）: TUN/TAP MACVLAN MACVTAP

    TUN 设备 TUN 设备是一种虚拟网络设备,通过此设备,程序可以方便得模拟网络行为.先来看看物理设备是如何工作的: