HTML+CSS之CSS案例大全

最新推荐文章于 2024-05-23 11:23:05 发布
最新推荐文章于 2024-05-23 11:23:05 发布
阅读量841 收藏 9
点赞数 33
文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_62575733/article/details/138547429
版权

CSS

1.体验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>体验css语法规范</title>
   <style>
      /* 选择器{样式} */
      /* 给谁该样式{改什么样式} */
      p {
         color:red;
         font-size:12px;
         /* 修改像素的大小 */
      }
   </style>
</head>
<body>
   <p>有点意思</p>
</body>
</html>

2.基础选择器自之标签选择器

<!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>Document</title>
    <style>
        /* 标签选择器：写上标签名 */
        p {
            color: green;
        }
        div {
            color:pink;
        }
    </style>
</head>
<body>
    <!-- 选择器分类  -->
    <!-- 选择器分为基础选择器和复合选择器两个大类，我们这里先讲解一下基础选择器。 -->
    <!-- 基础选择器是由单个选择器组成的 -->
    <!-- 基础选择器又包括：标签选择器，类选择器，id选择器和通配选择器 -->
    <p>男生</p>
    <p>男生</p>
    <p>男生</p>
    <div>女生</div>
    <div>女生</div>
    <div>女生</div>
</body>
</html>

3.类选择器

<!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>Document</title>
    <style>
        /* 类选择器口诀：样式点定义 结构类（class）调用 一个或多个 开发最常用 */
        .red {
            color:red;
        }
    </style>
</head>
<body>
    <ul>
        <!-- 如果想要差异化选择不同的标签，单独选一个或某几个标签，可以使用类选择器。 -->
        <li class="red">冰雨</li>
        <li class="red">来生缘</li>
        <li>李香兰</li>
        <li>生僻字</li>
        <li>江南style</li>
    </ul>
    <div class="red">红色</div>
</body>
</html>

4.使用类选择器画盒子

<!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>Document</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
        }
        .red{
            /* 背景颜色 */
            background-color: red;
        }
        .green{
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="red">红色</div>
    <div class="green">绿色</div>
    <div class="red">红色</div>
</body>
</html>

5.类选择器特殊使用-多类名

<!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>Document</title>
    <style>
        .red{
            color:red;
        }
        .font35{
            font-size: 135px;
        }
    </style>
</head>
<body>
    <div class="red font35">刘德华</div>
</body>
</html>

6.ID选择器

<!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>Document</title>
    <style>
        /* id选择器的口诀：样式#定义，结构id调用，只能调用一次，别人请勿使用
        1.类选择器（class）好比人的名字，同时一个人名字也可以被多个人使用。 */
        /* 2.id选择器好比人的身份证号码，全中国是唯一的，不得重复。 
        id选择器和类选择器最大的不同在于使用次数上。
        类选择器在修改样式中用的最多，id选择器一般用于页面唯一性的元素上，经常和javaScript搭配使用。 */
        #pink {
            color:pink;
        }
    </style>
</head>
<body>
    <div id="pink">迈克尔-杰克逊</div>
    <div>pink老师</div>
</body>
</html>

7.通配符选择器

<!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>Document</title>
    <style>
        *{
            color:red;
        }
        /* 这里吧html body div span li 等标签都改为了红色 */
    </style>
</head>
<body>
    在css中，通配符选择器使用"*"定义，它表示选取页面中所有元素(标签)
    <div>我的</div>
    <span>我的</span>
    <ul>
        <li>还是我的</li>
    </ul>
    <!-- 基础选择器  作用                       特点          使用情况  用法 -->
    <!-- 标签选择器  可以选出所有相同的标签,比如p 不能差异化选择 较多 p{color:red;}
    类选择器    可以选出1个或多个标签       可以根据需求选择 非常多 .anv{color:red}
    id选择器    一次只能选择一个标签        ID属性只能在每个HTML文档中出现一次 一般和js搭配  #nav{color:red;}
    通配符选择器 选择所有的标签             选择的太多，有部分不需要   特殊情况使用 *{color:red;} -->
</body>
</html>

8.front-family字体属性

<!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>CSS字体属性之字体系列</title>
    <style>
       h2 {
        font-family: '微软雅黑';
        }
        p{
            font-family: 'Microsoft YaHei';
        }
    </style>
</head>
<body>
    <h2>pink的秘密</h2>
    <p>那一抹众人中最漂亮的颜色，</p>
    <p>优雅，淡然，又那么心中清测，</p>
    <p>前端总是伴随着困难和犯错，</p>
    <p>静心，坦然，攻克一个又一个，</p>
    <p>拼死也要克服它，</p>
    <p>这是pink的秘密也是老师最终的嘱托。</p>
