第六周、第七周-Web前端

最新推荐文章于 2024-07-18 15:09:01 发布
最新推荐文章于 2024-07-18 15:09:01 发布
阅读量372 收藏 1
点赞数 1
分类专栏： # Java-双体 文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44458489/article/details/124093104
版权

day0330

firstHtml.html

<!doctype html>
<html>
<!-- 标签的嵌套，<head> <body> （与其父子关系），而<head> <body> （兄弟关系） -->

<head>
    <meta charset="utf-8">
    <title>双体软件</title>
</head>

<body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落</p>
</body>

</html>

代码显示：

在这里插入图片描述

tag.html

<!-- 1.新建一个文件，类型，后缀改为html
     2.<!doctype html> 
     3.<html></html>
     4.<head></head> -->
<!DOCTYPE html>
<html>

<head>
    <title>第一节html</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <!-- 没有明确的开始和结束，是要是恰当的位置即可 -->
</head>

<body>
    <h1>这是一个一级标题！</h1>
</body>

</html>

代码显示：

在这里插入图片描述

h-tag.html

<!-- 1.h1-h6 标题标签
     2.<p></p> 段落标签
     3.<br> 分割线
     4.<div>、<span> 都是成对存在的 <div>单独占一行 <span> 只占用文字内容的长度-->
<!DOCTYPE html>
<html>

<head>
    <title>h1-h6</title>
    <meta charset="utf-8">
</head>

<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

    <p>这是第一段：当你的才华还撑不起你的野心的时候，你就应该静下心来学习；<br />当你的能力还驾驭不了你的目标时，就应该沉下心来，历练；梦想，不是浮躁，而是沉淀和积累，只有拼出来的美丽，没有等出来的辉煌，机会永远是留给最渴望的那个人，学会与内心深处的你对话，问问自己，想要怎样的人生，静心学习，耐心沉淀，送给自己，共勉。
    </p>

    <hr>

    <p>这是第二段</p>

    <div>这是第三段</div>
    <div>这是第四段</div>

    <span>这是第一块span</span><span>这是第二块span</span>
</body>

</html>

代码显示：

在这里插入图片描述

font.html

<!DOCTYPE html>
<html>

<head>
    <title>文字格式</title>
    <meta charset="utf8">
</head>

<body>
    <span>普通文字</span>
    <b>文字加粗</b>
    <br>
    <i>斜体</i>
    <hr>
    <u>下划线</u>
    <hr>
    <del>删除线</del>
</body>

</html>

代码显示：

在这里插入图片描述

media.html

<!-- 路径 src：绝对路径和相对路径
    1.绝对路径：本机情况下，从盘符开始到文件所在位置；
    网络图片情况下，复制图片的完整地址，从http开始，直到结束
    2.相对路径：以当前文件所在位置为基准，到资源所在的位置叫相对路径
    与当前文件同级，可以直接写文件名，也可以用./表示当前目录，后面跟上文件名
    ../ 表示上级目录、/ 表示根目录
    注意：/代表一层，大部分使用相对路径，查找更快
    3.图片 <img src="路径" alt="图片丢失时显示的文字" width="宽度" height="高度">
    宽度或高度指定一个时，图片等比例缩放；全部指定时，按宽、高值显示
    注意：300px和300同
    4.音频 <audio src="路径" controls></audio> controls显示播放控制器 autoplay自动播放 loop循环播放
    5.视频 <video src="路径" controls></video> controls显示播放控制器 autoplay自动播放 loop循环播放
 -->
<!DOCTYPE html>
<html>

<head>
    <title>多媒体</title>
    <meta charset="utf-8">
</head>

