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 绑定全局对象,浏览器环境全 ...
随机推荐
- Windows版Nginx启动失败之1113: No mapping for the Unicode character exists in the target multi-byte code page
Windows版Nginx启动一闪,进程中未发现nginx进程,查看nginx日志,提示错误为1113: No mapping for the Unicode character exists in ...
- cstring、string、wstring、int、char*、tchar、 int、dword等相互转换代码输出测试
#include <string> #include <tchar.h> // _TCHAR #include <stdlib.h> #include <io ...
- Map的有序实现类和无序实现类
1.HashMap不是有序的: 2.TreeMap和LinkedHashMap是有序的(TreeMap默认升序,LinkedHashMap则记录了插入顺序).
- DOS cmd - how to ping a remote host with specified port
You can use ping to test whether you can connect to a remote host: ping baidu.com ping 125.6.45.88 ( ...
- Excel 2010版筛选怎么用
很多人在使用excel表格的时候,不知道这个筛选功能怎么用,可以对我们平时做数据和表格带来哪些帮助.那么,接下来,小敏以excel表格2010版为例,跟大家分享一下这个excel表格筛选功能的使用方法 ...
- sencha touch 扩展篇之将sencha touch打包成安装程序（上）- 使用sencha cmd打包安装程序
由于最近一直忙着android原生的开发,很久没有更新博客了,官方的sencha cmd工具功能非常强大,创建项目,压缩项目,打包安装程序都能轻松实现,这讲我们就给大家介绍下如何使用sencha cm ...
- linux下php安装
nginx中配置php: http://www.111cn.net/sys/nginx/64044.htm
- Box2D 一、学习资料（库、pdf）
参考: 在Egret中使用Box2D --- 拉小登 (提供了box2d的ts和dts文件下载,以及egret中第三方库配置教程) Egret中成功集成Box2D --- Egret论坛水友 bo ...
- pandas将字段中的字符类型转化为时间类型，并设置为索引
假设目前已经引入了 pandas,同时也拥有 pandas 的 DataFrame 类型数据. import pandas as pd 数据集如下 df.head(3) date open close ...
- nginx跟tp5无法加载控制器
二. 另外502 bad gateway错误,可能是有PHP中的php-fpm.conf里 “ listen fastcgi_pass /tmp/php-cgi.sock ”跟nginx的conf文 ...