CSS学习笔记Day3

已于 2024-05-30 23:23:55 修改
阅读量691 收藏 28
点赞数 21
文章标签： css 学习 笔记 html html5
于 2024-05-22 00:53:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/primebrake/article/details/139100513
版权

1 CSS三大特性

1.1 层叠性

层叠性是指时间选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突问题。

层叠性原则：

1.样式冲突，遵循的原则是就近原则，哪个样式离结构近，执行哪个样式。

2.样式不冲突，不会层叠。

以下是层叠性的例子。层叠性只会把冲突的样式进行层叠，不冲突的不会层叠。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>层叠性</title>
    <!-- 层叠性指：时间选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突问题。 -->
    <style>
        /* 层叠性原则： */
        /* 1.样式冲突，遵循的原则是就近原则，哪个样式离结构近，执行哪个样式 */
        /* 样式不冲突，不会层叠 */
        div {
            color: red;
            /* 字体大小不会覆盖 */
            font-size: 12px;
        }

        div {
            color: pink;
        }
    </style>
</head>

<body>
    <div>长江后浪推前浪</div>
</body>

</html>

1.2 继承性

继承，在现实生活中，好似你继承了父亲的类。

CSS中的继承是指子标签会继承父标签的某些样式，如文本颜色和字号。继承可以用来简化代码。

子元素可以继承父亲的样式，如text-,font-,line-这些元素开头的和color可以继承。

以下有一个例子。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>继承性</title>
    <!-- 现实中的继承：我们继承了父亲的姓 -->
    <!-- css中的继承：子标签会继承父标签的某些样式，如文本颜色和字号 -->
    <!-- 以便简化代码 -->
    <!-- 子元素可以继承父亲的样式，如text-,font-,line-这些元素开头的可以继承以及color -->

    <!-- <style>
        div {
            color: pink;
            font-size: 14px;
        }
    </style> -->
    <style>
        body {
            color: red;
            font: 12px/1.5 'Microsoft YaHei';
            /* 写成1.5 这样写最大的优势就是里面子元素可以根据自己文字大小自动调整行高 */
        }
        div {
            /* 子元素继承了父元素body的行高 1.5 */
            /* 这个1.5就是当前元素文字大小 font-size的1.5倍  所以当前div的行高为21px*/
            font-size: 14px;
        }
        p {
            /* 1.5*16 = 当前的行高24 */
            font-size: 16px;
        }
        /* li没有手动指定文字大小 则会继承父亲的文字大小body 12px 所有li的文字大小为12px */
        /* 当前li的行高就是12*1.5 = 18px */
    </style>
</head>
<body>
    <div>粉红色的回忆</div>
    <p>粉红色的回忆</p>
    <ul>
        <li>我没有指定文字大小</li>
    </ul>
</body>
</html>

上述代码中，行高需要注意的是：设置为1.5，子标签会继承父亲的文字大小，然后行高是文字大小的1.5倍。

1.3 优先级

优先级的含义：当同一个元素指定多个选择器，就会有优先级的产生。

  • 选择器相同，则执行层叠性。
  • 选择器不同，则依据选择器权重执行。

以下是各个选择器的权重。

  1. 继承或者*选择器权重：0，0，0，1
  2. 元素选择器权重：0，0，0，1
  3. 类选择器，伪类选择器权重：0，0，0，1
  4. ID选择器权重：0，1，0，0
  5. 行内样式style=""选择器权重1，0，0，0
  6. ！important 选择器权重为无穷大

优先级的注意点：

  1. 权重是由4组数组组成的，但是不会有进位
  2. 可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器
  3. 等级判断从左往右，如果某一位数值相同，则判断下一位数值
  4. 继承的权重是0！！！！！！不管父元素权重多高，子元素得到的权重永远是0。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>优先级</title>
    <style>
        .test {
            color: red
        }
        div {
            color: pink!important;
            /* 这是直接无穷大 */
        }
        #demo {
            color: green;
        }
        body {
            color: red;
        }
    </style>

</head>