<body>
    <img src="./img/cat.jpg" alt="这是一张小猫图片" width="300px"> <!-- 当前目录下的img文件夹下的图片 -->
    <br>
    <img src="img/cat.jpg" alt="这是一张小猫图片" width="300px"> <!-- 当前目录下的img文件夹下的图片 -->
    <br>
    <img src="./cat.jpg" alt="这是一张小猫图片" width="300px"> <!-- 当前目录 -->
    <br>
    <img src="cat.jpg" alt="这是一张小猫图片" width="300px"> <!-- 当前目录 -->
    <br>
    <img src="../cat.jpg" alt="这是一张小猫图片" width="300px"> <!-- 上一级目录下 -->
    <br>
    <a href="h-tag.html">同级目录的页面</a> <!-- 超链接 -->
    <a href="https://www.baidu.com/">百度一下，你就知道</a>
    <a href="#div">到底部另一个a标签地址</a>
    <br>
    <img src="C:/Users/Katrina/OneDrive/桌面/html/day0330/img/cat.jpg" alt="这是一张小猫图片">
    <br>
    <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13483532113%2F1000.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651200451&t=9b94503ec77ca27eb20b425604410f0a"
        alt="这是一个小猫头像"> <!-- 右键复制图片地址 -->
    <br>
    <audio src="video/L2_1823111002_宋玉荃.mp3" controls autoplay loop>歌曲凉凉</audio>
    <br>
    <video src="video/小狗狗.mp4" controls autoplay loop></video>
    <br>
    <video src="https://vd3.bdstatic.com/mda-jfjudi0a09pvgcn4/hd/mda-jfjudi0a09pvgcn4.mp4" controls autoplay
        loop></video>
    <br>
    <a name="div">这是最底部</a>
</body>

</html>

代码显示：

在这里插入图片描述

素材：

在这里插入图片描述

day0331

h-tag.html

<!-- Alt+Shift+↓ 复制一行 -->
<!DOCTYPE html>
<html>

<head>
    <title>h1-h6</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>

<body>
    <span>这是第一块<span></span></span>
    <span>这是第二块span</span>
    <div>
        ssdd sww
        www
        s
    </div>
    <pre>
        ssdd sww
        www
        s
    </pre>
    <!-- order list -->
    <ol>
        <li>标题</li>
        <li>段落</li>
        <li>div与span</li>
    </ol>
    <!-- un order list -->
    <ul>
        <li>标题</li>
        <li>段落</li>
        <li>媒体</li>
    </ul>
    <span>这是一段话 中文</span>
    <!-- 空格 -->
    &nbsp;&nbsp;&nbsp;&nbsp;
    <span>第二句</span>
</body>

</html>

代码显示：

在这里插入图片描述

tableDemo.html

<!-- Alt+Shift+↓ 复制一行 -->
<!DOCTYPE html>
<html>

<head>
    <title>表格示例</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>

<body>
    <table border="1" cellpadding="20" cellspacing="0">
        <tr>
            <!-- 水平居中，文字加粗 -->
            <th>姓名</th>
            <th>年龄</th>
            <th>证书</th>
            <th>评价</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>18</td>
            <td>四级</td>
            <td rowspan="3">优秀</td> <!-- row行数 -->
        </tr>
        <tr>
            <td>李四</td>
            <td>19</td>
            <td>计算机二级</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>19</td>
            <td>普通话二级</td>
        </tr>
        <tr>
            <td>总结</td>
            <td colspan="3">你们都很棒！</td> <!-- col列数 -->
        </tr>
    </table>
</body>

</html>

代码显示：

在这里插入图片描述

formDemo.html

<!DOCTYPE html>
<html>

<head>
    <title>表单案例</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <!-- 内容类型 -->
</head>

<!-- <body style="width:max-content;margin: auto;"> -->

