前端学习02

最新推荐文章于 2024-07-26 09:00:00 发布
最新推荐文章于 2024-07-26 09:00:00 发布
阅读量1.3k 收藏 17
点赞数 21
分类专栏： Web 文章标签： 前端 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39484271/article/details/136016270
版权

1.CSS案例

1.1 内容回顾

1.1.1 搭建骨架
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .sub-header{
            height: 100px;
            background-color: #b0b0b0;
        }
        .container{
            width: 1128px;
            margin: 0 auto;
        }
        .sub-header .ht{
            height: 100px;
        }
        .sub-header .logo{
            width: 234px;
            float: left;
        }
        .sub-header .menu-list{
            float: left;
        }

        .sub-header .search{
            float: right;
        }
    </style>
</head>
<body>
<div class="sub-header">
    <div class="container">
        <div class="ht logo">1</div>
        <div class="ht menu-list">2</div>
        <div class="ht search">3</div>
        <div class="clear:both;"></div>
    </div>
</div>

</body>
</html>
1.1.2 Logo区域
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }

        .sub-header {
            height: 100px;
            background-color: #b0b0b0;
        }

        .container {
            width: 1128px;
            margin: 0 auto;
        }

        .sub-header .ht {
            height: 100px;
        }

        .sub-header .logo {
            width: 234px;
            float: left;
            border: 1px solid red;
        }

        .sub-header .logo a {
            margin-top: 22px;
            display: inline-block
        }

        .sub-header .logo a img {
            height: 56px;
            width: 56px;
        }

        .sub-header .menu-list {
            float: left;
        }

        .sub-header .search {
            float: right;
        }
    </style>
</head>
<body>
<div class="sub-header">
    <div class="container">
        <div class="ht logo">
            <!-- a，行内标签；默认设置高度、边距无效。 -> 块级 & 行内+块级 -->
            <a href="https://www.mi.com/">
                <img src="images/logo-mi2.png" alt="">
            </a>

        </div>
        <div class="ht menu-list">2</div>
        <div class="ht search">3</div>
        <div class="clear:both;"></div>
    </div>
</div>

</body>
</html>
1.1.3 菜单部分
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }

        .sub-header {
            height: 100px;
        }

        .container {
            width: 1128px;
            margin: 0 auto;
        }

        .sub-header .ht {
            height: 100px;
        }

        .sub-header .logo {
            width: 234px;
            float: left;

        }

        .sub-header .logo a {
            margin-top: 22px;
            display: inline-block
        }

        .sub-header .logo a img {
            height: 56px;
            width: 56px;
        }

        .sub-header .menu-list {
            float: left;

            line-height: 100px;
        }

        .sub-header .menu-list a{
            display: inline-block;
            padding: 0 10px;
            color: #333;
            font-size: 16px;
            text-decoration: none;
        }

        .sub-header .menu-list a:hover{
            color: #ff6700;
        }

        .sub-header .search {
            float: right;
        }
    </style>
</head>
<body>
<div class="sub-header">
    <div class="container">
        <div class="ht logo">
            <!-- a，行内标签；默认设置高度、边距无效。 -> 块级 & 行内+块级 -->
            <a href="https://www.mi.com/">
                <img src="images/logo-mi2.png" alt="">
            </a>

        </div>
        <div class="ht menu-list">
            <a href="https://www.mi.com/">Xiaomi手机</a>
            <a href="https://www.mi.com/">Redmi红米</a>
            <a href="https://www.mi.com/">电视</a>
            <a href="https://www.mi.com/">笔记本</a>
            <a href="https://www.mi.com/">平板</a>
        </div>
        <div class="ht search"></div>
        <div class="clear:both;"></div>
    </div>
</div>

</body>
</html>

1.2 案例：顶部菜单 + 二级菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }

        .container {
            width: 1226px;
            margin: 0 auto;
        }


        .header {
            background: #333;
        }


        .header .menu {
            float: left;
            color: white;
        }

        .header .account {
            float: right;
            color: white;
        }

        .header a {
            color: #b0b0b0;
            line-height: 40px;
            display: inline-block;
            font-size: 12px;
            margin-right: 10px;

            text-decoration: none;
        }
        .header a:hover{
            color: white;
        }

        .sub-header {
            height: 100px;
        }

        .sub-header .ht {
            height: 100px;
        }

        .sub-header .logo {
            width: 234px;
            float: left;

        }

        .sub-header .logo a {
            margin-top: 22px;
            display: inline-block
        }

        .sub-header .logo a img {
            height: 56px;
            width: 56px;
        }

        .sub-header .menu-list {
            float: left;

            line-height: 100px;
        }

        .sub-header .menu-list a {
            display: inline-block;
            padding: 0 10px;
            color: #333;
            font-size: 16px;
            text-decoration: none;
        }

        .sub-header .menu-list a:hover {
            color: #ff6700;
        }

        .sub-header .search {
            float: right;
        }
    </style>
