python_CSS

最新推荐文章于 2024-01-12 16:31:07 发布
最新推荐文章于 2024-01-12 16:31:07 发布
阅读量762 收藏 4
点赞数
分类专栏： python_web开发 文章标签： python css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45818577/article/details/127818745
版权

python_CSS

CSS专门用来美化标签。

1.css 的应用方式

<img src="..." style="height:100px"/>
<div style="coloerL:red"></div>

1.1 在标签上

<img src="..." style="height:100px"/>
<div style="coloerL:red"></div>

1.2 在head标签中写style

image-20221105111239606

上面c1的点对于的是class

<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <style>
        .c1{
            color:red;
        }
    </style>
</head>
<body>
<h1 class="c1" >用户注册</h1>
</body>

这样通用性更强，可以复用，在一个页面中

1.3 将样式写入文件中

<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <link rel="stylesheet" herf="common.css">
</head>
<body>
<h1 class="c1" >用户注册</h1>
</body>

文件中所写的

.c1{
	height:100px;
}
.c2{
	color:red;
}

在不同的html中，通用性更强，多个文件

2 css选择器

  • ID选择器 ID不重复 只能用在一个标签上
#c1{

}
<div id = 'c1'></div>
  • 类选择器(最多)
.c1{

}
<div class = 'c1'></div>
  • 标签选择器

可以是任意的标签

div{
	
}
<div></div>
  • 属性选择器
input[ type = 'text']{
border:1px solid red;
}

.v1[xx = '13']{
    border:1px solid red;
}


 <input type='text' />

在所有的input[ type = ‘text’]下 加上边框

  • 后代选择器

image-20221105143603485

在…yy中标签中的子代找li标签

.yy li 子孙后代
.yy > li 只找儿子

总结

多：类选择器、标签选择器、后代选择器
少：属性选择器、ID选择器
2 .1 多个样式的组合问题

image-20221105144246297

应用的顺序和style的定义有关 而不是class的顺序。

3 样式

3.1 高度和宽度

<style>
        .c1{
            height:300px;
            width:500px;
        }
</style>

宽度百分比。占页面的百分之多少

  • 行内标签：默认无效
  • 块级标签：默认有效，(右侧区域空白，不能占用)

3.2 块级和行内标签

  • 块级
  • 行内
  • css样式：标签 ->display：inline-block。既有行内标签的功能也有跨级标签的功能
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            display:inline-block;
            height:300px;
            width:200px;
            border:1px solid red;
        }
    </style>
</head>
<body>
<h1 class="c1">zhongguo</h1>
<h1 class="c1">zhongguo</h1>
<span>dsfs</span>
</body>

image-20221105145634372

将块级变成行内

<div style="display:inline">块级变行内</div>

将行内变成块级

<span style="display:block">行内变块级</span>

注意事项

块级标签和inline-block用的多。

3.3 字体设置

.c2{
颜色  color: #00FF0F;
大小  font-size: 58px;
加粗  font-weight:400;
字体  font-famliy:"Arial";
}

3.4 文字的对齐方式

text-align:center
line-height:300px

c1{
            height:300px;
            width:200px;
            border:1px solid red;

            text-align:center;/* 水平方向居中 */
            line-height:300px;/* 一行占了所有，默认会居中，但只能有一行 */
        }

3.5 浮动

style="float：left"
style="float：right"

对于行内标签的浮动，在一行内浮动

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    </style>
</head>
<body>
<span>左边</span>
<span style="float:right">右边</span>
</body>
</html>

对于块级标签

image-20221105152445811

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            height:100px;
            width:100px;
            float:left;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div class="c1">中国移动</div>
<div class="c1">中国移动</div>
<div class="c1">中国移动</div>
<div class="c1">中国移动</div>
</body>
</html>

浮动的特点，如果让标签浮动起来 就会脱离文档流， 撑不起父亲结点

image-20221105153531078

image-20221105153515052

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            height:100px;
            width:100px;
            float:left;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div style="background-color:blue">
    <div class="c1">中国移动</div>
    <div class="c1">中国移动</div>
    <div class="c1">中国移动</div>
    <div class="c1">中国移动</div>
    <div style="clear:both"></div>
</div>
<div >中国移动</div>
</body>
</html>

clear：both的含义是清除CSS中产生的浮动。

3.6 边距

3.6.1 内边距
padding-top
padding-left
padding-right
padding-bottom
padding：是上下左右都改变
padding：10px
padding：20px 10px 30px 40px
上右下左 顺时针

