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

本文链接：https://blog.csdn.net/dxnn520/article/details/124026765

Css中的注释代码模板

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

/* #endregion */

鼠标放上小手

cursor: pointer; /* 设置鼠标指针为小手 */

Css中的常用颜色代码

淡红：# fde6e6 淡绿：# ddfdde 淡蓝：# e4e4ff 淡灰：# f4f4f4

淡黄：# fffde2+

【JD红】：#db3831 　rgb(214,51,42)

【TB橙】：#f3550b rgb(243,85,11) rgb(212,129,78)

【ZFB蓝】：#116dea rgb(17,109,243)

字间距：

letter-spacing

文字间距

letter-spacing : 1px;

【Vue】Vue组件中style中的局部样式设置scoped应用_敦厚的曹操的博客-CSDN博客_vue 样式局部使用以防止各组件之间css中class名称的冲突！https://blog.csdn.net/dxnn520/article/details/124606937

零：鼠标点击div变颜色

 <div :class="{
          class_1: Value === index,
          class_2: Value !== index,
        }" >

一、div左右居中

1、通过flex实现上下左右居中

.pdListRight {
  display: flex;
  align-items: center;  /* 上下居中 */
  justify-content: center;  /* 左右居中 */
}

2、div等块元素左右居中

margin: 0 auto;

margin: 0 auto;

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

text-align: center;

text-align: center;

【CSS】一个DIV在另一个DIV上下左右居中和在屏幕居中（示例）_敦厚的曹操的博客-CSDN博客_css一个div在另一个div居中实现效果：代码：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-https://blog.csdn.net/dxnn520/article/details/122270760 如何实现DIV中图片左右居中和垂直居中？（已解决）_敦厚的曹操的博客-CSDN博客_div左右垂直居中在DIV的CSS中设置三个属性： display: table-cell; text-align: center; vertical-align: middle;https://blog.csdn.net/dxnn520/article/details/117252805

【Css/小程序】如何实现div或view中的文字左右居中和垂直居中？（已解决：多行和单行自适应）_敦厚的曹操的博客-CSDN博客【Css/小程序】如何实现div或view中的文字左右居中和垂直居中？（已解决：多行和单行自适应）https://blog.csdn.net/dxnn520/article/details/128442037

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

相对定位：position:relative

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

【CSS】 Css背景图片及背景渐变综合知识和技巧大全（代码实例）_敦厚的曹操的博客-CSDN博客_css背景图片渐变<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.https://blog.csdn.net/dxnn520/article/details/122373678 【Css】通过伪类在div中添加一个背景图片_敦厚的曹操的博客-CSDN博客_css伪元素添加背景图片通过伪类在div中添加一个背景图片https://blog.csdn.net/dxnn520/article/details/125562712三、div底部或顶部置顶及position综合定位大全

【CSS】关于定位position的综合入门笔记（部分有示例）_敦厚的曹操的博客-CSDN博客一、参数和属性1、定位的五个属性2、相对定位reletive3、绝对定位absolute4、固定定位5、粘滞定位二、一个div在另一个div中实现绝对定位（结合相对定位）1、错误图：绝对定位，子div跳出父div，以浏览器的上边距、左边距定位2、解决后的图，使得子div相对父div设置定位位置通过在父div，加上，position: relative; /* 父div设置相对定位，子di...https://blog.csdn.net/dxnn520/article/details/122271328

        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;
    }

五、flex综合实例

【Css\flex】css中关于弹性布局flex的综合用法（示例展示）_敦厚的曹操的博客-CSDN博客_css flex使用一、简单的flex应用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">.https://blog.csdn.net/dxnn520/article/details/122399986

五、通过flex弹性盒实现头像区的多行、多列效果（图文+完整代码实例）

【Css】通过flex弹性盒实现头像区的多行、多列效果（图文+完整代码实例）_敦厚的曹操的博客-CSDN博客完整代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <...https://blog.csdn.net/dxnn520/article/details/124732555

六、带边框的标签及图标标签实现

【Css】带边框的标签及图标标签实现（图文+完整代码）_敦厚的曹操的博客-CSDN博客一、带边框的标签body代码 <div class="top_2"> <div class="top_2_1">到这去</div> <div class="top_2_1">到店支付</div> <div class="top_2_1">经营资质</div> &.https://blog.csdn.net/dxnn520/article/details/124733330

六、子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);

按钮渐变色

  background-image: linear-gradient(to bottom right, #e9e9e9, #FFFFFF); /* 设置黑色和白色的颜色 */

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

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>

十三、【Vue】数组操作和赋值

数组对象赋值

Vue.set(this.img, 0, "我是中国人");

this.toolListActivate[0].id = item.id;

this.tool.id = item.id;

div数值通过iif判断

{{ item.goodsStatus === '0' ? '闲置' : item.goodsStatus === '1' ? '在用' : item.goodsStatus === '2' ? '已处置' : item.goodsStatus === '3' ? '待报废' : ''}}

【Vue】Vue中操作对【数组和对象】操作示例大全（图文+完整代码）_敦厚的曹操的博客-CSDN博客_vue数组对象一、【filter】按指定条件筛选、过滤数组与对象<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-schttps://blog.csdn.net/dxnn520/article/details/123120093 【Vue】通过Object.defineProperty向数组中添加属性和值（数据代理）_敦厚的曹操的博客-CSDN博客通过Object.defineProperty向数组中添加属性和值，但是，只能调用，但不参与遍历数组，也就是遍历数组，遍历不到这个键Key值.<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">https://blog.csdn.net/dxnn520/article/details/123017803

【Vue】Vue中Date数组更改后不更新html视图元素显示的解决方法（完整示例）_敦厚的曹操的博客-CSDN博客<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>...https://blog.csdn.net/dxnn520/article/details/122964112

