Python-Django学习笔记4-前端开发（CSS案例）

Employee

Web开发

发布于：2023年9月6日

字数：3.6k字

时长：20分钟

CSS 知识点及案例

概要

案例应用
CSS知识点
模板 + CSS + 构建页面

1. css案例

1.1 内容回顾

HTML标签

固定格式，记住标签格式即可
h/div/span/a/img/ul/li/table/input系列/form

CSS样式

引用CSS：标签、head头部（style）、文件
```
.xx{
    ...
}
<div class='xx'></div>
```
CSS样式

高度/宽度/字体颜色/字体大小/字体格式/对齐方式/浮动/内边距/外边距/块级or块级&行内
关于边距：
    - body
    - 区域居中：margin: 0 auto;

页面布局

把树级/层级：把页面内容划分为不同的小区域，再去填充样式

1.2 小米商城

1.2.1 划分区域

1.2.2 搭建骨架

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body{
                margin: 0 auto;
            }
            .sub-header{
                height: 100px;
                background-color: #b0b0b0;
            }
            .sub-header .ht{
                height: 100px;
            }
            .container{
                width: 1128px;
                margin: 0 auto;
            }
            .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 style="clear: both;"></div>
            </div>
        </div>
    </body>
</html>

1.2.3 LOGO区域

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

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

<div class="ht logo">
    <a href="https://www.mi.com/shop">
        <img src="/image/logo-mi2.png">
    </a>
</div>

1.2.4 菜单区域

<div class="sub-header">
    <div class="container">
        <div class="ht logo">
            <a href="https://www.mi.com/shop">
                <img src="/image/logo-mi2.png">
            </a>
        </div>
        <div class="ht menu-list">
            <a href="https://www.mi.com/shop">Xiaomi手机</a>
            <a href="https://www.mi.com/shop">Redmi手机</a>
            <a href="https://www.mi.com/shop">电视</a>
            <a href="https://www.mi.com/shop">笔记本</a>
            <a href="https://www.mi.com/shop">平板</a>
        </div>
        <div class="ht search"></div>
        <div style="clear: both;"></div>
    </div>
</div>

<style>
    body{
        margin: 0 auto;
    }
    .sub-header{
        height: 100px;
        /* background-color: #b0b0b0; */
    }
    .sub-header .ht{
        height: 100px;
    }
    .container{
        width: 1128px;
        margin: 0 auto;
    }
    .sub-header .logo{
        width: 234px;
        float: left;
    }
    .sub-header .logo a{
        margin-top: 22px; 
        display: inline-block;

    }
    .sub-header .logo img{
        height: 56px;
        width: 56px;
    }
    .sub-header .menu-list{
        float: left;
        line-height: 100px;
    }
    .sub-header .menu-list a{
        padding: 0 10px;
        display: inline-block;
        color: #333;
        font-size: 16px;
        text-decoration: none;
    }
    .sub-header .menu-list a:hover{
        color: #ff6788;
    }
    .sub-header .search{
        float: right;
    }
</style>

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

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

            .header{
                /* height: 38px; */
                background-color: #333;
                color: #b0b0b0;
                /* width: 980px;
                margin-left: auto;
                margin-right: auto; */
            }
            
            .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;
                /* background-color: #b0b0b0; */
            }
            .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 img{
                height: 56px;
                width: 56px;
            }
            .sub-header .menu-list{
                float: left;
                line-height: 100px;
            }
            .sub-header .menu-list a{
                padding: 0 10px;
                display: inline-block;
                color: #333;
                font-size: 16px;
                text-decoration: none;
            }
            .sub-header .menu-list a:hover{
                color: #ff6788;
            }
            .sub-header .search{
                float: right;
            }
        </style>
    </head>
    <body>
        <div class="header">
            <div class="container">
                <div class="menu">
                    <a href="https://www.mi.com/shop">小米官网</a>
                    <a href="https://www.mi.com/shop">小米商城</a>
                    <a href="https://www.mi.com/shop">MIUI</a>
                    <a href="https://www.mi.com/shop">loT</a>
                    <a href="https://www.mi.com/shop">云服务</a>
                    <a href="https://www.mi.com/shop">天星数科</a>
                    <a href="https://www.mi.com/shop">有品</a>
                    <a href="https://www.mi.com/shop">小爱开放平台</a>
                </div>
                <div class="account">
                    <a href="https://www.mi.com/shop">登录</a>
                    <a href="https://www.mi.com/shop">注册</a>
                    <a href="https://www.mi.com/shop">消息通知</a>
                </div>
                <div style="clear: both;"></div>
            </div>
        </div>

        <div class="sub-header">
            <div class="container">
                <div class="ht logo">
                    <a href="https://www.mi.com/shop">
                        <img src="/image/logo-mi2.png">
                    </a>
                </div>
                <div class="ht menu-list">
                    <a href="https://www.mi.com/shop">Xiaomi手机</a>
                    <a href="https://www.mi.com/shop">Redmi手机</a>
                    <a href="https://www.mi.com/shop">电视</a>
                    <a href="https://www.mi.com/shop">笔记本</a>
                    <a href="https://www.mi.com/shop">平板</a>
                </div>
                <div class="ht search"></div>
                <div style="clear: both;"></div>
            </div>
        </div>
    </body>