image-20221105154316279

<style>
        .c1{
            height:200px;
            width:200px;
            border: 1px solid red;
            padding-top:40px;
            padding-left:10px;
            padding-right:20px;
        }
    </style>
<div class="c1">
    <div>
        听妈妈吗的话
    </div>
    <div>
        副食店解放了我就但是分厘卡耳机的说服力
    </div>
</div>

内部的改变

3.6.2 外边距

离外部的距离

margin-top
margin-bottom
margin-left
margin-right

image-20221105155157770

<div style="background:red;height:100px;margin-top:50px"></div>
<div style="background:blue;height:100px; margin:100px" ></div>

4. 案例1： 小米商城导航

image-20221105164541939

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米商城</title>
    <style>
        .header{
            background-color:#333333;
        }
        .header .l{
            float:left;
            height:40px;
            line-height:40px;
            margin-left:10px
        }
        .header .r{
            float:right;
            height:40px;
            line-height:40px;
        }
        .container{
            width:1226px;
            margin:0 auto;
        }
        .header span{
            color:#b0b0b0;
            font-size:12px;
        }
    </style>
</head>
<body style="margin:0px">
<div class="header">
    <div class="container">
    <div class="l">
        <span>小米官网</span> |
        <span>小米商城</span> |
        <span>MIUI</span> |
        <span>loT</span> |
        <span>云服务</span> |
        <span>天星数码</span>
    </div>
    <div class="r">
        <span>登录</span> |
        <span>注册</span> |
        <span>消息通知</span>
    </div>
    <div style="clear:both"></div>
        </div>
</div>
</body>
</html>

body标签默认会有外边距

<body style="margin:0px">
    
</body>

内容如何居中？

<div style="width:50px; margin:0px auto">
    div中的所有内容居中
</div>
  • 一定要有宽度
  • 要有margin：0px auto；auto的意思是右下左自动设置

父亲没有高度和宽度 会被孩子撑起来

如果存在浮动，一定要加:和浮动同一级别 ，并加在最后

<div style="clear:both"></div>

5. 案例2：小米商城导航2

效果：

image-20221106153407396

用到的知识点：

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

解决方法：变成inline-block或者block

  • 垂直方向的居中：文本 line-height

  • 图片+边距

  • a标签默认下有下划线。

  • 某个标签的hover 代表 鼠标放上去之后的样式改变

.c1{
	没有鼠标
}
.c1:hover{
	有鼠标
}
  • 两个inline-block无法对齐

image-20221106154001157

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米商城</title>
    <style>
        .header{
            background-color:#333333;
        }
        .header .l{
            float:left;
            height:40px;
            line-height:40px;
        }
        .header .r{
            float:right;
            height:40px;
            line-height:40px;
        }
        .container{
            width:1226px;
            margin:0 auto;
        }
        .header span{
            color:#b0b0b0;
            font-size:12px;
        }
        .low_header{
            background-color:'white';
        }
        .low_header .c1{
            vertical-align:middle;
            height:100px;
            display:inline-block;
            margin:0px;
            line-height:100px;
        }
        .low_header .c1 a{
            text-decoration:none;

            padding:0px 8.5px 0px 8.5px;
            display:inline-block;
            font-size:16px;
            color:#333;
        }
        .low_header .c1 a:hover{
            color:#ff6700;
        }
        .low_header .c2{
            vertical-align:middle;
            height:100px;
            float:right;
            margin:0px;
            line-height:100px;
            width:300px;
        }
    </style>
</head>
<body style="margin:0px">
<div class="header">
    <div class="container">
    <div class="l">
        <span>小米官网</span> |
        <span>小米商城</span> |
        <span>MIUI</span> |
        <span>loT</span> |
        <span>云服务</span> |
        <span>天星数码</span>
    </div>
    <div class="r">
        <span>登录</span> |
        <span>注册</span> |
        <span>消息通知</span>
    </div>
    <div style="clear:both"></div>
        </div>
</div>
<div class="low_header">
    <div class="container" >
        <div class="c1" style="width:234px;">
            <a href="https://www.mi.com/" style="margin-top:22px;display:inline-block;">
                <img src="mi.jpg" style="height:56px;width:56px">
            </a>
        </div>
        <div class="c1">
            <a href="">xiaomi手机</a>
            <a href="">redmi手机</a>
            <a href="">电视</a>
            <a href="">笔记本</a>
            <a href="">平板</a>
            <a href="">家电</a>
            <a href="">路由器</a>
            <a href="">服务中心</a>
            <a href="">社区</a>
        </div>
        <div class="c2">

        </div>
    </div>
