HTML常用代码段

最新推荐文章于 2023-09-05 23:01:45 发布

choutui8443

最新推荐文章于 2023-09-05 23:01:45 发布

阅读量136

点赞数

文章标签： php 后端

原文链接：https://my.oschina.net/u/3282363/blog/871309

版权

base64格式：

<img src="https://img-blog.csdnimg.cn/2022010621322249983.gif">
<img src="https://img-blog.csdnimg.cn/2022010621322254498.gif">

———————————————————————————————

ie注释方式：

<!--[if IE ]>
   <body class="ie">
<![endif]-->
<!--[if !IE]>-->
   <body>
<!--<![endif]-->
<!--[if IEMobile 7 ]>
  <html dir="ltr" lang="en-US"class="no-js iem7">
<![endif]-->
<!--[if lt IE 7 ]>
  <html dir="ltr" lang="en-US" class="no-js ie6 oldie">
<![endif]-->
<!--[if IE 7 ]>
  <html dir="ltr" lang="en-US" class="no-js ie7 oldie">
<![endif]-->
<!--[if IE 8 ]>
  <html dir="ltr" lang="en-US" class="no-js ie8 oldie">
<![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)|!(IEMobile)|!(IE)]> <-->
  <html dir="ltr" lang="en-US" class="no-js">
<!--> <![endif]-->

———————————————————————————————————————————————

ie8兼容大法
利用斜杠9来兼容ie8，有些属性只有ie9以上才支持，比如子选择器这种

———————————————————————————————————————————————

头图的背景设置：background-position:center bottom;

———————————————————————————————————————————————

透明边框：

body {
  background-color:red;
}
.div {
  display:inline-block;
  border: 10px solid rgba(255,255,255,.5);
  background: white;
  background-clip: padding-box;  
}

———————————————————————————————————————————————

媒体查询：

———————————————————————————————————————————————

上传多个文件：

<form method="post" action="upload.php" enctype="multipart/form-data">

<input name='uploads[]' type="file" multiple>

<input type="submit" value="Send">

</form>

后端php处理：

foreach ($_FILES['uploads']['name'] as $filename) {
    echo '<li>' . $filename . '</li>';
}

———————————————————————————————————————————————

自动选中框内的文本：

<textarea rows="10" cols="50" onclick="this.focus();this.select()" readonly="readonly">
   example text
</textarea>

———————————————————————————————————————————————

单行文本过长注释

div.test
{

white-space:nowrap;

width:12em;

overflow:hidden;

text-overflow:ellipsis;

}

———————————————————————————————————————————————

多行文本注释：

overflow: hidden;
text-overflow: ellipsis;
display: box;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

———————————————————————————————————————————————

<style type="text/css">
.parent {
    float: left;
    margin-right:20px;
    width: 200px;
    height: 100px;
    background-color: red;
}
.children {
    position: relative;
    left: 50%;
    top:50%;
    width:150px;
    -webkit-transform : translate3d(-50%, -50%, 0);
    transform : translate3d(-50%, -50%, 0);
    background-color: black;
    color:white;
}
</style>
<div class="parent">
    <div class="children">
        <div class="children_inline">一行文字水平垂直居中噢！</div>
    </div>
</div>
<div class="parent">
    <div class="children">
        <div class="children_inline">多行文字水平垂直居中噢！</div>
        <div class="children_inline">多行文字水平垂直居中噢！</div>
    </div>
</div>

———————————————————————————————————————————————

水平居中：子容器和父容器的宽度都不固定