</head>
<body>

<div class="header">
    <div class="container">
        <div class="menu">
            <a href="https://www.mi.com/">小米商城</a>
            <a href="https://www.mi.com/">MIUI</a>
            <a href="https://www.mi.com/">云服务</a>
            <a href="https://www.mi.com/">有品</a>
            <a href="https://www.mi.com/">开放平台</a>
        </div>
        <div class="account">
            <a href="https://www.mi.com/">登录</a>
            <a href="https://www.mi.com/">注册</a>
            <a href="https://www.mi.com/">消息通知</a>
        </div>
        <div style="clear: both"></div>
    </div>
</div>

<div class="sub-header">
    <div class="container">
        <div class="ht logo">
            <!-- a，行内标签；默认设置高度、边距无效。 -> 块级 & 行内+块级 -->
            <a href="https://www.mi.com/">
                <img src="images/logo-mi2.png" alt="">
            </a>

        </div>
        <div class="ht menu-list">
            <a href="https://www.mi.com/">Xiaomi手机</a>
            <a href="https://www.mi.com/">Redmi红米</a>
            <a href="https://www.mi.com/">电视</a>
            <a href="https://www.mi.com/">笔记本</a>
            <a href="https://www.mi.com/">平板</a>
        </div>
        <div class="ht search"></div>
        <div class="clear:both;"></div>
    </div>
</div>


</body>
</html>
小结

  • a标签是行内标签，行内标签的高度、内外边距，默认无效。

  • 垂直方向居中

    • 本文 + line-height
    • 图片 + 边距

  • a标签默认有下划线。

  • 鼠标放上去之后hover

    .c1:hover{
    ...
}
a:hover{
    
}
1.2.1 搭建骨架
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }

        img {
            width: 100%;
            height: 100%;
        }

        .container {
            width: 1226px;
            margin: 0 auto;
        }


        .header {
            background: #333;
        }


        .header .menu {
            float: left;
            color: white;
        }

        .header .account {
            float: right;
            color: white;
        }

        .header a {
            color: #b0b0b0;
            line-height: 40px;
            display: inline-block;
            font-size: 12px;
            margin-right: 10px;

            text-decoration: none;
        }

        .header a:hover {
            color: white;
        }

        .sub-header {
            height: 100px;
        }

        .sub-header .ht {
            height: 100px;
        }

        .sub-header .logo {
            width: 234px;
            float: left;

        }

        .sub-header .logo a {
            margin-top: 22px;
            display: inline-block
        }

        .sub-header .logo a img {
            height: 56px;
            width: 56px;
        }

        .sub-header .menu-list {
            float: left;

            line-height: 100px;
        }

        .sub-header .menu-list a {
            display: inline-block;
            padding: 0 10px;
            color: #333;
            font-size: 16px;
            text-decoration: none;
        }

        .sub-header .menu-list a:hover {
            color: #ff6700;
        }

        .sub-header .search {
            float: right;
        }

        .slider .sd-img {
            width: 1226px;
            height: 460px;
        }

    </style>
</head>
<body>

<div class="header">
    <div class="container">
        <div class="menu">
            <a href="https://www.mi.com/">小米商城</a>
            <a href="https://www.mi.com/">MIUI</a>
            <a href="https://www.mi.com/">云服务</a>
            <a href="https://www.mi.com/">有品</a>
            <a href="https://www.mi.com/">开放平台</a>
        </div>
        <div class="account">
            <a href="https://www.mi.com/">登录</a>
            <a href="https://www.mi.com/">注册</a>
            <a href="https://www.mi.com/">消息通知</a>
        </div>
        <div style="clear: both"></div>
    </div>
</div>

<div class="sub-header">
    <div class="container">
        <div class="ht logo">
            <!-- a，行内标签；默认设置高度、边距无效。 -> 块级 & 行内+块级 -->
            <a href="https://www.mi.com/">
                <img src="images/logo-mi2.png" alt="">
            </a>

        </div>
        <div class="ht menu-list">
            <a href="https://www.mi.com/">Xiaomi手机</a>
            <a href="https://www.mi.com/">Redmi红米</a>
            <a href="https://www.mi.com/">电视</a>
            <a href="https://www.mi.com/">笔记本</a>
            <a href="https://www.mi.com/">平板</a>
        </div>
        <div class="ht search"></div>
        <div class="clear:both;"></div>
    </div>
