【Css】Css和Html常用设计实例参考笔记（自己开发项目用）

目录

目录

一、div左右居中

二、图片、图标字体等上下错位调整

三、div底部或顶部置顶

四、左右弹性盒子比例分配

五、子DIV使用magin-top，父DIV和子DIV同时下移

六、Checkbox复选框的自定义样式

七、底部按钮代码

注意：white-space: nowrap;代码影响到底部置顶pposition: fixed;

八、div不换行，超出部分隐藏

九、DIV半透明效果

div透明，但是，div里的内容不透明

十、左上侧返回上一页【左箭头】

十一 、css的块代码注释

最后、font-awesome常用图标代码

---

一、div左右居中

1、div等块元素左右居中

margin: 0 auto;

margin: 0 auto;

2、span等行级元素左右居中

text-align: center;

text-align: center;

二、图片、图标字体等上下错位调整

相对定位：position:relative

{
    position:relative; /* 相对定位  */
    left:10px;
    top:10px
}

三、div底部或顶部置顶

        position: fixed;  /* 浏览器定位  */
        top: 10px;

四、左右弹性盒子比例分配

1、父div

  /* 父div */

  .PayList_row {
      display: flex;
      flex-direction: row;
  }

2、子div

    .PayList{
        width: 0px;
        flex-grow: 2;
        background-color: aqua;
    }

五、子DIV使用magin-top，父DIV和子DIV同时下移

子div：magin-top:10px

父div：padding-top: 1px;

六、Checkbox复选框的自定义样式

 1、html代码

 <span class="checkbox_span">
       <input type="checkbox" class="Checkbox" id="check3">
       <label for="check3" class="checkbox_label"></label>
 </span>

2、css代码

<link rel="stylesheet" href="css/CheckBox.css">

    /* 圆圈样式 */
    .Checkbox+.checkbox_label {
        width: 23px;
        height: 23px;
    }

    /* 对勾样式 */
    .Checkbox:checked+.checkbox_label:after {
        left: -1px;
        top: -1px;
        width: 25px;
        height: 25px;
        font-weight:900;
        font-size: 16px;
        line-height: 25px;
    }

七、底部按钮代码

注意：white-space: nowrap;代码影响到底部置顶pposition: fixed;

1、 html代码

    <!-- 底部按钮 -->
    <div>
        <button id="btn_bottom">确认付款</button>
    </div>

2、css代码

    #btn_bottom {
        background-color: rgb(254, 95, 43);
        width: 100%;
        height: 55px;
        color: white;
        font-size: 18px;
        position: fixed;
        bottom: 0;
        left: 0;
        border: 0px;
    }

八、div不换行，超出部分隐藏

        overflow: hidden;
        white-space: nowrap;

九、DIV半透明效果

.aaa{
    filter:alpha(Opacity=80);  /*  IE有效 */
    -moz-opacity:0.5; /* 火狐浏览器有效，IE无效 */
    opacity: 0.5; /* 除IE外，所有浏览器都有效 */
} 

div透明，但是，div里的内容不透明

background:rgba(0,0,0,0.2);

十、左上侧返回上一页【左箭头】

css代码

    /* #region  === 【返回箭头】===*/

    #ReturnPage {
        width: 30px;
        height: 30px;
        background-color: rgb(69, 69, 69,0.6);
        border-radius: 50px;
        color: white;
        font-size: 25px;
        line-height: 15px;
        text-align: center;
        position: fixed;
        top: 10px;
        margin-left: 10px;
    }

    #ReturnPage i {
        position: relative;
        top: 1px;
        left: -1px;
    }

  /* #endregion */

引入font-awesome图标文件

<link href="js/font-awesome/css/font-awesome.min.css" rel="stylesheet">

html代码

        <!-- 返回箭头 -->
        <a href="javascript:window.history.go(-1)">
            <div id="ReturnPage">
                <i class="fa fa-angle-left"></i>
            </div>
        </a>

十一 、css的块代码注释和Line间隔线的代码

  /* #region === 【】=== */

  /* #endregion */

分割线

    .line_1 {
        height: 1px;
        background-color: rgb(250, 250, 250);
    }

    .line_2 {
        height: 4px;
        background-color: rgb(250, 250, 250);
    }

    .line_3 {
        height: 8px;
        background-color: rgb(250, 250, 250);
    }

    <div class="line_3"></div>

十二、指定标题字体名称font-family

<style>
    @font-face {
        font-family: "myfont";
        src: url('css/fonts/Hiti.otf');
    }
    .div{
        font-family: "myfont";
    }
</style>

最后、font-awesome常用图标代码

1、引用

<link href="js/font-awesome/css/font-awesome.min.css" rel="stylesheet">

2、常用图标

 <i class="fa fa-angle-left"></i> 左箭头<br />

fa-map-marker    fa-angle-double-downfa-chevron-circle-left

fa-chevron-up    fa-heart     fa-heart-o fa-timesfa-close

 fa-check  fa-comment-o    fa-commenting-o     fa-commenting

 fa-cog     fa-camera      fa-bars     fa-image   fa-info-circle

  fa-sort-down    fa-street-view    fa-tag   fa-usersfa-list-ul

   fa-user  fa-user-circle-o   fa-user-o   fa-user-plus   fa-yen

  fa-minus-square     fa-minus-square-o   fa-plus-squarefa-plus-square-o

 fa-th-large        fa-table    fa-th-largefa-rotate-left  fa-share-alt  

 fa-share-alt-square    fa-star   fa-star-half-o   fa-star-o   fa-remove     fa-plus

fa-paper-plane   fa-pencil-square-o   fa-paint-brush     fa-paper-plane-o

 fa-phone       fa-phone-square    fa-envelope     fa-envelope-o

fa-diamond     fa-drivers-license-o    fa-credit-card        

fa-check-circle  fa-circle-thin