会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 132989个问题

/* 顶部图片隐藏 */
.header{
    width: 100%;
    height: 100%;
    display: none;
}
/* 黑色导航 */
.nav{
    width: 100%;
    height: 40px;
    background-color:#333;
    

}
/* 居中div */
.nav-center{
    width: 1226px;
    height: 100%;
    margin: 0 auto;
}
/* a的字体颜色 */
a{
    color: #b0b0b0;
}
/* 鼠标悬停时字体颜色 */
.nav-center a:hover{
    color: #fff;
}
/* 左侧li浮动 定位*/
.nav-left>li{
    float: left;
    font-size: 12px;
    line-height: 40px;
    position: relative;
}
/* 右侧li浮动 定位*/
.nav-right>li{
    float: right;
    font-size: 12px;
    line-height: 40px;
    position: relative;
}
/* span竖杠(|)的外边距 */
.nav span{
    margin: 0 3.6px;
    color: #424242;
}
/* 购物车:大小 颜色 外边距 */
.cart{
    width: 120px;
    height: 40px;
    background: #424242;
    margin-left: 20px;
}
/* 购物车鼠标悬停时背景颜色 */
.cart:hover{
    background: #fff;
}
/* 购物车鼠标悬停时a的的颜色*/
.cart:hover>a{
    color: #ff6700;
}
/* 购物车下拉列表的属性,1:相对于右侧li定位,隐藏下拉列表,所有属性:all .3s的过度 */
.cart>.cart-list{
    width: 316px;
    /* 高度设置为0隐藏下拉列表 */
    height: 0px;
    background:#fff;
    position: absolute;
    right: 0px;
    top: 40px;
    box-shadow: 0 2px 10px #aaa;
    color: #424242;
    /* 下拉列表的文字溢出部分隐藏 */
    overflow: hidden;
    /* 过度:所有属性 .3s秒速度显示 */
    transition: all .3s;
    /* 在白色导航上边显示出来 */
    z-index: 1;
}
/* 鼠标悬停时显示下拉列表,字体居中 */
.cart:hover>.cart-list{
    height: 100px;
    line-height: 100px;
}
/* app下载的属性中的二维码框设置 */
.app>.QRcode{
   width: 124px;
    /* 高度设置为0隐藏下拉列表 */
   height: 0px;
   background-color:#fff;
   box-shadow: 0 1px 5px #aaa;
   /* 相对于左侧li定位 */
   position: absolute;
   top: 40px;
   left: 50%; 
   margin-left: -66px; 
   /* 下拉列表的文字溢出部分隐藏 */
   overflow: hidden;
   /* 过度:所有属性 .3s秒速度显示 */
   transition:all .3s;
   /* 在白色导航上边显示出来 */
   z-index: 1;
}
/* 二维码图片的设置 */
.QRcode>.QRcode-img{
    width: 90px;
    height: 90px;
    margin: 18px 0 0;
}
/* 二维码框中字体的设置 */
.QRcode>p{
    font-size: 14px;
    line-height: 1;
}
/* 鼠标悬停二维框显示 */
.app:hover>.QRcode{
    height: 148px;
}
/* 小三角的设置:绘制特殊图形的方式写 */
.sanjiao{
    width: 0;
    height: 0;
    border-bottom: 8px solid #fff;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    /* 定位小三角并且隐藏 */
    position: absolute;
    left: 17px;
    top: 32px;
    display: none;
}
/* 鼠标悬停显示小三角 */
.app:hover>.sanjiao{
    display: block;
}
/* 白色导航部分 */
.white-nav{
    width: 100%;
    height: 100px;
    position: relative;
}
/* 居中部分 */
.white-wrap{
    width: 1226px;
    height: 100px;
    margin: 0 auto;
}
/* logo部分 */
.logo-mi{
    width: 55px;
    height: 55px;
    background: #ff6700;
    float: left;
    margin-top: 22.5px;
    /* 定位加隐藏 */
    position: relative;
    overflow: hidden;
    
}
/* 中间文字导航部分 */
.white-nav-center{
    width: 876px;
    height:100px;
    float: left;
}
/* 搜索框部分 */
.nav-input{
    width: 295px;
    height:100px;
    background: blue;
    float: right;
}
/* logo的图片大小 */
.logo-mi>a>img{
    width: 100%;
    height: 100%;
    /* 定位加过渡*/
    position: absolute;
    top: 0;
    transition: all .3s;
}
/* logo定位的设置 */
.mi-logo{
    top: 0;
    left: 0px;
}
/* logo-mi-home定位的设置 */
.mi-home{
    top: 0;
    left: -55px;
}
.logo-mi:hover>a>.mi-home{
    left: 0px;
}
.logo-mi:hover>a>.mi-logo{
    left: 55px;
}
/* 白色导航中间部分 浮动加字体间距 */
.white-nav-center ul>li{
    float: left;
    line-height: 100px;
    
}
/* 设置a的字体 颜色 内边距 */
.white-nav-center>ul>li>a{
   font-size: 16px;
   color: #333;
   padding:0 10px;
}
/* logo右边图标的调整 */
.white-nav-center>ul>li:first-child{
    margin-top: 9px;
    margin-left: 20px;
    margin-right: 40px;
}
/* 鼠标悬停a的文字变橘色 */
.white-nav-center>ul>li>a:hover{
    color: #ff6700;
}
/* 白色导航栏的下拉列表的属性 */
.pull-down{
    width: 100%;
    height: 230px;
    background: #fff;
    border-top: 1px solid #e0e0e0;
    position: absolute;
    top: 100px;
    left: 0;
    box-shadow: 0 1px 2px #aaa;
    box-sizing: border-box;
    display: none;
    transition: all .3s ;
    
}
.pull-down-center{
    width: 1226px;
    height: 100%;
    background-color: #fff;
    margin: 0 auto;
}
.img-box{
    width: 204px;
    height: 110px;
    border-right:2px solid #bdb8b8 ;
    margin-top: 30px;
    margin-bottom: 15px;
    
}
.img-box img{
    width: 160px;
    height: 110px;
}
.pull-down-center p{
    font-size: 12px;
    line-height: 20px;
    
}
.pull-down-center p:nth-of-type(1){
    color: #ff6700;
}
.pull-down-center p:nth-of-type(2){
    color: #333;
}
.white-nav li:hover>.pull-down{
    display: block;
   
}