</div>

</body>
</html>

6 .案例3：小米商城 新品展示

image-20221106160446715

image-20221106160333866

image-20221106170838296

opacity透明度：

image-20221106170946745

<div class="container" >
    <img src="show.jpg">
</div>
<div class="news">
    <div class="container" style="margin-top:5px;">
        <div class="chanel" style="background:#5f5750;">
            <div class="box">
                <div class="pic_word">
                         <img src="1.png">
                    <div class="word">保障服务</div>
                </div>
            </div>
            <div class="box">
                 <div class="pic_word">
                         <img src="2.png">
                    <div class="word">企业团购</div>
                </div>
            </div>
            <div class="box">
                 <div class="pic_word">
                         <img src="3.png">
                    <div class="word">F码通道</div>
                </div>
            </div>
            <div class="box">
                 <div class="pic_word">
                         <img src="4.png">
                    <div class="word">米粉卡</div>
                </div>
            </div>
            <div class="box">
                 <div class="pic_word">
                         <img src="5.png">
                    <div class="word">以旧换新</div>
                </div>
            </div>
            <div class="box">
                 <div class="pic_word">
                         <img src="6.png">
                    <div class="word">花费充值</div>
                </div>
            </div>
            <div style="clear:both"></div>
        </div>
        <div class="list-item">
            <img src="1.jpg" >
        </div>
        <div class="list-item">
            <img src="2.jpg" >
        </div>
        <div class="list-item">
            <img src="3.jpg" >
        </div>
    </div>
</div>

.news .chanel{
            margin:0px;
            width:234px;
            height:170px;
            display:inline-block;
        }
        .news .list-item {
            margin:0px 0px 0px 10.3px;
            display:inline-block;
        }
        .news .list-item img{
            margin:0px;
            width : 316px;
            height:170px;
        }
        .news .container .chanel .box{
            width:76px;
            height:82px;
            float:left;
            margin:0px auto;
        }
        .news .container .chanel img{
            width:24px;
            height:24px;
        }
        .news .container .chanel .box .pic_word{
            margin:18px auto;
            opacity:0.5;
        }
        .news .container .chanel .box .pic_word:hover{
            opacity:1;
        }
        .news .container .chanel .box img{
            display:block;
            margin:0px auto;
        }
        .news .container .chanel .box .word{
            margin:5px auto;
            font-size:12px;
            text-align:center;
            color:white;
        }

7. css知识点补充

7.1 hover

鼠标放上去之后的样式变化

.c1{
	原始样貌	
}
.c1:hover{
	hover的第一种方式 只对c1改变
}
.c1:hover div{
	当鼠标放在c1时，div样式发生变化，其c1下的div 子类发生变化
}

7.2 after

在尾部追加文本。

.c1{
	原始样貌	
}
.c1:after{
	content：“追加内容”
}
<div class="c1">原本内容</div>

clearfix:after{
	content:"";
	display:block;
	clear:both;
}

将上面的追加的文本变成块级，并且附上样式

7.3 position

钉在屏幕上

7.3.1 fixed

固定在窗口的某个位置

.back{
	position：fixed
	left:0;离左边的像素
	top：
	或者：
	right：
	bottom：
	
}

固定在窗口中间：

.back{
	position：fixed
	left:0;
	right：0；
	margin：0px auto；
	
}

对话框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    body{
        margin:0px;
    }
        .mask{
            position:fixed;
            background-color:black;
            left:0;
            right:0;
            top:0;
            bottom:0;
            opacity:0.4;
        }
        .dialog{
            position:fixed;
            left:0;
            right:0;
            top:50px;
            margin:0px auto;
            background-color:white;
            width:500px;
            height:300px;
        }


    </style>
</head>
<body>

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

    </div>
</body>
</html>
7.3.2 relative和absolute

子类和父类的相对位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            position:relative;
            height:200px;
            width:200px;
            top:50px;
            left:0;
            right:0;
            margin:0px auto;
            border:1px solid red;
        }
        .c2{
            position:absolute;
            height:20px;
            width:20px;
            border:1px solid blue;
            background-color:blue;
            right:0px;
            top:0px;
        }
    </style>
</head>
<body>
<div class="c1">
    <div class="c2">
    </div>
</div>
</body>
</html>

效果：

image-20221106210137730

7.4 边框和背景色

border-left:3px solid red;
边框：粗细 实线/虚线 颜色

8. 案例4：小米商城弹窗

