WEB前端笔记3

已于 2023-07-10 15:16:28 修改
阅读量48 收藏
点赞数
文章标签： 前端 笔记
于 2023-07-08 18:01:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_54986292/article/details/131614697
版权

伪类选择器 

/* :hover   鼠标悬停 */
        a:hover {
            /* cursor  鼠标样式 */
            cursor: pointer;
            font-size: 40px;
        }

结构伪类选择器 

ul li:first-child {
            background-color: pink;
        }

        ul li:last-child {
            background-color: green;
        }
		/* 从全部属性中排序寻找 */
        ul li:nth-child(3) {
            background-color: blue;
        }
		/* 从li（选中属性）中排序寻找 */
        ul li:nth-of-type(4) {
            background-color: chartreuse;
        }

伪元素选择器 

ul li::before {
            content: ">";
        }

        ul li::after {
            content: url();
        }

        /* input::placeholder  表单提示词 */
        input::placeholder {
            color: rgb(62, 226, 56);
        }


        /* ::selection 选中时 */
        ul li:nth-child(4)::selection {
            color: pink;
        }

文本相关样式 

div {
            /* width: 300px; */
            height: 200px;
            background-color: pink;
            /* text-indent: 2em; */
            /* 文本水平对齐方式 */
            text-align: center;
            /* overflow: auto; */
            /* 行高  单行文本垂直居中   行高=元素高度*/
            line-height: 200px;



        }

list 

 ul li {
            height: 30px;
            list-style: none;
            list-style: circle;
        }

元素显示模式转换 

.box {
            /* 行内元素无法设置宽、高        转换为行内块元素 */
            /* display: none;隐藏元素，脱离文档流 */
            display: none;
            /* display: inline-block;  将元素转换为行内块元素 */
            /* display: inline;  行内元素 */
            width: 300px;
            height: 300px;
            background-color: pink;
        }

        span {
            display: inline-block;
            /* display: block;  块元素 */
            width: 300px;
            height: 300px;
            background-color: rgb(15, 105, 66);
        }

边框 

div {
            width: 300px;
            height: 300px;
            background-color: pink;
            /* border-radius: 10px; */
            /* border-width 边框宽度 */
            /* border-width: 20px;
            border-style: solid;
            border-color: rgb(35, 223, 18); */
            border: 4px solid black;
            /* border-radius: 50%;    边框弧度*/
            border-top-left-radius: 40%;
        }

合并相邻边框 

table {
            /* 合并相邻边框 */

            border-collapse: collapse;

        }

阴影 

div {
            width: 300px;
            height: 300px;
            background-color: pink;
            /* box-shadow: 20px 20px 10px 10px black; */
        }

        p {
            text-shadow: red 5px 5px;

        }

轮廓线 

input[type="text"] {
            outline: none;
            outline-style: groove;
        }

防拖拽 

textarea {
            /* 防止文本拖拽 */
            resize: none;
            /* vertical-align改变与文字的对齐方式 */
            vertical-align: top;
            vertical-align: middle;
            vertical-align: bottom;
        }

隐藏元素 

.box1 {
            /* display: none;   脱离文档流，原来的位置不再保留 */

            /* display: none; */

            /*visibility: hidden;  元素隐藏，位置保留  */

            /* visibility: hidden; */
            /* opacity: 0; */
            background-color: pink;
        }

绝对定位 

.grandfather {
            position: relative;
            width: 1200px;
            height: 1200px;
            background-color: aquamarine;
        }

        .father {
            /* position: relative; */

            width: 600px;
            height: 600px;
            background-color: pink;
            margin: 400px;
        }

        .son {
            /* position: absolute;  绝对定位：不保留原来位置  子绝父相   父亲没有相对定位，继续向上找，谁有相对定位，以谁作为参考移动
            如果都没找到，则相对于浏览器进行定位
            */

            position: absolute;
            /* top: -100px; */
            bottom: -100px;
            left: 500px;
            width: 100px;
            height: 100px;
            background-color: aqua;
        }

        .son2 {
            width: 100px;
            height: 100px;
            background-color: rgb(40, 65, 65);
        }