</div>

<div class="slider">
    <div class="container">
        <div class="sd-img">
            <img src="images/b1.jpeg" alt="">
        </div>
    </div>
</div>


<div class="news">
    <div class="container">
        <div class="channel"></div>
        <div class="list-item"></div>
        <div class="list-item"></div>
        <div class="list-item"></div>
    </div>
</div>


</body>
</html>
1.2.2 案例的实现
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }

        img {
            width: 100%;
            height: 100%;
        }

        .left {
            float: left;
        }

        .container {
            width: 1226px;
            margin: 0 auto;
        }


        .header {
            background: #333;
        }


        .header .menu {
            float: left;
            color: white;
        }

        .header .account {
            float: right;
            color: white;
        }

        .header a {
            color: #b0b0b0;
            line-height: 40px;
            display: inline-block;
            font-size: 12px;
            margin-right: 10px;

            text-decoration: none;
        }

        .header a:hover {
            color: white;
        }

        .sub-header {
            height: 100px;
        }

        .sub-header .ht {
            height: 100px;
        }

        .sub-header .logo {
            width: 234px;
            float: left;

        }

        .sub-header .logo a {
            margin-top: 22px;
            display: inline-block
        }

        .sub-header .logo a img {
            height: 56px;
            width: 56px;
        }

        .sub-header .menu-list {
            float: left;

            line-height: 100px;
        }

        .sub-header .menu-list a {
            display: inline-block;
            padding: 0 10px;
            color: #333;
            font-size: 16px;
            text-decoration: none;
        }

        .sub-header .menu-list a:hover {
            color: #ff6700;
        }

        .sub-header .search {
            float: right;
        }

        .slider .sd-img {
            width: 1226px;
            height: 460px;
        }

        .news{
            margin-top: 14px;
        }

        .news .channel {
            width: 228px;
            height: 164px;
            background-color: #5f5750;
            padding: 3px;
        }

        .news .channel .item {
            height: 82px;
            width: 76px;
            float: left;
            text-align: center;
        }
        .news .channel .item a{
            display: inline-block;
            font-size: 12px;
            padding-top: 18px;
            color: #fff;
            text-decoration: none;

            opacity: 0.7;
        }
        .news .channel .item a:hover{
            opacity: 1;
        }
        .news .channel .item  img{
            height: 24px;
            width: 24px;
            display: block;
            margin: 0 auto 4px;

        }

        .news .list-item {
            width: 316px;
            height: 170px;
        }

    </style>
</head>
<body>

<div class="header">
    <div class="container">
        <div class="menu">
            <a href="https://www.mi.com/">小米商城</a>
            <a href="https://www.mi.com/">MIUI</a>
            <a href="https://www.mi.com/">云服务</a>
            <a href="https://www.mi.com/">有品</a>
            <a href="https://www.mi.com/">开放平台</a>
        </div>
        <div class="account">
            <a href="https://www.mi.com/">登录</a>
            <a href="https://www.mi.com/">注册</a>
            <a href="https://www.mi.com/">消息通知</a>
        </div>
        <div style="clear: both"></div>
    </div>
</div>

<div class="sub-header">
    <div class="container">
        <div class="ht logo">
            <!-- a，行内标签；默认设置高度、边距无效。 -> 块级 & 行内+块级 -->
            <a href="https://www.mi.com/">
                <img src="images/logo-mi2.png" alt="">
            </a>

        </div>
        <div class="ht menu-list">
            <a href="https://www.mi.com/">Xiaomi手机</a>
            <a href="https://www.mi.com/">Redmi红米</a>
            <a href="https://www.mi.com/">电视</a>
            <a href="https://www.mi.com/">笔记本</a>
            <a href="https://www.mi.com/">平板</a>
        </div>
        <div class="ht search"></div>
        <div class="clear:both;"></div>
    </div>
</div>

<div class="slider">
    <div class="container">
        <div class="sd-img">
            <img src="images/b1.jpeg" alt="">
        </div>
    </div>
</div>