<body>
    <!-- 优先级：当同一个元素指定多个选择器，就会有优先级的产生 -->
    <!-- 1、选择器相同，则执行层叠性 -->
    <!-- 2、选择器不同，则根据选择器权重执行 -->
    <!-- 继承或者* 选择器权重：0,0 0,0 -->
    <!-- 元素选择器 选择器权重：0,0,0,1 -->
    <!-- 类选择器，伪类选择器 选择权重 0,0,1,0 -->
    <!-- ID选择器 选择权重 0,1,0,0 -->
    <!-- 行内样式style="" 选择器权重1,0,0,0 -->
    <!-- !important重要的 选择器权重为无穷大 -->
    <div class="test" id="demo">你笑起来真好看</div>
    <a href="#">我不会继承body</a>
    <!-- a链接浏览器默认指定了一个样式 蓝色的有下划线 所以他不会继承父亲样式-->
    <!-- 优先级注意点： -->
    <!-- 1.权重是有4组数组组成，但是不会有进位。 -->
    <!-- 2.可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器 -->
    <!-- 3.等级判断从左往右，如果某一位数值相同，则判断下一位数值 -->
    <!-- 4.继承的权重是0！！！！！！ 不管父元素权重多高，子元素得到的权重永远是0-->

</body>

</html>

1.4 权重叠加

复合选择器有权重叠加的问题，但是权重会叠加，却永远不会进位。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>权重叠加</title>
    <style>
        /* 复合选择器有权重叠加的问题 */
        /* 权重虽然会叠加，但是永远不会进位 */
        /* ul li的权重0,0,0,1+0,0,0,1=0,0,0,2 */
        ul li {
            color: green;
        }

        li {
            color: red;
        }
        /* .nav li 权重为0,0,1,0+0,0,0,1 = 0,0,1,1 */
        .nav li {
            color: blue;
        }
    </style>
</head>

<body>
    <ul class="nav">
        <li>大猪蹄子</li>
        <li>大肘子</li>
        <li>猪尾巴</li>
    </ul>
</body>

</html>

2 css盒子模型

网页核心的本质是利用css摆放盒子。

以下是步骤。

  1. 先准备好相关的网页元素，网页元素基本都是盒子box
  2. 利用css设置好盒子样式，然后摆放到相应位置
  3. 往盒子里面装内容。

以下是一些属性。

  • border：边框
  • content：内容
  • padding：内边距
  • margin：外边距

2.1 盒子模型之边框

border-width：边框的粗细（单位px）

