Python 生成 文件目录网页 下载超链接和打开 笔记

已于 2024-02-27 10:54:49 修改
阅读量1k 收藏 10
点赞数 6
文章标签： python 开发语言
于 2024-01-19 14:26:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/PieroPc/article/details/135695873
版权

1. 一键生成 文件目录网页 下载超链接

 1.1 图：

1.2 代码：

（由Ai生成部分，再改成适合自己用）

index.py

# -*- coding: utf-8 -*-
import os
# import sys

path = 'E:\BIT\public\software\\'
# path = path = os.getcwd()
# path = os.getcwd().replace('\\','/')

# current_directory = os.path.dirname(os.path.abspath(__file__))
# root_path = os.path.abspath(os.path.dirname(current_directory) + os.path.sep + ".")
# sys.path.append(root_path)
# path = sys.path[0]+"\\"
# print(sys.path[0])
print(path)
f = open("本地目录.html", "w", encoding="utf-8")
f.write('<!DOCTYPE html><html lang="zh-CHS"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style> a { color: #333; text-decoration: none}a:hover { color: #777}</style></head>\n')
f.write('<body style="padding: 50px;">\n')
f.write('<pre>\n') 
f.write('<h1 style="color: brown;">\n')
f.write('软件目录\n')
f.write('</h1>\n')
f.write('<code>\n')
f.write('<br>\n')

for root, dirs, files in os.walk(path):      
    level = root.replace(path, '').count(os.sep)
    indent = '----' * 4 * (level)
    ba =os.path.basename(root)
    print(ba)
    f.write('{}<b style="color: chocolate;">{}</b>\n'.format(indent, os.path.basename(root)))
    subindent = '<a href="'  * 1 * (level + 1) + ba
    for file in files:
        print(file)
        f.write('{}/{}">{}</a>\n'.format(subindent, file, file))
    f.write('<br>\n')
f.write('</code>\n')
f.write('</pre>\n')
f.write('</body>\n')
f.write('</html>\n')

1.3 二改：

f = open("index.html", "w", encoding="utf-8")


subindent = '<a href="software/'  * 1 * (level + 1) + ba

# software/ 超链接地址加目录
# index.html 默认自己找


方便放入静态包里访问 http://127.0.0.1:3000/sofware

2. 打包成单个exe 文件

2.1 命令如下：

pip install pyinstaller  

# 安装最新依赖包

pyinstaller -F --i logo.ico index.py

# -F 是打包成单个文件 --i xx.ico 换上自己的logo图标

2.2 ico 图标由 icofx 软件直接制成

3. 一键生成 文件目录网页 升级版v2 

3.1 图：

导航 用静态写入，在本页通过文件目录作ID 跳转

3.2 代码：

注：图片名：软件+扩展名+.png

底部的js:没有找到图片时，用指定了text.png为替换

# -*- coding: utf-8 -*-
import os
# import sys

path = 'E:\BIT_Web_2024\public\software\\'

print(path)
f = open("index.html", "w", encoding="utf-8")
f.write('<!DOCTYPE html><html lang="zh-CHS"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style> a { color: #333; text-decoration: none}a:hover { color: #777}</style>\n')
f.write('<link rel="stylesheet" href="css/base.css">\n')
f.write('<link rel="stylesheet" href="css/index.css">\n')
f.write('<style>.img-a {object-fit: cover;object-position: center;}</style>\n')
f.write('</head>\n')
f.write('<body style="padding: 30px;">\n')
f.write('<div>\n') 
f.write('<div class="recommed" style="position: fixed;">\n')
f.write('<h3 style="color: brown;">软件目录</h3><ul>\n')
f.write('<li><a href="#系统辅助">系统辅助</a></li>\n')
f.write('<li><a href="#电脑维护">电脑维护</a></li>\n')
f.write('<li><a href="#办公软件">办公软件</a></li>\n')
f.write('<li><a href="#设备驱动">设备驱动</a></li>\n')
f.write('<li><a href="#软件激活">软件激活</a></li>\n')
f.write('<li><a href="#安全防护">安全防护</a></li>\n')
f.write('<li><a href="#图像软件">图像软件</a></li>\n')
f.write('<li><a href="#硬件测试">硬件测试</a></li>\n')
f.write('<li><a href="#网络浏览">网络浏览</a></li>\n')
f.write('<li><a href="#股票网银">股票网银</a></li>\n')
f.write('<li><a href="#U盘制作">U盘制作</a></li>\n')
f.write('<li><a href="#编程软件">编程软件</a></li>\n')
f.write('<li><a href="#数据恢复">数据恢复</a></li>\n')
f.write('<li><a href="#视频制作">视频制作</a></li>\n')
f.write('<li><a href="#网店运营">网店运营</a></li>\n')
f.write('<li><a href="#软件问题">软件问题</a></li>\n')
f.write('</ul></div>\n')
f.write('<div class="course wrapper">\n')
f.write('<br>\n')