<body>
    <!-- action指向提交地点 -->
    <center>
        <form action="">
            <h2>欢迎注册</h2>
            用户名：<input type=" text">
            <br>
            <br>
            <!-- values默认值（实际存在的值） -->
            手机号：<input type="text" value="123456">
            <br>
            <br>
            <!-- placeholder输入之前有提示文字（提示文本） -->
            密码：&nbsp;&nbsp;&nbsp;<input type="password" placeholder="输入8位以上数字+字母">
            <!-- 密码：&nbsp;&nbsp;&nbsp;<input type="password" disabled> -->
            <br>
            <br>
            <!-- 往服务端发送后清零 action -->
            <input type="submit">
            <!-- 重置 -->
            <input type="reset">
            <input type="button" value="取消">
            <br>
            <br>
            <input type="file">
            <br>
            <br>
            <input type="file" multiple>
            <br>
            <br>
            <button type="submit">提交</button>
            <button type="reset">重置</button>
            <button type="button">自定义</button>
            <br>
            <br>
            <!-- 加name可以任意选择，而不是两个都能同时选上 -->
            <!-- checked默认选中 -->
            性别：<input type="radio" name="sex" checked> 男
            <input type="radio" name="sex"> 女
            <br>
            <br>
            <!-- c30 c31 c32 c33 = 8种 (全选，全不选，两种的三个，一种的三个) -->
            爱好：<input type="checkbox" checked> 篮球
            <input type="checkbox"> 羽毛球
            <input type="checkbox" checked> 乒乓球
            <br>
            <br>
            <!-- 绑定一块才能实现单选 -->
            <!-- 标签与文本绑定，radio类型标签和文本绑定 -->
            婚姻情况：<input type="radio" name="isMarried" id="yes"><label for="yes">已婚</label>
            <input type="radio" name="isMarried" id="no"><label for="no">离婚</label>
            <!-- for属性需要删掉，不能为空 -->
            <label><input type="radio" name="isMarried">未婚</label>
            <label><input type="radio" name="isMarried">丧偶</label>
            <br>
            <br>
            <!-- select嵌套option -->
            请选择城市：<select name="" id="">
                <option value="">北京</option>
                <option value="" selected>上海</option>
                <option value="">广州</option>
            </select>
            <br>
            <br>
            <!-- 文本域：cols行 rows列 -->
            <textarea name="" id="" cols="10" rows="1"></textarea>
        </form>
    </center>
</body>

</html>

代码显示：

在这里插入图片描述

framset.html

<!DOCTYPE html>
<html>

<head>
    <title>frameset框架集</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>
<!-- 分成好几块显示，按列分也可按行分 -->
<frameset cols="30%,30%,40%">
    <!-- src路径，地址 -->
    <frame src="h-tag.html"></frame>
    <frame src="tableDemo.html"></frame>
    <frame src="formDemo.html"></frame>
</frameset>

<body>
</body>

</html>

代码显示：

在这里插入图片描述

day0404

css1.html

<!DOCTYPE html>
<html>

<head>
    <title>CSS案例</title>
    <meta http-equiv="Content" content="text/html" charset="utf-8">
    <!-- 第二种：<head>里面添加<style>标签，填写对应的标签样式及值 -->
    <style>
        /* 选择器：选择了某一个或某一类标签，方便我们进行样式设置
        1.标签选择器：用的是 样式名{样式名：值;} */
        /* div {
            color: gray;
            font-size: 10px;
        } */
    </style>
    <!-- 第三种：引入css方式，使用外部css文件 -->
    <link rel="stylesheet" href="css/demo1.css"> <!-- link:css -->
</head>

<!-- 第一种CSS引入方式：在标签里面添加style="样式名：值" -->

<body>
    <p style="color: green;font-size: 30px;">这是一个段落</p>
    <div>这是第一个div</div>
    <div>这是第二个div</div>
</body>

</html>

代码显示：

在这里插入图片描述

css2.html

<!DOCTYPE html>
<html>