image-20221106214621870

  • 主要思路：下载app标签和下面的弹出框是相对位置关系，用relative和absolute相对应。
  • 弹出框里面有两个标签一个是二维码一个是文字，图片要居中，文字也要居中
  • 调整文字的位置：用外边距调整：margin-top:-18px;
  • 利用hover来定义弹出。
.xia_zai_kuang{
            width:124px;
            height:148px;
            left:-42px;

            background-color:white;
            margin:0px;
            display:none;

        }
        .app:hover .xia_zai_kuang{
            display:block;
        }
        .xia_zai{
            height:90px;
            height:90px;
            display:block;
            margin:14px auto;
        }
        .xia_zai_kuang .word1{
            height:28px;
            width:124px;
            text-align:center;
            font-size:14px;
            margin-top:-18px;
            color:black;
        }

<a class="app" style="position:relative">下载App
            <div class="xia_zai_kuang" style="position:absolute">
                <img  class="xia_zai" src="download.png" >
                <div class="word1">
                    小米商城APP
                </div>
            </div>
        </a>

ng{
width:124px;
height:148px;
left:-42px;

        background-color:white;
        margin:0px;
        display:none;

    }
    .app:hover .xia_zai_kuang{
        display:block;
    }
    .xia_zai{
        height:90px;
        height:90px;
        display:block;
        margin:14px auto;
    }
    .xia_zai_kuang .word1{
        height:28px;
        width:124px;
        text-align:center;
        font-size:14px;
        margin-top:-18px;
        color:black;
    }


