一個初學者的辛酸路程-前端cs

時間 2019-11-12

標籤一個初學者辛酸路程前端欄目職業生涯简体版

原文原文鏈接

1、主要內容

繼續CSShtml

2、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點便可：

一、fixed 定位位置

二、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>