固定定位 

div {
            /* 固定定位:相对于可视区域进行定位 */
            position: fixed;
            right: 40px;
            top: 50%;
            width: 100px;
            height: 100px;
            background-color: pink;
        }

粘性定位 

body {
            height: 4000px;
        }

        .one {
            position: sticky;
            top: 0;
            background-color: pink;
        }

盒子模型的内外边距 

</!-- 内边距 --!/>
 div {
            width: 600px;
            height: 600px;
            background-color: pink;
            /* padding-top: 20px;
            padding-left: 20px;
            padding-right: 20px;
            padding-bottom: 20px; */
            padding: 30px;
            padding: 30px 50px;
            padding: 10px 60px 90px;
            /* 上，左右，下 */
            padding: 10px 30px 60px 90px;
            /* 上    右     下         左 */
        }

</!-- 外边距 --!/>
ul li {
            list-style: none;
            background-color: pink;
            margin-bottom: 30px;
        }

        span {
            display: inline-block;
            width: 50px;
            background-color: pink;
            margin-right: 5px;
            margin: 40px;
            margin: 40px 30px;
            margin: 40px 30px 23px;
            margin: 40px 2px 34px 40px;
        }

外边距塌陷问题 

</!-- margin塌陷问题
        父元素的第一个子元素的margin-top值会被父元素抢走
        给父元素添加边框
        overflow:hidden;  -------偏方
        --!>

文本溢出解决办法 

div {
            width: 800px;
            height: 800px;
            background-color: pink;
            /* overflow: auto; */
            /* overflow: hidden; */
            /* overflow: visible;s */
        }

样式继承 

<!-- css样式的继承性
        不是所有样式都继承，只有改变之后对布局无影响的样式，才会继承
        a链接最好在自身更改样式
         --!>
         
<style>
        
        div,
        div span,
        div a {
            font-size: 40px;
        } 

        div {
            font-size: 50px;
            color: #807474;
            /* padding: 13px; */
        }

        /* css样式的继承性
        不是所有样式都继承，只有改变之后对布局无影响的样式，才会继承
        a链接最好在自身更改样式
         */
    </style>

<body>
    <div>
        杀手锏得看懂开始<br>
        <span>我是经常都是</span><br>
        <a href="#">；的策略模式的流程的</a>
        <i>cdjckdd </i>
    </div>

</body>

解决padding影响盒子大小的问题 

div {
            width: 300px;
            height: 300px;
            background-color: pink;
            padding: 40px;
            border: 2px solid red;
            box-sizing: border-box;
        }

flex布局 

width: 800px;
            height: 800px;
            background-color: pink;
            display: flex;
            /* 排列方式 */
            flex-direction: row-reverse;
            flex-direction: column;
            flex-direction: column-reverse;
            flex-direction: row;
            /* 让flex布局变为多行 */
            flex-wrap: wrap;
            /* flex-wrap: nowrap; */
            /* flex-wrap: wrap; */
            /* 主轴上的布局 */
            justify-content: center;
            justify-content: end;
            justify-content: space-around;
            justify-content: space-evenly;
            justify-content: space-between;

            /* 侧轴 */
            /* align-items   单行的   align-content：多行的*/
            align-items: center;
            /* align-items: end; */
            align-items: start;

            align-content: start;
            align-content: end;
            align-content: center;
            align-content: space-between;
            align-content: space-around;
            align-content: space-evenly;

定位补充 

/* z-index  定位中显示的优先级 */

浮动 

.father {
            width: 1000px;
            /* height: 1000px;  */
            background-color: pink;
        }

        .son {
            float: left;
            width: 200px;
            height: 200px;
            background-color: aqua;
        }

        .son2 {
            background-color: blue;
            float: left;
            /* 浮动，会脱离文档流   不再保留原来位置  会造成在其下方的兄弟元素位置发生变化  */
            /* 当子元素发生浮动时，其父元素的高度发生塌陷 */

        }

        .son3 {
            width: 400px;

            background-color: black;
        }

float问题解决办法 

