重生之我从零开始学前后端——Week02

Wu-M1ng

已于 2024-01-30 16:26:35 修改

阅读量461

点赞数 15

文章标签： css3 html5 前端 java

于 2024-01-28 20:48:02 首次发布

本文链接：https://blog.csdn.net/2301_79589631/article/details/135874266

版权

PartI CSS3

一.字体文本基本样式

1.知识点

字体基本样式
<!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>
        p{
            font-size: 26px;/*字号*/
        }
        h1{
            font-weight: 400;/*加粗*/
        }
        em{
            font-style: normal;/*倾斜*/
        }
        div{
            font-family: 宋体;/*字体*/
        }
        /*可等价为 font: 26px 400 normal 宋体*/
    </style>
</head>
<body>
    <p>段落文字</p>
    <h1>一级标题</h1>
    <em>em</em>
    <div>宋体</div>
</body>
</html>

文本基本样式
<!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>
        h1{
            text-align: center;/*居中*/
            text-decoration: line-through;/*删除线*/
        }
        p{
            text-indent: 2em;/*缩进*/
            text-decoration: underline;/*下划线*/
            line-height: 1.5;/*行高*/
        }
        div{
            text-align: center;
            text-decoration: overline;/*上划线*/
            margin: 0 auto;/*标签居中*/
        }
        a{
            text-decoration: none;/*取消装饰线*/
        }
    </style>
</head>
<body>
    <h1>新闻标题</h1>
    <p>2019年,事件视界望远镜团队让世界首次看到了黑洞的样子。不过,研究人员公布的这张发光环形物体的图像并不是传统的图片,而是经过计算获得的。利用位于美国、墨西哥、智利、西班牙和南极地区的射电望远镜所得到的数据,研究人员进行了数学转换,最终合成了这张标志性的图片。研究团队还发布了实现这一壮举所用的编程代码,并撰文记录这一发现,其他研究者也可以在此基础上进一步加以分析。</p>
    <div><img src="C:\Users\AW\Desktop\CSS3\Material library\1.jpg" alt="">divdiv</div>
    <a href="">超链接</a>
</body>
</html>

2.案例

