设置_设置ip地址 - CSDN
精华内容
参与话题
  • input输入框长度

    千次阅读 2019-04-23 12:16:40
    input输入框长度
                   
    <input type="text" style="width:60px;">
               
    展开全文
  • css 字体大小

    2018-02-08 17:48:31
    最近在学习em的相关知识的时候,无意之间让我拾得一宝,就是使用rem来设置Web页面的字体大小。让我一下子就来劲了,一口气看完并测试了一回,还真是爽歪歪的呀。师傅说好东西不能吃独食,于我就在这里给大家吹吹这个...

    转载:W3CPLUS

    最近在学习em的相关知识的时候,无意之间让我拾得一宝,就是使用rem来设置Web页面的字体大小。让我一下子就来劲了,一口气看完并测试了一回,还真是爽歪歪的呀。师傅说好东西不能吃独食,于我就在这里给大家吹吹这个从没见过的REM

    在详细介绍rem之前,我们先一起来回顾一下我们常用的两种记量单位,也是备受争论的两个:

    1. PX为单位
    2. EM为单位

    PX为单位

    在Web页面初期制作中,我们都是使用“px”来设置我们的文本,因为他比较稳定和精确。但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的Web页面时,他改变了浏览器的字体大小,这时会使用我们的Web页面布局被打破。这样对于那些关心自己网站可用性的用户来说,就是一个大问题了。因此,这时就提出了使用“em”来定义Web页面的字体。

    em为单位

    前面也说了,使用是“px”为单位是比较方便,而又一致,但在浏览器中放大或缩放浏览页面时会存在一个问题,要解决这个问题,我们可以使用“em”单位。Richard Rutter'在《How to size text using ems》一文中有做过详细的介绍,追至早一点,Richard Rutter也在《How to Size Text in CSS》中进行过深入的剖析。

    这种技术需要一个参考点,一般都是以

    的“font-size”为基准。比如说我们使用“1em”等于“10px”来改变默认值“1em=16px”,这样一来,我们设置字体大小相当于“14px”时,只需要将其值设置为“1.4em”。
    
                          body {
                                    font-size: 62.5%;
                            }
                            h1 {
                                    font-size: 2.4em; 
                            }
                            p {
                                    font-size: 1.4em; 
                            }
                            li {
                                    font-size: 1.4em; 
                            }
                    
    

    为什么“li”的“1.4em”是不是“14px”将是一个问号呢?如果你了解过“em”后,你会觉得这个问题是多问的。前面也简单的介绍过一回,在使用“em”作单位时,一定需要知道其父元素的设置,因为“em”就是一个相对值,而且是一个相对于父元素的值,其真正的计算公式是:

    1 ÷ 父元素的font-size × 需要转换的像素值 = em值

    这样的情况下“1.4em”可以是“14px”,也可以是“20px”,或者说是“24px”,总之是一个不确定值,那么解决这样的问题,要么你知道其父元素的值,要么呢在任何子元素中都使用“1em”。这样一来可能又不是我们所需要的方法。

    这里我只是简单的介绍了一个这两个单位的使用,具体一点的大家可以参阅:

    1. Best Practices的站长Kyle的《CSS Font-Size: em vs. px vs. pt vs. percent
    2. Converting px into percentage and em for relative CSS font sizes
    3. Em Vs Percent Widths
    4. CSS: Units of Measurement
    5. Jennifer KyrninUsing Points, Pixels, Ems, or Percentages for CSS Fonts

    Rem为单位

    CSS3的出现,他同时引进了一些新的单位,包括我们今天所说的rem。在W3C官网上是这样描述rem的——“font size of the root element” 。下面我们就一起来详细的了解rem

    前面说了“em”是相对于其父元素来设置字体大小的,这样就会存在一个问题,进行任何元素设置,都有可能需要知道他父元素的大小,在我们多次使用时,就会带来无法预知的错误风险。而rem是相对于根元素,这样就意味着,我们只需要在根元素确定一个参考值,,在根元素中设置多大的字体,这完全可以根据您自己的需,大家也可以参考下图:

    我们来看一个简单的代码实例:

    
                        html {font-size: 62.5%;}
                            body {font-size: 1.4rem;}
                            h1 { font-size: 2.4rem;}
                    
    

    我在根元素中定义了一个基本字体大小为62.5%(也就是10px。设置这个值主要方便计算,如果没有设置,将是以“16px”为基准 )。从上面的计算结果,我们使用“rem”就像使用“px”一样的方便,而且同时解决了“px”和“em”两者不同之处。

    浏览器的兼容性

    remCSS3新引进来的一个度量单位,大家心里肯定会觉得心灰意冷呀,担心浏览器的支持情况。其实大家不用害怕,你可能会惊讶,支持的浏览器还是蛮多的,比如:Mozilla Firefox 3.6+Apple Safari 5+Google ChromeIE9+Opera11+。只是可怜的IE6-8无法,你们就把他们当透明了吧,我向来都是如此。

    不过使用单位设置字体,可不能完全不考虑IE了,如果你想使用这个REM,但也想兼容IE下的效果,可你可考虑“px”和“rem”一起使用,用"px"来实现IE6-8下的效果,然后使用“Rem”来实现代浏览器的效果。就让IE6-8不能随文字的改变而改变吧,谁让这个Ie6-8这么老呢?哈。。。。大家不仿试试,还蛮有意思,说不定这个就是主流的度量单位了。

    著作权归作者所有。
    商业转载请联系作者获得授权,非商业转载请注明出处。
    原文: http://www.w3cplus.com/css3/define-font-size-with-css3-rem © w3cplus.com
    展开全文
  • viewport设置

    2019-06-29 12:59:38
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no"> 转载于:https://www.cnblogs.com/osimly/p/5976859.html

    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">

    转载于:https://www.cnblogs.com/osimly/p/5976859.html

    展开全文
  • div+css 常用三种自动适应宽度分栏

    千次阅读 2013-10-23 23:37:11
    CSS两列布局,右侧固定,左侧自适应宽度  div style="width:90%; margin:0 auto; overflow:auto; _display:inline-block;">   div style="width:200px; float:right; background:#090">这是... 
    CSS两列布局,右侧固定,左侧自适应宽度 
    <div style="width:90%; margin:0 auto; overflow:auto; _display:inline-block;"
        <div style="width:200px; float:right; background:#090">这是右侧的内容</div
        <div style=" margin-right:210px; background:#F33">这是左侧的内容,自适应宽度</div
    </div
      
      
    CSS两列布局,左侧固定,右侧自适应宽度 
    <div style="width:90%; margin:0 auto; overflow:auto; _display:inline-block;"
        <div style="width:150px; float:left; background:#6F0">这是左侧的内容固定宽度</div
        <div style=" margin-left:160px; background:#FC0">中间内容,自适应宽度</div
    </div
      
    CSS三列布局,左右宽度固定,中间自适应宽度 
    <div style="width:90%; margin:0 auto; overflow:auto; _display:inline-block;"
        <div style="width:200px; float:right; background:#393"> 这是右侧的内容固定宽度</div
        <div style="width:150px; float:left; background:#F60 ">这是左侧的内容固定宽度</div
        <div style=" margin-left:160px;margin-right:210px; background:#6C3;">中间内容,自适应宽度</div
    </div>

     overflow:auto; _display:inline-block; 是清除浮动的,_display:inline-block;针对IE6的。

     

    DIV+CSS 布局一行两列,左列固定宽度,右列自适应宽度;设置最小宽度,窗口小的时候显示滚动条;Firefox IE测试通过.
    下面两句很重要的.百分比情况下窗口人为缩小的时候布局混乱问题就解决了.

    div+css <wbr>常用三种自动适应宽度分栏.divGlobal,.DivTop,.DivBottom{min-width: 760px;width: expression_r(document.body.clientWidth < 760? "760px": "100%" );width:100%;}
    div+css <wbr>常用三种自动适应宽度分栏
    div+css <wbr>常用三种自动适应宽度分栏.DivMainLeft{float:left;}
    div+css <wbr>常用三种自动适应宽度分栏.DivMainRight{margin-left:210px;}

     

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <META NAME="Generator" CONTENT="EditPlus">
      <META NAME="Author" CONTENT="">
      <META NAME="Keywords" CONTENT="">
      <META NAME="Description" CONTENT="">

      <style>
    .divGlobal,.DivTop,.DivBottom{min-width: 760px;width: expression_r(document.body.clientWidth < 760? "760px": "100%" );width:100%;}
     .divGlobal{}
    .DivTop,.DivBottom,.DivMainLeft,.DivMainRight {border:1px solid #ff0000;}
    .DivBottom {clear: both;}
    .DivMainLeft{float:left;}
    .DivMainRight{margin-left:210px;}
    .DivFiexWidth{width:200px;}
    .DivMainRightChild{}
    .clear{clear: both;}
     ul.ul1{margin:0px;margin-left:0px;padding-left:0px; }
     li.li1{margin-left:0px;list-style-type:none;}
     li.liBg {margin-left:0px;background-color:#ffDD00;list-style-type:none;padding:5px;}
      </style>
     </HEAD>

     <BODY>
      <script>
    // alert(document.body.clientWidth);
     //alert(document.body.clientWidth < 760? "760px": "100%" );
      </script>
    <div class="DivTop">
    top
    </div>
      <div class="divGlobal">
       <div class="DivMainLeft">
        <div class="DivFiexWidth">
         <ul class="ul1">
        <li class ="liBg">左边固定宽度</li>
        <li class ="li1">左边固定宽度</li>
        <li class ="li1">左边固定宽度</li>
        <li class ="li1">左边固定宽度</li>
        <li class ="li1">左边固定宽度</li>
        <li class ="li1">左边固定宽度</li>
         </ul>
        </div>
       <div class="DivFiexWidth">
         <ul class="ul1">
        <li class ="liBg">左边固定宽度</li>
        <li class ="li1">左边固定宽度</li>
        <li class ="li1">左边固定宽度</li>
        <li class ="li1">左边固定宽度</li>
        <li class ="li1">左边固定宽度</li>
        <li class ="li1">左边固定宽度</li>
         </ul>
        </div>
       </div>

      <div class="DivMainRight">
        <div class="DivMainRightChild" >
          <ul class="ul1">
         <li class ="liBg">右边宽度自适应.</li>
         <li class ="li1">右边宽度自适应</li>
         <li class ="li1">右边宽度自适应</li>
         <li class ="li1">右边宽度自适应</li>
         <li class ="li1">右边宽度自适应</li>
         <li class ="li1">右边宽度自适应</li>
         <li class ="li1">右边宽度自适应</li>
          </ul>
        </div>
        <div class="DivMainRightChild" >
          <ul class="ul1">
         <li class ="liBg">右边宽度自适应.</li>
         <li class ="li1">右边宽度自适应</li>
         <li class ="li1">右边宽度自适应</li>
         <li class ="li1">右边宽度自适应</li>
         <li class ="li1">右边宽度自适应</li>
         <li class ="li1">右边宽度自适应</li>
         <li class ="li1">右边宽度自适应</li>
          </ul>
        </div>
        <div class="DivMainRightChild" >
          <ul class="ul1">
         <li class ="liBg">右边宽度自适应.</li>
         <li class ="li1">右边宽度自适应</li>
         <li class ="li1">右边宽度自适应</li>
         <li class ="li1">右边宽度自适应</li>
         <li class ="li1">右边宽度自适应</li>
         <li class ="li1">右边宽度自适应</li>
         <li class ="li1">右边宽度自适应</li>
          </ul>
        </div>

       </div>
     </div>

     

    <div class="DivBottom">
    DIV+CSS 布局一行两列,左列固定宽度,右列自适应宽度;设置最小宽度,窗口小的时候显示滚动条;firefox ie测试通过.
    平行共三行,中间行分两列,左边固定宽度,右边自适应,并且对行宽度设置了最小值,如果窗口小到最小值以下将出现滚动条,这样一来布局就不会乱了.
    </div>
     </BODY>
    </HTML>

     

    展开全文
  • viewport

    2019-06-30 02:15:25
    width:控制 viewport 的大小,可以指定的一个值,如果 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。height:和 width 相对应,指定高度。initial-scale:初始缩放比例...
  • 一般来说,我们实现布局自适应可以有以下几种方式: 使用流动布局(fluid grid) 根据屏幕大小选择加载不同的CSS 使用 CSS 的@media规则 ...详细的介绍,可以参考自适应网页设计(Responsive ...这里介绍的是如何让定...
  • IDEA的常见的设置和优化(功能)

    万次阅读 多人点赞 2019-03-16 16:40:36
    显示工具条、设置鼠标悬浮提示、显示方法分隔符、忽略大小写提示、主题设置、自动导入包、单行显示多个Tabs、设置字体、配置类文档注释信息和方法注释模版、水平或者垂直显示代码、更换快捷键、注释去掉斜体、重装...
  • 有时候,我们希望表单中的文本框是只读的,让用户只能查看信息而不能修改其中的信息,使 input type=”text” name=”input” value=”HTML” 的内容中value得值,就是”HTML”不可以修改。实现的方式有如下几种。...
  • 一、用默认设置绘制折线图 import matplotlib.pyplot as plt x_values=list(range(11)) #x轴的数字是0到10这11个整数 y_values=[x**2 for x in x_values] #y轴的数字是x轴数字的平方 plt.plot(x_values,y_values,...
  • 一、主键约束 1.单字段主键 字段名 数据类型 primary key eg: create table zyf (id int primary key, name varchar(20), grade float); 2.多字段主键 primary key (字段名1,字段名2,字段名3.....,字段名n) ...
  • android设置透明状态栏

    万次阅读 2020-05-21 18:23:17
    沉浸式状态栏:就是你看视频(横屏)的时候没有状态栏,就算你点击屏幕一下也不会出现状态栏的(需要从上屏幕边缘往下划一下才能出来状态栏),由于不好截屏这里我就不上图了,大家心领神会一下就行了。...
  • 设置输出的图片大小: figsize = 11,9 figure, ax = plt.subplots(figsize=figsize) 画简单的折线图,同时标注线的形状、名称、粗细: A,=plt.plot(x1,y1,'-r',label='A',linewidth=5.0,ms=10) ...
  • intellij idea设置主题、字体样式和背景色

    万次阅读 多人点赞 2019-01-30 17:49:06
    ...lt;intellij idea使用教程汇总篇&gt; 引言:所谓工欲善其事必先利其器,idea就是这样的利器,刚装好的intellij idea主题样式是白的...快捷键Ctrl+Alt+s,快速进入intellij idea设置项 可供选择的有Darc...
  • html设置背景图片自适应

    万次阅读 多人点赞 2019-04-25 18:10:04
    在网上找了很久,终于在一个百度问答里...中设置: <body background="images\bg.jpg" style=" background-repeat:no-repeat ; background-size:100% 100%; background-attachment: fixed;" > 第一行是图片...
  • Html设置网页背景图片

    万次阅读 多人点赞 2015-11-29 21:17:49
    为网页添加背景图片可以衬托网页的显示效果,从而取得更好的视觉效果...background属性用来设置网页的背景图片。 基本语法: background属性值就是图片的路径。路径可以是相对地址,也可以是绝对地址。 实例代码:
  • StringRedisTemplate/RedisTemplate设置过期时间

    万次阅读 多人点赞 2020-09-19 18:45:38
    //向redis里存入数据和设置缓存时间 stringRedisTemplate.opsForValue().set("baike", "100", 60 * 10, TimeUnit.SECONDS); //val做-1操作 stringRedisTemplate.boundValueOps("baike").increment(-1); //根据key...
  • intellij idea JDK设置

    万次阅读 2020-02-16 22:44:54
    lt;intellij idea使用教程汇总篇&gt; 场景:最近使用到了jmeter 4.0来压测接口,发现这个软件使用的...1、Ctrl+Alt+s快捷键或者(鼠标右击File,再选择Settings)进入idea设置Settings页面 2、选中项目 —...
  • 步骤1:开机使用F2键进入BIOS设置。 步骤2:Security——PTT Security中“PTT On”取消打钩。 步骤3:Secure Boot---Secure Boot Enable中,选择“Disabled”。 步骤4:General---Advanced Boot O...
  • 将huashengshu.top设置成自己的代理服务器(域名或ip),以及8888改成代理服务器的端口(下面是我的代理服务器域名和端口,如果人数不多就公开让大家使用,如果我自己使用 的时候发现比较卡了,我会做相应措施) ...
  • IntelliJ IDEA 统一设置编码为utf-8编码

    万次阅读 多人点赞 2018-06-11 10:49:11
    问题一:File-&gt;Settings-&gt;Editor-&gt;File Encodings问题二:File-&gt;Other Settings-&gt;Default Settings -&...File Encodings问题三:将项目中的.idea文件夹中的encodings.xml文件中...
1 2 3 4 5 ... 20
收藏数 8,841,706
精华内容 3,536,682
关键字:

设置