for root, dirs, files in os.walk(path):      
    level = root.replace(path, '').count(os.sep)
    indent = '----' * 4 * (level)
    ba =os.path.basename(root)
    print(ba)
    f.write('{}<div class="hd"><h3 id="{}" style="color: chocolate;">{}</h3></div><div class="bd"><ul>\n'.format(indent, os.path.basename(root), os.path.basename(root)))
    subindent = '<li><a href="software/'  * 1 * (level + 1) + ba
    for file in files:
        print(file)
        f.write('{}/{}"><div class="pic"><img class="img-a" src="img/soft/{}.png" onerror="replaceImage(this);"></div><div class="text"><h4>{}</h4><p><span>下载</span>.<i>1125</i>次数</p></div></a></li>\n'.format(subindent, file, file, file))
    f.write('</ul></div><br>\n')
f.write('</div>\n')
f.write('</div>\n')
f.write('<script>function replaceImage(img) {img.onerror = null;img.src = "img/soft/test.png"; }</script>\n')
f.write('</body>\n')
f.write('</html>\n')

css 代码：

 在根目 那个li  class="db hoye-hide" 聊天第一项目

/* base.css 基础公共样式：清除默认样式 + 设置通用样式*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
 
li {
    list-style: none;
}
 
body {
    font: 14px/1.5 "Microsoft Yaher", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
    color: #333;
}
 
a {
    color: #333;
    text-decoration: none;
}

/* index.css 首页样式 */
/* 版心 */
.wrapper {
    margin: 0 auto;
    width: 1200px;
}
 
body {
    background-color: #f3f5f7;
}
 
/* 头部区域 */
.header {
    height: 100px;
    background-color: #fff;
}
 
.header .wrapper {
    padding-top: 29px;
    display: flex;
}
 
/* logo */
.logo a {
    display: block;
    width: 195px;
    height: 41px;
    background-image: url(../img/logo.png);
    font-size: 0;
}
 
/* 导航 */
.nav {
    margin-left: 102px;
}
 
.nav ul {
    display: flex;
}
 
.nav li {
    margin-right: 24px;
}
 
.nav li a {
    display: block;
    padding: 6px 8px;
    line-height: 27px;
    font-size: 19px;
}
 
/* active 类选器 表示默认选中的a */
.nav li .active,
.nav li a:hover{
    border-bottom: 2px solid #00a4ff;
}

.search {
    display: flex;
    margin-left: 64px;
    padding-left: 19px;
    padding-right: 12px;
    width: 412px;
    height: 40px;
    background-color: #f3f5f7;
    border-radius: 20px;
}

.search input {
    flex: 1;
    border: 0;
    background-color: transparent;
    /* 去掉表单控件的焦点框 */
    outline: none;
}

/* 父级是flex布局，子级变弹性盒子：加宽高生效 */
.search a {
    width: 16px;
    height: 16px;
    background-image: url(../img/search.png);
    align-self: center;
}

/* 用户 */
.user {
    margin-left: 32px;
    margin-top: 4px;
}

.user img {
    margin-right: 7px;
    /* vertical-align 行内块和行内垂直方向对方方式 */
    vertical-align: middle;
}

.user span {
    font-size: 16px;
    color: #666;
}

/* banner 区域 */
.banner {
    height: 420px;
    background-color: #0092cb;
}

.banner .wrapper {
    display: flex;
    justify-content: space-between;
    height: 420px;
    background-image: url(../img/banner2.png);
}

/* 侧导航 */
.banner .left {
    padding: 3px 20px;
    width: 191px;
    height: 420px;
    background-color: rgba(0, 0, 0, 0.42);
}

.banner .left a {
    /*  */
    display: block;
    height: 46px;
    /* background-image: url(../img/); */
    line-height: 46px;
    font-size: 16px;
    color: #fff;
}

