第六周、第七周-Web前端

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>

代码显示:

在这里插入图片描述

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值