前台的技术有很多种，流行的框架也是枚不胜举，在这里我们只讨论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--添加新手引导页

    swift和oc逻辑上都是一样的,只是写法不一样,可以使用一个view,也可以使用一个viewController,两种都可以的,使用view注意初始化的时候给他一个frame,vc的话,直接在本控制 ...

  2. GIS-005-Dojo & jQuery 事件处理

    1.添加事件 dojo.connect(dojo.byId("SelectRect"), "onclick", function () { //todo }); ...

  3. nginx 重复提交 重复请求问题

    我遇到的奇葩问题. 后台使用的是nginx + tomcat 前端页面确实只发送了一个ajax请求到后台. 后台却接收到了两条请求! 百度了一下,说是因为nginx负载均衡,一个请求超时后会重复发送一 ...

  4. 【VUE】Mac下vue 开发环境搭建，以及目录结构

    1 安装Node.js 参看 node.js环境安装   http://www.cnblogs.com/richerdyoung/p/7265786.html 2 安装淘宝镜像 npm install ...

  5. 【Java nio】Channel

    package com.slp.nio; import org.junit.Test; import java.io.*; import java.nio.ByteBuffer; import jav ...

  6. Mahout实现基于用户的协同过滤算法

    Mahout中对协同过滤算法进行了封装,看一个简单的基于用户的协同过滤算法. 基于用户:通过用户对物品的偏好程度来计算出用户的在喜好上的近邻,从而根据近邻的喜好推测出用户的喜好并推荐. 图片来源 程序 ...

  7. su命令cannot set groups: Operation not permitted的解决方法

    版权声明:本文由曾倩倩原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/103 来源:腾云阁 https://www.qclo ...

  8. 有关InitialContext()的困惑 <转>

    Context initial = new InitialContext();Object objref = initial.lookup("java:comp/env/ejb/Simple ...

  9. rpm方式安装 gitlab centos7

    一.使用RPM安装 - 推荐 官方推荐的下载地址:https://mirrors.tuna.tsinghua.edu.cn/gitlab-ce/yum/ Tips 1 : Centos 7使用el7 ...

  10. 1.Math函数对象

    // 属性 Math.E //自然对数的底数(2.718281828459045) Math.PI //圆周率(3.141592653589793) Math.LN2 //2的自然对数(0.69314 ...