.banner .left a:hover {
    background-image: url(../img/right-hover.png);
    color: #00a4ff;
}

/* 课程表 */
.banner .right {
    margin-top: 60px;
    width: 218px;
    height: 305px;
    background-color: #209dd5;
    border-radius: 10px;
}

.banner .right h3 {
    margin-left: 14px;
    height: 48px;
    line-height: 48px;
    font-size: 15px;
    color: #fff;
    font-weight: 400;
}

.banner .right .content {
    padding: 14px;
    height: 257px;
    background-color: #fff;
    border-radius: 10px;
}

.banner .right dl {
    margin-bottom: 12px;
    border-bottom: 1px solid #e0e0e0;
}

.banner .right dt {
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
}

.banner .right dd {
    margin-bottom: 8px;
    font-size: 12px;
    line-height: 16px;
}

.banner .right dd span {
    color: #00a4ff;
}

.banner .right dd strong {
    color: #7d7d7d;
    font-weight: 400;
}

.banner .right a {
    display: block;
    height: 32px;
    background-color: #00a4ff;
    text-align: center;
    font-size: 32xp;
    color: #fff;
    line-height: 32px;
    border-radius: 15px;
}

/* 精品推荐 */
.recommed {
    display: flex;
    margin-top: 11px;
    padding: 0 20px;
    height: 40px;
    border-radius: 5px;
    background-color: #FFF;
    box-shadow: 0px 1px 2px 0px rgba(211, 211, 211, 0.2);
    line-height: 40px;
}
.recommed h3 {
    font-size: 18px;
    color: #00a4ff;
    font-weight: 400;
}

.recommed ul {
    flex: 1;
    display: flex;
}

.recommed ul li a {
    padding: 0 8px;
    border-right: 1px solid #e0e0e0;
    font-size: 14px;
}

.recommed li .active,
.recommed li a:hover{
    border-bottom: 1px solid #00a4ff;
}

.recommed ul li:last-child a {
    border-right: 0;
}

.recommed .modify {
    font-size: 16px;
    color: #00a4ff;
}

/* 推荐课程 */
.course {
    margin-top: 15xp;
}

/* 标题 公共类 与其他区域共用 */
.hd {
    display: flex;
    justify-content: space-between;
    height: 60px;
    line-height: 60px;
}

.hd h3 {
    font-size: 21px;
    font-weight: 400;
}

.hd .more {
    padding-right: 20px;
    background: url(../img/more.png) no-repeat right center; 
    font-size: 14px;
    color: #999;
}

/* 课程内容 - 公共类 */
.bd ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.bd li {
    /* display: block; */
    white-space: normal; /*设置为自动换行*/
    margin-bottom: 14px;
    width: 228px;
    height: 271px;
    border-radius: 10px;
    text-align: center;
    /* background-color: pink; */
    background-color: #fff;
    white-space: pre-wrap;  /*设置为保留原始格式，并自动换行*/
    overflow: hidden; /* 隐藏超出部分 */
}

.bd li .pic {
    height: 156px;
}
.bd li .pic img {
    width: 228px;
    height: 156px;
}

.bd li .pic img:hover {
    width: 248px;
    height: 166px;
    position: relative;
    left: -10px;
    /* top: -35px; */
    z-index: 999;
}

.bd li .text {
    padding: 20px;
    height: 115px;
    background-color: #fff;
    white-space: pre-wrap;  /*设置为保留原始格式，并自动换行*/
}

.bd li .text h4 {
    width: 200px;
    margin-bottom: 13px;
    height: 46px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
}

.bd li .text p {
    font-size: 14px;
    line-height:  20px;
    color: #999;
}

.bd li .text p span {
    color: #fa6400;
}

.bd li .text p i {
    font-style: normal;
}

.hoye-hidden {
    display: none;
    /* 隐藏元素  元素会被完全移除，不再占据空间，也不可交互。*/
}

4. 一键生成 文件目录网页 升级版v2.1

4.1 py代码：

# -*- coding: utf-8 -*-
import os
# import sys

path = 'E:\BIT_Web_2024\public\software\\'