白色导航栏的li下拉列表不显示过渡属性

WEB前端全系列/第一阶段:HTML5+CSS3模块/CSS3新特性 23176楼
JAVA 全系列/第六阶段:项目管理与SSM框架/Mybatis 23177楼
人工智能/第十二阶段:深度学习-图像识别原理/古典目标检测 23178楼
JAVA 全系列/第六阶段:项目管理与SSM框架/Mybatis 23179楼
JAVA 全系列/第十三阶段:高性能数据处理、NoSQL、分库分表/Redis 23181楼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Margin布局</title>
    <style>
        .box{
            width: 100%;
            height: 1155px;
            background-color: aqua;
        }
        .wrap{
            width: 1240px;
            height: 1150px;
            background-color: red;
            /* (父元素宽度-子元素宽度)/2 */
            margin: 0 auto;
        }
        .wrap>div{
            width: 303px;
            height: 375px;
            background-color: seagreen;
            float: left;
            margin-top: 10px;
            margin-right: 9px;
        }
        .four{
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="wrap">
            <div></div>
            <div></div>
            <div></div>
            <div class="four"></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</body>
</html>

image.png老师我想请问一下在这个布局下我想测试第四个测试是否被挤下一行的第一个,但是在内联样式设置第四个div背景为粉红色为什么没有显示出来呢?    

WEB前端全系列/第一阶段:HTML5+CSS3模块/初识CSS 23184楼
Python 全系列/第一阶段:Python入门/Python入门(动画版) 23186楼
JAVA 全系列/第六阶段:项目管理与SSM框架/Mybatis 23187楼

# coding=utf-8
"""开发记事本软件的菜单"""

from tkinter.filedialog import *
from tkinter.colorchooser import *
from tkinter import *


class Application(Frame):

    def __init__(self, master=None):
        super().__init__(master)
        self.master = master
        self.textpad = None
        self.pack()
        self.createWidget()

    def createWidget(self):
        # 创建主菜单栏
        menubar = Menu(root)

        # 创建主菜单三个
        menuFile = Menu(menubar)
        menuEdit = Menu(menubar)
        menuHelp = Menu(menubar)

        # 将三个主菜单加入主菜单栏中
        menubar.add_cascade(text="文件[F]", menu=menuFile)
        menubar.add_cascade(text="编辑[E]", menu=menuEdit)
        menubar.add_cascade(text="帮助[H]", menu=menuHelp)

        # 为文件[F]增加子菜单项
        menuFile.add_command(label="新建", accelerator="ctrl+n", command=self.newfile)
        menuFile.add_command(label="打开", accelerator="ctrl+o", command=self.openfile)
        menuFile.add_command(label="保存", accelerator="ctrl+s", command=self.savefile)
        menuFile.add_separator()  # 添加分行符
        menuFile.add_command(label="退出", accelerator="ctrl+q", command=self.exit)

        # 将主菜单添加到窗口中
        root["menu"] = menubar

        # 增加快捷键的处理
        root.bind("<Control-n>", lambda event: self.newfile())
        root.bind("<Control-o>", lambda event: self.openfile())
        root.bind("<Control-s>", lambda event: self.savefile())
        root.bind("<Control-q>", lambda event: self.exit())

        # 文本编辑区
        self.textpad = Text(root, width=50, height=30)
        self.textpad.pack()

        # 创建上下菜单
        self.contextMenu = Menu(root)
        self.contextMenu.add_command(label="背景颜色", command=self.openAskColor)

        # 为右键绑定事件
        root.bind("Button-3", self.createContextMenu)

    def newfile(self):
        self.textpad.delete("1.0", "end")  # 把text中的所有的内容清空
        self.filename = asksaveasfilename(title="另存为", initialfile="未命名.txt",
                                          filetypes=[("文本文档", "*.txt")], defaultextension=".txt")
        self.savefile()

    def openfile(self):
        self.textpad.delete("1.0", "end")  # 把text中的所有的内容清空
        with askopenfile(title="打开文本文件") as f:
            self.textpad.insert(INSERT, f.read())
            self.filename = f.name

    def savefile(self):
        self.textpad.delete("1.0", "end")  # 把text中的所有的内容清空
        with open(self.filename, "w") as f:
            c = self.textpad.get(1.0, END)
            f.write(c)

    def exit(self):
        root.quit()

    def openAskColor(self):
        s1 = askcolor(color="red", title="选择背景色")
        self.textpad.config(bg=s1[1])
        pass

    def createContextMenu(self, event):
        # 菜单在鼠标右键单击的座标处显示
        self.contextMenu.post(event.x_root, event.y_root)


if __name__ == '__main__':
    root = Tk()
    root.geometry("500x400+200+300")
    root.title("私用记事本")
    app = Application(master=root)
    root.mainloop()

屏幕截图 2021-03-29 190337.png

Python 全系列/第二阶段:Python 深入与提高/GUI编程(隐藏) 23188楼

"""开发画图软件的菜单"""

from tkinter.colorchooser import *
from tkinter import *

# 窗口的宽度和高度
win_width = 900
win_height = 450


class Application(Frame):

    def __init__(self, master=None):
        super().__init__(master)
        self.master = master
        self.bgcolor = "#000000"
        self.x = 0
        self.y = 0
        self.fgcolor = "#ff0000"
        self.lastDraw = 0  # 表示最后绘制的图形的id
        self.startDrawFlag = False
        self.pack()
        self.createWidget()

    def createWidget(self):
        # 创建绘图区
        self.drawpad = Canvas(root, width=win_width, height=win_height * 0.9, bg=self.bgcolor)
        self.drawpad.pack()

        # 创建按钮
        btn_start = Button(root, text="开始", name="start")
        btn_start.pack(side="left", padx="10")
        btn_pen = Button(root, text="笔画", name="pen")
        btn_pen.pack(side="left", padx="10")
        btn_rect = Button(root, text="矩形", name="rect")
        btn_rect.pack(side="left", padx="10")
        btn_clear = Button(root, text="清屏", name="clear")
        btn_clear.pack(side="left", padx="10")
        btn_erasor = Button(root, text="橡皮擦", name="erasor")
        btn_erasor.pack(side="left", padx="10")
        btn_line = Button(root, text="直线", name="line")
        btn_line.pack(side="left", padx="10")
        btn_lineArrow = Button(root, text="箭头直线", name="lineArrow")
        btn_lineArrow.pack(side="left", padx="10")
        btn_color = Button(root, text="颜色", name="color")
        btn_color.pack(side="left", padx="10")

        # 事件处理
        btn_pen.bind_class("<ButtonRelease-1>", self.eventManager)
        self.drawpad.bind("<ButtonRelease-1>", self.stopDraw)

        # 增加颜色切换快捷键处理
        root.bind("<KeyPress-r>", self.kuaijiejian)
        root.bind("<KeyPress-g>", self.kuaijiejian)
        root.bind("<KeyPress-y>", self.kuaijiejian)

    def eventManager(self, event):
        name = event.widget.winfo_name()
        print(name)
        if name == "line":
            self.drawpad.bind("<B1-Motion>", self.myline)
        elif name == "lineArrow":
            self.drawpad.bind("<B1-Motion>", self.mylineArrow)

        elif name == "rect":
            self.drawpad.bind("<B1-Motion>", self.myRect)

        elif name == "pen":
            self.drawpad.bind("<B1-Motion>", self.myPen)

        elif name == "erasor":
            self.drawpad.bind("<B1-Motion>", self.myErasor)

        elif name == "clear":
            self.drawpad.delete("all")

        elif name == "color":
            c = askcolor(color=self.fgcolor, title="选择笔画颜色")
            self.fgcolor = c[1]

    def stopDraw(self, event):
        self.startDrawFlag = False
        self.lastDraw = 0

    def startDraw(self, event):
        self.drawpad.delete(self.lastDraw)

        if not self.startDrawFlag:
            self.startDrawFlag = True
            self.x = event.x
            self.y = event.y

    def myline(self, event):
        self.startDraw(event)
        self.lastDraw = self.drawpad.create_line(self.x, self.y, event.x, event.y, fill=self.fgcolor)

    def mylineArrow(self, event):
        self.startDraw(event)
        self.lastDraw = self.drawpad.create_line(self.x, self.y, event.x, event.y, arrow=LAST, fill=self.fgcolor)

    def myRect(self, event):
        self.startDraw(event)
        self.lastDraw = self.drawpad.create_rectangle(self.x, self.y, event.x, event.y, outline=self.fgcolor)

    def myPen(self, event):
        self.startDraw(event)
        self.drawpad.create_line(self.x, self.y, event.x, event.y, fill=self.fgcolor)
        self.x = event.x
        self.y = event.y

    def myErasor(self, event):
        self.startDraw(event)
        self.drawpad.create_rectangle(event.x-4, event.y-4, event.x+4, event.y+4, fill=self.bgcolor)
        self.x = event.x
        self.y = event.y

    def kuaijiejian(self, event):
        if event.char == "r":
            self.fgcolor = "#ff0000"
        elif event.char == "g":
            self.fgcolor = "#00ff00"
        elif event.char == "y":
            self.fgcolor = "#ffff00"


if __name__ == '__main__':
    root = Tk()
    root.geometry(str(win_width) + "x" + str(win_height) + "+200+300")
    root.title("画图软件项目")
    app = Application(master=root)
    root.mainloop()

老师,这代码能运行,但是,点击组件按钮画画,没反映,可能事件获取有问题,还是什么的?

Python 全系列/第二阶段:Python 深入与提高/GUI编程(隐藏) 23189楼
JAVA 全系列/第二十一阶段:分布式医疗云平台/系统管理前后端开发(旧) 23190楼

课程分类

百战程序员微信公众号

百战程序员微信小程序

©2014-2025百战汇智(北京)科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园
网站维护:百战汇智(北京)科技有限公司
京公网安备 11011402011233号    京ICP备18060230号-3    营业执照    经营许可证:京B2-20212637