<div class="news">
    <div class="container">
        <div class="channel left">
            <div class="item">
                <a href="https://www.mi.com/">
                    <img src="images/v1.png" alt="">
                    <span>保障服务</span>
                </a>
            </div>
           <div class="item">
                <a href="https://www.mi.com/">
                    <img src="images/v1.png" alt="">
                    <span>保障服务</span>
                </a>
            </div>
            <div class="item">
                <a href="https://www.mi.com/">
                    <img src="images/v1.png" alt="">
                    <span>保障服务</span>
                </a>
            </div>
            <div class="item">
                <a href="https://www.mi.com/">
                    <img src="images/v1.png" alt="">
                    <span>保障服务</span>
                </a>
            </div>
            <div class="item">
                <a href="https://www.mi.com/">
                    <img src="images/v1.png" alt="">
                    <span>保障服务</span>
                </a>
            </div>
            <div class="item">
                <a href="https://www.mi.com/">
                    <img src="images/v1.png" alt="">
                    <span>保障服务</span>
                </a>
            </div>
            <div class="clear:both"></div>
        </div>
        <div class="list-item left" style="margin-left: 14px">
            <img src="images/w1.jpeg"/>
        </div>
        <div class="list-item left" style="margin-left: 15px">
            <img src="images/w2.jpeg"/>
        </div>
        <div class="list-item left" style="margin-left: 15px">
            <img src="images/w3.jpeg"/>
        </div>
        <div class="clear:both"></div>
    </div>
</div>


</body>
</html>
小结

  • 设置透明度

    opacity:0.5;    /* 0 ~ 1 */

2. CSS知识点

2.1 hover（伪类）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
            color: red;
            font-size: 18px;
        }

        .c1:hover {
            color: green;
            font-size: 50px;
        }

        .c2 {
            height: 300px;
            width: 500px;
            border: 3px solid red;
        }

        .c2:hover {
            border: 3px solid green;
        }

        .download {
            display: none;
        }

        .app:hover .download {
            display: block;
        }
        .app:hover .title{
            color: red;
        }
    </style>
</head>
<body>
<div class="c1">联通</div>
<div class="c2">广西</div>

<div class="app">
    <div class="title">下载APP</div>
    <div class="download">
        <img src="images/qcode.png" alt="">
    </div>
</div>

</body>
</html>

2.2 after（伪类）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1:after{
            content: "大帅哥";
        }
    </style>
</head>
<body>
    <div class="c1">吴阳军</div>
    <div class="c1">梁吉宁</div>
</body>
</html>

很重要的应用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .clearfix:after{
            content: "";
            display: block;
            clear: both;
        }
        .item{
            float: left;
        }

    </style>
</head>
<body>
    <div class="clearfix">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
</body>
</html>

2.3 position

  • fixed
  • relative
  • absolute
1. fixed

固定在窗口的某个位置。

案例：返回顶部
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .back{
            position: fixed;
            width: 60px;
            height: 60px;
            border: 1px solid red;

            right: 10px;
            bottom: 50px;
        }
    </style>
</head>
<body>

<div style="height: 1000px;background-color: #5f5750"></div>

<div class="back"></div>


</body>
</html>
案例：对话框
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }

        .dialog {
            position: fixed;
            height: 300px;
            width: 500px;
            background-color: white;

            left: 0;
            right: 0;
            margin: 0 auto;

            top: 200px;

            z-index: 1000;
        }

        .mask {
            background-color: black;
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            opacity: 0.7;
            z-index: 999;
        }
    </style>
</head>
<body>


<div style="height: 1000px">asdfasdfasd</div>


<div class="mask"></div>
<div class="dialog"></div>


</body>
</html>
2. relative和absolute
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .c1{
            height: 300px;
            width: 500px;
            border: 1px solid red;
            margin: 100px;

            position: relative;
        }
        .c1 .c2{
            height: 59px;
            width: 59px;
            background-color: #00FF7F;

            position: absolute;
            right: 20px;
            bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="c1">

        <div class="c2"></div>

    </div>
</body>
</html>
案例：小米商城下载app
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }

        img {
            width: 100%;
            height: 100%;
        }

        .left {
            float: left;
        }

        .container {
            width: 1226px;
            margin: 0 auto;
        }


        .header {
            background: #333;
        }


        .header .menu {
            float: left;
            color: white;
        }

        .header .account {
            float: right;
            color: white;
        }

        .header a {
            color: #b0b0b0;
            line-height: 40px;
            display: inline-block;
            font-size: 12px;
            margin-right: 10px;

            text-decoration: none;
        }

        .header a:hover {
            color: white;
        }

        .sub-header {
            height: 100px;
        }

        .sub-header .ht {
            height: 100px;
        }

        .sub-header .logo {
            width: 234px;
            float: left;

        }

        .sub-header .logo a {
            margin-top: 22px;
            display: inline-block
        }

        .sub-header .logo a img {
            height: 56px;
            width: 56px;
        }

        .sub-header .menu-list {
            float: left;

            line-height: 100px;
        }

        .sub-header .menu-list a {
            display: inline-block;
            padding: 0 10px;
            color: #333;
            font-size: 16px;
            text-decoration: none;
        }

        .sub-header .menu-list a:hover {
            color: #ff6700;
        }

        .sub-header .search {
            float: right;
        }

        .slider .sd-img {
            width: 1226px;
            height: 460px;
        }

        .news {
            margin-top: 14px;
        }

        .news .channel {
            width: 228px;
            height: 164px;
            background-color: #5f5750;
            padding: 3px;
        }

        .news .channel .item {
            height: 82px;
            width: 76px;
            float: left;
            text-align: center;
        }

        .news .channel .item a {
            display: inline-block;
            font-size: 12px;
            padding-top: 18px;
            color: #fff;
            text-decoration: none;

            opacity: 0.7;
        }

        .news .channel .item a:hover {
            opacity: 1;
        }

        .news .channel .item img {
            height: 24px;
            width: 24px;
            display: block;
            margin: 0 auto 4px;

        }

        .news .list-item {
            width: 316px;
            height: 170px;
        }

        .app {
            position: relative
        }

        .app .download {
            position: absolute;
            height: 100px;
            width: 100px;
            display: none;
        }
        .app:hover .download{
            display: block;
        }
    </style>