print(path)
f = open("index.html", "w", encoding="utf-8")
f.write('<!DOCTYPE html><html lang="zh-CHS"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style> a { color: #333; text-decoration: none}a:hover { color: #777}</style>\n')
f.write('<link rel="stylesheet" href="css/base.css">\n')
f.write('<link rel="stylesheet" href="css/index.css">\n')
f.write('<style>.img-a {object-fit: cover;object-position: center;}</style>\n')
f.write('</head>\n')
f.write('<body style="padding: 30px;">\n')
f.write('<div>\n') 
f.write('<div class="recommed" style="position: fixed;top: 0;">\n')
f.write('<h3 style="color: brown;">软件目录</h3><ul>\n')
f.write('<li><a href="#系统辅助">系统辅助</a></li>\n')
f.write('<li><a href="#电脑维护">电脑维护</a></li>\n')
f.write('<li><a href="#办公软件">办公软件</a></li>\n')
f.write('<li><a href="#设备驱动">设备驱动</a></li>\n')
f.write('<li><a href="#软件激活">软件激活</a></li>\n')
f.write('<li><a href="#安全防护">安全防护</a></li>\n')
f.write('<li><a href="#图像软件">图像软件</a></li>\n')
f.write('<li><a href="#硬件测试">硬件测试</a></li>\n')
f.write('<li><a href="#网络浏览">网络浏览</a></li>\n')
f.write('<li><a href="#股票网银">股票网银</a></li>\n')
f.write('<li><a href="#U盘制作">U盘制作</a></li>\n')
f.write('<li><a href="#编程软件">编程软件</a></li>\n')
f.write('<li><a href="#数据恢复">数据恢复</a></li>\n')
f.write('<li><a href="#视频制作">视频制作</a></li>\n')
f.write('<li><a href="#网店运营">网店运营</a></li>\n')
f.write('<li><a href="#软件问题">软件问题</a></li>\n')
f.write('</ul></div>\n')
f.write('<div class="course wrapper">\n')
f.write('<br>\n')
# python取字符串前几位以“-”为结束
def get_string_before_dash(s):
    # 找到字符串中第一个"-"的位置
    dash_index = s.find('-')
    # 如果找到了"-"，返回它之前的字符串部分，否则返回原字符串
    return s[:dash_index] if dash_index != -1 else s
i = 0
for root, dirs, files in os.walk(path):      
    level = root.replace(path, '').count(os.sep)
    indent = '----' * 4 * (level)
    ba =os.path.basename(root)
    print(ba)
    i +=1
    f.write('{}<div class="hd"><h3 id="{}" style="color: chocolate;">{}</h3></div><div class="bd bdx{}"><ul>\n'.format(indent, os.path.basename(root), os.path.basename(root),i))
    subindent = '<li><a href="software/'  * 1 * (level + 1) + ba
    for file in files:
        print(file)
        f.write('{}/{}"><div class="pic"><img class="img-a" src="img/soft/{}.png" onerror="replaceImage(this);"></div><div class="text"><h4>{}</h4><p><span>下载</span>----<i>{}</i></p></div></a></li>\n'.format(subindent, file, get_string_before_dash(file), file,os.path.basename(root)))
    f.write('</ul></div><br>\n')
f.write('</div>\n')
f.write('</div>\n')
f.write('<script>function replaceImage(img) {img.onerror = null;img.src = "img/soft/test.png"; }</script>\n')
f.write('</body>\n')
f.write('</html>\n')

注：1.修复 导航菜单不到顶  2.# python取字符串前几位以“-”为结束 取图片为简短文件名

3. 取消根目录文件还要手动加代码隐藏，达到一键完成

4.2 CSS 代码 index.css

/* 首页样式 */
/* 版心 */
.wrapper {
    margin: 0 auto;
    width: 1200px;
}
 
body {
    background-color: #f3f5f7;
}
 
/* 头部区域 */
.header {
    height: 100px;
    background-color: #fff;
}
 
.header .wrapper {
    padding-top: 29px;
    display: flex;
}
 
/* logo */
.logo a {
    display: block;
    width: 195px;
    height: 41px;
    background-image: url(../img/logo.png);
    font-size: 0;
}
 
/* 导航 */
.nav {
    margin-left: 102px;
}
 
.nav ul {
    display: flex;
}
 
.nav li {
    margin-right: 24px;
}
 
.nav li a {
    display: block;
    padding: 6px 8px;
    line-height: 27px;
    font-size: 19px;
}
 