<head>
    <title>选择器</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <style>
        /* div {
            color: red;
        } */
        /*第二种选择器：类选择器：定义一类标签".类名"{样式名：值}，设置它的样式。
          使用时，用class="类名"引用这类样式*/
        /*head定义，body引用*/
        .red {
            color: red;
        }

        /*第三种选择器：id选择器 #id名{样式名：值;...}，使用时，id="值"*/
        #forth {
            background-color: seagreen;
        }

        /*第四种选择器：通配符选择器，对所有标签生效（了解即可），范围越大越不好控制，很少使用*/
        * {
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div>这是第一个div</div>
    <!-- 重复代码，不建议使用 -->
    <!-- <div style="color: red;">这是第二个div</div> -->
    <!-- <div style="color: red;">这是第三个div</div> -->
    <div class="red">第二个div</div>
    <div class="red">第三个div</div>
    <div class="red" id="forth">第四个div</div> <!-- id唯一性 -->
    <div class="red">第五个div</div>
</body>

</html>

代码显示：

在这里插入图片描述

css3.html

<!DOCTYPE html>
<html>

<head>
    <title>选择器</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <style>
        /* div {
            color: red;
        } */
        /*第二种选择器：类选择器：定义一类标签".类名"{样式名：值}，设置它的样式。
          使用时，用class="类名"引用这类样式*/
        /*head定义，body引用*/
        .red {
            color: red;
        }

        /*第三种选择器：id选择器 #id名{样式名：值;...}，使用时，id="值"*/
        #forth {
            background-color: seagreen;
        }

        /*第四种选择器：通配符选择器，对所有标签生效（了解即可），范围越大越不好控制，很少使用*/
        * {
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div>这是第一个div</div>
    <!-- 重复代码，不建议使用 -->
    <!-- <div style="color: red;">这是第二个div</div> -->
    <!-- <div style="color: red;">这是第三个div</div> -->
    <div class="red">第二个div</div>
    <div class="red">第三个div</div>
    <div class="red" id="forth">第四个div</div> <!-- id唯一性 -->
    <div class="red">第五个div</div>
</body>

</html>

代码显示：

在这里插入图片描述

css4.html

<!DOCTYPE html>
<html>

<head>
    <title>Css测试</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <!-- 对照一个样式图：
        1.先找通用样式，能用标签名，用标签名选择器设置样式
        2.不能用标签名的（同样名称的标签有不同样式），能用类选择器的用类选择器
        3.最后考虑id选择器，或者直接对标签添加style样式 -->
    <style>
        p {
            font-weight: bold;
        }

        .green {
            color: green;
        }

        #yellow {
            background-color: yellow;
        }

        /* .div{} 类*/
        /* div{} 标签 */
        .div {
            /*高850px 背景图url 是否重复显示铺满当前标签范围 显示位置*/
            height: 850px;
            background-image: url("img/cat.jpg");
            background-repeat: no-repeat;
            background-color: gray;
            background-position: center;
            background-attachment: fixed;
        }
    </style>
</head>

<body>
    <p>第一段</p>
    <p class="green">第二段</p>
    <p class="green">第三段</p>
    <p class="green" id="yellow">第四段</p>
    <p class="green">第五段</p>
    <div class="div">第一个div</div>
</body>

</html>

代码显示：

在这里插入图片描述

selectPlus.html

<!DOCTYPE html>
<html>

<head>
    <title>选择器进阶</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <style>
        /* p {
            color: red;
        } */
        .red {
            color: red;
        }

        /* 重点:1.后代选择器：后代：子代、孙代、重代...都是后代
          写法：父代 后代{样式名：值...}，父代和后代间用空格隔开 */
        div p {
            color: green;
        }

        /* 重点:2.子代选择器，只指向子代
          写法：父代>后代{样式名：值...}，父代和后代间用>隔开 */
        div>span {
            background-color: pink;
        }
    </style>
</head>

<body>
    <p class="red">第一段p</p>
    <p>第二段无属性</p>
    <div>一段div
        <p>
            div里面的p<br>
            <span>div里面的p的span</span>
        </p>
        <span>div里面的span</span>
    </div>
</body>

</html>

代码显示：

在这里插入图片描述

css文件夹

demo1.css

/* 类型层叠样式表文档 */
div {
    background-color: yellow;
    color: red;
}

demo2.css

.green {
    color: seagreen;
}

#forth {
    background-color: skyblue;
}

* {
    font-weight: bold;
}

素材

在这里插入图片描述

day0406

selectPlus.html

<!DOCTYPE html>
<html>

<head>
    <title>选择器进阶</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <style>
        /* 3.并集选择器，写法：选择器1，选择器2...
           作用：可以同时设置具有相同样式的标签内容 */
        /* p,
        span {
            color: blue;
        } */

        /* 4.交集选择器,写法:选择器123..,选择器之间没有任何东西,
           一般只用在标签名选择器和类选择器之间,求交集的样式 */
        p.red {
            color: red;
        }
    </style>
</head>

<body>
    <!-- <p>第二段无属性</p>
    <span>第一段span</span> -->

    <p class="red">这是第一段p</p>
    <p>第二段无属性</p>
    <span class="red">第一段span</span>

</body>

</html>

代码显示：

在这里插入图片描述

test.html

<!DOCTYPE html>
<html>

