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 绑定全局对象,浏览器环境全 ...
随机推荐
- Android：控件布局（相对布局）RelativeLayout（转）
相对布局常用属性: 子类控件相对子类控件:值是另外一个控件的id android:layout_above----------位于给定DI控件之上android:layout_below ------ ...
- nginx mac 下启动 停止 重启,查看安装位置
Nginx的启动.停止与重启 启动 启动代码格式:nginx安装目录地址 -c nginx配置文件地址 例如: [root@LinuxServer sbin]# /usr/local/nginx/ ...
- poj_2112 网络最大流+二分法
题目大意 有K台挤奶机和C头奶牛,都被视为物体,这K+C个物体之间存在路径.给出一个 (K+C)x(K+C) 的矩阵A,A[i][j]表示物体i和物体j之间的距离,有些物体之间可能没有直接通路. ...
- JavaScript 中的陷阱
JavaScript 通过函数管理作用域.在函数内部声明的变量只在这个函数内部,函数外面不可用.另一方面,全局变量就是在任何函数外面声明的或是未声明直接简单使用的. “未声明直接简单使用”,指的是不用 ...
- 静态资源的gzip
1.项目中,接触到gzip.未压缩的文件和压缩后的文件的比例可能达到:3:1.所以,gzip是网络中文件高速传输的很好方法. 2.一般js.css.html文件都会在后端进行gzip.当浏览器请求这些 ...
- bzoj 3307 雨天的尾巴
题目链接:传送门 题目大意:中文题,略 题目思路:网上有题解说是合并线段树的,但是太难蒟蒻不会,只能用树剖求解 如果不是树而是一维数组我们会怎么解? 当然是利用前缀和思想标记 (L) v+1,(R+1 ...
- PHP中new static()与new self()的区别异同
self - 就是这个类,是代码段里面的这个类. static - PHP 5.3加进来的只得是当前这个类,有点像$this的意思,从堆内存中提取出来,访问的是当前实例化的那个类,那么 static ...
- luogu P1379 八数码难题（A*算法入门详细讲解）
代码实现细节 #include<cstdio> #include<cstring> #include<iostream> using namespace std; ...
- java的Result类
import org.apache.commons.lang.StringUtils; import java.io.Serializable;import java.util.HashMap;imp ...
- stm32的VCC/VDD/VSS/VEE/VBAT的区别
先看一下stm32vet6的引脚图吧 电路设计以及PCB制作中,经常碰见电源符号:VCC. VDD.VEE.VSS,他们具有什么样的关系那? 一.解释 VCC:C=circuit 表示电路的意思, 即 ...