ul li {
            /* float: left; */
            float: right;
            list-style: none;
            margin-right: 20px;

        }

        /* div {
            clear: both;
        } */
        p {
            /* clear  清楚浮动 */
            clear: both;
        }
无序列表在浮动的同时通过clear：both命令不会改变段落位置

渐变 

div {
            width: 400px;
            height: 800px;
            background-image: linear-gradient(to right, green, pink, yellow, red);

        }

字体图标 

去阿里矢量图库收藏字体图标，然后导入自己想加的html中

媒体查询 

div {
            background-color: pink;
        }
@media only screen and (min-width: 320px) and (max-width: 700px) {
            div {
                background-color: blue;
            }
        }
通过拖拽网页大小呈现不同的变化

2d动画 

        .son {
            width: 300px;
            height: 300px;
            background-color: pink;
            /* 平移 */
            /* transform: translate(-40px, 40px); */
            /* transform: translateX(70px); */
            /* transform: translateY(-60px); */
            /* 旋转 */
            /* transform: rotateZ(40deg); */
            /* 复合写法  旋转永远放在最后一个 */
            /* transform: translate(100px) rotateZ(45deg); */
            /* transform: rotateZ(45deg) translate(100px); */
            /* transform: scale(1.5); */
            /* transform: scaleX(2); */
            /* transform: scaleY(2); */
            /* transform: skew(40deg); */
            /* 向右下移动100px   旋转45度    缩放1.5 */
            transform: translate(100px, 100px) scale(1.5) rotate(45deg);

        }

3d动画 

.father {
            width: 300px;
            height: 300px;
            border: 1px solid black;
            margin: 100px auto;
            transform-style: preserve-3d;
            perspective: 800px;
            /* perspective-origin: 100px 200px; */

        }

        .son {

            width: 300px;
            height: 300px;
            background-color: pink;
            /* transform: translateZ(-200px); */
            transform: rotateX(45deg);
            /* transform: rotateY(45deg); */
            /* transform: rotate3d(1, 1, 0, 45deg); */
            backface-visibility: hidden;
            transform-origin: bottom;
        }

过度 

.father {
            width: 300px;
            height: 300px;
            border: 1px solid black;
            margin: 100px auto;
            transform-style: preserve-3d;
            perspective: 800px;
            /* perspective-origin: 100px 200px; */

        }

        .son {
            /* transition   谁变化给谁加 */
            transition: all 5s;

            width: 300px;
            height: 300px;
            background-color: pink;
            /* transform: translateZ(-200px); */
            /* transform: rotateY(45deg); */
            /* transform: rotate3d(1, 1, 0, 45deg); */
            /* backface-visibility: hidden; */

        }

        .son:hover {
            width: 800px;
            transform: rotateX(45deg);

        }

动画 

@keyframes myMovie {
            from {
                width: 200px;
                background-color: pink;
            }

            to {
                width: 800px;
                background-color: aqua;
            }

        }

        @keyframes myfirst {
            0% {
                width: 200px;
                background-color: pink;
            }

            20% {
                width: 400px;
                background-color: green;
            }

            80% {
                width: 800px;
                background-color: red;
            }

            100% {
                width: 1200px;
                background-color: aquamarine;
            }
        }

        div {
            width: 200px;
            height: 50px;
            background-color: aqua;
            animation: myMovie 5s infinite alternate steps(4);
            animation: myfirst 5s infinite alternate steps(400);

        }