/* active 类选器 表示默认选中的a */
.nav li .active,
.nav li a:hover{
    border-bottom: 2px solid #00a4ff;
}

.search {
    display: flex;
    margin-left: 64px;
    padding-left: 19px;
    padding-right: 12px;
    width: 412px;
    height: 40px;
    background-color: #f3f5f7;
    border-radius: 20px;
}

.search input {
    flex: 1;
    border: 0;
    background-color: transparent;
    /* 去掉表单控件的焦点框 */
    outline: none;
}

/* 父级是flex布局，子级变弹性盒子：加宽高生效 */
.search a {
    width: 16px;
    height: 16px;
    background-image: url(../img/search.png);
    align-self: center;
}

/* 用户 */
.user {
    margin-left: 32px;
    margin-top: 4px;
}

.user img {
    margin-right: 7px;
    /* vertical-align 行内块和行内垂直方向对方方式 */
    vertical-align: middle;
}

.user span {
    font-size: 16px;
    color: #666;
}

/* banner 区域 */
.banner {
    height: 420px;
    background-color: #0092cb;
}

.banner .wrapper {
    display: flex;
    justify-content: space-between;
    height: 420px;
    background-image: url(../img/banner2.png);
}

/* 侧导航 */
.banner .left {
    padding: 3px 20px;
    width: 191px;
    height: 420px;
    background-color: rgba(0, 0, 0, 0.42);
}

.banner .left a {
    /*  */
    display: block;
    height: 46px;
    /* background-image: url(../img/); */
    line-height: 46px;
    font-size: 16px;
    color: #fff;
}

.banner .left a:hover {
    background-image: url(../img/right-hover.png);
    color: #00a4ff;
}

/* 课程表 */
.banner .right {
    margin-top: 60px;
    width: 218px;
    height: 305px;
    background-color: #209dd5;
    border-radius: 10px;
}

.banner .right h3 {
    margin-left: 14px;
    height: 48px;
    line-height: 48px;
    font-size: 15px;
    color: #fff;
    font-weight: 400;
}

.banner .right .content {
    padding: 14px;
    height: 257px;
    background-color: #fff;
    border-radius: 10px;
}

.banner .right dl {
    margin-bottom: 12px;
    border-bottom: 1px solid #e0e0e0;
}

.banner .right dt {
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
}

.banner .right dd {
    margin-bottom: 8px;
    font-size: 12px;
    line-height: 16px;
}

.banner .right dd span {
    color: #00a4ff;
}

.banner .right dd strong {
    color: #7d7d7d;
    font-weight: 400;
}

.banner .right a {
    display: block;
    height: 32px;
    background-color: #00a4ff;
    text-align: center;
    font-size: 32xp;
    color: #fff;
    line-height: 32px;
    border-radius: 15px;
}

/* 精品推荐 */
.recommed {
    display: flex;
    margin-top: 0px;
    padding: 0 20px;
    height: 40px;
    border-radius: 5px;
    background-color: #FFF;
    box-shadow: 0px 1px 2px 0px rgba(211, 211, 211, 0.2);
    line-height: 40px;
}
.recommed h3 {
    font-size: 18px;
    color: #00a4ff;
    font-weight: 400;
}

.recommed ul {
    flex: 1;
    display: flex;
}

.recommed ul li a {
    padding: 0 8px;
    border-right: 1px solid #e0e0e0;
    font-size: 14px;
}

.recommed li .active,
.recommed li a:hover{
    border-bottom: 1px solid #00a4ff;
}

.recommed ul li:last-child a {
    border-right: 0;
}

.recommed .modify {
    font-size: 16px;
    color: #00a4ff;
}

/* 推荐课程 */
.course {
    margin-top: 15xp;
}

/* 标题 公共类 与其他区域共用 */
.hd {
    display: flex;
    justify-content: space-between;
    height: 60px;
    line-height: 60px;
}

.hd h3 {
    font-size: 21px;
    font-weight: 400;
}

.hd .more {
    padding-right: 20px;
    background: url(../img/more.png) no-repeat right center; 
    font-size: 14px;
    color: #999;
}

/* 课程内容 - 公共类 */
.bd ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.bd li {
    /* display: block; */
    white-space: normal; /*设置为自动换行*/
    margin-bottom: 14px;
    width: 228px;
    height: 271px;
    border-radius: 10px;
    text-align: center;
    /* background-color: pink; */
    background-color: #fff;
    white-space: pre-wrap;  /*设置为保留原始格式，并自动换行*/
    overflow: hidden; /* 隐藏超出部分 */
}