<head>
    <!-- F12打开调试工具 -->
    <title>CSS案例</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <!-- 1.背景色与背景图同时使用,背景图会覆盖背景色,覆盖不了的,会露出背景色
         2.设置:左中右 left center right
                上中下 top center bottom 
                坐标系 (0,0)
           注:right:默认右边居中,lift:默认左边居中,center:默认整体居中,center bottom:水平方向居中,垂直方向垫底,0 0:左上角
         3.宽高 width height
         4.文本,缩进 text-indent:多少像素px或者几倍文字大小 em(例如:2em,固定两个文字大小) 
         5.文字间距 letter-spacing:多少像素px或者几倍文字大小 em(例如:2em,固定两个文字大小) 
         6.文本,行高 line-height:倍数 数字/em(几倍),多少像素
         7.文本对齐 text-align(内容对齐):方向 左中右 对<img>这样的单标签设置居中,要在它的父级标签添加居中样式
         8.文字 加粗 font-weight:bold 
           斜体 font-style:italic
           大小 font-size:20px 文字默认16px
           字体 font-family:宋体/隶书
           复合属性(有的顺序是有要求,有的没有) 比如:font:bold italic 20px 宋体(本属性顺序有先后,可以根据需要选择其中的样式) -->
    <style>
        .div1 {
            width: 1100px;
            height: 1100px;
            color: red;
            font-weight: bold;
            background-color: yellow;
            background-image: url("img/cat.jpg");
            background-repeat: no-repeat;
            background-position: right bottom;
            background-attachment: fixed;
        }

        div {
            /* font-size: 20px;
            font-weight: bold;
            font-style: italic;
            font-family: 隶书; */
            font: bold italic 20px 宋体;
            text-indent: 2em;
            letter-spacing: 5px;
            line-height: 2;
            /* text-align: right; */
        }

        /* h1 {
            text-align: center;
        } */

        /*继承性*/
        body {
            text-align: center;
        }

        /*不生效*/
        /* img {
            text-align: center;
        } */
    </style>
</head>

<body>
    <h1>标题1</h1>
    <div class="div1">一段内容</div>
    <div>
        当你的才华还撑不起你的野心的时候，你就应该静下心来学习；当你的能力还驾驭不了你的目标时，就应该沉下心来，历练；梦想，不是浮躁，而是沉淀和积累，只有拼出来的美丽，没有等出来的辉煌，机会永远是留给最渴望的那个人，学会与内心深处的你对话，问问自己，想要怎样的人生，静心学习，耐心沉淀，送给自己，共勉。
    </div>
    <a href="www.baidu.com">百度</a>
    <img src="img/cat.jpg">
</body>

</html>

代码显示：

在这里插入图片描述
在这里插入图片描述

divbox.html

<!DOCTYPE html>
<html>

<head>
    <title>div盒子</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <!-- div独占一行,可以设置宽高 块级元素(标签/标记) 就像一个"盒子",盒子
         有宽度 对应于border
         有存放的东西 对应内容content
         有东西和盒子之间的边距 对应内边距padding
         有盒子与其他盒子的边距 对应外边距margin 
         2.border复合属性 有对应的三个单独属性:
         border-width宽度
         border-color颜色
         border-style样式:dashed虚线,bold实线,dotted点线
         3. padding 填写一个值,默认对4个边距生效
         填写4个值,按上 右 下 左的顺序设置
         填写3个值,按上 右左 下的顺序设置
         填写2个值,按上下 右左的顺序设置
         从上开始,顺时针顺序依次设置, 没有设置的看对面的值
         4.padding-left/right/top/bottom margin-left/right/top/bottom -->
    <style>
        div {
            /*大小宽度,样式实线虚线点线等,颜色继承color需要重新编辑*/
            /*边框*/
            /* border: 10px solid green; */
            border-color: green;
            border-style: dotted;
            border-width: 5px;
            /*内容和边框之间的距离*/
            /* padding: 20px; */
            /*顺时针:上 右 下 左*/
            /* padding: 5px 10px 15px 20px; */
            padding: 5px 10px 15px;
            /* padding-left: 10px; */
            /*盒子与外部边距*/
            margin: 5px;
            /* margin-top: 10px; */
            width: 200px;
            height: 200px;
            background-color: grey;
            /* 内容颜色 */
            color: white;
        }
    </style>
</head>

<body>
    <div>第一段div</div>
    <div>第二段div</div>
</body>

</html>

代码显示：

在这里插入图片描述

素材

在这里插入图片描述

day0407

displayDemo.html

<!DOCTYPE html>
<html>

