2023.05.04学习

最新推荐文章于 2024-11-16 19:33:55 发布
最新推荐文章于 2024-11-16 19:33:55 发布
阅读量79 收藏
点赞数
文章标签： 学习 css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/KLKLKLKKK/article/details/130482831
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .sub-header{
            height: 100px;
            background-color: #b8b8b8;
        }
        .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{
            padding: 0 10px;
            display: inline-block;
            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标签是行内标签，默认设置高度、边距无效。->块级 & 行内+块级  display: inline-block;-->
            <a href="https://www.mi.com/shop">
                <img src="images/logo-mi2.png" alt="">
            </a>
        </div>
        <div class="ht menu-list">
            <a href="http://www.mi.com">Xiaomi手机</a>
            <a href="http://www.mi.com">Redmi红米</a>
            <a href="http://www.mi.com">电视</a>
            <a href="http://www.mi.com">笔记本</a>
            <a href="http://www.mi.com">平板</a>
        </div>
        <div class="ht search">3</div>
        <div class="clear:both;"></div>
    </div>
</div>
</body>
</html>

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 {
            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;
            background-color: white;
        }
        .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{
            padding: 0 10px;
            display: inline-block;
            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="http://www.mi.com">小米商城</a>
                <a href="http://www.mi.com">MIUI</a>
                <a href="http://www.mi.com">云服务</a>
                <a href="http://www.mi.com">有品</a>
                <a href="http://www.mi.com">开放平台</a>
            </div>
            <div class="account">
                <a href="http://www.mi.com">登录</a>
                <a href="http://www.mi.com">注册</a>
                <a href="http://www.mi.com">消息通知</a>
            </div>
            <div style="clear:both"></div>
        </div>
    </div>
    <div class="sub-header">
    <div class="container">
        <div class="ht logo">
            <!--a标签是行内标签，默认设置高度、边距无效。->块级 & 行内+块级  display: inline-block;-->
            <a href="https://www.mi.com/shop">
                <img src="images/logo-mi2.png" alt="">
            </a>
        </div>
        <div class="ht menu-list">
            <a href="http://www.mi.com">Xiaomi手机</a>
            <a href="http://www.mi.com">Redmi红米</a>
            <a href="http://www.mi.com">电视</a>
            <a href="http://www.mi.com">笔记本</a>
            <a href="http://www.mi.com">平板</a>
        </div>
        <div class="ht search">3</div>
        <div class="clear:both;"></div>
    </div>
</div>
</body>
</html>

小结：

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

垂直方向居中

        本文+line-height

        图片+边距

a标签默认有下划线

鼠标放上去之后字体有变化用hover

.c1:hover{

        ...

}

a:hover{


}

案例：整合

<!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;
            background-color: white;
        }

        .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 {
            padding: 0 10px;
            display: inline-block;
            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;
        }

        .slider .sd-img img {
            width: 100%;
            height: 100%;
        }
        .news{
            margin-top: 14px;
        }
        .news .channel{
            width: 228px;
            height: 164px;
            background-color: #5f5750;
            padding: 3px;
        }
        
        .news .channel .item{
            width: 72px;
            height: 86px;
            float: left;
            text-align: center;
        }

        .news .channel .item a{
            font-size: 12px;
            display: inline-block;
            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;
            display: block;
            margin: 0 auto;
        }

    </style>
</head>
<body>
    <div class="header">
        <div class="container">
            <div class="menu">
                <a href="http://www.mi.com">小米商城</a>
                <a href="http://www.mi.com">MIUI</a>
                <a href="http://www.mi.com">云服务</a>
                <a href="http://www.mi.com">有品</a>
                <a href="http://www.mi.com">开放平台</a>
            </div>
            <div class="account">
                <a href="http://www.mi.com">登录</a>
                <a href="http://www.mi.com">注册</a>
                <a href="http://www.mi.com">消息通知</a>
            </div>
            <div style="clear:both"></div>
        </div>
    </div>
    <div class="sub-header">
        <div class="container">
            <div class="ht logo">
                <!--a标签是行内标签，默认设置高度、边距无效。->块级 & 行内+块级  display: inline-block;-->
                <a href="https://www.mi.com/shop">
                    <img src="images/logo-mi2.png" alt="">
                </a>
            </div>
            <div class="ht menu-list">
                <a href="http://www.mi.com">Xiaomi手机</a>
                <a href="http://www.mi.com">Redmi红米</a>
                <a href="http://www.mi.com">电视</a>
                <a href="http://www.mi.com">笔记本</a>
                <a href="http://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.jpg" alt="">
            </div>
        </div>
</div>
    <div class="news">
        <div class="container">
            <div class="channel left">
                <div class="item">
                    <a href="http://www.mi.com">
                        <img src="images/x1.jpg" alt=""/>
                        <span>保障服务</span>
                    </a>
                </div>
                <div class="item">
                    <a href="http://www.mi.com">
                        <img src="images/x2.jpg" alt=""/>
                        <span>企业团购</span>
                    </a>
                </div>
                <div class="item">
                    <a href="http://www.mi.com">
                        <img src="images/x3.jpg" alt=""/>
                        <span>F码通道</span>
                    </a>
                </div>
                <div class="item">
                    <a href="http://www.mi.com">
                        <img src="images/x4.jpg" alt=""/>
                        <span>米粉卡</span>
                    </a>
                </div>
                <div class="item">
                    <a href="http://www.mi.com">
                        <img src="images/x5.jpg" alt=""/>
                        <span>以旧换新</span>
                    </a>
                </div>
                <div class="item">
                    <a href="http://www.mi.com">
                        <img src="images/x6.jpg" alt=""/>
                        <span>话费充值</span>
                    </a>
                </div>
                <div class="clear:both"></div>
            </div>
            <div class="list-item left" style="margin-left: 14.6px">
                <img src="images/n1.jpg" alt=""/>
            </div>
            <div class="list-item left" style="margin-left: 14.6px">
                <img src="images/n2.jpg" alt=""/>
            </div>
            <div class="list-item left" style="margin-left: 14.6px">
                <img src="images/n3.jpg" alt=""/>
            </div>
            <div class="clear:both"></div>
        </div>
    </div>
</body>
</html>

小结：设置透明度

opacity：0.7/1

蹦蹦炸弹
关注
Vue--2023.6.23
weixin_65590235的博客
06-23 405
vue
Go 语言 入门 && 基于 GoLand 2023.1 创建第一个Go程序
热门推荐
猫头虎：授渔优于赠鱼，兴趣引领智慧，探索之乐尤显珍贵。商务合作：Libin9iOak，共赴知识与乐趣的探索之旅！
04-12 5万+
Go 语言 入门 && 基于 GoLand 2023.1 创建第一个Go程序Go 语言 入门 && 基于 GoLand 2023.1 创建第一个Go程序Go 语言 入门 && 基于 GoLand 2023.1 创建第一个Go程序Go 语言 入门 && 基于 GoLand 2023.1 创建第一个Go程序Go 语言 入门 && 基于 GoLand 2023.1 创建第一个Go程序Go 语言 入门 && 基于 GoLand 2023.1 创建第一个Go程序Go 语言 入门 && 基于 GoLand 2023.1
Ubuntu22.04从零开始配置深度学习环境
m0_52648731的博客
11-08 1654
需要先去CUDA官网查找对应的gcc版本，选CUDA版本时，进入链接尾部的"Versioned Online Documentation"选好对应的系统配置后下载run版本的，复制官方给出的Installation Instructions:的指令。的对应文件夹下：（注意自己的目录名，有的文件夹名是lib，有的是lib64）访问CUDA官网，选择你需要下载的CUDA版本，我选择的是CUDA11.0。出现下列页面，,显示的cuda版本正是所安装版本，说明CUDA安装成功。
WIN10安装CUDA保姆级教程[2023.5.7更新]
ZHUO__zhuo的博客
05-07 2万+
不要选Visual Studio Integration，即使选了也不能成功安装。记住以下安装位置，tensorflow要求配置环境重点提醒：一定要记住这个路径，把这个路径保留下来，后面我们还会用到！！！安装完成后，鼠标右键此电脑->属性->高级系统设置->环境变量，查看系统变量即可看到红色框选的两项。或者直接在电脑搜索编辑系统环境变量打开。查看系统变量中是否添加了路径，如果没有需要自己添加。
Ubuntu 22.04LTS + 深度学习环境安装全流程
唐大帅的编程之路
09-12 1549
Linux安装深度学习环境
博客文章导航（嵌入式宝藏站）（2023.5.1更新）
Mculover666的博客（嵌入式）
05-15 1万+
更新日志： 时间 更新内容 2021/5/15 初稿完成 博主简介 Mculover666，一个喜欢玩板子的小码农，目前HFUT在读，热爱嵌入式/物联网这个领域，并专注于嵌入式软件开发！ 坚持做自己热爱的事情、坚持做自己觉得有意义的事情，但问耕耘，莫问收获！ 目前主要发布的网站如下： CSDN用于日常开发中的文章记录与分享 个人网站用于系列教程连载：http://www.mculover666.cn Github目前也收获了100多个Start：https://github.com/M
node.js毕设英语四六级学习系统（程序+论文）
x陈杰学长毕设
11-12 925
5] 朱晓阳, 刘苑如, 范仲言. 基于Node.js的学习平台后端系统设计与实现[J]. 电脑知识与技术, 2019, 15 (13): 116-118.[15] 赵学作，赵少农. Node.js 的安装与调试[J]. 网络安全和信息化，2019, (03): 87-88.[7] 方生. 基于 Vue.js 前端框架技术的研究[J]. 电脑知识与技术，2021，17(19): 59-60.[9] 唐榜. 基于 Node.js 的 Web 服务端框架研究与实现[D]. 西南科技大学，2021.
ubuntu22.04@laptop OpenCV安装
lida2003的专栏
02-03 1366
笔者整理这份资料是搞了好几天的，遇到不少坑。主要就是折腾在OpenCV开发环境不熟悉，网络复杂多变等问题上。希望整理出来，方便交流学习！Github操作网络异常笔记apt-get通过代理更新系统。
嵌入式CANopen协议从入门到落地产品（更新2023.10.18）
wallace89的博客
07-28 1万+
一、前言 我写CANopen系列博文的初衷是分享如何使用STM32单片机开发一款CANopen产品，所谓实战为主，理论为辅。光看CANopen协议的理论是很枯燥的，而且无论看多少遍都无法掌握CANopen协议。我认为掌握CANopen协议的唯一方法是自己设计一个CANopen从站。以前我在电气研发的时候，看了很多遍讲CANopen协议的pdf与书籍，最后也没看懂CANopen是什么东西。害的我在工作上一碰到CANopen协议就害怕，觉得是一个非常复杂的东西，一般人根本学不会。命运的转折点又来了，上一年（2
基于Node.js+vue在线学习系统(开题+程序+论文) 计算机毕业设计
x陈杰学长毕设
09-12 865
该系统的成功开发，不仅能够满足学生个性化学习的需求，提升学习效率与兴趣，还能够促进教师之间的教学交流与资源共享，推动教育教学模式的创新与发展。通过该系统的应用，旨在实现学习资源的优化配置与高效利用，提升教育教学的质量与效率，推动教育信息化的深入发展。[9] 邓杰海，刘薇，汤小燕. 基于 Node.js 的开源架构 Electron 赋能前端开发[J]. 现代计算机，2023, 29 (16): 87-92.同时，根据用户角色（如学生、教师、管理员）的不同，提供差异化的功能权限与服务。
基于Node.js+vue网络学习平台(程序+论文+开题报告)-计算机毕业设计
zhiwen206的博客
08-08 683
本研究的意义在于，通过构建一个功能完善、用户体验优良的网络学习平台，不仅能够满足广大学习者对高质量教育资源的迫切需求，促进教育公平与普及，还能够推动教育模式的创新与发展。研究的主要目的是提升网络学习平台的用户体验，增强学习资源的可用性和可访问性，促进学习成效的提升，并探索网络学习平台在教育改革与创新中的潜在应用价值。：根据学科领域和学习需求，设置多样化的课程类型，如公开课、专业课、实训课等，并详细展示每门课程的基本信息、教学大纲、授课视频、作业布置等内容，为学习者提供全面的学习指导。
人工智能资源分享2023.04.05
04-05
机器学习是让计算机通过学习数据模式来改善其性能的过程，而深度学习则是机器学习的一个分支，它模仿人脑神经网络的工作原理，构建深层神经网络进行复杂任务的学习。 目前，AI的应用广泛，从个人助手（如Apple的...
学术刊物和会议目录 文献检索-CNKI(2021.06.27).rar
06-27
4. **时间管理方面的书籍介绍-2020.05.02.pdf**：时间管理是个人和团队高效工作的重要技能，这份文件可能包含了关于时间管理的策略、技巧和实践案例的书籍推荐，适用于学生、科研人员以及各行各业的职场人士提升工作...
【大数据资源】日本2023年新冠疫情历史大数据汇总表.xls（2023-1-1至2023-5-9最后布数据）
04-07
这是目项中的大数据资源，发一个2023年日本新冠疫情历史大数据汇总表.xls 时间维度是：2023-1-1至2023-5-9 ...2023.05.04 33766957 7343 33692343 74614 18 。。。 本份大数据信息仅供参考学习，精准度请自行核对。
蓝队技术学习
weixin_65861348的博客
11-12 1005
该手册详细规定了在不同安全事件发生时应执行的标准操作程序，按安全事件类别进行了分类阐述。
EEG+EMG学习系列 (1) :一个基于小波的自动睡眠评分模型
走在深度学习前沿的小宋
11-14 922
由于手动睡眠阶段评分方法的限制，创建自动睡眠阶段分类的需求已经上升。在这项研究中，使用`双通道单极脑电图 （EEG）`、`下巴肌电图 （EMG）` 和`双通道眼电图 （EOG）` 信号开发了一种新的机器学习模型。使用`最佳正交滤波器组`，通过分解 30 s 信号纪元来获得子带。然后根据这些子带的系数计算 `Tsallis 熵`。然后，这些特征被馈送到一个`集成袋装树 （EBT） 分类器`，用于自动睡眠分类。
Vue3学习：查询城市天气预报案例（vite，选项式）
wangyining070205的博客
11-13 819
前几日的学习中，实现了查询城市天气预报，是用组合式实现的，今天是用选项式来实现，案例运行效果如下： 如果不输入城市的名字，直接点击“查询”，将会显示IP所在地城市的天气预报。 代码如下： <template> <div id="container"> <div id="search"> <el-input v-model="cityName" placeholder="请输入城市名" class="inputText
《线性代数》学习笔记
tan_liang_liang的博客
11-11 512
直观上就是，如果第三个向量的直线掉在前面两条向量张成的平面，那么就线性相关，否则是线性无关的。就是用前面确定线性无关的两个列向量a和b，组成议程ax+by=c是否有解，如果有解。如何判断有解，用消元法。求解这样的方程，先把它转换成行阶梯式，而且每一个主元上面对应的系数是0。什么是基础解系，就是其它解可以表示成两个向量的线性组合，这两个向量就是基础解系。上个星期继续学线性代数，一个矩阵，如何判断它是的列向量有几个是线性无关呢？第二种方法是判断这个矩阵的行列式，如果行列式计算不是0,那么它的列向量就是无关的。
从零开始学习 sg200x 多核开发之 uboot 网络功能使能
最新发布
燕十三的物联网之旅
11-16 351
sophpi u-boot 默认未开启网络功能，需要手动开启，为了在 u-boot 下可以通过 tftp 下载固件，先测试 u-boot 下网络功能。
Access denied You do not have access to chat.openai.com. The site owner may have set restrictions that prevent you from accessing the site. Ray ID: 7b61b9bedb7110a9 Timestamp: 2023-04-11 08:05:37 UT
07-11
它的原理是基于Transformer架构，通过预训练大量文本数据来学习如何生成人类可读的文本，然后通过接受输入并生成输出来实现对话。 ChatGPT的用途非常广泛，可以用于自然语言处理（NLP）任务，如对话生成、问答系统...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值