.bd li .pic {
    height: 156px;
}
.bd li .pic img {
    width: 228px;
    height: 156px;
}

.bd li .pic img:hover {
    width: 248px;
    height: 166px;
    position: relative;
    left: -10px;
    /* top: -35px; */
    z-index: 999;
}

.bd li .text {
    padding: 20px;
    height: 115px;
    background-color: #fff;
    white-space: pre-wrap;  /*设置为保留原始格式，并自动换行*/
}

.bd li .text h4 {
    width: 200px;
    margin-bottom: 13px;
    height: 46px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
}

.bd li .text p {
    font-size: 14px;
    line-height:  20px;
    color: #999;
}

.bd li .text p span {
    color: #fa6400;
}

.bd li .text p i {
    font-style: normal;
    color: #FFF;
    font-size: 12px;
    background-color: #ffae00;
    height: 16px;
    line-height: 16px;
    padding: 2px 4px 2px 4px;
    border-radius: 3px;
}

.bdx1 {
    display: none;
    /* 隐藏元素  元素会被完全移除，不再占据空间，也不可交互。*/
}

 5.  一键生成 文件目录网页 升级版v2.3

改下css位置，目录也自动生成

5.1 python 代码：

# -*- coding: utf-8 -*-
import os

# path = 'E:\BIT_Web_2024\public\software\\'
path = './'

print(path)
f = open("index.html", "w", encoding="utf-8")
f.write('<!DOCTYPE html><html lang="zh-CHS"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">\n')
f.write('<link rel="stylesheet" href="software/index.css">\n')
f.write('</head>\n')
f.write('<body>\n')
f.write('<div>\n') 
f.write('<div class="recommed">\n')
f.write('<h3 >软件目录</h3><ul>\n')
for root, dirs, files in os.walk(path):      
    print(os.path.basename(root))
    # 目录列表
    ml = os.path.basename(root)
    f.write('<li><a href="#{}">{}</a></li>\n'.format( ml, ml))
f.write('</ul></div>\n')
f.write('<div class="course wrapper">\n')
f.write('<br>\n')


# python取字符串前几位以“-”为结束
def get_string_before_dash(s):
    # 找到字符串中第一个"-"的位置
    dash_index = s.find('-')
    # 如果找到了"-"，返回它之前的字符串部分，否则返回原字符串
    return s[:dash_index] if dash_index != -1 else s
# 官方下载网址
net = 'https://gitee.com/pieropc/note'
i = 0
for root, dirs, files in os.walk(path):      
    ba =os.path.basename(root)
    print(ba)
    i +=1
    f.write('<div class="hd"><h3 id="{}" >{}</h3></div><div class="bd bdx{}"><ul>\n'.format(os.path.basename(root), os.path.basename(root),i))
    # subindent = '<li><a href="software/'   + ba
    for file in files:
        print(file)
        # f.write('{}/{}"><div class="pic"><img class="img-a" src="img/soft/{}.png" onerror="replaceImage(this);"></div><div class="text"><h4>{}</h4><p><i>{}</i></p></div></a></li>\n'.format(subindent, file, get_string_before_dash(file), file,os.path.basename(root)))
        # f.write('<div class="pic"><img src="img/soft/Ai网站.png" onerror="replaceImage(this);"></div><div class="text"><h4>Ai网站-集合网址.exe</h4><p><a href="software/Ai实验室/Ai网站-集合网址.exe"><span>下载</span></a><a href="#" target="_blank"><strong>官方</strong></a><i>Ai实验室</i></p></div></li>\n'.format(subindent, file, get_string_before_dash(file), file,os.path.basename(root)))
        f.write('<li><div class="pic"><img src="img/soft/{}.png" onerror="replaceImage(this);"></div>\n'.format(get_string_before_dash(file)))
        f.write('<div class="text"><h4>{}</h4><p><a href="software/{}/{}"><span>下载</span></a>\n'.format(file, ba , file))
        f.write('<a href="{}" target="_blank"><strong>官方</strong></a><i>{}</i></p></div></li>\n'.format(net, ba))
    f.write('</ul></div>\n')