<head>
    <title>显示模式案例</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <style>
        /* 块级元素：1.独占一行 2.可以设置宽高 */
        .div1 {
            width: 100px;
            height: 100px;
            background-color: green;
        }

        p {
            width: 100px;
            height: 30px;
            background-color: blue;
        }

        /* 行内元素：1.一行可以写多个 2.设置宽高无效果 */
        span {
            width: 80px;
            height: 20px;
            background-color: orange;
        }

        /* 行内块元素：1.一行可以写多个 2.可以设置宽高 */
        input {
            width: 40px;
            height: 30px;
            background-color: green;
        }
    </style>
</head>

<body>
    <div class="div1">123456
        <!-- 宽度继承，高度不继承 -->
        <div>儿子div</div>
    </div>
    <div class="div1">456789</div>
    <p>一段</p>
    <p>二段</p>
    <span>span1</span>
    <span>span2</span>
    <br>
    <input type="text" value="123">
    <input type="text" value="456">
</body>

</html>

代码显示：

在这里插入图片描述

floatDemo.html

<!DOCTYPE html>
<html>

<head>
    <title>浮动案例</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <style>
        /* display:inline-block 转为行内块显示，可以实现一行显示多个块级元素
           浮动：可以实现一行内显示多个块级元素，当浮动方向相同时，按元素出现的顺序进行排列
           浮动：使元素脱标（脱离标准流），不再占用位置
           一行内显示多个块级元素，它们都要设置浮动，否则会覆盖 */
        /* .div1 { */
        /* w100+h100+bgc */
        /* width: 100px;
            height: 100px; */
        /* display: inline-block; 默认加空格 */
        /* 第一个元素浮动过去，第二个元素再浮动 */
        /* float: left; */
        /* float: right; */
        /* } */

        #d1 {
            width: 150px;
            height: 100px;
            background-color: green;
            /* float: center; 无效 */
            float: left;
        }

        #d2 {
            width: 100px;
            height: 150px;
            background-color: red;
            float: left;
        }

        #d3 {
            width: 100px;
            height: 150px;
            background-color: orange;
            float: left;
        }
    </style>
</head>

<body>
    <div class="div1" id="d1">三国杀</div>
    <div class="div1" id="d2">扑克牌</div>
    <div class="div1" id="d3">狼人杀</div>
</body>

</html>

代码显示：

在这里插入图片描述

relativePosition.html

<!DOCTYPE html>
<html>

<head>
    <title>位置案例</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <!-- 相对定位：1.样式设置 position：relative
                  2.设置偏移量 left：20px；相对自身原来的位置向右偏 20px
                              right：20px；相对自身原来的位置向左偏 20px
                  3.当同时设置偏移 left/right/top/bottom时，生效的是left和top
     -->
    <style>
        .div1 {
            width: 100px;
            height: 100px;
        }

        #d1 {
            position: relative;
            left: 30px;
            right: 30px;
            top: 30px;
            bottom: 30px;
            /* margin-left与以上效果一样 */
            /* margin-left: 30px; */
            /* 水平居中 */
            /* margin: 0 auto; */
            background-color: red;
            /* float: left; */
        }

        #d2 {
            background-color: green;
            /* float: left; */
        }

        #father {
            /* margin-top: 60px; */
            width: 300px;
            /* margin-left: 50px; */
            background-color: rgb(245, 135, 10);
        }
    </style>
</head>

<body>
    <div id="father">
        <div class="div1" id="d1">三国杀</div>
    </div>
    <div class="div1" id="d2">扑克牌</div>
</body>

</html>

代码显示：

在这里插入图片描述

absolutePosition.html

<!DOCTYPE html>
<html>

