千锋web前端教学知识点记录及个人理解4

VIP文章 Verfall975

已于 2022-11-19 09:04:50 修改

阅读量286

点赞数

文章标签： html

于 2022-11-18 23:50:37 首次发布

本文链接：https://blog.csdn.net/qq_72453861/article/details/127840728

版权

WEB前端知识点记录（84-109集）

第八十四集-relative相对定位
第八十五集-absolute绝对定位
第八十六集-fixed和sticky及zlndex
第八十七集-定位实现下拉菜单
- 课堂作业
第八十八集-定位实现居中和装饰点
- 课堂作业1
- 课堂作业2
第八十九集-css添加省略号
- 课堂作业
第九十集-css精灵及好处
- 课堂作业
第九十一集-css圆角设置
- 课堂作业
PC端企业类型整页制作(第92-99集)
PC端游戏类型整页制作(第99-109集)

第八十四集-relative相对定位

position特性：css属性用于指定一个元素在文档中的定位方式。top、bottom、right、left属性则决定了元素的最终位置
position取值：static(默认)、relative、absolute、fixed、sticky
relative相对定位：如果没有定位偏移值，对元素本身没有任何影响，不使元素脱离文档流，不影响其他元素布局，top、bottom、right、left是相对于当前元素自身进行偏移的

第八十五集-absolute绝对定位

absolute绝对定位：使文件完全脱离文档流，使内联元素支持宽高(使内联具备块特性)，使块元素默认宽根据内容决定(使块具备内联的特性)，如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移（绝对、相对、固定）

第八十六集-fixed和sticky及zlndex

fixed固定定位：使文件完全脱离文档流，使内联元素支持宽高(使内联具备块特性)，使块元素默认宽根据内容决定(使块具备内联的特性)，相对于整个浏览器窗口进行定位，不受浏览器滚动条的影响
sticky黏性定位：在指定的位置，进行黏性操作
z-index定位层级：默认层级为0，嵌套时候的层级问题

第八十七集-定位实现下拉菜单

课堂作业

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
     margin: 0;padding: 0;}
        ul{
     list-style: none;}
        #menu{
     width: 100px;height: 30px;margin: 20px auto;border: 1px black solid;position: relative;}
        #menu ul{
     width: 100px;border: 1px black solid;position: absolute;left:-1px;top:30px;background: white;display:none;}
        p{
     text-align: center;}
        #menu:hover ul{
     display: block;}
        #menu ul li:hover{
     background: gray;}
    </style>
</head>
<body>
    <div id="menu">卖家中心
    <ul>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
        <li>列表项4</li>
    </ul>
    </div>
    <p>测试段落</p>
</body>
</html>

第八十八集-定位实现居中和装饰点

课堂作业1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box1{
     width: 300px;height: 300px;border: 1px black solid;position: relative;}
        #box2{
     width: 100px;height: 100px;background: red; position: absolute;left: 50%;top: 50%;margin: -50px 0 0 -50px;}
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2"></div>
    </div>
</body>
</html>

课堂作业2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #ul li{
     position: relative;}
        #ul li:before{
     content:"" ;display:block;width: 3px;height: 3px;background: yellow;position: absolute;left: 8px;top:50%;margin-top: -2px;}
    </style>
</head>
<body>
    <ul>
        <li></li>
    </ul>
</body>
</html>

第八十九集-css添加省略号

width：有一个固定的宽
white-space：nowrap(不让内容折行)
over-flow:hidden(隐藏溢出的内容)
text-overflow:ellipsis(添加省略号)

课堂作业

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #content{
     width: 200px;border: 1px black solid;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
    </style>
</head>
<body>
    <div id="content">测试文字测试文字测试文字测试文字测试文字</div>
</body>
</html>

第九十集-css精灵及好处

css script特性：css精灵是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去加载
好处：可以减少图片的质量，图片的加载速度加快，减少图片的请求的次数，加快网页的打开

课堂作业

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box1{
     width: 20px;height:21px;background: url(./) no-repeat left -596px;}
        #box2{
     width: 300px;height:50px;border:1px black solid;line-height: 50px;padding-left: 20px;}
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
</body>
</html>

第九十一集-css圆角设置

border-radius：给标签添加圆角

课堂作业

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box{
     width:200px;height: 200px;background: red;border-radius: 20px;}
    </style>
</head>
<body>
    <div id="box"></div>
</body>
</html>

PC端企业类型整页制作(第92-99集)

通栏：自适应浏览器的宽度
版心:固定一个宽度，让容器居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="./css/common.css">
    <style>
        #banner{
     position: relative;}
        #banner .banner_list{
     width: 100%;height: 469px;position: relative;}
        #banner .banner_list li{
     width: 100%;height: 100%;background: center 0 no-repeat;position: absolute;left: 0;top: 0;opacity: 0;opacity: 0;z-index:1;}
        #banner .banner_list li.active{
     opacity: 1;z-index:10;}
        #banner .banner_list a{
     display:block;width:100%;height:100%;}
        #banner .banner_btn{
     width:100%;position: absolute;bottom: 19px;left: 200px;z-index:20;font-size: 0;text-align: center;}
        #banner .banner_btn li{
     display: inline-block;width: 12px;height: 12px;border: 2px solid white;border-radius: 50%;box-sizing: border-box;margin: 0 6px;cursor: pointer;}
        #banner .banner_btn li.active{
     background: white;}
        #service{
     overflow: hidden;min-height: 407px;}
        #service .service_list{
     text-align: center;margin-top: 34px;}
        #service .service_list li{
     float: left;width: 250px;margin: 0 10px;}