</head>
<body>

<div class="header">
    <div class="container">
        <div class="menu">
            <a href="https://www.mi.com/">小米商城</a>
            <a href="https://www.mi.com/">MIUI</a>
            <a href="https://www.mi.com/">云服务</a>
            <a href="https://www.mi.com/">云服务</a>
            <a href="https://www.mi.com/" class="app">下载app
                <div class="download">
                    <img src="images/qcode.png" alt="">
                </div>
            </a>
            <a href="https://www.mi.com/">云服务</a>
            <a href="https://www.mi.com/">云服务</a>
            <a href="https://www.mi.com/">有品</a>
            <a href="https://www.mi.com/">开放平台</a>
        </div>
        <div class="account">
            <a href="https://www.mi.com/">登录</a>
            <a href="https://www.mi.com/">注册</a>
            <a href="https://www.mi.com/">消息通知</a>
        </div>
        <div style="clear: both"></div>
    </div>
</div>

<div class="sub-header">
    <div class="container">
        <div class="ht logo">
            <!-- a，行内标签；默认设置高度、边距无效。 -> 块级 & 行内+块级 -->
            <a href="https://www.mi.com/">
                <img src="images/logo-mi2.png" alt="">
            </a>

        </div>
        <div class="ht menu-list">
            <a href="https://www.mi.com/">Xiaomi手机</a>
            <a href="https://www.mi.com/">Redmi红米</a>
            <a href="https://www.mi.com/">电视</a>
            <a href="https://www.mi.com/">笔记本</a>
            <a href="https://www.mi.com/">平板</a>
        </div>
        <div class="ht search"></div>
        <div class="clear:both;"></div>
    </div>
</div>

<div class="slider">
    <div class="container">
        <div class="sd-img">
            <img src="images/b1.jpeg" alt="">
        </div>
    </div>
</div>


<div class="news">
    <div class="container">
        <div class="channel left">
            <div class="item">
                <a href="https://www.mi.com/">
                    <img src="images/v1.png" alt="">
                    <span>保障服务</span>
                </a>
            </div>
            <div class="item">
                <a href="https://www.mi.com/">
                    <img src="images/v1.png" alt="">
                    <span>保障服务</span>
                </a>
            </div>
            <div class="item">
                <a href="https://www.mi.com/">
                    <img src="images/v1.png" alt="">
                    <span>保障服务</span>
                </a>
            </div>
            <div class="item">
                <a href="https://www.mi.com/">
                    <img src="images/v1.png" alt="">
                    <span>保障服务</span>
                </a>
            </div>
            <div class="item">
                <a href="https://www.mi.com/">
                    <img src="images/v1.png" alt="">
                    <span>保障服务</span>
                </a>
            </div>
            <div class="item">
                <a href="https://www.mi.com/">
                    <img src="images/v1.png" alt="">
                    <span>保障服务</span>
                </a>
            </div>
            <div class="clear:both"></div>
        </div>
        <div class="list-item left" style="margin-left: 14px">
            <img src="images/w1.jpeg"/>
        </div>
        <div class="list-item left" style="margin-left: 15px">
            <img src="images/w2.jpeg"/>
        </div>
        <div class="list-item left" style="margin-left: 15px">
            <img src="images/w3.jpeg"/>
        </div>
        <div class="clear:both"></div>
    </div>