</html>

1.4 小结

a标签是行内标签；行内标签的高度、内外边距均默认无效；
垂直方向居中
- 文本：line-height
- 图片 + 边距
a标签默认有下划线，处理：text-decoration: none;
某个标签的hover
- ```
.c1:hover{

}
a:hover{

}
```

1.5 案例：小米商城 - 推荐区域

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body{
                margin: 0;
            }
            .container{
                width: 1226px;
                margin: 0 auto;
            }
            img{
                width: 100%;
                height: 100%;
            }
            .left{
                float: left;
            }

            .header{
                /* height: 38px; */
                background-color: #333;
                color: #b0b0b0;
                /* width: 980px;
                margin-left: auto;
                margin-right: auto; */
            }
            
            .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;
                /* background-color: #b0b0b0; */
            }
            .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 img{
                height: 56px;
                width: 56px;
            }
            .sub-header .menu-list{
                float: left;
                line-height: 100px;
            }
            .sub-header .menu-list a{
                padding: 0 10px;
                display: inline-block;
                color: #333;
                font-size: 16px;
                text-decoration: none;
            }
            .sub-header .menu-list a:hover{
                color: #ff6788;
            }
            .sub-header .search{
                float: right;
            }

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

            .news{
                margin-top: 20px;
            }
            .news .channel{
                width: 228px;
                height: 164px;
                background-color: #5f5750;
            }
            .news .list-item{
                width: 316px;
                height: 170px;
            }
            .news .channel{
                font-size: 12px;
                padding: 3px;
            }
            .news .channel img{
                width: 24px;
                height: 24px;
                display: block;
                margin: 0 auto 4px;
            }
            .news .channel ul{
                list-style-type: none;
                margin: 0;
                text-align: center;
            }
            .news .channel li{
                height: 82px;
                width: 70px;
                float: left;
                position: relative;
                padding: 0 3px;
                /* display: inline-block; */
            }
            .news .channel a{
                text-decoration: none;
                color: #ffffff;
                opacity: .7;
            }
            .news .channel a:hover{
                opacity: 1;
            }
        </style>
    </head>
    <body>
        <!-- 顶部导航栏 -->
        <div class="header">
            <div class="container">
                <div class="menu">
                    <a href="https://www.mi.com/shop">小米官网</a>
                    <a href="https://www.mi.com/shop">小米商城</a>
                    <a href="https://www.mi.com/shop">MIUI</a>
                    <a href="https://www.mi.com/shop">loT</a>
                    <a href="https://www.mi.com/shop">云服务</a>
                    <a href="https://www.mi.com/shop">天星数科</a>
                    <a href="https://www.mi.com/shop">有品</a>
                    <a href="https://www.mi.com/shop">小爱开放平台</a>
                </div>
                <div class="account">
                    <a href="https://www.mi.com/shop">登录</a>
                    <a href="https://www.mi.com/shop">注册</a>
                    <a href="https://www.mi.com/shop">消息通知</a>
                </div>
                <div style="clear: both;"></div>
            </div>
        </div>
        <!-- 顶部菜单栏 -->
        <div class="sub-header">
            <div class="container">
                <div class="ht logo">
                    <a href="https://www.mi.com/shop">
                        <img src="/image/logo-mi2.png">
                    </a>
                </div>
                <div class="ht menu-list">
                    <a href="https://www.mi.com/shop">Xiaomi手机</a>
                    <a href="https://www.mi.com/shop">Redmi手机</a>
                    <a href="https://www.mi.com/shop">电视</a>
                    <a href="https://www.mi.com/shop">笔记本</a>
                    <a href="https://www.mi.com/shop">平板</a>
                </div>
                <div class="ht search"></div>
                <div style="clear: both;"></div>
            </div>
        </div>
        <!-- 首页Banner -->
        <div class="slider">
            <div class="container">
                <div class="sd-img">
                    <img src="/image/banner01.png">
                </div>
            </div>
        </div>
        <!-- 功能及推荐设备 -->
        <div class="news">
            <div class="container">
                <div class="channel left">
                    <ul>
                        <li>
                            <a href="https://api.jr.mi.com/activity/scene/scenePCsearch.html?from=search">
                                <img src="/image/img-time.png" alt="">
                                <span>保障服务</span>
                            </a>
                        </li>
                        <li>
                            <a href="https://business.qiye.mi.com/">
                                <img src="/image/img-home.png" alt="">
                                <span>企业团购</span>
                            </a>
                        </li>
                        <li>
                            <a href="https://www.mi.com/shop/order/fcode">
                                <img src="/image/img-f.png" alt="">
                                <span>F码通道</span>
                            </a>
                        </li>
                        <li>
                            <a href="https://10046.mi.com/">
                                <img src="/image/img-card.png" alt="">
                                <span>米粉卡</span>
                            </a>
                        </li>
                        <!-- <li>
                            <a href="https://www.mi.com/a/h/16769.html">
                                <img src="/image/img-money.png" alt="">
                                <span>以旧换新</span>
                            </a>
                        </li>
                        <li>
                            <a href="https://www.mi.com/shop">
                                <img src="/image/img-phone.png" alt="">
                                <span>话费充值</span>
                            </a>
                        </li> -->
                    </ul>
                </div>
                <div class="list-item left" style="margin-left: 14.6px;">
                    <img src="/image/channel01.jpeg" />
                </div>
                <div class="list-item left" style="margin-left: 14.6px;">
                    <img src="/image/channel02.jpg" />
                </div>
                <div class="list-item left" style="margin-left: 14.6px;">
                    <img src="/image/channel03.png" />
                </div>
                <div style="clear: both;"></div>
            </div>
        </div>
    </body>