ZWinn0w
关注
Web前端学习笔记（1
weixin_47016359的博客
03-16 962
Web前端学习笔记1 一、第一个网页 第一次接触web前端第一个代码可以试着用记事本逐行敲代码，保存的时候要记着文件名的后缀为.html，保存类型为所有文件，编码选中UTF-8 举个栗子： <!Doctype Html> <html lang ="en"> <head> <meta charset = "UTF-8"> <!--title是网页标题--> <!-- 注释标签--> &
web前端开发知识点梳理复习笔记
weixin_55869683的博客
03-04 593
第一章
Web前端笔记记录
yjnlovepy的博客
10-19 3754
web前端开发笔记
Web前端学习重点笔记
m0_65484865的博客
05-03 490
项目1描述1描述2项目2域标题
Web前端笔记
weixin_51582215的博客
04-29 637
Web前端笔记
Web前端学习笔记
jusw123456的博客
10-19 2430
html css分别是指：1、超文本标记语言，html是一种标记语言，它包括一系列标签；2、层叠样式表，css是一种用来表现HTML或XML等文件样式的计算机语言，CSS能够对网页中元素位置的排版进行像素级精确控制。即为浏览器把代码解析后的样子就是我们看到的网站。HTML：结构CSS：样式一个网站是由N多个网页组成的。
Web前端开发学习笔记
qq_41622776的博客
02-02 2760
自学笔记，仅供参考
web前端最全笔记
qqyang_的博客
07-14 4474
#第一章 Web基础知识 Web开发基本概念 1、万维网是一个由许多相互链接的超文本组成的系统，通过互联网访问。 2、web：worldwideweb，万维网，简称web，www，通常称为网页。 3、web开发：进行网页页面制作及其阁下你给功能开发。 4、浏览器：显示网页内容，并让用户与这些文件交互 一种软件。（常用：IE、谷歌、火狐） 5、web服务器：提供web服务的计算机。 6、URL（统一资源定位符）：互联网上标准资源的地址，可以从互联网上得到资源的位置和访问方法。 组成...
Web前端学习笔记（1）
maxiaoxiaohaohao的博客
10-19 3799
Web前端学习笔记（1）
web前端开发技术 笔记 1
qq_62198422的博客
09-11 840
web前端开发技术笔记
web前端笔记
07-28
【web前端笔记】是我在参加专业培训机构学习时整理的一系列笔记，主要涵盖了Web前端开发的基础知识、重要概念和技术栈。这些笔记旨在帮助初学者或有经验的开发者更好地理解和掌握前端开发的核心技能，同时也可供自我...
超详细的web前端基础学习笔记
06-28
#### 超详细的web前端基础学习笔记 ##### 前端课程介绍 - **HTML**：HTML (HyperText Markup Language) 是一种标记语言，用于定义网页的结构与内容。它如同网页的骨架，为网页提供基本框架。 - **CSS**：CSS ...
前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar
04-18
前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar ...
Web前端笔记.zip
04-03
【标题】"Web前端笔记.zip" 是一个包含有关Web前端开发知识的压缩文件，其中可能涵盖了前端开发的各种重要概念和技术。这个压缩包很可能是某个学习者或开发者整理的个人笔记，或者是某次培训课程的资料集合。 ...
Webserver(3.3)生产者消费者模型
最新发布
学习历程记录和分享
11-05 233
解决该问题需要用互斥量确保线程同步，用条件变量或者信号量去解决生产者和消费者之间同步的问题，生产者把数据生产满了要通知消费者去消费。会产生数据安全问题，比如生产者还未生产出来，就去消费。
做一个能适配「手机」的网站需要注意什么
illidri的博客
11-01 310
像现在主流会采用 H5 响应式布局，仅涉及前端的开发工作，代码量少，效果佳，是一种性价比比较高的选择，如果题主有意要进行网站建站，特别是想要手机浏览也有一定效果，可以选择这种~当然还有一种类似的方式叫自适应布局，俗称 AWD（AdaptiveWebDesign），同样是检测视口分辨率，判断不同尺寸和分辨率是什么设备，从而返回不同布局页面。最根本的区别在于，响应式页面的代码量少，但质量要求高，根据不同分辨率自动调整排版，而自适应页面需要根据不同设备准备不同的页面，这样前期的开发工作就大了很多。
vxe-grid ，增加新行，并且定位到新增的行
花花鱼的专栏
11-05 134
vxe-grid新增空行，并且定位到空行位置。
前端react常见面试题目（basic)
警警的博客
11-02 974
react常见面试题目（basic)
Java Web前端学习笔记：HTML到AJAX基础
"这篇文档包含了作者在学习Java Web前端时的笔记，主要涵盖了前端开发的基础知识，包括HTML、CSS、JavaScript、DOM编程、jQuery框架以及AJAX基础。" 本文档详细介绍了Java Web前端开发中的核心技术和元素，首先从...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值