</div>


</body>
</html>

2.4 border

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .c1{
            height: 300px;
            width: 500px;
            border: 1px solid red;
            border-left: 3px solid #00FF7F;
            margin: 100px;
        }

    </style>
</head>
<body>
    <div class="c1"></div>
</body>
</html>

透明色：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .c1{
            height: 50px;
            width: 500px;
            margin: 100px;
            background-color: #5f5750;
            border-left: 2px solid transparent;
        }

        .c1:hover{
            border-left: 2px solid red;
        }

    </style>
</head>
<body>
    <div class="c1">菜单</div>
</body>
</html>

2.5 背景色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .c1{
            height: 50px;
            width: 500px;
            margin: 100px;
            background-color: #5f5750;
        }


    </style>
</head>
<body>
    <div class="c1">菜单</div>
</body>
</html>

注意：以上不是所有的CSS样式。

3.BootStrap

是别人帮我们已写好的CSS样式，我们如果想要使用这个BootStrap：

  • 下载BootStrap
  • 使用
    • 在页面上引入BootStrap
    • 编写HTML时，按照BootStrap的规定来编写 + 自定制。

3.1 初识

https://v3.bootcss.com/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- HTML注释：开发版本 -->
    <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css">

    <!-- 生产版本 -->
    <!-- <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.min.css"> -->
</head>
<body>

    <input type="button" value="提交" />

    <input type="button" value="提交" class="btn btn-primary" />
    <input type="button" value="提交" class="btn btn-success" />
    <input type="button" value="提交" class="btn btn-danger" />
    <input type="button" value="提交" class="btn btn-danger btn-xs" />

</body>
</html>

3.2 导航

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css">
    <style>
        .navbar {
            border-radius: 0;
        }
    </style>
</head>
<body>

<div class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">中国联通</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                <li><a href="#">广西</a></li>
                <li><a href="#">上海</a></li>
                <li><a href="#">神州</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">四川</a></li>
                        <li><a href="#">上海</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">登录</a></li>
                <li><a href="#">注册</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</div>


</body>
</html>

3.3 栅格系统

https://v3.bootcss.com/css/#grid

  • 把整体划分为了12格

  • 分类

    • 响应式，根据屏幕宽度不同

      .col-lg-   1170px
.col-md-   970px
.col-sm-   750px

    • 非响应式

      <div class="col-xs-6" style="background-color: red">1</div>
<div class="col-xs-6" style="background-color: green">2</div>

    • 列偏移

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css">
</head>
<body>
    <div>
        <div class="col-sm-offset-2 col-sm-6" style="background-color: green">2</div>
    </div>
</body>
</html>

3.4 container

<div class="container-fluid">
    <div class="col-sm-9">左边</div>
    <div class="col-sm-3">右边</div>
</div>

<div class="container">
    <div class="col-sm-9">左边</div>
    <div class="col-sm-3">右边</div>
</div>

3.5 面板