</body>
</html>

9.front-size字体大小

<!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>Document</title>
    <style>
        body{
            font-size:16px;
        }
        /* 标题标签比较特殊，需要单独指定文字大小 */
        h2{
            font-size:18px;
        }
    </style>
</head>
<body>
    <p font-size:20px;>
        CSS使用font-size属性定义字体大小
    </p>
    <h2>hello world!</h2>
</body>
</html>

10.font-weight字体粗细

<!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>Document</title>
    <style>
        .bold{
            /* font-weight: bold; */
            /* 这个700 的后面不要跟单位 等价于 bold 都是加粗的效果 */
            /* 实际开发中，我们更提倡使用数字 */
            font-weight:700;
        }
        h2{
            font-weight: 400;
            /* font-weight: normal; */
        }
    </style>
</head>
<body>
    <!-- CSS使用font-weight属性设置字体粗细
    normal 默认值(不加粗的)
    bold 定义粗体（加粗的）
    100-900 400等同于normal,而700等同于bold 注意这个数字后面不跟单位 -->
    <h2>pink的秘密</h2>
    <p>那一抹众人中最漂亮的颜色，</p>
    <p>优雅，淡然，又那么心中清测，</p>
    <p>前端总是伴随着困难和犯错，</p>
    <p>静心，坦然，攻克一个又一个，</p>
    <p class="bold">拼死也要克服它，</p>
    <p>这是pink的秘密也是老师最终的嘱托。</p>
</body>
</html>

11.font-style字体样式

<!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>Document</title>
    <style>
        p {
            font-style:italic;
        }
        em{
            /* 让倾斜的字体不倾斜  */
            font-style:normal;
        }
    </style>
</head>
<body>
    <!-- CSS使用font-style属性设置文本的风格
    normal 默认值，浏览器会显示标准的字体样式 font-style:normal;
    italic 浏览器会显示斜体的字体样式 -->
    <p>同学，上课时候的你</p>
    <em>下课时候的你</em>
</body>
</html>

12.font复合属性写法

<!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>Document</title>
    <style>
    /*
    想要div文字变倾斜 加粗 字号设置为16像素 并且 是微软雅黑
    */
    div{
        font-style:italic;
        font-weight: 700;
        font: size 16px;
        font-family: 'Microsoft yahei';
    }
    </style>
</head>
<body>
    <div>三生三世十里桃花，一心一意百行代码</div>
</body>
</html>

13.字体属性总结

<!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>Document</title>
</head>
<body>
    font-size  字号  我们通常用的单位是px像素，一定要跟上单位
    font-family 字体 实际工作中按照团体约定来写字体
    font-weight 字体粗细 记住加粗是700或者bold 不加粗是normal或者400 记住数字不要跟单位
    font-style 字体样式  记住倾斜是italic 不倾斜是normal 工作中我们常用normal
    font        字体连写 1.字体连写是有顺序的 不能随意换位置 2.其中字号和字体必须同时出现                                       
</body>
</html>

14.文本颜色color

<!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>Document</title>
    <style>
        div{
            color:deeppink;
            color:#266668;
            color:rgb(200, 0, 0);
        }
    </style>
</head>
<body>
    <div>听说喜欢pink色的男生，都喜欢男人</div>
</body>
</html>

15.文本对齐