f.write('</div>\n')
f.write('</div>\n')
f.write('<script>function replaceImage(img) {img.onerror = null;img.src = "img/soft/test.png"; }</script>\n')
f.write('</body>\n')
f.write('</html>\n')

 5.2 Css 代码：

/* 基础公共样式：清除默认样式 + 设置通用样式*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
 
li {
    list-style: none;
}
 
body {
    font: 14px/1.5 "Microsoft Yaher", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
    color: #333;
}
 
a {
    color: #333;
    text-decoration: none;
}
/* 首页样式 */
/* 版心 */
.wrapper {
    margin: 0 auto;
    width: 1200px;
}
 
body {
    background-color: #f3f5f7;
}
 
/* 头部区域 */
.header {
    height: 100px;
    background-color: #fff;
}
 
.header .wrapper {
    padding-top: 29px;
    display: flex;
}
 
/* logo */
.logo a {
    display: block;
    width: 195px;
    height: 41px;
    background-image: url(../img/logo.png);
    font-size: 0;
}
 
/* 导航 */
.nav {
    margin-left: 102px;
}
 
.nav ul {
    display: flex;
}
 
.nav li {
    margin-right: 24px;
}
 
.nav li a {
    display: block;
    padding: 6px 8px;
    line-height: 27px;
    font-size: 19px;
}
 
/* active 类选器 表示默认选中的a */
.nav li .active,
.nav li a:hover{
    border-bottom: 2px solid #00a4ff;
}

.search {
    display: flex;
    margin-left: 64px;
    padding-left: 19px;
    padding-right: 12px;
    width: 412px;
    height: 40px;
    background-color: #f3f5f7;
    border-radius: 20px;
}

.search input {
    flex: 1;
    border: 0;
    background-color: transparent;
    /* 去掉表单控件的焦点框 */
    outline: none;
}

/* 父级是flex布局，子级变弹性盒子：加宽高生效 */
.search a {
    width: 16px;
    height: 16px;
    background-image: url(../img/search.png);
    align-self: center;
}

/* 用户 */
.user {
    margin-left: 32px;
    margin-top: 4px;
}

.user img {
    margin-right: 7px;
    /* vertical-align 行内块和行内垂直方向对方方式 */
    vertical-align: middle;
}

.user span {
    font-size: 16px;
    color: #666;
}

/* banner 区域 */
.banner {
    height: 420px;
    background-color: #0092cb;
}

.banner .wrapper {
    display: flex;
    justify-content: space-between;
    height: 420px;
    background-image: url(../img/banner2.png);
}

/* 侧导航 */
.banner .left {
    padding: 3px 20px;
    width: 191px;
    height: 420px;
    background-color: rgba(0, 0, 0, 0.42);
}

.banner .left a {
    /*  */
    display: block;
    height: 46px;
    /* background-image: url(../img/); */
    line-height: 46px;
    font-size: 16px;
    color: #fff;
}

.banner .left a:hover {
    background-image: url(../img/right-hover.png);
    color: #00a4ff;
}

/* 课程表 */
.banner .right {
    margin-top: 60px;
    width: 218px;
    height: 305px;
    background-color: #209dd5;
    border-radius: 10px;
}

.banner .right h3 {
    margin-left: 14px;
    height: 48px;
    line-height: 48px;
    font-size: 15px;
    color: #fff;
    font-weight: 400;
}

.banner .right .content {
    padding: 14px;
    height: 257px;
    background-color: #fff;
    border-radius: 10px;
}

.banner .right dl {
    margin-bottom: 12px;
    border-bottom: 1px solid #e0e0e0;
}

.banner .right dt {
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
}

.banner .right dd {
    margin-bottom: 8px;
    font-size: 12px;
    line-height: 16px;
}

.banner .right dd span {
    color: #00a4ff;
}

.banner .right dd strong {
    color: #7d7d7d;
    font-weight: 400;
}

.banner .right a {
    display: block;
    height: 32px;
    background-color: #00a4ff;
    text-align: center;
    font-size: 32xp;
    color: #fff;
    line-height: 32px;
    border-radius: 15px;
}

/* 精品推荐 */
.recommed {
    position: fixed;
    top: 0;
    z-index: 999;
    display: flex;
    margin-top: 0px;
    padding: 0 20px;
    height: 40px;
    border-radius: 5px;
    background-color: #FFF;
    box-shadow: 0px 1px 2px 0px rgba(211, 211, 211, 0.2);
    line-height: 40px;
}
.recommed h3 {
    font-size: 18px;
    color: brown;;
    font-weight: 400;
}