<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css">
    <style>
        .account {
            width: 400px;
            border: 1px solid #dddddd;
            border-radius: 5px;
            box-shadow: 5px 5px 20px #aaa;

            margin-left: auto;
            margin-right: auto;
            margin-top: 100px;
            padding: 20px 40px;
        }

        .account h2 {
            margin-top: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="account">
    <h2>用户登录</h2>
    <form>
        <div class="form-group">
            <label for="exampleInputEmail1">用户名</label>
            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="用户名">
        </div>
        <div class="form-group">
            <label for="exampleInputPassword1">密码</label>
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="密码">
        </div>

        <input type="submit" value="登 录" class="btn btn-primary">
    </form>
</div>
</body>
</html>

案例：后台管理

  • 导航
  • 新建，按钮。
  • 表格，
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css">
    <style>
        .navbar {
            border-radius: 0;
        }
    </style>
</head>
<body>
<div class="navbar navbar-default">
    <div class="container">

        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <a class="navbar-brand" href="#">中国联通xx系统</a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="#">广西</a></li>
                <li><a href="#">上海</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">登录</a></li>
                <li><a href="#">注册</a></li>
            </ul>
        </div>

    </div>
</div>

<div class="container">
    <div>
        <input type="button" value="新 建" class="btn btn-primary"/>
    </div>

    <div style="margin-top: 20px">
        <table class="table table-bordered table-hover">
            <thead>
            <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
            </tr>
            </tbody>
        </table>
    </div>

</div>


</body>
</html>

案例：后台管理+面板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css">
    <style>
        .navbar {
            border-radius: 0;
        }
    </style>
</head>
<body>
<div class="navbar navbar-default">
    <div class="container">

        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <a class="navbar-brand" href="#">中国联通xx系统</a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="#">广西</a></li>
                <li><a href="#">上海</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">登录</a></li>
                <li><a href="#">注册</a></li>
            </ul>
        </div>

    </div>
</div>

<div class="container">
    <div class="panel panel-default">
        <div class="panel-heading">表单区域</div>
        <div class="panel-body">
            <form class="form-inline">
                <div class="form-group">
                    <label class="sr-only" for="exampleInputEmail3">Email address</label>
                    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
                </div>
                <div class="form-group">
                    <label class="sr-only" for="exampleInputPassword3">Password</label>
                    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
                </div>
                <button type="submit" class="btn btn-success">保 存</button>
            </form>
        </div>
    </div>

    <div class="panel panel-default">
        <div class="panel-heading">数据列表</div>
        <!--
        <div class="panel-body">
            注意：以下我们经过筛选出来的重要数据。
        </div>
        -->

        <table class="table table-bordered table-hover">
            <thead>
            <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Mark</td>
                <td>Otto</td>
                <td>
                    <a class="btn btn-primary btn-xs">编辑</a>
                    <a class="btn btn-danger btn-xs">删除</a>
                </td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>
                    <a class="btn btn-primary btn-xs">编辑</a>
                    <a class="btn btn-danger btn-xs">删除</a>
                </td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>
                    <a class="btn btn-primary btn-xs">编辑</a>
                    <a class="btn btn-danger btn-xs">删除</a>
                </td>
            </tr>
            </tbody>
        </table>

    </div>
    <ul class="pagination">
        <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
        <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
    </ul>

</div>


</body>
</html>
Yoin.
关注
专栏目录
鸿蒙开发前端学习笔记day02（自用）
10-29
鸿蒙开发前端学习笔记day02（自用）
JavaScript02 对象.pdf_前端学习资料
09-01
JavaScript对象是前端开发中至关重要的概念，它是JavaScript语言的核心特性之一。对象本质上是属性和方法的集合，可以用来表示现实世界中的实体或者抽象概念。在JavaScript中，对象的创建、属性访问、方法定义以及...
div中class属性的理解
热门推荐
liulang68的博客
07-01 6万+
div 在网页设计中是表示块、区域的意思，比如你在制作一个卖衣服的网页时，把男装和女装各分一个区域这是就可以定义两个div，两个块，class则可以表示你可以给这个块加一些属性啊，比如长和宽，背景颜色什么的，你可以给这些属性取一个名字，class=shuxing就表示你给这个属性的集合取了个shuxing的名称 <div class=nanzhuang>、<div class=nvzhuang> 就可以表示你给男装区域和女装区域定义的属性名，这样你就可以设疑class改变他的属性了
CSS基础
qq_51220629的博客
04-23 1995
CSS三大特性、盒子模型
html div标签的 class属性是干嘛用的？
Dontla的博客
02-25 2万+
参考文章：https://zhidao.baidu.com/question/120064132.html
CSS学习记录02
serendipity__i的博客
10-11 218
chrome调试工具：快捷键Fn+F12 使用调试工具 ①Ctrl+滚轮可以放大开发者工具代码大小。 ②左边是 HTML元素结构，右边是CSS样式。 ③右边CSS样式可以改动数值（左右箭头或者直接输入)和查看颜色。 ④Ctrl +0复原浏览器大小。 ⑤如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误。 ⑥如果有样式，但是样式前面有黄色叹号提示，则是样式属性书写错误。 1.Emmet语法 Emmet语法的前身是Zencoding,它使用缩写,来提高htmI/css的编写速度,Vs.
初识CSS
LiLi的博客
12-21 587
CSS简介 CSS概念 CSS（Cascading Style Sheets）层叠样式表，又叫级联样式表，简称样式表 CSS文件后缀名为 .css CSS用于HTML文档中元素样式的定义 为什么需要CSS 使用css的目的就是让网页具有美观一致的页面 CSS和HTML之间的关系 1 HTML用于构建网页的结构 2 CSS用于构建HTML元素的样式 3 HTML是页面的内容组成，CSS是页面的表现 语法 CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明 选择器通常是您需要改变样式的 HTML
前端学习案例合集，各种前端小案例实现源码.zip
05-14
前端学习案例介绍：项目中包含了 HTML、CSS、 JavaScript、JQuery、Vue等相关学习案例。 有多个文件的案例，放在了code文件夹中。 目录 01-B站移动端首页框架仿写 02-Js实现比较两个数大小和清空 03-彩色文字 04-...
Modules02. JavaScript 模块化编程.pdf_前端学习资料
09-01
JavaScript 模块化编程是解决日益复杂的前端项目管理和维护的关键技术。随着JavaScript在Web开发中的核心地位不断巩固，模块化成为了应对代码量增大、逻辑复杂度提高的有效手段。本文将深入探讨JavaScript模块化的...
Vue02. Vue.js 组件开发.pdf_前端学习资料
09-01
Vue.js 是一款流行的前端JavaScript框架，以其轻量级、高效和易上手的特性受到开发者喜爱。在Vue中，组件是核心概念，它们允许开发者将UI分解为可重用的模块，极大地提高了代码的可维护性和复用性。下面将详细介绍...
CSS入门基础学习（中）
m0_61886762的博客
11-13 1696
CSS显示模式作用：网页标签特别多，在不同地方用不到相同类型，了解他们的特点可以方便给页面进行布局。元素显示模式就是元素（标签）以什么方式进行显示，例如占一行,一行内可以放多个，HTML元素一般分为块元素和行内元素，两种类型。块元素：常见的块元素：~、、、、、等，其中是最典型的块级元素。下面我们进行书写一些行内块元素来看一下各自的效果样式：结果如图所示：注意：文字类的元素内不能使用块级元素。
属性选择器
pyrans的博客
08-14 1129
以div与class举例 1、div[class]{属性：属性值；} 用于选取带有指定属性的元素 2、div[class="a"]{属性：属性值；} 用于选取带有指定属性和值元素 3、div[class~="a"]{属性：属性值；} 用于选取属性值中包含指定词汇的元素 4、div[class|="a"]{属性：属性值；} 用于选取指定属性以指定词汇-（注）开头，或值为该词汇的元素 ...
HTML创建＜div class=““＞＜/div＞或＜div id=““＞＜/div＞标签快捷键
qq_43511299的博客
09-14 4119
输入.right再按下Tab键可以达到如下效果 <div class="right"></div> 输入#right再按下Tab键可以达到如下效果 <div id="right"></div>
div 中id和class使用讲解
kele_jichi的博客
03-11 9678
在div 标签中，我们比较常见的属性是id 和class,那么这两个属性有什么区别吗？今天就来看看这两者的区别。其实id 和class是大部分标签都有的属性。其作用是让CSS或者JavaScript找到DOM元素并操作。 首先看看这两个属性在html中是如何使用的。 1.<div id="loading"> </div> 2.<div class="icon"&gt...
＜CSS3＞基础语法与盒模型
最不正经的计算机专业学生
10-12 1233
目录 1. CSS3基础入门 1.1 CSS3简介 1.2 前端三层 1.3 CSS选择器 1.4 CSS书写位置 1.4.1 内嵌式 1.4.2 外链式 1.4.3 导入式 1.4.4 行内式 2.CSS3基本语法 2.1 标签选择器和id选择器 2.1.1 标签选择器 2.1.2 id属性和id选择器 2.2 class选择器 2.2.1 class类名 2.2.2 class选择器 2.2.3 复合选择器 ​ 2.3 元素关系选择器 2.3.1 子选...
DIV标签详细介绍
qq_37219446的博客
08-09 3万+
div 是 division 的简写，division 意为分割、区域、分组。比方说，当你将一系列的链接组合在一起，就形成了文档的一个 division。 可定义文档中的分区或节（division/section）。 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。如果用 id 或 class 来标记 ，那么该标签的作用会变得更加有效。...
前端必知必会-html的div和class
最新发布
qq_24018193的博客
07-26 1634
本文介绍了的html的css使用，如有问题欢迎私信和评论。
html基础知识
chengxuwa的博客
07-23 1247
Html可以大小写 xhtml只能用小写 Html可以不用结束 xhtml必须有结束标签 <H1>这是html大写</H1>；<h1>这是小写的html</h1>；<h1>这是html；<h1>这是xhtml</h1> Xhtml就是html的严格版 99%的语言都是写在body里面 学习html其实就是学习一堆的标签语言 标签：<div></div><p>&lt...
HTML && CSS 学习笔记（5）div、class（关键词：html/div/class）
Henry1991back的博客
11-28 5652
HTML <div> 标签实例文档中的一个部分会显示为绿色：<div style="color:#00FF00"> <h3>This is a header</h3> <p>This is a paragraph.</p> </div>浏览器支持IE Firefox Chrome Safari Opera 所有主流浏览器都支持 标签。定义和用法<div> 可定义文档中的分区或节（d
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Yoin.

感谢各位打赏！！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值