Web前台学习总结
前台的技术有很多种，流行的框架也是枚不胜举，在这里我们只讨论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前台学习总结的更多相关文章
- web前端学习就这9个阶段，你属于哪个阶段？
第一阶段:HTML+CSS: HTML进阶.CSS进阶.div+css布局.HTML+css整站开发. JavaScript基础:Js基础教程.js内置对象常用方法.常见DOM树操作大全.ECMAsc ...
- Web前端学习攻略
HTML+CSS: HTML进阶.CSS进阶.div+css布局.HTML+css整站开发. JavaScript基础: Js基础教程.js内置对象常用方法.常见DOM树操作大全.ECMAscript ...
- 风炫安全web安全学习第三十四节课 文件包含漏洞防御
风炫安全web安全学习第三十四节课 文件包含漏洞防御 文件包含防御 在功能设计上不要把文件包含的对应文件放到前台去操作 过滤各种../,https://, http:// 配置php.ini文件 al ...
- 每天成长一点---WEB前端学习入门笔记
WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...
- 【web前端学习部落22群】分享 碰撞的小球开源小案例
对于课程中的疑问,大家可以加 web前端学习部落22群 120342833和其他老师还有众多的小伙伴们进行沟通交流哦,群里还有不少技术大拿.行业大牛 可以一起探讨问题,我们也会安排专业的技术老师为大家 ...
- web前端学习部落22群开源分享 左边菜单导航
有大量web前端开发工具及学习资料,可以搜群[ web前端学习部落22群 ]进行下载,遇到学习问题也可以问群内专家以及课程老师哟 <!DOCTYPE html> <html lang ...
- 【前端】移动端Web开发学习笔记【2】 & flex布局
上一篇:移动端Web开发学习笔记[1] meta标签 width设置的是layout viewport 的宽度 initial-scale=1.0 自带 width=device-width 最佳实践 ...
- 【前端】移动端Web开发学习笔记【1】
下一篇:移动端Web开发学习笔记[2] Part 1: 两篇重要的博客 有两篇翻译过来的博客值得一看: 两个viewport的故事(第一部分) 两个viewport的故事(第二部分) 这两篇博客探讨了 ...
- 【前端】Web前端学习笔记【2】
[2016.02.22至今]的学习笔记. 相关博客: Web前端学习笔记[1] 1. this在 JavaScript 中主要有以下五种使用场景 在全局函数调用中,this 绑定全局对象,浏览器环境全 ...
随机推荐
- POJ 1655 Balancing Act(求树的重心--树形DP)
题意:求树的重心的编号以及重心删除后得到的最大子树的节点个数size,假设size同样就选取编号最小的. 思路:随便选一个点把无根图转化成有根图.dfs一遍就可以dp出答案 //1348K 125MS ...
- POJ 1337 A Lazy Worker(区间DP, 背包变形)
Description There is a worker who may lack the motivation to perform at his peak level of efficiency ...
- VirtualBox设置NAT端口映射
原文地址 :http://www.2cto.com/os/201209/153863.html VirtualBox设置NAT端口映射 好吧,我知道这个问题有很多人都讲过,但是,你们不觉得VB ...
- set集合操作【python】
set集合操作包括: >>> x=set("123defj89") >>> y=set("ab34e6jh9") >& ...
- onTouch
OnTouchOmOnTouchListenerOnTouchEvent View的事件分发 : 对于事件分发机制,举个简单的例子,在一个Activity中只有一个按钮,如果我们想给这个按钮注册 ...
- 如何使用vue的axios结合PHP去上传文件
我们在做表单提交的时候,往往会碰到一些表单提交的需求,那vue的axios与上传文件碰撞后不会出现什么不一样的火花吗,听我一一道来: 首先,我们需要对写一个vue的axios的表单提交,由于本人用的是 ...
- [转]C++结构体|类 内存对齐详解
内存地址对齐,是一种在计算机内存中排列数据(表现为变量的地址).访问数据(表现为CPU读取数据)的一种方式,包含了两种相互独立又相互关联的部分:基本数据对齐和结构体数据对齐 . 为什么需要内存对齐?对 ...
- LeetCode——Add and Search Word - Data structure design
Description: Design a data structure that supports the following two operations: void addWord(word) ...
- python epoll实现异步socket
一.同步和异步: 在程序执行中,同步运行意味着等待调用的函数.线程.子进程等的返回结果后继续处理:异步指不等待当下的返回结果,直接运行主进程下面的程序,等到有返回结果时,通知主进程处理.有点高效. 二 ...
- ts和js中let和var定义变量的区别
javascript 严格模式 第一次接触let关键字,有一个要非常非常要注意的概念就是”JavaScript 严格模式”,比如下述的代码运行就会报错: let hello = 'hello worl ...