课程：
前端代码DIV+CSS关于定位
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; charset=gb2312" /
title关于定位/title
style type="text/css"
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 00px;
}
#header{
width:800px;
height:30px;
background-color:#9F9;
}
#main{
width:800px;
height:auto;
background-color:#FF6;
position:relative;
}
#one{
width:300px;
height:200px;
background-color:#F30;
position:absolute;
left:0px;
top:0px;
}
#tow{
width:490px;
height:200px;
background-color:#93F;
position:absolute;
left:310px;
top:0px;
}
#three{
width:400px;
height:200px;
background-color:#390;
position:absolute;
left:0px;
top:210px;
}
#four{
width:390px;
height:200px;
background-color:#66F;
position:absolute;
left:410px;
top:210px;
}
#foot{
width:960px;
height:30px;
background-color:#3C9;
}
/style
script type="text/javascript" src=""/script
/head
body
div align="center"
div id="header" align="center"头部/div
div id="main"
div id="one"one/div
div id="tow"tow/div
div id="three"three/div
div id="four"four/div
/div
div id="foot" align="left"版权/div
/div
/body
script type="text/javascript"
$(document).ready(function(){
var last = $("#maindiv").last();
var top = last.css("top").replace("px","");
top = parseInt(top);
var height = last.css("height").replace("px","");
height = parseInt(height);
var mainHeight = top + height;
$("#main").css("height", mainHeight + "px");
});
/script
/html
你的布局style都不用改，只需要在页面加载完成后，计算出div#main中的div占用的实际高度，并赋值给div#main。
计算原理：div#main中的每一个div都是设置了固定的top和height的，那么最后一个div的top+height肯定就是div#main的实际占用高度。
代码中，我引用了jquery的css方法，你如果不jquery也可以自己用js原生写。还有什么问题就追问哈。
html5怎么实现调用gps获取地理位置具体代码
代码如下:
/**
* 以下为html5代码,获取地理位置
*/
function getLocation() {
//检查浏览器是否支持地理位置获取
if (navigator.geolocation) {
//若支持地理位置获取,成功调用showPosition(),失败调用showError
// alert("正在努力获取位置...");
var config = { enableHighAccuracy: true, timeout: 5000, maximumAge: 30000 };
navigator.geolocation.getCurrentPosition(showPosition, showError, config);
} else {
//alert("Geolocation is not supported by this browser.");
alert("定位失败,用户已禁用位置获取权限");
}
}
/**
* 获取地址位置成功
*/
function showPosition(position) {
//获得经度纬度
var x = position.coords.latitude;
var y = position.coords.longitude;
//配置Baidu Geocoding API
var url = "" +
"callback=renderReverse" +
"location=" + x + "," + y +
"output=json" +
"pois=0";
$.ajax({
type: "GET",
dataType: "jsonp",
url: url,
success: function (json) {
if (json == null || typeof (json) == "undefined") {
return;
}
if (json.status != "0") {
return;
}
setAddress(json.result.addressComponent);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("[x:" + x + ",y:" + y + "]地址位置获取失败,请手动选择地址");
}
});
}
/**
* 获取地址位置失败[暂不处理]
*/
function showError(error) {
switch (error.code) {
case error.PERMISSION_DENIED:
alert("定位失败,用户拒绝请求地理定位");
//x.innerHTML = "User denied the request for Geolocation.[用户拒绝请求地理定位]"
break;
case error.POSITION_UNAVAILABLE:
alert("定位失败,位置信息是不可用");
//x.innerHTML = "Location information is unavailable.[位置信息是不可用]"
break;
case error.TIMEOUT:
alert("定位失败,请求获取用户位置超时");
//x.innerHTML = "The request to get user location timed out.[请求获取用户位置超时]"
break;
case error.UNKNOWN_ERROR:
alert("定位失败,定位系统失效");
//x.innerHTML = "An unknown error occurred.[未知错误]"
break;
}
}
/**
* 设置地址
*/
function setAddress(json) {
var position = document.getElementById("txtPosition");
//省
var province = json.province;
//市
var city = json.city;
//区
var district = json.district;
province = province.replace('市', '');
position.value = province + "," + city + "," + district;
position.style.color = 'black';
}
代码的前端和后端有什么区别？
前端基础部分比较多，而后端是要比前端深入的多，也是比前端难的多。
请教CSS图片左侧定位代码
style type="text/css"
.left-img{float:left; position:fixed; top:20px; left:10px;}
/style
img class="70d2-574d-51b5-6e17 left-img" src="img.png" width="180" height="180" alt=""/
注解：
style type="text/css"..../style/ 页内定义（CSS样式标签）
.left-img / 定义样式名称
{....} /定义样式
float:left; //左浮动（float: right; 右浮动）
position:fixed; //固定元素不随滚动条滚动 （position: absolute;绝对定位，随滚动）
top:20px; //距离页面顶部距离
left:10px; //距离页面左侧距离
img class="574d-51b5-6e17-a0d9 left-img" /指定给图像Img标签css样式.left-img
以上可以实现你需要的效果，但还是建议你系统化的学习下
百度关键词css 第一个站点w3school比较全面，前端架构师必读～
前端框架如何实现定位
前端bug主要分为3个类别：HTML,CSS,Javascript三类问题
给个最大的区别方式方法：
出现样式的问题基本都是CSS的bug
出现文本的问题基本都是html的bug
出现交互类的问题基本都是Javascript的bug
现在以淘宝的前端人员工作为例进行相关bug定位的剖析
判断前后台问题的区分方法：
FF, 打开错误控制台
区分前后台交互：查看网络请求
a) Html中如果有链接，有相应的情况下，基本可以定位到是属于前端的问题
b) 如果为空，或者有出现error错误信息，我们就可以定位到属于后台开发的问题
TMS对应的VM模板，出现的一些截断控制，转换功能都属于前端的问题
一、HTML
最常见的HTML的问题—就是标签的问题了，最常见的排查和解决办法就是查看页面源代码，然后通过检查标签的工具，现在暂时提供idea.exe进行检查，有其他更好的工具再进行推荐。
常见问题类别：
标签闭合—表象，页面中出现大范围的混乱，就是少了标签的情况，导致标签未闭合
标签浮出—例如鼠标移动到文本位置，浮出全名的这种浮出形式都属于标签浮出的问题
标签在不同的浏览器的一种解析方式的不同导致的前端bug例如如下结构
该部分可以看做为一个大的框即是标签a 内嵌标题的标签p，里面再有这些个内容ing,那么在不同的浏览器中，可能ie和FF的解析会产生不同，假设IE解析 为aping/ing/a/p的一种形式，但在FF 下可能解析为
aing/ing/a
p/p
的两行的形式从而导致前端在复古鞋/板鞋这块ing里面的格式产生混乱
结构可看为：
页面定点的问题：最明显的前端功能，在于点击某个链接将页面位置定位到对应的位置
a) 我们可以通过右键，查看元素的工具进行定位到毛点所定位到的位置，如果出现问题这种问题很直观，并且能通过这种方法直接定位到问题
页面的跳转，也属于html的问题，大家在出现点击未跳转或者跳转方式不正确的问题，直接可以定位到跳转属性的问题，找到对应的跳转对应的块提供给开发人员即可
二、CSS，产生样式问题。例如：排版，布局，颜色，背景等
css的bug主要分为：兼容型bug 、业务性bug 和 内容型bug
兼容型bug
a) 表现：仅在少数几个浏览器上出现
b) 原因：浏览器的解析不一致
c) 解决：根据实际情况进行前端代码的通用性
d) 类别：
脚本兼容型问题：在出现对应交互的问题就基本可以定位到脚本兼容型bug，例如DIV的显示和层结构。实际可以参考聚划算的几个商品鼠标移动到小图的时候，对应大图展示的功能。
页面样式兼容型问题：直接表象在样式上，都是基于框架的页面展示错误，很容易定位
业务性bug
a) 表现：在所有浏览器下都有该问题
b) 原因：对业务不熟悉
c) 解决：根据需求进行修改达到业务要求
该类型的定位，主要在和实现的要求不一致，最直接表现在页面的友好型，用户的可用性的bug，可以定位为该类型
内容型bug
a) 表现： 前端自测正确，但在填入内容后，出现的错误，内容消失等
b) 原因： 扩展性未考虑周全
c) 解决： 进行overflow test
输入内容的长度限制等功能可定位为内容型bug
三、Javascript
最直接的判断方法，刷新页面，出现滞后显示的一些模块基本都为脚本的输出块。该部分的一些问题可以参照兼容型bug中类别的脚本兼容型bug。
有产生交互类的问题，大多数都可以定位到是属于javascript产生的问题，该部分大多不会报错
有错误提示类的。页面左下方有出现javascript的错误提示；有弹出错误信息提示的bug；浏览器返回的一些错误弹出框都属于javascript的bug
QQ客服
新浪微博