设置_设置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>

     

    展开全文
  • 一般来说,我们实现布局自适应可以有以下几种方式: 使用流动布局(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,...
  • vmware ubuntu14.04联网并设置中文系统

    万次阅读 2020-10-21 17:54:07
    1.使用vmware安装ubuntu14.04后,发现是英文版本,那就设置系统yu
  • IDEA类和方法注释模板设置(非常详细)

    万次阅读 多人点赞 2018-10-22 15:58:03
    IDEA自带的注释模板不是太好用,我本人到网上搜集了很多资料系统的整理了一下制作了一份比较...这里设置的注释模板采用Eclipse的格式,下面先贴出Eclipse的注释模板,我们就按照这种格式来设置: 类注释模板: ...
  • android设置透明状态栏

    万次阅读 2020-05-21 18:23:17
    沉浸式状态栏:就是你看视频(横屏)的时候没有状态栏,就算你点击屏幕一下也不会出现状态栏的(需要从上屏幕边缘往下划一下才能出来状态栏),由于不好截屏这里我就不上图了,大家心领神会一下就行了。...
  • idea设置代码注释

    万次阅读 2019-12-22 14:31:19
    人工智能,零基础入门!http://www.captainbed.net/inner 1、 2、 3、aplpy ---> OK 4、
  • IntelliJ IDEA护眼设置

    万次阅读 多人点赞 2020-09-23 10:53:05
    IntelliJ IDEA护眼设置  看了很多intelliJ IDEA的配置文章,不知道大家为什么都不约而同的选择了黑色的那个主题,是很有感觉,很有程序猿的范。但是个人感觉对眼睛不太好,所以我还是用正常的框,建议大家把字体调...
  • 错误的写法:加到div中结合图片设置min-height,但是页面不会回弹 话不多说直接上代码 终极方案 html,body{ width:100%; height:100% } 再加一段 body{ font-family: &amp;amp;amp;quot;华文细...
  • 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;" > 第一行是图片...
  • Android Studio设置HTTP代理(可用)

    万次阅读 2020-06-02 14:57:32
    官方下载 Android Tools Project Site Android开发工具的网站,上面链接是...大陆的墙很厚很高,初次安装AndroidStudio下载SDK等必定失败,设置代理方法如下: 1. 到android studio安装目录,打开bin目录,编辑id
  • IDEA中Tomcat在控制台乱码问题以及IDEA编码设置UTF-8

    万次阅读 多人点赞 2020-02-22 22:41:15
    在idea中经常遇到jsp的乱码问题,原因是编码不是UTF-8的问题,这次来彻底解决idea的编码问题首先设置idea编辑器的编码:File-Setting设置如下然后配置tomcat的编码问题:Run/DeBug Configurations在VM options填写-...
  • 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文件中...
  • 打开如目录:C:\Users\pcName\AppData\Roaming\Code\User( 注意替换pcName为自己电脑设置的名称) b.用记事本打开目录下的settings.json ![在这里插入图片描述](https://img-blog.csdn.net/2018100919180466...
1 2 3 4 5 ... 20
收藏数 8,995,031
精华内容 3,598,012
关键字:

设置