生活指南——让生活变得更简单

html定位代码_定位前端代码

课程:

前端代码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="2305-d531-6f7a-f068 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="d531-6f7a-f068-0163 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

  • 评论列表:
  •  访客
     发布于 2022-07-04 08:45:39  回复该评论
  •       div align="center"            div id="header" align="center"头部/div            div id="ma
  •  访客
     发布于 2022-07-04 05:46:54  回复该评论
  • aindiv").last();            var top = last.css("top").replace("px","");            top = parseInt(top);            var height = last.css("
  •  访客
     发布于 2022-07-04 11:32:56  回复该评论
  • district = json.district; province = province.replace('市', ''); position.value = province + "," + city + ","
  •  访客
     发布于 2022-07-04 12:59:47  回复该评论
  • op: 0px;                margin-right: 00px;            }            #header{                width:
  •  访客
     发布于 2022-07-04 13:38:26  回复该评论
  • g = { enableHighAccuracy: true, timeout: 5000, maximumAge: 30000 }; navigator.geolocation.getCurre

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

Copyright Your WebSite.Some Rights Reserved.