新闻网页案例
<!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>
        div{
            width: 800px;
            height: 600px;
            margin: 0 auto;
        }
        h1{
            text-align: center;
        }
        .center{
            text-align: center;
        }
        .color1{
            color: #808080;
        }
        .color2{
            color: #87ceeb;
            font-weight: 700;
        }
        a{
            text-decoration: none;
        }
        .retract{
            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="#" target="_blank"> 收藏本文</a>
        </p>
        <hr>
        <p class="retract">2019年，事件视界望远镜团队让世界首次看到了黑洞的样子。不过，研究人员公布的这张发光环形物体的图像并不是传统的图片，而是经过计算获得的。利用位于美国、墨西哥、智利、西班牙和南极地区的射电望远镜所得到的数据，研究人员进行了数学转换，最终合成了这张标志性的图片。研究团队还发布了实现这一壮举所用的编程代码，并撰文记录这一发现，其他研究者也可以在此基础上进一步加以分析。</p>
        <p class="retract">这种模式正变得越来越普遍。从天文学到动物学，在现代每一项重大科学发现的背后，都有计算机的参与。美国斯坦福大学的计算生物学家迈克尔·莱维特因“为复杂化学系统创造了多尺度模型”与另两位研究者分享了2013年诺贝尔化学奖，他指出，今天的笔记本电脑内存和时钟速度是他在1967年开始获奖工作时实验室制造的计算机的1万倍。“我们今天确实拥有相当可观的计算能力，”他说，“问题在于，我们仍然需要思考。”</p>
        <p class="retract">如果没有能够解决研究问题的软件，以及知道如何编写并使用软件的研究人员，一台计算机无论再强大，也是毫无用处的。如今的科学研究从根本上已经与计算机软件联系在一起，后者已经渗透到研究工作的各个方面。近日，《自然》（Nature）杂志将目光投向了幕后，着眼于过去几十年来改变科学研究的关键计算机代码，并列出了其中10个关键的计算机项目。</p>
        <p class="retract">最初的现代计算机并不容易操作。当时的编程实际上是手工将电线连接成一排排电路来实现的。后来出现了机器语言和汇编语言，允许用户用代码为计算机编程，但这两种语言都需要对计算机的架构有深入的了解，使得许多科学家难以掌握。20世纪50年代，随着符号语言的发展，特别是由约翰·巴克斯及其团队在加州圣何塞的IBM开发的“公式翻译”语言Fortran，这种情况发生了变化。利用Fortran，用户可以用人类可读的指令来编程，例如x = 3 + 5。然后由编译器将这些指令转换成快速、高效的机器代码。</p>
    </div>
</body>
</html>

产品卡片案例
<!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>
        body{
            background-color: #f5f5f5;
        }
        .goods{
            width: 234px;
            height: 300px;
            background-color: #fff;
            margin: 0 auto;
            text-align: center;
        }
        img{
            width: 160px;
        }
        .title{
            font-size: 14px;
            line-height: 25px;
        }
        .info{
            font-size: 12px;
            line-height: 30px;
            color: #cccccc;
        }
        .price{
            font-size: 14px;
            color: #ffa500;
        }
    </style>
</head>
<body>
    <div class="goods">
        <img src="C:\Users\AW\Desktop\CSS3\Material library\car.jpg" alt="">
        <div class="title">九号平衡车</div>
        <div class="info">成年人的玩具</div>
        <div class="price">1999元</div>
    </div>
</body>
</html>

二.基本知识

1.知识点

①选择器进阶

子代后代选择器
<!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>
        /* 父代选择器 */
        /* 父代 后代{css} */
        div p {
            color: red;
        }
        /* 子代选择器 */
        /* 父代>后代{css} */
        div>a{
            color: green;
        }
    </style>
</head>
<body>
    <div><p>div是p的父级</p></div>
    <div>父级<a href="#">div是a的父级</a></div>
</body>
</html>

并集选择器
<!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>
        /* 并集选择器 */
        /* 选择器1,选择器2{css} */
        p, 
        div, 
        span, 
        h1{
            color: red;
        }
    </style>
</head>
<body>
    <p>p</p>
    <div>div</div>
    <span>span</span>
    <h1>h1</h1>
    <h2>h2</h2>
</body>
</html>

交集选择器
<!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>
        /* 交集选择器 */
        /* 选择器1选择器2{css} */
        p.box{
            color: red;
        }
    </style>
</head>
<body>
    <p class="box">p-box</p>
    <p>p</p>
    <div class="box">div-box</div>
</body>
</html>

伪类选择器
<!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>
        /* hover伪类选择器 */
        /* 选择器:hover{css} */
        a:hover{
            color: red;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <a href="#" target="_blank">超链接</a>
</body>
</html>

emmet语法
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 类选择器 标签.类(默认div) -->
    <p class="box"></p>
    <!-- id选择器 标签#id(默认div) -->
    <div id="box"></div>
    <!-- 同级标签 标签1+标签2 -->
    <div></div>
    <p></p>
    <!-- 父子级标签 父级>子集 -->
    <div>
        <p></p>
    </div>
    <!-- 一父多子标签 父级>子级*子级标签数 -->
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <!-- 父子级标签内部文本 父级>子级{内容} -->
    <ul>
        <li>内容</li>
    </ul>
</body>
</html>

②背景相关

背景颜色
<!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>
        div{
            width: 400px;
            height: 400px;
            background-color: rgba(0, 0, 0, 0.5);            
        }
    </style>
</head>
<body>
    <div>div</div>
</body>
</html>

背景图
<!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>
        div{
            width: 400px;
            height: 400px;
            background-color: pink;
            background-image: url(./Material\ library/1.jpg);
        }
    </style>
</head>
<body>
    <div>div</div>
</body>
</html>

背景平铺
<!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>
        /* repeat平铺 no-repeat不平铺 repeat-x横向平铺 repeat-y纵向平铺 */
        div{
            width: 400px;
            height: 400px;
            background-color: pink;
            background-image: url(./Material\ library/1.jpg);
            background-repeat: repeat;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

背景位置
<!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>
        /* left/right 0 */
        /* left/right top/bottom */
        /* center center */
        /* px px 正数右下 负数左上 */
        div{
            width: 400px;
            height: 400px;
            background-color: pink;
            background-image: url(./Material\ library/1.jpg);
            background-repeat: no-repeat;
            background-position: center center;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

③元素显示

块级元素显示
<!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>
        /* 块:独占一行 宽度默认父级100% */
        /* 块级元素一般作为大容器，p标签不要嵌套div p h等元素 */
        /* a标签可以嵌套任何元素，不能嵌套a标签 */
        div{
            width: 300px;
            height: 300px;
            background-color: pink;
            /* 行内
               display: inline; */
            /* 行内块 
               display: inline-block; */
        }
    </style>
</head>
<body>
    <div>111</div>
    <div>222</div>
</body>
</html>

行内元素显示
<!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>
        /* 行内:不换行 设置宽高不生效 尺寸与内容大小相同 */
        span{
            width: 300px;
            height: 300px;
            background-color: pink;
            /* 块
               display: block;*/
            /* 行内块 
               display: inline-block; */
        }
    </style>
</head>
<body>
    <span>span</span>
    <span>span</span>
</body>
</html>

行内块元素显示
<!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>
        /* 行内块:一行显示多个 加宽高生效 */
        img{
            width: 100px;
            height: 100px;
            /* 块
               display: block;*/
            /* 行内
               display: inline; */
        }
    </style>
</head>
<body>
    <img src="./Material library/1.jpg" alt="">
    <img src="./Material library/1.jpg" alt="">
</body>
</html>

④ CSS特性

继承性
<!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>
        /* a标签color会继承失败
           h标签font-size会继承失败 */
        div{
            color: red;
            font-size: 30px;
            height: 300px;
        }
    </style>
</head>
<body>
    <div>
        这是div
        <span>这是div的子级span</span>
    </div>
</body>
</html>

层叠性
<!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>
        /* 不同样式层层叠加共同作用 */
        /* 相同样式层层覆盖最终生效 */
        div{
            color: red;
            color: green;
        }
        .box{
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div class="box">文字</div>
</body>
</html>

2.案例

导航页初级案例
<!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>
        a{
            text-decoration: none;
            width: 100px;
            height: 50px;
            background-color: red;
            display: inline-block;
            color: white;
            text-align: center;
            line-height: 50px;
        }
        a:hover{
            background-color: orange;
        }
    </style>
</head>
<body>
    <a href="#" target="_blank">导航1</a>
    <a href="#" target="_blank">导航2</a>
    <a href="#" target="_blank">导航3</a>
    <a href="#" target="_blank">导航4</a>
    <a href="#" target="_blank">导航5</a>
</body>
</html>

导航页进阶案例
<!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>
        a{
            text-decoration: none;
            width: 120px;
            height: 58px;
            background-color: pink;
            display: inline-block;
            text-align: center;
            line-height: 50px;
            color: white;
        }
        .one{
            background-image: url(./Material\ library/bg1.png);
        }
        .two{
            background-image: url(./Material\ library/bg2.png);
        }
        .three{
            background-image: url(./Material\ library/bg3.png);
        }
        .four{
            background-image: url(./Material\ library/bg4.png);
        }
        .one:hover{
            background-image: url(./Material\ library/bg5.png);
        }
        .two:hover{
            background-image: url(./Material\ library/bg6.png);
        }
        .three:hover{
            background-image: url(./Material\ library/bg7.png);
        }
        .four:hover{
            background-image: url(./Material\ library/bg8.png);
        }
    </style>
</head>
<body>
    <a href="#" class="one">五彩导航</a>
    <a href="#" class="two">五彩导航</a>
    <a href="#" class="three">五彩导航</a>
    <a href="#" class="four">五彩导航</a>
</body>
</html>

三.盒子模型

1.知识点

优先级
<!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>
        /* 继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important */
        #box{
            color: orange;
        }
        .box{
            color: blue;
        }
        div{
            color: green;
        }
        body{
            color: red;
        }
    </style>
</head>
<body>
    <div class="box" id="box" style="color: pink;">优先级测试</div>
</body>
</html>

权重叠加计算
<!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>
        /* (行内, id, 类, 标签) */
        /* 比较对应位数大小,越大优先级越高 */
        /* (0, 1, 0, 1) */
        div #one{
            color: orange;
        }
        /* (0, 0, 2, 0) */
        .father .son{
            color: skyblue;
        }
        /* (0, 0, 1, 1) */
        .father .p{
            color: purple;
        }
        /* (0, 0, 0, 2) */
        div p{
            color: pink;
        }
    </style>
</head>
<body>
    <div class="father">
        <p class="son" id="one">标签</p>
    </div>
</body>
</html>

盒子模型总述
<!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>
        /* 纸箱子,填充泡沫 */
        div{
            width: 300px;
            height: 300px;
            background-color: pink;
            /* 边框线 == 纸箱子 */
            border: 1px solid #000;
            /* 内边距 == 填充泡沫 内容与盒子边缘之间 */
            padding: 20px;
            /* 外边距 盒子外面两个盒子之间 */
            margin: 50px;
        }
    </style>
</head>
<body>
    <div>内容电脑</div>
    <div>内容电脑</div>
</body>
</html>

盒子模型内容
<!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>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div>文字</div>
</body>
</html>

盒子模型边框
<!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>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
            /* solid实线 dashed虚线 dotted点线 */
            /* border-left/right/top/bottom */
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <div>内容</div>
</body>
</html>

盒子模型内边距
<!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>
        div{
            width: 300px;
            height: 300px;
            background-color: pink;
            /* 四值:上 右 下 左 */
            /* 三值:上 左右 下 */
            /* 二值:上下 左右 */
            padding: 10px 20px 40px 80px;
        }
    </style>
</head>
<body>
    <div>文字</div>
</body>
</html>

盒子模型內减模式
<!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>
        div{
            width: 100px;
            height: 100px;
            background-color: pink;
            border: 10px solid #000;
            padding: 20px;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div>文字</div>
</body>
</html>

盒子模型外边距
<!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会合并,最终二者距离为margin最大值,需要避免此类情况,只给一个盒子设置margin即可 */
        div{
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 50px;
        }
    </style>
</head>
<body>
    <!-- 行内元素 内外边距 margin padding -->
    <!-- 无法通过margin或padding改变行内标签垂直位置
         行内标签margin-top/bottom不生效
         行内标签padding-top/bottom不生效 -->
    <div>文字</div>
</body>
</html>

盒子模型清除默认样式
<!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;
        }
    </style>
</head>
<body>
    <p>pppp</p>
    <h1>h1</h1>
    <ul>
        <li>lili</li>
    </ul>
</body>
</html>

盒子模型版心居中
<!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>
        div{
            width: 1000px;
            height: 300px;
            background-color: pink;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <!-- 版心:网页的有效内容 -->
    <!-- 版心居中 -->
    <div>版心</div>
</body>
</html>

2.案例

新浪导航案例
<!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>
        /* 先宽高背景色,放内容,调节内容位置,控制文字细节 */
        .box{
            height: 40px;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
        }
        .box a{
            padding: 0 16px;
            width: 80px;
            height: 40px;            
            display: inline-block;
            text-align: center;
            line-height: 40px;
            font-size: 12px;
            color: #4c4c4c;
            text-decoration: none;
        }
        .box a:hover{
            background-color: #edeef0;
            color: #ff8400;
        }
    </style>
</head>
<body>
    <div class="box">
        <a href="#" target="_blank">新浪导航</a>
        <a href="#" target="_blank">新浪导航</a>
        <a href="#" target="_blank">新浪导航</a>
        <a href="#" target="_blank">新浪导航</a>
    </div>
</body>
</html>

新闻列表案例
<!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;
            /* 所有标签改变属性 */
            box-sizing: border-box;
        }
        .news{
            width: 500px;
            height: 400px;
            border: 1px solid #cccccc;
            margin: 50px auto;
            padding: 42px 30px 0;
        }
        .news h2{
            border-bottom: 1px solid #cccccc;
            font-size: 30px;
            /* 行高一倍就是字号大小 */
            line-height: 1;
            padding-bottom: 9px;
        }
        /* 去掉列表符号 */
        ul{
            list-style: none;
        }
        /* li{} */
        .news li{
            height: 50px;
            border-bottom: 1px dashed #cccccc;
            padding-left: 28px;
            line-height: 50px;
        }
        .news a{
            text-decoration: none;
            color: #666;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <!-- 从外到内 -->
    <div class="news">
        <h2>最新文章/New Articles</h2>
        <ul>
            <li><a href="#" target="_blank">北京招聘网页设计,平面设计,php</a></li>
            <li><a href="#" target="_blank">体验javascript的魅力</a></li>
            <li><a href="#" target="_blank">jquery世界来临</a></li>
            <li><a href="#" target="_blank">网页设计师的梦想</a></li>
            <li><a href="#" target="_blank">jquery中的链式编程是什么</a></li>
        </ul>
    </div>
</body>
</html>

四.浮动

1.知识点

结构伪类选择器
<!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>
        /* 任意一个 li:nth-child(n){} */
        /* 倒数第几个 li:nth-last-child(n){} */
        /* n可以为公式 */
        li:first-child{
            background-color: green;
        }
    </style>
</head>
<body>
    <ul>
        <li>这是第1个li</li>
        <li>这是第2个li</li>
        <li>这是第3个li</li>
        <li>这是第4个li</li>
        <li>这是第5个li</li>
        <li>这是第6个li</li>
        <li>这是第7个li</li>
        <li>这是第8个li</li>
    </ul>
</body>
</html>

伪元素选择器
<!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>
        .father{
            width: 300px;
            height: 300px;
            background-color: pink;
        }
        .father::before{
            /* 内容 */
            /* content必须添加 */
            content: "老鼠";
            width: 100px;
            height: 100px;
            background-color: blue;
            /* 默认行内元素，宽高不生效 */
            display: block;
        }
        .father::after{
            content: "大米";
        }
    </style>
</head>
<body>
    <div class="father">爱</div>
</body>
</html>

浮动简单体验
<!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>
        div{
            display: inline-block;
            width: 100px;
            height: 100px;
        }
        .one{
            background-color: pink;
        }
        .two{
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="one">one</div>
    <div class="two">two</div>
</body>
</html>

浮动作用
<!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>
        img{
            float: left;
        }
        /* 去除标签换行带来的间距可使两段内容都相同方向float */
        /* 浮动标签 顶对齐 */
        /* 浮动元素不能通过 text-align:center和margin:() auto居中 */
        .one{
            width: 100px;
            height: 100px;
            background-color: pink;
            float: left;
        }
        .two{
            width: 200px;
            height: 200px;
            background-color: skyblue;
            float: left;
        }
        .three{
            width: 300px;
            height: 300px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <!-- 1.图文环绕 -->
    <img src="./Material library/1.jpg" alt="">
    文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
    <hr>
    <!-- 2.网页布局 -->
    <div class="one">one</div>
    <div class="two">two</div>
    <div class="three">three</div>
</body>
</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">
    <title>Document</title>
    <style>
        .top {
            margin: 0 auto;
            width: 1000px;
            /* height: 300px; */
            background-color: pink;
        }
        .bottom {
            height: 100px;
            background-color: green;
        }
        .left {
            float: left;
            width: 200px;
            height: 300px;
            background-color: #ccc;
        }
        .right {
            float: right;
            width: 790px;
            height: 300px;
            background-color: skyblue;
        }
        .clearfix {
            /* 清除左右两侧浮动的影响 */
            clear: both;
        }
    </style>
</head>
<body>
    <!-- 父子级标签, 子级浮动, 父级没有高度, 后面的标准流盒子会受影响, 显示到上面的位置 -->
    <div class="top">
        <div class="left"></div>
        <div class="right"></div>
        <div class="clearfix"></div>
    </div>
    <div class="bottom"></div>
</body>
</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">
    <title>Document</title>
    <style>
        .top {
            margin: 0 auto;
            width: 1000px;
            /* height: 300px; */
            background-color: pink;
        }
        .bottom {
            height: 100px;
            background-color: green;
        }
        .left {
            float: left;
            width: 200px;
            height: 300px;
            background-color: #ccc;
        }
        .right {
            float: right;
            width: 790px;
            height: 300px;
            background-color: skyblue;
        }
        /* 单伪元素清除浮动 和 额外标签法原理是一样的 */
        /* .clearfix::after{
               content: "";
               display: block;
               clear: both;
               以下是网页中看不到伪元素的补充代码
               height: 0;
               visibility: hidden;
            } */
        .clearfix::after {
            content: '';
            /* 伪元素添加的标签是行内, 要求块 */
            display: block;
            clear: both;
            /* 为了兼容性 */
            height: 0;
            visibility: hidden;
        }
    </style>
</head>
<body>
    <!-- 父子级标签, 子级浮动, 父级没有高度, 后面的标准流盒子会受影响, 显示到上面的位置 -->
    <div class="top clearfix">
        <div class="left"></div>
        <div class="right"></div>
        <!-- 通过css 添加标签 -->
    </div>
    <div class="bottom"></div>
</body>
</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">
    <title>Document</title>
    <style>
        .top {
            margin: 0 auto;
            width: 1000px;
            /* height: 300px; */
            background-color: pink;
        }
        .bottom {
            height: 100px;
            background-color: green;
        }
        .left {
            float: left;
            width: 200px;
            height: 300px;
            background-color: #ccc;
        }
        .right {
            float: right;
            width: 790px;
            height: 300px;
            background-color: skyblue;
        }
        /* .clearfix::before,
           .clearfix::after {
            content: '';
            display: table;
            } 
            .clearfix::after {
                clear: both;
            }*/
        /*  .clearfix::before 作用: 解决外边距塌陷问题
            外边距塌陷: 父子标签, 都是块级, 子级加margin会影响父级的位置*/
        /* 清除浮动 */
        .clearfix::before,
        .clearfix::after {
            content: '';
            display: table;
        }
        /* 真正清除浮动的标签 */
        .clearfix::after {
            /* content: '';
            display: table; */
            clear: both;
        }
    </style>
</head>
<body>
    <!-- 父子级标签, 子级浮动, 父级没有高度, 后面的标准流盒子会受影响, 显示到上面的位置 -->
    <div class="top clearfix">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>
</body>
</html>
设置overflow法
<!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>
        /* 直接给父元素设置overflow */
        .top {
            margin: 0 auto;
            width: 1000px;
            /* height: 300px; */
            background-color: pink;
            overflow: hidden;
        }
        .bottom {
            height: 100px;
            background-color: green;
        }
        .left {
            float: left;
            width: 200px;
            height: 300px;
            background-color: #ccc;
        }
        .right {
            float: right;
            width: 790px;
            height: 300px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <!-- 父子级标签, 子级浮动, 父级没有高度, 后面的标准流盒子会受影响, 显示到上面的位置 -->
    <div class="top">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>
</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>
        * {
            margin: 0;
            padding: 0;
        }
        .top {
            /* 宽度高度背景色 */
            height: 40px;
            background-color: #333;
        }
        .header {
            width: 1226px;
            height: 100px;
            background-color: #ffc0cb;
            margin: 0 auto;
        }
        .content {
            width: 1226px;
            height: 460px;
            background-color: green;
            margin: 0 auto;
        }
        .left {
            float: left;

            width: 234px;
            height: 460px;
            background-color: #ffa500;         
        }
        .right {
            float: left;
            
            width: 992px;
            height: 460px;
            background-color: #87ceeb;          
        }
        /* CSS书写顺序: 浏览器执行效率更高
            1. 浮动 / display
            2. 盒子模型: margin border padding 宽度高度背景色
            3. 文字样式*/
    </style>
</head>
<body>
    <!-- 通栏的盒子: 宽度和浏览器宽度一样大 -->
    <div class="top"></div>
    <div class="header">头部</div>
    <div class="content">
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>
</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">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            margin: 0 auto;
            width: 1226px;
            height: 614px;
            /* background-color: pink; */
        }
        .left {
            float: left;

            width: 234px;
            height: 614px;
            background-color: #800080;
        }
        .right {
            float: right;

            width: 978px;
            height: 614px;
            /* background-color: green; */
        }
        ul {
            /* 去掉列表的符号 */
            list-style: none;
        }
        .right li {
            float: left;
            margin-right: 14px;
            margin-bottom: 14px;
            width: 234px;
            height: 300px;
            background-color: #87ceeb;
        }
        /* 如果父级的宽度不够, 子级会自动换行 */
        /* 第四个li和第八个li右侧间距清除 */
        .right li:nth-child(4n) {
            margin-right: 0;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="right">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
</body>
</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">
  <title>Document</title>
  <style>
    /* 1、去除标签默认的margin和padding */
    * {
      margin: 0;
      padding: 0;
    }
    /* 2、找到ul，去除小圆点 */
    ul{
      list-style: none;
    }
    /* 3、找到li标签，设置浮动 */
    ul li {
      float: left;
    }
    /* 4、找到a标签，设置宽高 */
    ul li a {
      /* a标签默认是行内元素，不能直接设置宽高 */
      /* 1、转换成行内块元素 */
      /* display: inline-block; */
      /* 2、转换成块级元素 */
      /* display: block; */
      /* 3、设置浮动 */
      float: left;
      width: 80px;
      height: 50px;
      background-color: #ffc0cb;
      text-decoration: none;
      text-align: center;
      line-height: 50px;
      color: #fff;
      font-size: 16px;
    }
    ul li a:hover {
      background-color: #008000;
    }
  </style>
</head>
<body>
  <ul>
    <li><a href="#">新闻1</a></li>
    <li><a href="#">新闻2</a></li>
    <li><a href="#">新闻3</a></li>
    <li><a href="#">新闻4</a></li>
    <li><a href="#">新闻5</a></li>
    <li><a href="#">新闻6</a></li>
    <li><a href="#">新闻7</a></li>
    <li><a href="#">新闻8</a></li>
  </ul>
</body>
</html>

PartII JAVA

一.分支

1.知识点

①if分支

package Order;
import java.util.Scanner;
public class IfDemo1 {
    public static void main(String[] args) {
        /*if(关系表达式){
            语句体:
            }
           else{
            语句体:
            }*/
        Scanner sc = new Scanner(System.in);
        System.out.println("请输入女婿的酒量");
        int wine = sc.nextInt();
        if(wine > 2){
            System.out.println("小伙子，不错哟");
        }
    }
}

package Order;
public class IfDemo2 {
    public static void main(String[] args) {
        int number = 10;
        if(number >= 10){
            System.out.println("number大于等于10");
        boolean flag = false;
        if(flag = true){
            System.out.println("flag的值为true");
        }
        }
    }
}

② switch分支

package Order;
public class SwitchDemo1 {
    public static void main(String[] args) {
        /*switch(表达式){
              case 值1:
                  语句体1;
                  break;
              case 值2:
                  语句体2;
                  break;
              default:
                  语句体n+1;
                  break;*/
        String noodles = "兰州拉面";
        switch(noodles){
            case "兰州拉面":
                System.out.println("吃兰州拉面");
                break;
          /*case "兰州拉面" -> {
                System.out.println("吃兰州拉面");
            }*/
            case "武汉热干面":
                System.out.println("吃武汉热干面");
                break;
            case "北京炸酱面":
                System.out.println("吃北京炸酱面");
                break;
            case "陕西油泼面":
                System.out.println("吃陕西油泼面");
                break;
            default:
                System.out.println("吃方便面");
                break;
        }
    }
}

2.案例

①if案例

package Order;
public class IfText1 {
    public static void main(String[] args) {
        //红绿灯模拟
        boolean isLightGreen = false;
        boolean isLightYellow = false;
        boolean isLightRed = true;
        if (isLightGreen) {
            System.out.println("gogogo!");
        }
        if (isLightYellow) {
            System.out.println("slow!");
        }
        if (isLightRed){
            System.out.println("stop!");
        }
    }
}

package Order;
import java.util.Scanner;
public class IfText2 {
    public static void main(String[] args) {
        //键盘录入，如果大于等于100去网红餐厅，小于一百去沙县小吃
        Scanner sc = new Scanner(System.in);
        System.out.println("请输入身上的钱");
        int money = sc.nextInt();
        if(money >= 100){
            System.out.println("去网红餐厅");
        }
        else{
            System.out.println("去沙县小吃");
        }
    }
}

package Order;
import java.util.Scanner;
public class IfText3 {
    public static void main(String[] args) {
        //电影院票号为0~100，奇数坐左边，偶数坐右边
        Scanner sc = new Scanner(System.in);
        System.out.println("请输入票号");
        int ticket = sc.nextInt();
        if(ticket >= 0 && ticket <= 100) {
            if (ticket % 2 == 1){
                System.out.println("坐左边");
            }
            else{
                System.out.println("坐右边");
            }
        }
        else{
            System.out.println("不在正确票号范围内");
        }
    }
}

package Order;
import java.util.Scanner;
public class IfText4 {
    public static void main(String[] args) {
    /*不同分数不同礼物
      95-100自行车
      90-94游乐场
      80-89变形金刚
      80及以下大嘴巴子*/
        Scanner sc = new Scanner(System.in);
        System.out.println("请输入分数:");
        int score = sc.nextInt();
        if (score >=0 && score <= 100) {
            if (score >= 95 && score <= 100) {
                System.out.println("送自行车一辆");
            }
            else if (score >= 90 && score <= 94) {
                System.out.println("游乐场玩一天");
            }
            else if (score >= 80 && score <= 89) {
                System.out.println("送变形金刚一个");
            }
            else {
                System.out.println("送一个大嘴巴子");
            }
        }
        else{
            System.out.println("录入数据不符合规范");
        }
    }
}

②switch案例

package Order;
import java.util.Scanner;
public class SwitchText {
    public static void main(String[] args) {
        //根据不同日期进行不同运动
        Scanner sc = new Scanner(System.in);
        System.out.println("请录入星期几");
        int week = sc.nextInt();
        switch(week){
            case 1:
                System.out.println("跑步");
                break;
            case 2:
                System.out.println("游泳");
                break;
            case 3:
                System.out.println("慢走");
                break;
            case 4:
                System.out.println("动感单车");
                break;
            case 5:
                System.out.println("拳击");
                break;
            case 6:
                System.out.println("爬山");
                break;
            case 7:
                System.out.println("吃一顿");
                break;
            default:
                System.out.println("没有这个星期");
                break;
        }
    }
}

二.循环初级

1.知识点

①for循环

package Loop;
public class ForDemo {
    public static void main(String[] args) {
        //需求：打印10次HelloWorld
        //i  1 ~ 5
        /*for(初始化语句;条件判断语句;条件控制语句){
            循环体；
          }*/
        for (int i = 1; i <= 10 ; i++){
            System.out.println("HelloWorld");
        }
    }
}

②while循环

package Loop;
public class WhileDemo {
    public static void main(String[] args) {
        //需求：利用while循环打印1~100
        //开始条件：1 结束条件：100
        /*初始化语句;
          while(条件判断语句){
              循环体语句;
              条件控制语句;
          }*/
        int i = 1;
        while(i <= 100){
            System.out.println(i);
            i++;
        }
    }
}

③dowhile循环

package Loop;
public class DoWhileDemo {
    public static void main(String[] args) {
        /*初始化语句;
          do{
            循环体语句;
            条件控制语句;
          }
          while(条件判断语句);*/
    }
}

2.案例

①for案例

package Loop;
public class ForText1 {
    public static void main(String[] args) {
       /* 玩游戏的时候，如果网不好那么会经常断线重连。
        那么断线重连这个业务逻辑就需要重复执行。
        假设现在公司要求，断线重连的业务逻辑最多只写5次。*/
        //因为我们需要重复执行某段代码，所以需要用循环解决
        //循环的次数 5 次
        //开始条件：1 结束条件：5
        for(int i = 1; i <= 5;i++){
            System.out.println("第" + i + "次执行断线重连");
        }
    }
}

package Loop;
import java.util.Scanner;
public class ForText2 {
    public static void main(String[] args) {
       /* 需求：键盘录入两个数字，表示一个范围。
        统计这个范围中既能被3整除，又能被5整除数字有多少个*/
        //1.键盘录入
        Scanner sc = new Scanner(System.in);
        System.out.println("请录入一个数字表示范围的开始");
        int start = sc.nextInt();
        System.out.println("请录入一个数字表示范围的结束");
        int end = sc.nextInt();
        //统计变量
        int count = 0;
        //2.利用循环获取这个范围中的每一个数字
        //开始条件：start 结束条件：end
        for (int i = start; i <= end; i++) {
        //3.对每一个数字进行判断，统计有多少个满足要求的数字
            if (i % 3 == 0 && i % 5 == 0) {
                // System.out.println(i);
                count++;
            }
        }
        System.out.println(count);
    }
}

②while案例

package Loop;
public class WhileText1 {
    public static void main(String[] args) {
        /*需求：世界最高山峰是珠穆朗玛峰(8844.43米=8844430毫米)，假如我有一张足够大的纸，它的厚度是0.1毫米。
        请问，我折叠多少次，可以折成珠穆朗玛峰的高度?*/
        //1.定义一个变量用来记录山峰的高度
        double height = 8844430;
        //2.定义一个变量用来记录纸张的初始厚度
        double paper = 0.1;
        //3.定义一个变量用来统计次数
        int count = 0;
        //4.循环折叠纸张，只要纸张的厚度小于山峰的高度，那么循环就继续
        while(paper < height){
            //折叠纸张
            paper = paper * 2;
            //折叠一次，++一次
            count++;
        }
        //当循环结束之后，count记录的值就是折叠的次数
        System.out.println(count);
    }
}

package Loop;
public class WhileText2 {
    public static void main(String[] args) {
        /*需求：给你一个整数 x,如果 x 是一个回文整数，打印 true,否则，返回 false*/
        //1.定义变量记录整数
        int x = 12345;
        //把x做一个临时存储，用来最后进行判断
        int temp = x;
        //2.定义变量记录最终的结果（反过来的数字）
        int result = 0;
        //3.利用循环从右往左获取x中的数字并拼接到result当中
        //while
        while(x != 0){
            //获取到x最右边的数字
            int ge = x % 10;
            //获取一次数字之后，那么就要把当前最右边的数字给去掉
            x = x / 10;
            //拼接到result当中
            result = result * 10 + ge;
        }
        System.out.println(result == temp);
    }
}