前端学习（自用）-练习代码

姜姜巨菜

已于 2022-07-28 16:46:41 修改

阅读量400

点赞数

文章标签：前端学习 html

于 2022-07-22 22:23:28 首次发布

本文链接：https://blog.csdn.net/jiangcaicai2/article/details/125941096

版权

比较杂乱，等学完css一块整理

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">
    <link rel="stylesheet" href="demo6.css">
    <title>demo6</title>
</head>

<body>

    <!-- （1）内容多的时候限制一行（两行、三行）显示，多于内容省略号显示，悬浮显示内容 -->
    <!-- <div class="box">
        一会给大家发一份考试题，各位抽空不忙的时候做一下，下午2：00收试卷，注意：答题不要都100分，请用红笔填上分数再给我，谢谢大家的配合
    </div> -->

    <!-- （2）元素可见性：visibility:hidden和display:none区别
    display不显示也不占位，visibility不显示但是占位 -->
    <div class="box1"></div>
    <div class="box2"></div>

    <!-- （3）cursor光标属性都有哪些？ -->


    <!-- （4）flex弹性布局：flex-direction、flex-wrap、justify-content、align-items属性定义 -->
    <!--  <div class="box">
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div class="box3">3</div>
        <div class="box4">4</div>
    </div> -->

    <!-- （5）px、em、rem的区别
    px是css像素大小
    em是相对单位，会继承父元素font-size的大小，先看自己是否设置，没有看父元素，一级一级往上找，默认时1em=16px
    rem是相对于HTML页面的大小，可以随着页面大小的变化放大缩小,默认时1rem=16px，r->root根目录
    在HTML里面写rem是设置大小，在其他元素里面写是应用根的设置
     -->
    <!-- <div class="per">
        一会给大家发一份考试题，各位抽空不忙的时候做一下，下午2：00收试卷，注意：答题不要都100分，请用红笔填上分数再给我，谢谢大家的配合
    </div> -->

    <!-- （6）矩形盒子四角设置弧度 -->
    <div class="bbox"></div>

    <!-- （7）transform变换：移动（translate）旋转（rotate）缩放（scale） -->
    <!-- 移动（translate） -->
    <div class="tf">
        <p></p>
    </div>
    <!-- 旋转（rotate） -->
    <div class="rot"></div>

    <!-- （8）animation动画：结合@keyframes使用  各属性值含义 -->
    <!-- <div class="an"></div> -->

    <!-- （9）清除浮动 -->
    <!-- <div class="fu">
        <div class="fu1"></div>
        <div class="fu2"></div>
        <div class="clear"></div>
    </div>
    <div class="down"></div> -->

    <!-- 10css伪元素before和after用法 -->
    <div class="wei">叫</div>

</body>

</html>

css

* {
    margin: 0;
    padding: 0;
}

/* body {
    /* 使1em=10px */


/* html {
    font-size: 10px;
}
 */


/* （1）内容多的时候限制一行（两行、三行）显示，多于内容省略号显示，悬浮显示内容 */
/* .box {
    height: 50px;
    width: 100px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.box:hover {
    overflow: visible;
}
 */
/* （2）元素可见性：visibility:hidden和display:none区别 */
/*  display不显示不占位  */
/* .box1 {
    width: 100px;
    height: 100px;
    background-color: pink;
    display: none;
}

.box2 {
    width: 100px;
    height: 100px;
    background-color: greenyellow;
} */

/*  visibility不显示但是占位  */
/* .box1{
    width: 100px;
    height: 100px;
    background-color: pink;
    visibility: hidden;
}
.box2{
    width: 100px;
    height: 100px;
    background-color: greenyellow;
} 
 */


/* （4）flex弹性布局：flex-direction、flex-wrap、justify-content、align-items属性定义 */
/* .box {
    width: 700px;
    height: 500px;
    display: flex;
    background-color: darkgray;
    // 一行放不下换行，第一行在上 
    flex-wrap: wrap;
    flex-direction: row;
    // 在主轴上的对齐方式 
    justify-content: right;
    // 在交叉轴上的对齐方式 
    align-items: flex-start;
}

.box1 {
    width: 200px;
    height: 200px;
    background-color: pink;
}

.box2 {
    width: 200px;
    height: 200px;
    background-color: orangered;
}

.box3 {
    width: 200px;
    height: 200px;
    background-color: rgb(204, 20, 134);
}

.box4 {
    width: 200px;
    height: 200px;
    background-color: rgb(43, 226, 27);
}
 */
/* （5）px、em、rem的区别 */
/* .per {
    font-size: 20px;
    font-size: 2em;
    font-size: 2rem;
} */

/* （6）矩形盒子四角设置弧度 */
/* .bbox {
    width: 300px;
    height: 300px;
    background-color: lightblue;
    border-radius: 10px 20px 30px 40px;
}
 */
/* （7）transform变换：移动（translate）旋转（rotate）缩放（scale） */
/* 用%，移动的距离是用盒子自身的宽度和高度来对比的 
    这里的50%是100px*/
/* .tf {
    position: relative;
    width: 600px;
    height: 600px;
    background-color: lightgreen;
}

p {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    background-color: purple;
    transform: translate(-50%, -50%);

} */

/* 旋转（rotate） */
/* .rot {
    width: 200px;
    height: 200px;
    margin: 50px;
    background-color: pink;
}

.rot:hover {
    transform: rotate(160deg);
} */
/* 缩放（scale） */
/* .rot {
    width: 200px;
    height: 200px;
    margin: 100px auto;
    background-color: pink;
    transform-origin: left top;
}
 */
/* transform-origin: left top;变换中心点
 */
/* .rot:hover {
    transform: scale(2, 2);
} */

/* （8）animation动画：结合@keyframes使用  各属性值含义  */
/* 定义动画 */
/* @keyframes move {
    0% {
        transform: translateX(0px);
    }

    100% {
        transform: translateX(500px);
    }
}

.an {
    width: 200px;
    height: 200px;
    background-color: lightgreen;
    //调用动画 
    animation-name: move;
    // 持续时间 
    animation-duration: 5s;
}

*/

/* （9）清除浮动 */
/* .fu {
    width: 800px;
    border: 1px solid red;
    margin: 0px auto;
}

.fu1 {
    float: left;
    width: 300px;
    height: 200px;
    background-color: purple;
}

.fu2 {
    float: left;
    width: 300px;
    height: 200px;
    background-color: palegreen;
}

.down {
    height: 200px;
    background-color: rgb(30, 33, 210);
}

.clear {
    clear: both;
} */

/* css伪元素before和after用法 */
.wei {
    width: 200px;
    height: 200px;
    background-color: pink;
}

.wei::before {
    content: '我';
}

.wei::after {
    content: '前端程序员';
}