<head>
    <title>位置案例</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <!-- 绝对定位：写法 position：absolute; 先找已经定位的父级，
        如果有，以这个父级为参照物进行绝对定位，有父级，但没有父级定位，以浏览器窗口为参照物进行定位
        特点：1.脱标，不占位（脱离标准显示模式，不在占用原位）
             2.改变了标签显示模式的特点，变成了行内块
        
        固定定位：写法 position：fixed; 可以设置偏移
        死心眼，固定在浏览器页面的某个位置

        元素布局的层级关系：子绝父相,position高于float
    -->
    <style>
        .div1 {
            width: 100px;
            height: 100px;
        }

        #d1 {
            position: relative;
            /* left: 30px;
            top: 30px; */
            background-color: red;
        }

        #father {
            /* margin-top: 60px; */
            /* relative从页面默认的间距开始，f12显示黄色 */
            position: relative;
            /* absolute从页面最左边开始，f12颜色消失 */
            /* position: absolute; */
            left: 50px;
            /*三维变二维，儿子注释，也没有高度*/
            width: 300px;
            height: 200px;
            background-color: rgb(245, 135, 10);
        }

        #d2 {
            position: relative;
            left: 20px;
            float: left;
            width: 100px;
            height: 50px;
            background-color: grey;
        }

        #d3 {
            position: relative;
            left: 200px;
            float: left;
            width: 100px;
            height: 50px;
            background-color: green;
        }

        #d4 {
            /* 相对于自身原来的位置 */
            position: relative;
            left: 200px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div id="father">
        <div class="div1" id="d1">三国杀</div>
        <div id="d4">三国杀</div>
    </div>

    <div id="d2">d2</div>
    <div id="d3">d3</div>
</body>

</html>

代码显示：

在这里插入图片描述

