分类 Web前端下的文章

Html Table自适应宽度，指定列固定宽度，其他列均分宽度

2020/09/09

做表单界面时，我想到最好的方法应该是，标题栏所在的列宽度固定，内容栏所在的列宽度自适应且要均分，这样整体表格看起来才美观有序。

要做到这一点，目前只摸索出一种办法：
1，给table加table-layout: fixed;
2，在每个table的第一行，加<colgroup><col>，有多少列，对应加多少个<col>
3，给指定列固定宽度的<col>加成<td class="title">，然后给title定义宽度，其他列的<col>加成<col width="auto">

案例代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>案例文档</title>
  <style>
    table{
      width: 100%;
      border-collapse: collapse;
      border: 1px solid #000;
      word-break:break-word;
      word-wrap:break-word;
      table-layout: fixed;
    }
    table tr td{
      border: 1px solid #000;
    }
    .title {
      background-color: #eee; 
      width: 120px;
      text-align: center;
    }
  </style>
</head>
<body>
  <table>
    <colgroup>
      <col class="title">
      <col width="auto">
      <col class="title">
      <col width="auto">
    </colgroup>
    <tr>
      <td class="title">标题：</td>
      <td colspan="3"></td>
    </tr>
    <tr>
      <td class="title">标题：</td>
      <td>内容</td>
      <td class="title">标题：</td>
      <td></td>
    </tr>
    <tr>
      <td class="title">标题：</td>
      <td colspan="3"></td>
    </tr>
    <tr>
      <td class="title">标题：</td>
      <td>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</td>
      <td class="title">标题：</td>
      <td></td>
    </tr>
  </table>
</body>
</html>

注意：这里有一个问题，有可能你程序没法在table的第一行<tr>前面加<colgroup><col>，比如asp.net的webform里面就不知道怎么加，此时的变通方法是，把<colgroup><col>换成一个空的<tr><td>，在<td>上同样加对应的class和width属性，然后通过样式把这个空行的边框和高度去掉，不显示。

原理：通过控制第一行各个列的宽度，来实现对整个表格的列进行控制。

本文摘自：http://www.dongchuanmin.com/archives/677.html

By Verte . In Web前端 .

No relay.

利用CSS3媒体查询@media进行响应式页面制作

2020/08/11

响应式页面就是根据屏幕尺寸的不同进行不同版面样式的显示。css3的meidia媒体查询的属性可满足该需求的定义。

第一种方式

为不同的屏幕尺寸定义不同的css样式，屏幕尺寸变化时动态调整css。优点是独立定义css文件管理方便，缺点是需要加载多个css文件。

<!--html标签--!>
<link rel="stylesheet" media="(max-width: 900px)" href="sty1.css" />
<link rel="stylesheet" media="(max-width: 700px)" href="sty2.css" />

即屏幕尺寸不超过900px时使用syt1.css样式，同时尺寸不超过700px时使用sty2,css样式。顺序不能反。

第二种方式

采用一个css文件，定义样式时通过@media媒体查询进行区分。优点是一个样式文件搞定多种屏幕需求。

/*css标签*/
@media screen and (max-width:992px){
 body {
  background-color: #FF0000;
 }
}

@media screen and (max-width:768px){
 body {
  background-color: #000000;
 }
}

即可屏幕不超过992px时背景颜色是红色，同时背景颜色不超过768px时背景颜色是黑色。

调试html如下

<style>
/*css标签*/
@media screen and (max-width:992px){
 body {
  background-color: #FF0000;
 }
}

@media screen and (max-width:768px){
 body {
  background-color: #000000;
 }
}
</style>

以上代码进行调试，弹出的窗口进行拖拉缩放时可查看到：页面尺寸小于768px时候网页背景色是黑色，超出768px同时又小于992px时网页背景色是红色。

通过media媒体查询就可以来任意定义当前属性样式在某尺寸分辨率下的具体表现了。

By Verte . In Web前端 .

No relay.

通过JS屏蔽某地区(城市)访问网站

2020/08/06

因为业务需要，需要屏蔽某地域IP访问网站，网上找了找，几乎都不能用，要么IP库失效，要么js代码无效，具体原因我也不知道，我也不会写JS，就随手捣鼓了下，整合出一个能用的，用的网易的IP库。具体代码如下：

<script type="text/javascript" src="https://ip.ws.126.net/ipquery"></script><!--网易IP库-->
<script>
var province=localAddress.province;
if(province.indexOf('某某省')  != -1){
    window.location.href = '自定义跳转地址';
}
</script>

<script type="text/javascript" src="https://ip.ws.126.net/ipquery"></script><!--网易IP库-->
<script>
var city=localAddress.city;
if(city.indexOf('某某市')  != -1){
    window.location.href = '自定义跳转地址';
}
</script>

凑合着用吧。不能用了还望留言反馈。

本文转自：https://www.visc.cn/jishu/161.html

By Verte . In Web前端 .

No relay.

企业网站联系方式页调用百度地图API，支持位置偏移