.recommed ul {
    flex: 1;
    display: flex;
}

.recommed ul li a {
    padding: 0 8px;
    border-right: 1px solid #e0e0e0;
    font-size: 14px;
}

.recommed li .active,
.recommed li a:hover{
    border-bottom: 1px solid #00a4ff;
}

.recommed ul li:last-child a {
    border-right: 0;
}

.recommed .modify {
    font-size: 16px;
    color: #00a4ff;
}

/* 推荐课程 */
.course {
    margin-top: 15xp;
}

/* 标题 公共类 与其他区域共用 */
.hd {
    display: flex;
    justify-content: space-between;
    height: 60px;
    line-height: 60px;
}

.hd h3 {
    font-size: 21px;
    font-weight: 400;
}

.hd .more {
    padding-right: 20px;
    background: url(../img/more.png) no-repeat right center; 
    font-size: 14px;
    color: #999;
}

/* 课程内容 - 公共类 */
.bd ul {
    display: flex;
    flex-wrap: wrap;
    /* justify-content: space-between; */
    /* justify-content: start; */
    /* align-content: stretch; */
}

.bd li {
    position: relative;
    margin-bottom: 14px;
    margin-left: 10px;
    width: 228px;
    height: 251px; 
    border-radius: 10px;
    overflow: hidden; 
    border: 1px solid #ccc;
    background-color: #fff;
}

.bd .pic {
    width: 228px;
    height: 155px;
    overflow: hidden;
}
.bd .text {
    padding: 10px;
    text-align: center;
    
}
/* .bd ul::after {
    content: "";
    display: block;
    width: 178px;
    height: 221px;
    visibility: hidden;
} */

/* .bd li {
    /* display: block; */
    /* white-space: normal; 设置为自动换行 */
    
    /* width: 178px; */
    /* height: 221px; */
    /* border-radius: 10px;
    text-align: center;
    /* background-color: pink; */
    /* background-color: #fff; */
    /* white-space: pre-wrap;  设置为保留原始格式，并自动换行 */
    /* overflow: hidden; 隐藏超出部分 */
    
/* } */ 

/* .bd li .pic {
    height: 116px;
} */
/* .bd li .pic img {
    width: 178px;
    height: 116px;
} */

/* .bd li .pic img:hover {
    width: 198px;
    height: 116px;
    position: relative;
    left: -10px;
    /* top: -35px; */
    /* z-index: 999;
} */ */

.bd li .text {
    /* padding: 20px; */
    /* height: 165px; */
    background-color: #fff;
    white-space: pre-wrap;  /*设置为保留原始格式，并自动换行*/
}

.bd li .text h4 {
    /* width: 130px; */
    /* margin-bottom: 13px; */
    /* height: 46px; */
    font-size: 14px;
    /* line-height: 20px; */
    font-weight: 400;
}

.bd li .text p {
    font-size: 14px;
    line-height:  20px;
    color: #999;
}

.bd li .text p span {
    position: absolute;
    display: block;
    width: 60px;
    height: 30px;
    line-height: 30px;
    /* background-color: #fa6400; */
    color: #fa6400;
    border: 1px solid #ccc;
    border-radius: 5px;
    bottom: 10px;
}

.bd li .text p span:hover {
    background-color: #1389b8;
    color: #FFF;
}

.bd li .text p strong {
    position: absolute;
    display: block;
    width: 40px;
    height: 25px;
    line-height: 25px;
    background-color: #4E6EF2;
    color: #f7f6f5;
    border: 1px solid #ccc;
    border-radius: 5px;
    bottom: 10px;
    right: 10px;
    font-size: 12px;
}

.bd li .text p strong:hover {
    background-color: #fff;
    color: #4E6EF2;
}

.bd li .text p i {
    position: absolute;
    top: 10px;
    left: 10px;
    font-style: normal;
    color: #FFF;
    font-size: 12px;
    background-color: #ffae00;
    height: 18px;
    line-height: 18px;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 3px;
}

.bdx1 {
    display: none;
    /* 隐藏元素  元素会被完全移除，不再占据空间，也不可交互。*/
}

#Ai实验室1 {
    display: none;
}

-----最底部-------

PieroPc
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值