```html
<a class="app" style="position:relative">下载App
            <div class="xia_zai_kuang" style="position:absolute">
                <img  class="xia_zai" src="download.png" >
                <div class="word1">
                    小米商城APP
                </div>
            </div>
        </a>
大舅乌鸡蛋
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用Python进行页面开发——CSS
weixin_63994459的博客
07-15 2771
text-transform对象中的文本的大小写capitalize(首字母)|uppercase大写|lowercase小写*text-decoration字体画线none无、underline下画线，line-through贯穿线。区域外的部分是透明的。rect(上-右-下-左)如cliprect(auto50px20pxauto);font-stretch[了解]文字的拉伸是相对于浏览器显示的字体的正常宽度（大部分浏览器不支持）。...
python web开发(三): CSS样式
orangerfun的博客
06-02 1258
如下代码，其中style参数就可看成CSS，主要作用是修改对象的样式，使得网页更加美观styleheight100pxstylecolorred
python爬虫学习笔记-CSS(大致了解)
weixin_36058228的博客
01-20 2121
CSS中文译作“层叠样式表”或者是“级联样式表”，是用于控制网页外观处理并允许将网页的表现与内容分离的一种标记性语言，CSS不需要编译,可以直接由浏览器执行(属于浏览器解释型语言)，是Web网页开发技术的重要组成部分。那么接下来，继续看下，使用CSS有什么好处吧。使用CSS样式可以有效地对页面进行布局，更加灵活多样。使用CSS样式可以对页面字体、颜色、背景和其他效果实现精确控制，同时对它们的修改和控制变得更加快捷，更加强大。站点中所有的网页风格都使用一个CSS文件进行统一控制，达到一改全改。
python笔记（二十一）：CSS
baikai666的博客
08-24 341
CSS 指层叠样式表 (CascadingStyleSheets)样式定义如何显示HTML 元素样式通常存储在样式表中把样式添加到HTML中，是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在CSS 文件中多个样式定义可层叠为一。
python爬虫中的数据分析------css选择器详解
m0_74459049的博客
04-18 2029
python爬虫中的数据分析------css选择器详解
使用 Flask 部署 PyTorch聊天机器人_css_python_html_JavaScript_代码_下载
06-18
这提供了 2 个部署选项： 使用 jinja2 模板在 Flask 应用程序中部署 仅提供 Flask 预测 API。使用的 html 和 javascript 文件可以包含在任何前端应用程序中（只需稍作修改），然后可以完全独立于 Flask 应用程序...
游戏化音乐和科技教学工具_JavaScript_css_python_代码_下载
06-16
通用配置（用于 js、python 等，来自单个文件） 使用python生成会话ID？ 监控界面（观察用户在手机上的另一个屏幕上看到的内容） 将 matomo 配置添加到 config.py 添加脉冲冲突规则 单击后，运行按钮将变为重置/重新...
Python_Parser
05-19
Python_Parser 学习python
从任何查询中查找YouTube的热门推荐_CSS_Python_下载.zip
04-23
从任何查询中查找YouTube的热门推荐_CSS_Python_下载.zip
python_programs
03-15
众所周知，python通用编码语言意味着与HTML，CSS和JavaScript不同，它可以用于Web开发之外的其他类型的编程和软件开发。 其中包括后端开发，软件开发，数据科学和编写系统脚本等。 要理解这种语言，我们需要从基础上...
Python Web（五）CSS介绍
qq_45187774的博客
08-15 124
CSS：层叠样式表，它是用来美化页面的一种语言-所谓的盒子模型就是把html页面的元素看作一个矩形盒子，矩形盒子是由内容（content）、页边距（padding）、边距（border）、外边距（margin）四部分组成。
Python学习笔记-前端-CSS(一)
大多博客仅为学习笔记使用
05-12 235
CSS简介 CSS的注释 CSS所有选择器 选择器优先级
CSS（层叠样式表）基础知识
Paradiser
07-06 2693
CSS 指层叠样式表 (Cascading Style Sheets)。样式定义如何显示 HTML 元素。它通常存储在样式表中，把样式添加到 HTML 4.0 中，解决内容与表现分离的问题。 当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？ 一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。 浏览器缺省设置外部样式表内部样
python如何解析css样式
zhangzhechun的专栏
07-24 302
与其他 CSS 解析库相比，tinycss2 具有更快的解析速度和更低的内存占用，同时支持 CSS3 和 CSS4 标准中的大多数特性。需要注意的是，tinycss2 库虽然支持大多数 CSS3 和 CSS4 标准中的特性，但仍有一些未实现的功能，例如某些伪元素和伪类。该代码使用 parse_stylesheet() 函数解析 CSS 样式表，并遍历解析结果打印出每个选择器和声明的内容。该代码使用 parse_declaration_list() 函数解析 CSS 声明列表，并打印出每个声明的名称和值。
css选择器在python中如何使用
最新发布
qq_40910788的博客
01-12 466
其中我们要采集的是a标签中的文字以及url，而包含我们要采集整体内容的标签是外层的ul标签，ul标签的class就是选择器要用到的内容，ctrl+f，检查此样式是否唯一。css选择器整理：https://blog.csdn.net/qq_40910788/article/details/84842951。然后向下一级指定获取的标签 li 再下一级是 a，这里都是获取标签，标签无需加任何修饰。如果唯一，那么我们直接使用选择选择此样式得到的结果就是这个整体的ul。1.F12或右键查看网页源代码确定采集目标。
【Python Web】Flask框架（三）CSS案例应用及样式模板的使用
qq_51670115的博客
09-16 2884
css，快速了解css，应用css的几种方式，在flask中应用，页面布局，模板+CSS+构建页面，小技巧，BootStrap
【Python】爬虫-----数据解析之CSS解析
CNSamRol的博客
02-17 5000
如何使用CSS解析数据？ 1.导入所需模块 import parsel 2.把要解析的数据转化为Selector对象 selector = parsel.Selector(要解析的内容) 3.调用css函数输入解析规则 定位class里的h1，并拿到它里面的内容: selector.css('.bookname h1::text').get() 定位id，并拿到它里面的内容: selector.css('#content::text').getall() #getall()
pythoncss50使用教程_Python学习（二十） —— 前端之CSS
weixin_39662432的博客
02-20 432
转载自http://www.cnblogs.com/liwenzhou/p/7999532.html一、CSS介绍CSS(CascadingStyleSheet，层叠样式表)定义如何显示HTML元素。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化(渲染)。二、CSS语法1.CSS实例每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。2....
Pycharm超好用插件集合，编写代码更高效
xiaoxianerqq的专栏
02-25 9773
序: PyCharm插件安装 File—>Settings—>Plugins进行安装插件，然后只需要重新启动IEDA即可。 1 2 3 开始介绍 1、Background Image Plus 该插件的安装只需要按照上面的方式即可。该插件是用来设置IDEA和PyCharm的背景颜色。 让自己编写代码的时候眼睛舒适~ 安装好之后重启该界面，然后点击View–>Set Background Image选择自己喜欢的照片即可，还可以调节其透明度。具体如图所示： 2、Key .
python CSS_SELECTOR
09-05
在 Python 中，你可以使用 BeautifulSoup 或 Selenium 等库来解析 HTML 并使用 CSS_SELECTOR 进行元素定位。 以 BeautifulSoup 为例，你可以使用 `select` 方法来使用 CSS_SELECTOR。例如： ```python from bs4 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值