border-style：边框样式

  • solid：实线边框
  • dashed：虚线
  • dotted：点线边框
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>盒子模型之边框</title>
    <style>
        div {
            width: 300px;
            height: 200px;
            /* 边框的粗细 */
            border-width: 5px;
            /* 边框的样式 */
            /* solid:实线边框 */
            /* border-style: solid; */
            /* dashed：虚线 */
            /* dotted:点线边框*/
            border-style:dotted;
            border-color: green;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

复合写法：border:边框大小 border-style color

还可以分别设置上边框、下边框等

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>边框的复合写法</title>
    <style>
        div {
            width: 500px;
            height: 300px;
            /* 复合写法 */
            /* border: 5px solid red; */
            /* 可以分别设置上边框和下边框： */
            border-top: 5px solid purple;
            border-bottom: 5px dotted blue;

        }
    </style>
</head>
<body>
    <div></div>
</body>

注意：添加边框后，盒子的宽度和高度需要加上边框的2倍，所以要保持添加后的盒子大小和之前一致的话，需要减去边框的大小。

2.2 表格细线

border-collapse:collapse可以合并表格相邻的边框。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格细线边框</title>
    <style>
        table,
        td,th {
            border: 1px solid red;
            /* 合并相邻的边框 */
            border-collapse: collapse;
            font-size: 14px;
            text-align: center;
        }
        th {
            height: 35px;
        }
        table {
            width: 500px;
            height: 249px;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <th>排名</th>
            <th>关键词</th>
            <th>趋势</th>
            <th>进入搜索</th>
            <th>最近七日</th>
            <th>相关链接</th>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="" alt="上升"></td>
                <td>456</td>
                <td>123</td>
                <td>
                    <a href="#">贴吧</a>
                    <a href="#"> 图片</a>
                    <a href="#"> 百科</a>
                </td>
            </tr>
            <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="" alt="上升"></td>
                <td>456</td>
                <td>123</td>
                <td><a href="#">贴吧</a>
                    <a href="#"> 图片</a>
                    <a href="#"> 百科</a>
                </td>
            </tr>
            <tr>
                <td>3</td>
                <td>西游记</td>
                <td><img src="" alt="下降"></td>
                <td>456</td>
                <td>123</td>
                <td><a href="#">贴吧</a>
                    <a href="#"> 图片</a>
                    <a href="#"> 百科</a>
                </td>
            </tr>
            <tr>
                <td>3</td>
                <td>西游记</td>
                <td><img src="" alt="下降"></td>
                <td>456</td>
                <td>123</td>
                <td><a href="#">贴吧</a>
                    <a href="#"> 图片</a>
                    <a href="#"> 百科</a>
                </td>
            </tr>
            <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="" alt="上升"></td>
                <td>456</td>
                <td>123</td>
                <td>
                    <a href="#">贴吧</a>
                    <a href="#"> 图片</a>
                    <a href="#"> 百科</a>
                </td>
            </tr>
            <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="" alt="上升"></td>
                <td>456</td>
                <td>123</td>
                <td><a href="#">贴吧</a>
                    <a href="#"> 图片</a>
                    <a href="#"> 百科</a>
                </td>
            </tr>

        </tbody>

    </table>
</body>

</html>

加不加 border-collapse: collapse;的效果对比图。

不加的时候：

加的时候：

2.3 padding属性

padding属性用于设置内边距，即边框与内容之间的距离。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内边距</title>
    <!-- padding属性用于设置内边距，即边框与内容之间的距离 -->
    <style>
        div {
            background-color: aliceblue;
            width: 200px;
            height: 200px;
            padding-left: 20px;
            padding-right: 20px;
            padding-top: 20px;
            padding-bottom: 20px;
        }
    </style>
</head>
<body>
    <div>你是谁我是谁打打打的大卫阿娇的大大大大大大大哇</div>
</body>
</html>

padding的复合属性。

  • 如果padding后面跟一个值，意思是上下左右都是那个值。
  • 如果padding后面跟两个值，代表上下是第一个值，左右是第二个值
  • 如果padding后面跟三个值，代表上，左右，下
  • 如果padding后面跟四个值，上，右，下，左
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>padding复合属性</title>
    <style>
        div {
            /* 如果padding后面跟一个值，意思是上下左右都是5px */
            /* padding: 5px  */
            /* 如果padding后面跟两个值，代表上下是第一个值，左右是第二个值 */
            /* padding: 5px 10px; */
            /* 如果padding后面三个值 代表上，左右，下 */
            /* padding: 5px 10px 20px; */
            /* padding后面四个值：上、右、下、左 */
            padding: 5px 10px 20px 30px;
        }
    </style>
</head>
<body>
    <div>大大的坏蛋</div>
</body>
</html>

注意：当给我们的盒子指定padding值之后，发生两件事：

  1. 内容和边框有了距离，添加了内边距
  2. padding影响了盒子的实际大小，也就是说，如果盒子已经有了高度和宽度，此时在指定内边距，会撑大盒子。

如何解决？

答：如果保证盒子跟效果图大小保持一致，则让width和height减去多出来的内边距大小即可。

padding应用：新浪导航栏

每个导航栏文字字数不同，这会导致不美观，如何解决？

答：给盒子padding合理，巧妙应用padding撑大盒子。

因为如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小。遇到孩子和父亲这种嵌套关系的，孩子没必要写宽度，不然写padding会撑开。

2.4 margin属性

margin属性用于设置外边距，即控制盒子和盒子之间的距离

margin简写方式和padding完全一致！！！！

外边距的典型运用：

  • 外边距可以让块级盒子水平居中，但是必须满足两个条件：
  1. 盒子必须指定了宽度
  2. 盒子左右的外边距都设置为auto

注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加text-align:center即可。

以下是一个例子。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外边距典型运用-块级盒子水平居中对齐</title>
    <!-- 外边距可以让块级盒子水平居中，但是必须满足两个条件 -->
    <!-- 1.盒子必须指定了宽度 -->
    <!-- 2.盒子左右的外边距都设置为auto -->
    <!-- 注意:以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加text-align:center即可 -->

    <style>
        div {
            width: 300px;
            margin: 0 auto;
            background-color: red;
            text-align: center;
        }
    </style>

</head>

<body>
    <div>你好</div>
</body>

</html>

外边距合并-嵌套块元素塌陷

对于两个嵌套关系的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距。

解决方案：

  1. 可以为父元素定义上边框
  2. 可以为父元素定义上内边距
  3. 可以为父元素添加overflow:hidden
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外边距合并-嵌套块元素塌陷</title>
    <style>
        .father {
            width: 400px;
            height: 400px;
            background-color: purple;
            margin-top: 50px; 
             /* 解决方案：1.可以为父元素定义上边框 */
            /* border: 1px solid transparent; */
            /* 2.可以为父元素定义上内边距 */
            /* padding: 1px; */
            /* 3.可以为父元素添加overflow:hidden */
             overflow: hidden; 
        }
        .son {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 对于两个嵌套关系的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距 */
            /* margin-top: 100px; */  
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son">

        </div>
    </div>
</body>

</html>

2.5 清除内外边距

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致，因此我们在布局前，需要清除网页元素的内外边距。

记住：行内元素是为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距，但是转换为块级和行内元素就可以了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清除内外边距</title>
    <style>
        /* 记住；行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距，但是转换为块级和行内元素就可以了 */
        
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <!-- 网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致，因此我们在布局前，需要清除网页元素的内外边距 -->
    123
    <ul>
        <li>dadada</li>
    </ul>
</body>
</html>

3 ps基本操作

网页美工大部分效果都是利用ps来做的，所以以后我们大部分的切图工作都是在PS里面完成。

ctrl+R打开标尺，右击换成像素

ctrl+加号放大视图

ctrl+减号缩小视图

按住空格键，鼠标可以变成小手，拖动ps视图

通过选区来测量大小

ctrl+D可以取消选区，或者在旁边空白处点击一下也可以取消选区

吸管工具！

4 综合案例-产品布局模块分析

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background-color: #f5f5f5;
        }
        .box {
            width: 298px;
            height: 415px;
            background-color: #fff;
            /* 让块级的盒子水平居中对齐 */
            margin: 100px auto;
        }
        .box img {
            /* 图片宽度和父亲一样宽 */
            width: 100%;
        }
        .review {
            height: 70px;
            font-size: 14px;
            /* 这个段落没有width属性，所以padding不会撑开 */
            padding: 0 28px;
            margin-top: 30px;
        }
        .appraise {
            font-size: 12px;
            color: #b0b0b0;
            margin-top: 20px;
            padding: 0 28px;
        }
        .info {
            font-size: 14px;
            margin-top: 15px;
            padding: 0 28px;
        }
        .info h4 {
            display:inline-block;
            font-weight: 400;
        }
        .info span {
            color: #ff6700;
        }
        .info em {
            font-style: normal;
            color: #ebe4e0;
            margin-left: 15px;
            margin-right: 6px;
        }
        a {
            color:#333;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="img.jpg" alt="">
        <p class="review">
            快递牛，整体不错蓝牙可以说秒连。红米给力
        </p>
        <div class="appraise">
            来自于 117384232 的评价
        </div>
        <div class="info">
            <h4><a href="#">Redmi AirDots真无限蓝...</a></h4>
            <em>|</em>
            <span>99.9元</span>
        </div>

    </div>
</body>

效果图如下：

书立行
关注
  • 21
    点赞
  • 踩
  • 28
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
初学Vue(学习笔记 一) day one
01-20
本人非科班出生，所学知识是网上找的，若有理解错误，望大佬能够指出， ） Vue概述 Vue：渐进式JavaScript框架 声明式渲染→组件系统→客户端路由→集中式状态管理→...el：元素的挂载位置（值可以是css选择器或者DOM
Day05_CSS课堂笔记.md
08-06
零基础开始学习前端，HTML和CSS
CSS学习笔记DAY3
qq_59277204的博客
03-06 843
4 rgba(0~255,0~255,0~255,0~1) 设置当前样色是否为透明 0表示透明 1表示不透明。在当前的html文件中 head标签内部 定义style标签 在style标签内定义css代码。因为h系列标签的默认的字体大小的单位是em 是按照父元素字体大小来确定的 所以会变大。2 rgb(0~255,0~255,0~255)三原色 红色：rgb(255,0,0)所以想要改变a标签的文字颜色 需要选择器直接选择到a标签。在css文件里面 直接写css代码（不需要style标签了）
CSS学习笔记 Day 3
小喾苦的博客
01-10 123
盒子模型 盒子边框 内边距 外边距 盒子模型布局稳定性 圆角边框 盒子阴影 CSS书写规范
CSS学习笔记DAY5
qq_59277204的博客
03-08 699
margin: 0;padding: 0;
CSS学习笔记Day2
primebrake的博客
05-13 847
例如：div*3+tab键生成 例如：div>span+tab键生成例如：div+p+tab键生成例如：p.one+tab键，生成例如：div.demo$5+tab键生成div后引用demo1-5类。例如：div{你是谁}+tab键生成你是谁
CSS学习笔记Day1
primebrake的博客
05-13 864
如果把HTML比作是一个人，那CSS就是他的穿搭。所以学习CSS是做好网页至关重要的一步。
CSS学习笔记Day4
primebrake的博客
05-22 881
答：我们前面浮动元素有一个标准流的父元素，他们有一个共同的特点，都是有高度的但是所有的父盒子都必须有高度嘛？如果产品会越来越多，或者新闻的字数也不一样，给高度不方便 -->如果不给父盒子高度，会有很多问题，因为浮动元素不占空间，父盒子的高度会变成0，会影响下面的标准流盒子。清除浮动的本质是清除浮动元素造成的影响 ，如果父盒子本身有高度，则不需要清除浮动。为了约束浮动元素位置，我们网页布局一般采取的策略是：先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，复合网页布局第一准则。
CSS学习笔记Day6
primebrake的博客
05-22 802
注意：加了绝对定位的盒子不能通过margin:0 auto水平居中，如何解决呢？？这里有一个小诀窍left走百分之五十 父容器宽度的一半。
CSS学习笔记Day5
primebrake的博客
05-22 216
我们通常将首页命名为index.html，以下是首页的html代码。
CSS学习笔记——Day One
2301_79729136的博客
11-21 149
CSS学习笔记（选择器、文本属性、新闻页面案例）
【JQuery学习笔记day11】HTML 布局
01-08
CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。 虽然我们可以使用HTML table标签来设计出漂亮的布局，但是table标签是不建议作为布局工具使用的 – 表格不是布局工具。 使用 元素 元素是用于...
树懒_day02.1_css笔记
07-19
移动开发初学者小白的树懒笔记之学习_web_css
Day04_HTML&CSS课堂笔记.md
08-04
零基础开始学习web，HTML和CSS
CSS实现一个雨滴滑落效果
云加速
05-28 1270
这只是一个非常基础的示例，真实的雨滴滑落效果可能需要更复杂的动画和可能的JavaScript交互来实现更逼真的效果，比如雨滴的大小、速度、下落路径的随机性等。如果你想要一个更复杂的动画效果，你可能需要考虑使用SVG、Canvas或者WebGL等技术，并结合JavaScript来实现。使用纯CSS来实现一个真实的雨滴滑落效果可能会有些挑战，因为CSS主要关注于静态样式和简单的动画效果。然而，你可以使用CSS动画和@keyframes来模拟一个雨滴滑落的简化效果。这个示例中的雨滴是一个简单的圆形元素。
css-垂直居中的几种写法
xxuxioxx的博客
05-27 361
垂直居中的几种写法
CSS 空间转换 动画
最新发布
qq_67140973的博客
05-31 289
空间转换、视距 - perspective、空间转换 - 旋转、立体呈现 - transform-style、空间转换 - 缩放、动画 - animation、动画的基本使用、animation 复合属性、animation 拆分属性、多组动画
CSS学习笔记：bootstrap的介绍、下载、使用及响应式布局的实现
lbcbjtlhmjq的博客
05-30 726
Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架，它提供了大量编写好的CSS 样式 bootstrap过时了吗？ 其实在学bootstrap这一部分的网课时，在弹幕上看到一些同学说bootstrap已经过时了，这里谈谈我的看法
html5笔记+css3笔记
12-25
HTML5笔记： HTML5是一种用于构建网页的标准标记语言，它具有很多新的特性和功能。其中包括语义化标签、多媒体支持、本地存储、拖放功能等。HTML5还支持响应式设计，能够使网页在不同的设备上都能够良好的显示和交互。另外，HTML5还提供了一些新的API，如地理位置、Web存储、WebSocket等，使得网页开发具有更多的可能性和创新空间。 CSS3笔记： CSS3是用于网页样式设计的语言，它引入了很多新的特性和功能。其中包括圆角、阴影、过渡、动画、媒体查询、多列布局等。借助这些新特性，开发者可以更加轻松地实现网页的视觉效果，使得网页具有更加丰富的外观和交互。CSS3还支持响应式设计，可以根据设备的不同来调整网页的样式和布局，从而提供更好的用户体验。另外，CSS3还提供了对字体、颜色、渐变等方面的增强功能，使得网页的设计更加灵活和个性化。 综上所述，HTML5和CSS3的新特性和功能为网页开发带来了更多的可能性和创新空间，使得开发者可以更好地实现丰富多样的网页设计和交互效果。因此，掌握HTML5和CSS3的知识是非常重要的，可以帮助开发者更好地实现自己的网页设计理念和创意。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值