<!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>Document</title>
    <style>
        h1{
            /* 本质是让h1盒子里面的文字水平居中对齐 */
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>居中对齐的标题</h1>
</body>
</html>

16.文本装饰text-decoration

<!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>Document</title>
    <style>
        div{
            /* 下划线 */
            text-decoration:underline;
        }
        a{
            text-decoration: none;
            color:333;
        }
    </style>
</head>
<body>
    <div>粉红色的回忆 </div>
    <a href="http://www.mi.com">粉红色的回忆</a>
    <!-- none  默认。没有装饰线（常用）
    underline  下划线。链接a自带下划线(常用)
    overline 上划线。（几乎不用）
    line-through 删除线。（不常用） -->
</body>
</html>

17. 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>Document</title>
    <style>
        p{
            text-indent: 32;
            /* 首行缩进2个子的大小 */
            /* em: 一个字的大小 */
            text-indent:2em;

        }
    </style>
</head>
<body>
    <p>打开北京、上海和广州的地铁地图，你会看见三张纵横交错的线路网格，这代表了最成熟的三套城市轨道交通系统。</p>

    <p>打开北京、上海和广州的地铁地图，你会看见三张纵横交错的线路网格，这代表了最成熟的三套城市轨道交通系统。</p>

    <p>打开北京、上海和广州的地铁地图，你会看见三张纵横交错的线路网格，这代表了最成熟的三套城市轨道交通系统。</p>
</body>
</html>

18.行间距line-height

<!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>Document</title>
    <style>
        div{
            line-height:50px;
        } 
    </style>
</head>
<body>
    <!-- line-height属性用于设置行间的距离（行高），可以控制文字行与行之间的间距。 -->
    <!-- 行间距= 上间距+文本高度+下间距 -->
    <div>中国人英睿达新品T700和海盗船新品MP700都采用了群联PS5026-E26主控+美光232层3D TLC闪存，前者的闪存接口速度为更高的2000MT/s，固件也略有不同，最终实现了12.4 GB/s的连续读速和11.8GB/s的写速，可谓惊人。中国人英睿达新品T700和海盗船新品MP700都采用了群联PS5026-E26主控+美光232层3D TLC闪存，前者的闪存接口速度为更高的2000MT/s，固件也略有不同，最终实现了12.4 GB/s的连续读速和11.8GB/</div>
    <p>打开北京、上海和广州的地铁地图，你会看见三张纵横交错的线路网格，这代表了最成熟的三套城市轨道交通系统。</p>
    <p>打开北京、上海和广州的地铁地图，你会看见三张纵横交错的线路网格，这代表了最成熟的三套城市轨道交通系统。</p>
    <p>打开北京、上海和广州的地铁地图，你会看见三张纵横交错的线路网格，这代表了最成熟的三套城市轨道交通系统。</p>
</body>
</html>

19.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>Document</title>
</head>
<body>
    color  文本颜色  我们通常用 十六进制 比如 而且是简写形式 #fff
    text-align  文本对齐  可以设定文字水平的对齐方式
    text-indent  文本缩进 通常我们用于段落首行缩进2个字的距离 text-indent:2em;
    text-decoration 文本缩进 记住 添加下划线 underline 取消下划线 none
    line-height 行高 控制行于行之间的距离
</body>
</html>

20.内部样式表

<!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>内部样式表</title>
    <style>
        div{
            color:pink;
        }
    </style>
</head>
<body>
    <!-- 按照css样式书写的位置（或者引入的方式），css样式表可以分为三大类：
    1.行内样式表（行内式）
    2.内部样式表（嵌入式）
    3.外部样式表（链接式） -->
    <div>所谓内部样式表，就是在html页面内部写样式，但是单独写到标签内部。</div>
    <!-- 内部样式表（内嵌样式表）是写到html页面内部，是将所有的CSS代码抽取出来，单独放到一个<style>标签中。
    <style>标签理论可以放在HTML文档的任何地方，但一般会放在文档的<head>标签中
    通过这种方式，可以方便控制当前整个页面中的元素元素样式设置。
    代码结构清晰，但是并没有实现结构与样式完全分离。
 -->
</body>
</html>

21.行内样式表

<!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>Document</title>
</head>
<body>
    行内样式表（内联样式表）是在元素标签内部的style属性中设定CSS样式。适合于简单修改样式。
    <div style="color:red;font-size:12px;">青春不常在，抓紧谈恋爱</div>
    <p>夏天夏天悄悄过去留下小秘密</p>
    <p>压心底压心底不能告诉你</p>
</body>
</html>

22.外部样式表

<!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>外部样式表</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 5.4外部样式表，实际开发都是外部样式表，适合于样式比较多的情况，核心是：样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用。
    1.新建一个后缀名为.css的样式文件，把所有的CSS代码都放入此文件中。
    2.在HTML页面中，使用<link>标签引入这个文件。
    <link rel="stylesheet" href="css文件路径" -->
    <div>来呀~快活呀，反正有大把时光。</div>
</body>
</html>

23.扩展标签居中

<!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>Document</title>
    <style>
        div{
            width:300px;
            height:300px;
            background-color: aliceblue;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <!-- 标签水平居中方法总结： margin: 0 auto
    1.如果需要让div,p,h（大盒子）水平居中？
      可以通过margin:0 auto；实现
    2.注意点：
    1.如果需要让div,p,h（大盒子）水平居中，直接给 当前元素本身 设置即可
    2.magrin:0 auto一般针对于固定宽度的盒子，如果大盒子没有设置宽度，此时会默认占满父元素的宽度。 -->
    <div></div>
</body>
</html>

24.综合案例1

<!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>Document</title>
    <style>
     div{
        margin:0 auto;
    }
    .center{
        text-align:center;
    }
    h1{
        text-align: center;
    }
    .color1{
        color: #808080;
    }
    .color2{
        color: #87ceed;
        font-weight: 700;
        
    }
    a{
        text-decoration: none;
    }
    .suojin{
        text-indent: 2em;
    }
    </style>
  
</head>
<body>
    <div>
         <h1> 《自然》 评选改变科学的10个计算机代码项目</h1>
        <p class="center">
            <span class="color1">2077年01月28日14：58</span>
            <span class="color2"> 新浪科技</span>
            <a href="#">收藏本文</a> 
        </p>
        <hr>
        <p class="suojin">这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。
            然而现在却非常之蓝，闪闪地䀹2着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。</p>
        <p class="suojin">我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩3地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来， 冬虽然来，而此后接着还是春，蝴蝶乱飞，蜜蜂都唱起春词来了。她于是一笑，虽然颜色冻得红惨惨地，仍然瑟缩着。</p>
        <p class="suojin">枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们，别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春；他也知道落叶的梦，春后还是秋。</p>
         <p class="suojin">
            他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚4着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着
            奇怪而高的天空，使天空闪闪地鬼䀹眼；直刺着天空中圆满的月亮，使月亮窘得发白。
         </p>  
    </div>
</body>
</html>

25.综合案例2

<!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>Document</title>
    <style>
        body{
            background-color: #f5f5f5;
        }
        .goods{
            width:238px;
            height:305px;
            background-color: rgb(255, 255,255);
            /* 标签居中 */
            margin:0 auto;
            /* 内容居中 */
            text-align: center;
        }
        img{
            width: 150px;
        }
        .title{
            font-size: 14px;
            line-height: 25px;
        }
        .info{
            color:#ccc;
            font-size: 12px;
            line-height: 30px;
        }
        .money{
font-size: 12px;
color: #ffa500;
        }
    </style>
</head>
<body>
    <div class="goods">
     <img src="./01.png">
     <div class="title">九号平衡车</div>
     <div class="info">成年人的玩具</div>
     <div class="money">1999元</div>
    </div>
</body>
</html>

26. 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>Document</title>
    <style>
        /* 找到div的儿子p设置颜色红色 */
        /* 父选择器 后代选择器{} */
        div p{
            color:red;
        }
    </style>
</head>
<body>
    <!-- 儿子，孙子，重孙子 -->
    <p>这是一个p标签</p>
    <div>
        <p>这是div的儿子p</p>
    </div>
</body>
</html>

27.选择器-子代

<!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>Document</title>
    <style>
    /* div a{
        color:red;
    } */
    /* 只想选择儿子a */
    div>a{
        color:red;
    }
    </style>
</head>
<body>
    <div>
        父级
        <a href="#">这是div里面的a</a>
        <p>
            <a href="#">这是div里面的p里面的a</a>
        </p>
    </div>
</body>
</html>

28.选择器-并集

<!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>Document</title>
    <style>
        /* p div span h1 文字颜色是红色 */
        /* 选择器1，选择器2{} */
        p,div,span,h1{
            color:red;
        }
    </style>
</head>
<body>
    <p>ppp</p>
    <div>div</div>
    <span>span</span>
    <h1>h1</h1>
    
    <h2>h2</h2>
</body>
</html>

29.选择器-交集

<!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>Document</title>
    <style>
     p.box{
        color:red;
     }
    </style>
</head>
<body>
    <!-- 找到第一个p,带box类的，设置文字颜色是红色 -->
    <p class="box">这是p标签:box</p>
    <p>ppppp</p>
    <div class="box">这是div标签:box</div>
</body>
</html>

30.选择器-伪类hover

<!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>Document</title>
    <style>
        a{
            text-decoration: none;
            
        }
        a:hover{
            color: red;
            background-color: green;
        }
        div:hover{
            color:green;
        }
    </style>
</head>
<body>
    <a href="#">这是一个超链接</a>
    <div>
        div
    </div>
</body>
</html>

31.背景色

<!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>Document</title>
    <style>
        div{
            /* background-color: pink; */
            background-color:rgba(255,0,0,0.5);
            width:400px;
            height: 400px;
        }
    </style>
</head>
<body>
    <div>div</div>
</body>
</html>

32.背景图

<!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>Document</title>
    <style>
        div{
            width: 400px;
            height: 400px;
            background-color: #fff;
            background-image: url("01.png");
        }
    </style>
</head>
<body>
    <div>
    </div>
</body>
</html>

33.背景平铺

<!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>Document</title>
    <style>
        div{
            width: 400px;
            height: 400px;
            background-color: rgb(0, 0, 255);
            background-image: url("01.png");
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
    <!-- 背景平铺：background-repeat(brg)
    repeat:（默认值）水平和垂直方向都平铺
    no-repeat:不平铺
    repeat-x:沿着水平方向平铺
    repeat-y:沿着垂直方向平铺 -->
    <div>

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

34.背景位置

<!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>Document</title>
    <style>
        div{
            width: 400px;
            height: 400px;
            background-color: rgb(0, 0, 255);
            background-image: url("01.png");
            background-repeat: no-repeat;
            /* background-position: 0 0; */
            /* background-position: right 0; */
            /* background-position: right bottom; */
            /* background-position: center center; */
            background-position: 50px 100px;
        }
    </style>
</head>
<body>
    <div>

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

35.背景-复合属性

<!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>Document</title>
    <style>
        div {
           width:400px;
           height:400px;
           /* 不分先后顺序，背景色，背景图，背景图平铺，背景图位置 */
           /* 背景图位置如果是英文单词可以颠倒位置，数字不可 */
           background: pink url(./01.png) no-repeat center bottom;
        }
    </style>
</head>
<body>
    <div>

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

36.显示模式-块

<!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>Document</title>
    <style>
     div {
        width:300px;
        height:300px;
        background-color: pink;
     }
    </style>
</head>
<body>
    <div>111</div>
    <div>222</div>
</body>
</html>

37.显示模式-行内

<!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>Document</title>
    <style>
        /* 行内：不换行；设置宽高不生效  尺寸和内容的大小相同*/
      span{
        width:300px;
        height:300px;
        background-color: pink;
      }
    </style>
</head>
<body>
        <span>span</span>
        <span>span</span>
</body>
</html>

38.行内块

<!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>Document</title>
    <style>
    img{
        width:100px;
        height:100px;
    }
    </style>
</head>
<body>
    <img src="./01.png" alt="">
    <img src="./01.png" alt="">
</body>
</html>

39.显示模式-转换

<!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>Document</title>
    <style>
        div {
           width:400px;
           height:400px;
           /* 不分先后顺序，背景色，背景图，背景图平铺，背景图位置 */
           /* 背景图位置如果是英文单词可以颠倒位置，数字不可 */
           background: pink url(./01.png) no-repeat center bottom;
           /* 行内块： */
           /* display: inline-block; */
           /* 行内  宽高不能设置*/
           display: inline;
        }
    </style>
</head>
<body>
    <!-- 元素显示模式转换
    目的：改变元素默认的显示特点，让元素符合布局要求
    语法：属性：                 效果：            使用频率：
              display:block       转换成块级元素   较多
              display:inline-block 转换成行内块元素 较多
              display:inline       转换成行内元素   极少 -->
              <div>11111</div>
              <div>22222</div>
</body>
</html>

40.继承性

<!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>Document</title>
    <style>
        div{
            color:red;
            font-size: 30px;
            height: 300px;
        }
    </style>
</head>
<body>
    <div>
        这是div标签里面的文字
        <span>这是div里面的span</span>
    </div>
</body>
</html>

41.综合案例1

<!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>Document</title>
    <style>
        /* a 显示模式是行内，加宽高默认不生效，转显示模式：行内块 */
        a{
            text-decoration: none;
            width:100px;
            height:50px;
            background-color: red;
            display: inline-block;
            color: #fff;
            text-align: center;
            line-height: 50px;
        }
        a:hover{
            background-color: orange;
        }
    </style>
</head>
<body>
    <!-- 按住alt+shift+鼠标左键单击实现同时处理5列的数据 -->
    <a href="#">导航1</a>
    <a href="#">导航2</a>
    <a href="#">导航3</a>
    <a href="#">导航4</a>
    <a href="#">导航5</a>
</body>
</html>

42.综合案例2

<!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>Document</title>
    <style>
        a{
            text-decoration: none;
            width: 120px;
            height:50px;
            background-color: pink;
            display: inline-block;
            text-align: center;
            line-height: 50px;
            color:#fff;
        }
        .one{
            background-image: url("./01.png");
        }
        .one:hover{
            background-image: url("./02.jpg");
            color: orange;
        }
    </style>
</head>
<body>
    <a href="#" class="one">五彩导航</a>
    <a href="#" class="two">五彩导航</a>
    <a href="#" class="three">五彩导航</a>
    <a href="#" class="four">五彩导航</a>
    <a href="#" class="five">五彩导航</a>
</body>
</html>

43.优先级

<!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>Document</title>
</head>
<body>
   !import> 行内>类名>div>body
</body>
</html>

44.盒子模型-组成

<!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>Document</title>
    <style>
        /* 纸箱子，填充泡沫 */
        div{
            width: 300px;
            height:300px;
            background-color: pink;
            border: 1px  solid black;
            padding:20px;
            margin: 50px;
        }
    </style>
</head>
<body>
    <!-- css中规定每个盒子由：内容区域（content）,内边距区域(padding),边框区域(border),外边框区域(margin)构成，这就是盒子模型。 -->
    <div>
        内容电脑
    </div>
    <div>
        内容电脑
    </div>
</body>
</html>

45.birder的使用方式

<!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>Document</title>
    <style>
         div{
            width:200px;
            height:200px;
            background-color: pink;
            /* border: 1px solid #000; */
            /* solid实现 dashed虚线 */
            border: 5px dashed #000;
         }
    </style>
</head>
<body>
    <div>
        内容
    </div>
</body>
</html>

46.新浪导航-布局

<!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>Document</title>
    <style>
        .box{
            height: 40px;
            color: #fff;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
        }
        .box a{
            /* width: 80px; */
            padding: 0 16px;
            height: 40px;
            background-color: #edeef0;
            display: inline-block;
            text-decoration: none;
            text-align: center;
            line-height: 40px;
            font-size: 12px;
            color: #4c4c4c;
        }
        .box a:hover{
            background-color: #edeef0;
            color:#ff8400;

        }
    </style>
</head>
<body>
    <div class="box">
          <a href="#">新浪导航</a>
          <a href="#">新浪导航新浪导航</a>
          <a href="#">新浪导航</a>
          <a href="#">新浪导航</a>
    </div>
</body>
</html>

47.padding多值

<!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>Document</title>
    <style>
           div{
            width:300px;
            height:300px;
            background-color: pink;
            padding: 50px;
            /* padding: 10px 20px 40px 80px; 分别代表上，右，下，左 */
           }
    </style>
</head>
<body>
    <div>

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

48.盒子模型-内减模式

<!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>Document</title>
    <style>
div{
    height: 100px;
    width: 100px;
    background-color: pink;
    border: 10px solid #000;
    padding: 20px;
    /* 变成css3的盒子模型 好处：加了border和padding 不需要手动减法 */
    box-sizing: border-box;
}
    </style>
</head>
<body>
    <div>
    hez
    </div>
    
</body>
</html>

49.清除默认样式

<!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>Document</title>
    <style>
        *{
            margin: 0px;
            padding:0px;
        }
    </style>
</head>
<body>  
</body>
</html>

50.盒子模型-外边距

<!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>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color:pink;
            margin: 50px;
            margin-left: 100px;
        }
    </style>
</head>
<body>
    <div>
        div
    </div>
</body>
</html>

51.版心居中

<!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>Document</title>
    <style>
     div {
width: 1000px;
height: 300px;
background-color: pink;
margin: 0 auto;
     }
    </style>
</head>
<body>
    <!-- 所谓的版心就是网页的有效内容 -->
    <div>
        111
    </div>
</body>
</html>

52.新闻案例

<!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>Document</title>
    <style>
           *{
              margin:0;
              padding:0;
              box-sizing: border-box;
           }
           .news{
              width:500px;
              height:400px;
              border: 1px solid #ccc;
              margin: 50px auto;
              padding:42px 30px 0;
           }
           .news h2{
            border-bottom: 1px solid #ccc;
            font-size: 30px;
            /* line-height: 1px;
            padding-bottom: 9px; */
           }
           ul{
            list-style: none;
           }
           .news li{
            
             height: 50px;
             border-bottom: 1px dashed #ccc;
             line-height: 50px;
             padding-left: 28px;
           }
           .news a{
            text-decoration: none;
            font-size: 18px;
            color: #666;
           }
    </style>
</head>
<body>
    <div class="news">
        <h2>最新文章/New Articles</h2>
        <ul>
            <li><a href="#">北京招聘网页设计，平面设计，php</a></li>
            <li><a href="#">北京招聘网页设计，平面设计，php</a></li>
            <li><a href="#">北京招聘网页设计，平面设计，php</a></li>
            <li><a href="#">北京招聘网页设计，平面设计，php</a></li>
            <li><a href="#">北京招聘网页设计，平面设计，php</a></li>
        </ul>
    </div>
</body>
</html>

53.外边距-问题

<!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>Document</title>
    <style>
           div{
            width:100px;
            height:100px;
            background-color: pink;
           }
           .one{
             margin-bottom: 60px;
           }
           .two{
            margin-top: 50px;
           }
    </style>
</head>
<body>
    <div class="one">11</div>
    <div class="two">22</div>
</body>
</html>

54.结构伪类-基本用法

<!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>Document</title>
    <style>
        /* 选中第一个 */
        /* li:first-child{
            background-color: green;
        } */
          /* 选中最后一个 */
        /* li:last-child{
            background-color: green;
        } */
        /* 任意一个 */
        li:nth-child(5){
            background-color: green;
        }
    </style>
</head>
<body>
    <ul>
        <li>"1li"</li>
        <li>"2li"</li>
        <li>"3li"</li>
        <li>"4li"</li>
        <li>"5li"</li>
        <li>"6li"</li>
        <li>"7li"</li>
        <li>"8li"</li>
    </ul>
</body>
</html>

55.结构伪类-公式

<!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>Document</title>
    <style>
        li:nth-child(2n){
            background-color: green;
        }
    </style>
</head>
<body>
    <ul>
        <li>"1li"</li>
        <li>"2li"</li>
        <li>"3li"</li>
        <li>"4li"</li>
        <li>"5li"</li>
        <li>"6li"</li>
        <li>"7li"</li>
        <li>"8li"</li>
    </ul>
</body>
</html>

56.伪元素

<!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>Document</title>
    <style>
           .father{
               width: 300px;
               height: 300px;
               background-color: pink;
           }
           .father::before{
            /* 内容 */
            content: '老鼠';
           }
           .father::after{
            /* 内容 */
            content: '大米';
           }
    </style>
</head>
<body>
    <!-- 伪元素        作用
    ::before     在父元素内容的最前面添加一个伪元素
    ::after      在父元素内容的最后添加一个伪元素
    注意点：
    1.必须设置content属性才能生效
    2.伪元素默认是行内元素 -->
    <div class="father">爱</div>
</body>
</html>

57.浮动-特点

<!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>Document</title>
    <style>
        /* 浮动的标签 顶对齐 */
        .one{
            width: 100px;
            height: 100px;
            background-color: pink;
            float:left;
            margin-top: 50px;
        }
        .two{
            width: 200px;
            height: 200px;
            background: skyblue;
            float:left;
            /* 因为有浮动，不能生效-盒子无法水平居中 */
            margin:0 auto;
        }
        .three{
            width: 300px;
            height: 300px;
            background: orange;
        }
    </style>
</head>
<body>
    <div class="one">one</div>
    <div class="two">two</div>
    <div class="three">three</div>
</body>
</html>

58.综合案例-导航

<!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>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
           .nav{ 
            margin: 50px auto;
            width: 640px;
            height: 50px;
            background-color: pink; 
           }
           ul{
            list-style: none;
           }
           .nav li{
            float: left;
           }
           .nav li a{
            display: inline-block;
            width: 80px;
            height: 50px;
            background-color: green;
           }
           .nav1 li a:hover{
            color: blue;
           }
    </style>
</head>
<body>
    <div class="nav">
            <!-- css书写样式:
            1.浮动 / display
            2.盒子模型: margin border padding 宽度高度背景色
            3.文字样式 -->
       <ul>
        <li><a href="">新闻</a></li>
        <li><a href="">新闻</a></li>
        <li><a href="">新闻</a></li>
        <li><a href="">新闻</a></li>
        <li><a href="">新闻</a></li>
        <li><a href="">新闻</a></li>
        <li><a href="">新闻</a></li>
        <li><a href="">新闻</a></li>
       </ul>
    </div>
</body>
</html>
煎饼果子小鸢
关注
  • 33
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
HTML+Javascript+CSS测试题
06-08
HTML+Javascript+CSS测试题
HTML+CSS+JS网页设计
热门推荐
m0_73738929的博客
04-15 4万+
HTML页面主要由：登录、注册跳转页面，轮播图，家乡简介，热门景点，特色美食等组成。通过Div+CSS、鼠标滑过特效、获取当前时间，跳转页面、基本所需的知识点全覆盖。提示：以下是本篇文章正文内容，下面案例可供参考。
CSS网页案例-黑马
瞉韩
03-14 337
SEO三大标签 Favicon图标 版心 快捷导航 案例 base common index 代码
前端html+css（基础+案例）
weixin_43366437的博客
07-25 1100
html基础入门
HTML+CSS项目案例
qq_52108058的博客
11-30 3327
案例演示：（table、tr、td、th的练习）案例演示：（文本样式图片标签练习）案例演示：（文本样式练习）案例演示：（盒子模型练习）案例演示：（盒子模型练习）案例演示：（盒子模型练习）
HTML+CSS+JS 简单应用小案例
Emperor10的博客
02-22 2922
猜数字 <!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&gt
黑马基础学习html+css课程笔记和案例
06-29
包含html和css最基础的学习内容 前端最基础的内容
《html+css+javascript 网页制作案例教程》源代码
04-02
html网页制作 《html+css+javascript 网页制作案例教程》源代码
HTML+CSS+JavaScript+jQuery+Bootstrap等前端框架实现的前端案例.zip
06-04
HTML+CSS+JavaScript+jQuery+Bootstrap等前端框架实现的前端案例.zip
HTML+CSS知识笔记、分析案例
05-14
CSS看这一篇就够啦，CSS基础大全，可用于快速回顾知识，面试首选； CSS入门容易，精通难。因为CSS的属性很多，一个一个去学去记根本不可能，我们要善于借助网络工具。关于HTML和CSS的学习资源，网上的在线教程、速查...
前端基础入门三大核心之HTML篇：无序列表的深度探索
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-19 861
在HTML中，无序列表是一种用于展示一系列条目，且这些条目的顺序无关紧要的列表结构。它通过（unordered list）标签来定义，而每个具体的条目则由（list item）标签包裹。为了美化列表，可以使用CSS来定制样式。例如，改变列表项的符号：/* 可以是disc, circle, square等 */ } < ul > < li > 项目一 < li > 项目二 < li > 项目三 ul。
html 根字号 以及 设置根元素font-size:calc(100vw/18.75)、元素rem实现自适应
hx_1199的博客
05-17 460
rem 是相对文档根元素(html)字体大小的尺寸单位，当元素的尺寸或文字字号等使用 rem 单位时，会随着根元素的 font-size变化而变化。以750px 设计稿为例 100vw=750px 750/18.75=40 即 1rem=40px;以1920px 设计稿为例 100vw=1920px 1920 / 48 =40 即 1rem=40px;在不同分辨率的设备下动态设置根元素的字体大小就可以实现页面自适应。
自动化测试报告样式HTMLTestRunner、BeautifulReport、HTMLReport、Allure你喜欢哪个？
qq_48811377的博客
05-17 736
有很多种自动化测试报告样式，接下来主要看下这些常用样式的效果是怎样的每个样式各有特点，选择自己喜欢的使用就好了自动化测试时你用的最多的是哪个呢？
HTML 常用空元素标签
DaPiCaoMin的博客
05-17 751
空元素标签，也称为自闭合标签，在 HTML 中没有内容，它们通常用于表示一些简单的结构或功能。
超链接的魅力：HTML中的 `＜a＞` 标签全方位探索！
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-19 1059
超链接是互联网的脉络，它不仅仅是一个技术点，更是信息流动的桥梁。今天，我们不仅学习了基础，也探索了高级技巧和最佳实践。但旅程远未结束，超链接的世界还有更多等你去发现。现在轮到你了！在你的项目中实践这些技巧，或者在评论区分享你遇到的有趣超链接应用。让我们携手，让互联网的每一个角落都充满活力与连接！你曾用超链接实现过哪些有趣的交互？或者在超链接使用过程中遇到过哪些坑？分享你的故事，让我们共同成长！🌟欢迎来到我的博客，很高兴能够在这里和您见面！
前端基础入门三大核心之HTML篇 —— 同源策略的深度解析与安全实践
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-21 607
同源策略（Same-origin policy）是一种约定，由Netscape公司于1995年引入，旨在防止不同源的网页之间相互干扰和恶意操作。简而言之，该策略规定了浏览器允许脚本访问的资源范围，仅限于与当前网页同源的资源。所谓“同源”，指的是协议、域名和端口号完全相同。同源策略作为Web安全的基石，其重要性不言而喻。然而，在日益复杂的Web应用环境中，灵活而安全地处理跨域通信成为了前端开发者必备的技能。
Html中，想利用JS引入Jquery文件；$.getScript()无效
最新发布
小洪帽i的博客
05-23 206
Html中，想利用JS引入Jquery文件；$.getScript()无效
HTML静态网页成品作业(HTML+CSS)——动漫大耳朵图图网页(4个页面)
weixin_42283461的博客
05-13 1221
HTML静态网页成品作业(HTML+CSS)——动漫大耳朵图图网页(4个页面)
html+css页面设计案例
11-12
以下是两个HTML+CSS页面设计案例： 1. 学生考试期末作业的水平 这个案例是给学生定制的，符合学生考试期末作业的水平。它采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力，顶部导航及底部区域背景色为100%宽度。有的页面还包含了一些JS效果，例如轮播图等。 2. HTML+CSS课程设计 这个案例是一套完整的HTML+CSS课程设计，包括一个主页以及六个子页面。它的制作精美良好，应付期末的网页课设或者期末大作业肯定是不成问题的。这个案例可以作为学习HTML+CSS的参考，可以从中学习到如何进行页面布局、如何使用CSS样式等。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

煎饼果子小鸢

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值