2020/07/22

在做企业站的时候，经常需要百度地图API显示公司位置信息，百度地图生成器本身提供这个服务。但显示不够理想，网络搜索本文章介绍网页百度地图API，支持位置偏移，主要包括网页百度地图API，支持位置偏移使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。需加载 jQuery

<style type="text/css">
#allmap {width:100%; height:100%; border:#ccc solid 1px; box-sizing:border-box; position:relative; z-index:1;}
.mapbox {width:100%; height:420px; margin-top:15px; position:relative;}
.mapbox.on {height:100%; margin-top:0; position:fixed; top:0; left:0; z-index:1000;}
.mapbox .zw {width:100%; height:100%; position:absolute; top:0; left:0; z-index:2; display:none;}
.anchorBL, .BMap_cpyCtrl {display:none;}
.BMap_pop {transform:translateY(-15px);}
.mapbigest {width:26px; height:26px; position:absolute; top:10px; right:10px; z-index:10; cursor:pointer; background-size:100% 100%; background-repeat:no-repeat; background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAhFBMVEUAAABJSUlKSkpJSUlBQUFDQ0NJSUlJSUlLS0tJSUlFRUVJSUlKSkpKSkpJSUlJSUlJSUlJSUlHR0dISEhJSUlKSkpJSUlLS0tKSkpJSUlJSUlISEhJSUlKSkpISEhJSUlJSUlISEhERERJSUlISEhJSUlJSUlISEhJSUlJSUlHR0dKSkrAS+lAAAAAK3RSTlMAwIBjCAT77BHMDfLjxT3n1qVLNL+0RSIc+GZR9LpYit13F5JuXjAnrpwrMVj51gAAAsxJREFUaN7t2tuSojAQgOEeTARFwRMIKiDo6Dj9/u+3U+xGxA7ZkFC7N/yXXvCVZVGSbgA+3dPiQ1LmMOhRFfko7VQCTLCzGdc32Bk7K+CE3R30kSN2lwIqKvSRAypSIht95NsQSQvoUamHhIXz2sGDXm1L57VHKkVw5cFg3XwkyNDK1keCUMXeoIg/qBKIyy1aSLkQSjWAIW7w2bWFTPZCOVfDGfNJG4FGSSyN9GnAOwKJUBZWSvxiUASS8wBKPG0MGQLVSij7IQw5Ap6tsmkZFKGKvUGRthIaKMc3gyJCmQnlbmws56BGYC4Ut6eSPw0GCsRKyZEaFGmUpVC+bQw1Aqy/8tkyCBJKHhnYTig3KwM29YchXOqLeSBXfC3l0GHA3MWfLsCiHyOAt1gmlG0PY8fIX2SIGDEASG4cSFxfuVKjid8S6I5HRNH+HvrxL3Hve6BonxLDSDmCotzMaJS1xiNx0BiG1Uo4B0W8vnMzBuY5iO4WlHlrHy8cbPK2HMbGxsbGxsbGxsbG/l9864FV+cpfe6AsdhEdG8NpdjXqM+Pa3CiwLtA4YK8tDczVKw0r5YK/m+5B0T0VCrcw8KA5sPtSKPKxBzyIYaTcgwSgHuAstiYGHaJGRJlM6wHORXpUXxPDSEnqH+zyZ6gWmxhNcaNIto+uGA/Kjc/ea4CMg3oGSQ2DpUnGdBBOjH7Kjv0d4V/E0FR8ohCEGLnxSm7J1AiPiGGuUKRtTHMw6OYKZd6N8EwYRzDq21UuaYhhrcgRRgyD7o0iQ9iOGEZKKBSPIo2xAav2Qll57whbEsNYWTyVNnIlxiDKtYWchRHDACVCCVvIkIbY8DYBMQapOnchaWPYKys5Mn04r5UB9CoondcKlyDSHn2Mxz94zWeDpkihjxRKxMfurvrIFbsLIcfOXE8f8VzsLAAIzqfT7IMWlRX0qHKyD0mLkxvDLyOFWNKlbrTlAAAAAElFTkSuQmCC');}
@media (max-width: 640px) {
    .BMap_scaleCtrl {display:none;}
    .mapbox .zw {display:block;}
}
</style>

<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=【你的密匙】"></script>

<div class="mapbox"><div class="mapbigest"></div><div class="zw"></div><div id="allmap"></div></div>
<script type="text/javascript">
//手机版点击才可拖动
$(document).on("click",".mapbox",function(){
    $(this).find(".zw").hide();
});

//地图最大化
$(document).on("click",".mapbigest",function(){
    $(this).parent(".mapbox").toggleClass("on");
    baidu_map();
});

//键盘Esc退出全屏
var isPiss = 0;
document.onkeydown = function(event) {
    var e = event || window.event || arguments.callee.caller.arguments[0];
    if(e.keyCode == 27){
        if($(".mapbox").hasClass("on")){
            $(".mapbox").removeClass("on");
            baidu_map();
        }
    }
};

function pix(p)
{
    p = p/100000;
    return p;
}

function poi_move(x,y,type)
{
    //x: +往右偏移 -往偏左移
    //y: +往上偏移 -往偏下移
    arr = type.split(",");
    xarr = xpoi = new Array();
    if(type){
        if(arr){
            for(i=0;i<arr.length;i++)
            {
                xarr.push(arr[i].split(":"));
            }
        }
        if(xarr){
            for(i=0;i<xarr.length;i++)
            {
                if(xarr[i][0]=="left"){
                    x = x+pix(xarr[i][1]);
                }else if(xarr[i][0]=="right"){
                    x = x-pix(xarr[i][1]);
                }else if(xarr[i][0]=="top"){
                    y = y-pix(xarr[i][1]);
                }else if(xarr[i][0]=="bottom"){
                    y = y+pix(xarr[i][1]);
                }
                console.log(xarr[i])
            }
        }
    }
    xpoi["x"] = x;
    xpoi["y"] = y;
    return xpoi;
}

function baidu_map()
{
    //公司名称
    var my_company = '天泽数字';
    //公司地址
    var my_address = '地址：泰州市海陵区凤凰东路58号';
    //坐标
    var my_poix = 119.929529;
    var my_poiy = 32.462353;
    //地图位置偏移
    var move_type = "left:15,top:15"; // 往左偏移15像素，往上偏移15像素
    
    poi_arr = poi_move(my_poix,my_poiy,move_type);
    my_poix_p = poi_arr["x"];
    my_poiy_p = poi_arr["y"];
    
    // 百度地图API功能
    var map = new BMap.Map("allmap");
    var point = new BMap.Point(my_poix,my_poiy)
    var point_p = new BMap.Point(my_poix_p,my_poiy_p);
    var myIcon = new BMap.Icon("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAhCAMAAAAMPGBYAAAA3lBMVEUAAAArAAMrAAM+fOBHh/AuacQvasUrAANGhu5JifNJifNHiPEtZ8E/feIwa8Y3dNNFhOs+fN9Bf+RKivQ0cM4pY7smX7Y9et04ddVCgecxbMksZr8mU58uacQ1ctAoYblKivRDgukoPHUybssqZL06dthKivQlXLE7edo7edpEmP42kfc/lvtJmv8wkPQqjPE8lPlBlvw5k/gtjvIki+5JkfggiO1Lmv9FjfQpfd4gg+VLl/1Dkvc8j/Q0jvI7iOsxhuk4hegugOE0f+A6fd8xeNckdNIobsolZr8gddO/82ARAAAAKnRSTlMAMigGgiwnGBT3w73+/f349vPp5d7d3NDAvr2wqKeBfnV0aVBEOBr0k5GheLO3AAAA90lEQVQoz13Q1XqDQBRF4Q0BgsTdPalBS2UGiXv6/i8UggSG/3J959xs+BYjtapU1dECkYygkKVlWUuiCBn4ZI1YRsAimuxfacSIEfVxKdhGki0AcumdVZIxtlPNHqO9SrVVGxX9m6VXkNfT8iibqWSW0VybrHUTb9sf1vYV89MH6zQHWnsm7VsApOImkTZFCZ7B8TN2HATz1XbPtKuFA07Pv5HzFKHO4Stw6CAiFsJWEPHUd/zk9BETc38POREJXcdLThdJsyul9DoDo+5Stw7W8EIvQ7CkG71JSGm4DbCyfO+/x2eRwHPc5GXCcTzTAjz765Xo9w5VVEDyLqlpqQAAAABJRU5ErkJggg==", new BMap.Size(19,33)); //自定义图标
    var marker = new BMap.Marker(point,{icon:myIcon});
    map.addOverlay(marker);                      // 将标注添加到地图中
    //marker.setAnimation(BMAP_ANIMATION_BOUNCE);  // 跳动的动画
    map.centerAndZoom(point_p, 15);
    var opts = {
      width : 300,     // 信息窗口宽度
      height: 150,     // 信息窗口高度
      //title : "" , // 信息窗口标题
      //enableMessage:true,//设置允许信息窗发送短息
      //message:""
    }
    var infoWindow = new BMap.InfoWindow('<strong style="color:#d55522;font-size:14px;padding-bottom:10px;">'+my_company+'</strong><p>'+my_address+'</p>', opts);  // 创建信息窗口对象 
    
    var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺
    var top_left_navigation = new BMap.NavigationControl();  //左上角，添加默认缩放平移控件
    
    map.addControl(top_left_control);
    map.addControl(top_left_navigation);
    
    map.openInfoWindow(infoWindow,point); //开启信息窗口
    marker.addEventListener("click", function(){          
        map.openInfoWindow(infoWindow,point); //开启信息窗口
    });
}
baidu_map();
</script>

百度地图坐标拾取器：http://api.map.baidu.com/lbsapi/getpoint/index.html

By Verte . In Web前端 .

No relay.