Mo*◑
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
小白学习Web前端（第一周）
m0_73269789的博客
10-21 1590
HTML：CSS：一个网站是由n多个网页组成的，每个网页都是一个.html文件。首先它来自微软，说明它是一个来自大厂的产品，品质有保障。它是一个开源的，意思就是它是免费的。轻量：质量很小，开启速度非常快总之就一句话：谁用谁知道！下载VS Code后多进行操作，了解编辑器的操作方法，对它大致有个了解。VS Code下载链接:link三大核心技术结构样式行为< dl >:定义列表（相当于容器）< dt >定义专业术语或名词（标题）
Web前端学习总结第一周
woshileiyaohua的博客
07-31 1122
大家好！我叫雷耀华，四川达州人。以前从未接触过前端开发这个领域，后经朋友介绍，突然发现对web前端产生了兴趣，我决定学习它。 到今天为止已学习了一周时间，对前端这个领域有了初步了了解，兴趣也渐渐高涨了起来。听说CSDN是中国软件开发者的聚集地，我打算将我的学习过程写在这里，与各位前辈分享交流，如有错误，请您指正。 下面我们开始吧！ **一、HTML和CSS概述** 1.W3C万维网联盟 全称World Wide Web Consortium 它是发布Web技术标准及...
Web前端学习第七周
weixin_74289912的博客
12-17 76
JavaScript
Web前端从入门到放弃 第七周学习笔记
lm_216416的博客
12-09 225
第七周学习笔记 JavaScript
【三】HTML：特殊字符与一二综合案例
weixin_52687483的博客
10-26 1171
仅供自我学习做笔记
web前端---第二次作业
ATRI_555的博客
07-09 129
【代码】web前端---第二次作业。
Web前端学习基础知识（第二周）
wll555的博客
10-27 760
长度单位：px→像素、%→百分比（ 外容器→600px，当前容器 50%→300px）驼峰写法：searchButton（小驼峰）、SearchButton（大驼峰）对齐方式：left 、right center 、justify(两端点对齐）多个样式的时候，样式的优先级由CSS决定，而不是class属性中的顺序。模式：正常（normal）、斜体（italic、oblique）取值：数字（px）、比例值（scale 是跟文字大小成比例的）color：字体颜色（red，#000000（0，0，0））
Web第三周-Web前端利用Js实现简单计算器功能
gydarkfire的博客
09-09 1919
Web前端计算器的初步实现。 计算器 var init=""; var lastop=""; var num1=0; var num2=0; var rs=0; function display(state){ init+=state; show(init); } function show(str){
vue+web-see实现前端监控
qq_46367756的博客
04-25 977
1、由于我们使用的web-see是使用的rrweb来进行实现所谓的“录屏”功能，实际上他并不是纯粹的录屏，而是使用的事件记录各种dom操作，然后通过rrweb来进行播放达到所谓录屏效果。demo上报只是调用一次上报接口，而项目中接入sdk后上报会分两步进行上报，第一步把breadcrumb(用户行为)上报，第二步才会吧events(rrweb记录的事件)进行上报。2、上报逻辑：上报逻辑使用的是优先使用浏览器的requestIeCallback，利用浏览器空闲时间进行上报。生产报错，后端并未接收到接口报错。
web前端 --- 常见页面标签和语义化标签
weixin_62443409的博客
06-14 2425
（1）简介： 超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。 HTML 是用来描述网页的一种语言。HTML 标记标签通常被称为 HTML 标签 (HTML tag)。"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思.但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:HTML 元素: （代码插入）
web前端开发技术储久良第三版答案
12-09
《Web前端开发技术储久良第三版答案》涵盖了前端开发领域的关键知识点，主要针对储久良教授编著的教材第三版中的习题和实验提供了详尽的解答。这本书旨在帮助学习者深入理解Web前端开发的核心概念和技术，通过解决...
web前端-基于FPGA的DSR系统前端算法实现.pdf
06-21
在论文的第一部分，作者对DSR前端算法进行了深入研究和分析，比较了不同的硬件设计方案，并详细分析提取语音特征参数的典型架构。作者还对前端算法的Matlab建模和大量语音样本的统计学分析，确定特征参数的定点表示...
Web前端设计与开发技术-课件-第10章-CSS基础完整.pptx
11-17
"Web前端设计与开发技术-课件-第10章-CSS基础完整.pptx" 本资源为Web前端设计与开发技术课程的第10章，主要介绍CSS基础知识。该资源涵盖了CSS概述、CSS的组成、在HTML中使用CSS的方法、CSS取值与单位、CSS字体、CSS...
web前端-模板-各行各业二十个模板
07-07
本资源“web前端-模板-各行各业二十个模板”提供了面向不同领域的20个预设计的网页模板，旨在帮助开发者快速搭建符合特定业务需求的网站。 1. **前端模板的定义与作用**：前端模板是一种预先设计好的HTML、CSS和...
Web前端开发职业技能等级证书考试-中级模拟试卷.docx
06-25
《Web前端开发职业技能等级证书考试-中级模拟试题解析》 Web前端开发是现代互联网应用的重要组成部分，涉及到HTML、CSS、JavaScript等技术的综合运用。中级Web前端开发职业技能等级证书考试旨在检验开发者对于这些...
html 关闭信息窗口
cuisidong1997的博客
07-14 338
如果你想要通过点击favicon来关闭一个窗口，你需要添加一个监听器来监听favicon的点击事件，但是由于favicon通常不支持JavaScript事件监听，你可能需要使用一些特殊的技巧，例如监听鼠标移动到favicon上的事件，并通过这种方式触发窗口关闭。如果你是指的是一个favicon（网页标题前的小图标），并且你想要通过点击这个图标来关闭一个信息窗口，那么你需要使用JavaScript来监听favicon的点击事件，并在事件处理函数中执行关闭窗口的操作。html 关闭信息窗口 ico。
高频面试题-HTML
CSDN20221005的博客
07-15 928
离线存储是基于 .appcache ⽂件的缓存机制(不是存储技术)实现的，通过这个⽂件上的解析清单离线存储资源，这些资源就会像 cookie ⼀样被存储了下 来。块级元素有： div p 列表标签(ul ol li dl dt dd) 标题标签(h1 h2 h3 h4) 表格标签(table)空元素： <br> <hr> <img> <input> <link> <meta>->新增了语义化标签(header/footer/nav/asid)->新增了表单增强控件(data/time/email/url)
DDei在线设计器-HTML渲染
最新发布
hoslay1的专栏
07-18 211
HtmlViewer插件通过将一个外部DIV附着在图形控件上，从而改变原有图形的显示方式。允许使用者自己定义HTML通过HTML元素。本示例演示了通过Html来扩展渲染图形，从而获得更加丰富的图形展现。通常情况下，我们创建的图形控件，如下图所示：通过HtmlViewer插件，我们可以使用表现力更强的HTML元素来替换显示的图形，或者结合业务需要，将一些业务数据显示在图形上，如下：!
ChatGPT对话：如何把Html文件转换为Markdown文件
uestcai的博客
07-15 1324
【编者按】ChatGPT提供了多种方法。编者常用VS Code，所以想使用VS Code解决问题，但ChatGPT提供了一些错误的方法，失败了。最后发现编写python程序最简单。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值