十四、【Vue】操作css中的style

【Vue】Vue中通过动态修改Class样式（style）名称实现计算器或充值等功能（图文和完整示例）_敦厚的曹操的博客-CSDN博客_vue 充值<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title...https://blog.csdn.net/dxnn520/article/details/123050234

【Vue】Vue中实现单击click事件获取html元素和css样式的解决方法（持续更新中...）_敦厚的曹操的博客-CSDN博客_vue获取html元素一、通过event获取 console.log(event.target); // 当前元素点击的子节点 console.log(event.currentTarget); // 当前Vue元素 var pro = event.currentTarget; // 当前元素 pro.lastElementChild.style.color = "#DE3E3E"; /https://blog.csdn.net/dxnn520/article/details/122956147

十五、【Vue】对表单元素的操作（文本框样式等）

【Css】input输入文本框的样式大全（图文和完整源码）_敦厚的曹操的博客-CSDN博客_css输入框样式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>...https://blog.csdn.net/dxnn520/article/details/123901935

【Vue】通过Vue操作表单元素（下拉框、选择框）等示例（图文+完整代码）_敦厚的曹操的博客-CSDN博客代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti...https://blog.csdn.net/dxnn520/article/details/123291005 【Vue】通过“插值语法”和“数据绑定”为html元素赋值（图文+完整示例）_敦厚的曹操的博客-CSDN博客_vue赋值html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit...https://blog.csdn.net/dxnn520/article/details/122739498

十六、【Vue】对组件的操作大全

【Vue】Vue-cli(脚手架)实现单文件Vue组件的调用（图文和代码）_敦厚的曹操的博客-CSDN博客一、实现效果二、实现步骤1、单文件Vue组件School.Vue（在components）<template>  <div class="demo"> <h2>---------【School.vue】---------</h2> <h2>学校名称：{{ schoolName }}</h2> <h2>学校地址：{{ addresshttps://blog.csdn.net/dxnn520/article/details/123787206?spm=1001.2014.3001.5502 【Vue】Vue组件中事件和方法的混合（mixin）应用(图文+代码示例)_敦厚的曹操的博客-CSDN博客_vue组件混合用途：把.vue文件中的重复事件（如：methos），统一集中放在一个mixin.js中管理，方便做一些通用事件或函数的类。一、局部混入1、School.vue<template>  <div class="demo"> <h2>---------【School.vue】---------</h2> <h2>学校名称：{{ schoolName...https://blog.csdn.net/dxnn520/article/details/123839115

【Vue】【子组件】调用【父组件】参数，props属性值【动态】调用的两种方法（图文+完整代码）_敦厚的曹操的博客-CSDN博客_vue 动态props一、简易型1、Student.vueprops:["name1","name2","name3"]<template>  <div class="demo"> <h2>---------【Student.vue】---------</h2> <h2>入取该校第1名学生：{{ name1 }}</h2> <h2>入取该校第2名学生：{{ nahttps://blog.csdn.net/dxnn520/article/details/123811446 【Vue】Vue中【父】组件调用【子】组件参数方法（图文+代码示例）_敦厚的曹操的博客-CSDN博客App.vue代码：<template> <div id="myapp"> <MyHeader :m_obj="m_obj"> </MyHeader> </div></template><script>// 引入组件import MyHeader from "@/components/MyHeader.vue";// 注册组件export default { name...https://blog.csdn.net/dxnn520/article/details/124411154

九十五、js中的宏替换、宏变量

【JavaScript】JS中类似宏变量、宏替换的用法。_敦厚的曹操的博客-CSDN博客_js 宏替换<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.https://blog.csdn.net/dxnn520/article/details/122955975

九十六、【ES6】操作大全

【Javascript】Es6的知识与技巧（示例）_敦厚的曹操的博客-CSDN博客一、var、const、let三者的区别https://blog.csdn.net/dxnn520/article/details/122683056

九十七、 js实现alert弹窗

【JavaScript】alert弹窗不显示网址标题（已解决，图文+示例）_敦厚的曹操的博客-CSDN博客_alert不显示网址一、alert.js代码：window.alert = function(msg, callback) {var div = document.createElement("div");div.innerHTML = "<style type=\"text/css\">"+ ".nbaMask { position: fixed; z-index: 1000; top: 0; right: 0; left: 0; bottom: 0; background: rgba...https://blog.csdn.net/dxnn520/article/details/123556253九十八、Js超链接实例和超链接样式大全

Html之【超链接＜A＞】综合技巧大全(持续更新中..)_敦厚的曹操的博客-CSDN博客一、超链接示例 HTML超链接我的博客首页我的博客

返回箭头上一页

<div id="ReturnPage" onclick="javascript:window.history.go(-1)">

Js跳到指定页

<div id="ReturnPage" onclick="window.location = 'http://www.baidu.com/';">

九十九、常用特殊字符和html特殊字符显示代码

★ ☆ ◆ ◇ 『』〖〗× ÷ ‖ √ ‰ ㎡ ℃ ＄￥ ○ ● ~ ♡ ® » ✔ √

① ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ ⑩ ⑪ ⑫ ⑬ ⑭⑮⑯⑰⑱⑲⑳

➊ ➋ ➌ ➍ ➎ ➏ ➐ ➑ ➒ ➓

HTML 原代码	显示结果	描述
<	<	小于号或显示标记
>	>	大于号或显示标记
&	&	可用于显示其它特殊字符
"	"	引号
®	®	已注册
©	©	版权
™	™	商标

一百、font-awesome常用图标代码

Font Awesome，一套绝佳的图标字体库和CSS框架https://fontawesome.dashgame.com/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