前端html+css+js总复习(css,html)

最新推荐文章于 2022-08-12 13:38:36 发布

1rving

最新推荐文章于 2022-08-12 13:38:36 发布

阅读量115

点赞数

分类专栏：自学文章标签： css html 前端

本文链接：https://blog.csdn.net/weixin_42319157/article/details/126271575

版权

自学专栏收录该内容

2 篇文章 0 订阅

订阅专栏

a链接 target

 <h4>1.外部链接</h4>
    <a href="http://www.qq.com" target="_blank"> 腾讯</a>
    target 打开窗口的方式  默认的值是 _self 当前窗口打开页面  _blank 新窗口打开页面
    <a href="http://www.itcast.cn" target="_blank">传智播客</a>
    <h4>2.内部链接: 网站内部页面之间的相互链接</h4>
    <a href="gongsijianjie.html" target="_blank">公司简介</a>

伪元素选择器

 /* 1.未访问的链接 a:link  把没有点击过的(访问过的)链接选出来 */
        a:link {
            color: #333;
            text-decoration: none;
        }
 
        /*2. a:visited 选择点击过的(访问过的)链接 */
        a:visited {
            color: orange;
        }
 
        /*3. a:hover 选择鼠标经过的那个链接 */
        a:hover {
            color: skyblue;
        }
 
        /* 4. a:active 选择的是我们鼠标正在按下还没有弹起鼠标的那个链接 */
        a:active {
            color: green;
        }

粘性定位

    <title>粘性定位</title>
    <style>
        body {
            height: 3000px;
        }
        .nav {
            /* 粘性定位 */
            position: sticky;
            top: 0;
            width: 800px;
            height: 50px;
            background-color: pink;
            margin: 100px auto;
        }
    </style>
    </head>
<body>
    <div class="nav">我是导航栏</div>
</body>```
![不管scroll怎么滑动都固定在了页面的顶端](https://img-blog.csdnimg.cn/3ed5c20a91d04c2884499f9bcd728e09.jpeg#pic_center)
**三角形制作**
主要是利用border这个属性

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS 三角制作</title>
    <style>
        .box1 {
            width: 0;
            height: 0;
            /* border: 10px solid pink; */
            border-top: 100px solid pink;
            border-right: 100px solid red;
            border-bottom: 100px solid blue;
            border-left: 100px solid green;
        }
        .box2 {
            width: 0;
            height: 0;
            border: 50px solid transparent;
            border-left-color: pink;
            margin: 100px auto;
        }
        .jd {
            position: relative;
            width: 120px;
            height: 249px;
            background-color: pink;
        }
        .jd span {
            position: absolute;
            right: 15px;
            top: -10px;
            width: 0;
            height: 0;
            /* 为了照顾兼容性 */
            line-height: 0;  
            font-size: 0;
            border: 5px solid transparent;
            border-bottom-color: pink;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="jd">
        <span></span>
    </div>
</body>
</html>

上中下分别为box1 box2 jd-span

			/* 这个单词的意思是如果文字显示不开自动换行 */
            /* white-space: normal; */
            /* 1.这个单词的意思是如果文字显示不开也必须强制一行内显示 */
            white-space: nowrap;
            /* 2.溢出的部分隐藏起来 */`在这里插入代码片`
            overflow: hidden;
            /* 3. 文字溢出的时候用省略号来显示 */
            text-overflow: ellipsis;
             /* 弹性伸缩盒子模型显示 */
            display: -webkit-box;
            /* 限制在一个块元素显示的文本的行数 */
            -webkit-line-clamp: 3;
            /* 设置或检索伸缩盒对象的子元素的排列方式 */
            -webkit-box-orient: vertical;

css3新增之属性选择器

[attr]
表示带有以 attr 命名的属性的元素。

[attr=value]
表示带有以 attr 命名的属性，且属性值为 value 的元素。

[attr~=value]
表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少有一个值为 value。

[attr|=value]
表示带有以 attr 命名的属性的元素，属性值为“value”或是以“value-”为前缀（"-"为连字符，Unicode 编码为 U+002D）开头。典型的应用场景是用来匹配语言简写代码（如 zh-CN，zh-TW 可以用 zh 作为 value）。

[attr^=value]
表示带有以 attr 命名的属性，且属性值是以 *value *开头的元素。

[attr$=value]
表示带有以 attr 命名的属性，且属性值是以 *value *结尾的元素。

[attr*=value]
表示带有以 attr 命名的属性，且属性值至少包含一个 *value *值的元素。

[attr operator value i]
在属性选择器的右方括号前添加一个用空格隔开的字母 i（或 I），可以在匹配属性值时忽略大小写（支持 ASCII 字符范围之内的字母）。

[attr operator value s] Experimental
在属性选择器的右方括号前添加一个用空格隔开的字母 s（或 S），可以在匹配属性值时区分大小写（支持 ASCII 字符范围之内的字母）

calc计算属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3属性calc函数</title>
    <style>
        .father {
            width: 300px;
            height: 200px;
            background-color: pink;
        }
        .son {
            /* width: 150px; */
            /* width: calc(150px + 30px); */
            width: calc(100% - 30px);
            height: 30px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <!-- 需求我们的子盒子宽度永远比父盒子小30像素 -->
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

过渡属性(动画)

/* transition: 变化的属性 花费时间 运动曲线 何时开始; */

1rving

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端html+css+js总复习(css,html)

一些学习上的遗漏点
复制链接

扫一扫

专栏目录