一个初学者的辛酸路程-前端cs

Posted 2020-08-31

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了一个初学者的辛酸路程-前端cs相关的知识，希望对你有一定的参考价值。

一、主要内容

继续CSS

二、CSS

第一个： postion

网页有一类就是返回顶部，一直在右下角，还有打开一个网页顶部有个菜单，滚动滑轮，顶部永远在上面。

position：

fiexd ==>固定在页面的某个位置，他可以结合上下左右来控制他的位置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div onclick="GoTop();" style="width: 50px;height: 50px;color: white;
    position: fixed;
    bottom: 20px;
    right:20px;
    " >返回顶部</div>
    <div style="height: 5000px;" >dfsdfsd</div>
    <script>
        function GoTop(){
            document.body.scrollTop = 0;
        }
    </script>
</body>
</html>

效果如下：

实现顶部固定在上面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            height: 48px;
           
            color: #dddddd;
            position: fixed;
            top:0;
            right:0;
            left:0;
        }
        .pg-body{
           
            height:5000px;
            margin-top:50px;
        }
    </style>
</head>
<body>
    <div class="pg-header" >头部</div>
    <div class="pg-body" >内容</div>
</body>
</html>

position: relative+ absolution

放在父类标签的某个位置。

<body>
    <div style="position: relative;width: 500px;height: 200px;border: 1px solid red; margin: 0 auto;">
        <div style="position: absolute;left: 0;bottom: 0; width: 50px;height: 50px;"></div>
    </div>
    <div style="position: relative;width: 500px;height: 200px;border: 1px solid red; margin: 0 auto;">
        <div style="position: absolute;right: 0;bottom: 0; width: 50px;height: 50px;"></div>
    </div>
    <div style="position: relative;width: 500px;height: 200px;border: 1px solid red; margin: 0 auto;">
        <div style="position: absolute;right: 0;top: 0; width: 50px;height: 50px;"></div>
    </div>
</body>

样式格式：

记住2点即可：

1、fixed 定位位置

2、relative + absolute 相对父类定义位置。

写一个三层

透明度：opcity:0.5

层级顺序，越大就在上面

<body>
    <div style="z-index: 10; position: fixed;top: 50%;left: 50%;margin-left:-250px;margin-top:-200px;height: 400px;width: 500px;"></div>
    <div style="z-index: 9; position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.5;
    "></div>
    <div style="height: 5000px;
        asdfsdf
    </div>
</body>

如果我想隐藏2个页面，可以加入一下面语句

style="display: none;

我定义一个边框，超过我就隐藏或者出现滚动条 overflow : hidden或者auto

隐藏

<div style="height: 200px;width: 300px;overflow: hidden;">
    <img src="images/01.jpg" alt="">
</div>

滚动条

<div style="height: 200px;width: 300px;overflow: auto;">
    <img src="images/01.jpg" alt="">
</div>

放在鼠标上出现hover

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            position: fixed;
            right:0;
            left:0;
            top:0;
            height: 48px;
           
            line-height:48px;
        }
        .pg-boder{
            margin-top: 50px;
 
        }
        .w{
            width:980px;
            margin: 0 auto;
        }
        .pg-header .menu{
            display: inline-block;
            padding: 0 10px;
        }
        .pg-header .menu:hover{
           
        }
    </style>
</head>
<body>
    <div class="pg-header">
        <div class="w">
            <a class="logo">LOGO</a>
            <a class="menu">全部</a>
            <a class="menu">42区</a>
            <a class="menu">段子</a>
            <a class="menu">1024</a>
        </div>
    </div>
    <div class="pg-boder">
        <div class="w">a</div>
    </div>
</body>
</html>

View Code

显示效果：

写一个登录

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="height: 35px;width: 400px;position: relative;">
        <input type="text" style="height: 35px;width: 370px;padding-right: 30px;">
        <span style="position: absolute;right: 6px;top:10px;background-image: url(1.jpg);height: 16px;width: 16px;display: inline-block;"></span>
    </div>
</body>
</html>

View Code

写了一个首页top

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .pg-header{
           
            height:38px;
            line-height:38px;
        }
        .main{
            float: right;
            color: black;
            font-size:15px;
            display: inline-block;
            padding:0 20px;
        }
        .main span:hover{
           
        }
        .p1{
            float: left;
            border: 1px solid #dddddd;
            margin: 10px;
            padding:10px;
            position: relative;
        }
        .hot{
            position: absolute;
            right:0;
            top:0;
        }
        .pc{
            border:1px solid red;
            margin: 60px;
        }
 
        .menu{
            display: inline-block;
            padding: 0 10px;
        }
    </style>
</head>
<body style="margin: 0  auto">
    <div class="pg-header">
        <div style="width: 980px;margin: 0 auto;">
            <div style="float: left; font-size: 15px;">*收藏本站</div>
            <div class="main">
                <span class="menu">登录</span>
                <span class="menu">注册</span>
                <span class="menu">我的订单</span>
                <span class="menu">我的收藏</span>
                <span class="menu">VIP会员俱乐部</span>
                <span class="menu">客户服务</span>
                <span class="menu">关注</span>
                <span class="menu">手机版</span>
            </div>
        </div>
 
    </div>
</body>
</html>

View Code

以上是关于一个初学者的辛酸路程-前端cs的主要内容，如果未能解决你的问题，请参考以下文章

一个初学者的辛酸路程-线程与进程-10

一个初学者的辛酸路程-装饰器-5

一个初学者的辛酸路程-基于Django写BBS项目

一个初学者的辛酸路程-初识Python-1

一个初学者的辛酸路程-socket编程-8

译文：18个实用的JavaScript代码片段，助你快速处理日常编程任务