</html>

1.6 小结

设置透明度

opacityL: 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: 55px;
            }

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

            .download{
                display: none;
            }
            .app:hover .download{
                display: block;
            }
            .app:hover .title{
                font-size: 25px;
                color: red;
            }

        </style>
    </head>
    <body>
        <div class="c1">联通</div>
        <div class="c2">广西</div>

        <div class="app">
            <div class="title">点我下载</div>
            <div class="download">
                <img src="/image/channel01.jpeg" alt="channel01">
            </div>
        </div>
    </body>
</html>

2.2 after（在标签内部元素尾部增加内容或样式）

很重要的应用（清除标签浮动影响的父级标签问题）

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .c1::after{
                content: "大美女";
            }
            .clearfix:after{
                content: "";
                display: block;
                clear: both;
            }
            /* .item{
                float: left;
            } */
        </style>
    </head>
    <body>
        <div class="c1">郭梦茹</div>
        <div class="c1">徐泽零</div>

        <div class="clearfix">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <!-- <div style="clear: both;"></div> -->
        </div>
    </body>
</html>

2.3 position

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: 50px;
                bottom: 50px;
            }
        </style>
    </head>
    <body>
        <div style="height: 2000px; background-color: azure;">
            
        </div>
        <div class="back">

        </div>
    </body>
</html>


---> 案例：对话框（登录框）

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: green;
                position: absolute;
                right: 100px;
                bottom: 10px;

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

2.4 案例：小米商城-下载APP

<a href="https://www.mi.com/shop" class="app">下载APP
    <div class="download">
        <img src="/image/qrcode.png" alt="">
    </div>
</a>




.app{
    position: relative;
}
.app .download{
    position: absolute;
    height: 100px;
    width: 100px;
    display: none;
}
.app:hover .download{
    display: block;
}

2.5 border边框

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .c1{
                height: 300px;
                width: 500px;
                border: 3px solid red;
                border-left: 1px solid green;
                border-right: 19px solid transparent;   /* 透明色 一般用于鼠标移入标签之前*/
                margin: 100px;
            }
        </style>
    </head>
    <body>
        <div class="c1"> 菜单</div>
    </body>
</html>

2.6 背景色

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .c1{
                height: 300px;
                width: 500px;
                background-color: bisque;
            }
        </style>
    </head>
    <body>
        <div class="c1"> 菜单</div>
    </body>
</html>

更新于：2023年9月9日

次浏览

Python-Django学习笔记5-前端开发（BootStrap）

BootStrap笔记+JavaScript引入理解：别人帮我们已写好的CSS样式，如果想要使用BootStrap，直接引入使用即可下载BootStrap...

Python-Django学习笔记3-前端开发（CSS）

CSS 3. CSS样式专门用来美化标签基础CSS，写简单页面 & 看懂 & 改模块，调整和修改 3.1 快速了解<img src=&...