day4

最新推荐文章于 2024-07-25 15:44:34 发布
最新推荐文章于 2024-07-25 15:44:34 发布
阅读量33 收藏
点赞数
文章标签： css 前端 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2202_75588230/article/details/131928327
版权

练习-五彩导航

<!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>五彩导航</title>
    <link href="./css选择器文件夹/五彩导航.css" rel="stylesheet">
</head>
<body>
    <a href="#" class="one">五彩导航</a>
    <a href="#" class="two">五彩导航</a>
    <a href="#" class="three">
        五彩导航
        <div class="box"></div>
    </a>
    <a href="#" class="four">五彩导航</a>
</body>
</html>

css
a{
    text-decoration: none;
    color: rgb(30, 5, 5);
    display: inline-block;
    width: 120px;
    height:58px;
    background-color: rgb(213, 28, 58);
    text-align: center;
    line-height: 50px; 
}
.one {
    background-image: url(./插件/bg1.png);
}
.two {
    background-image: url(./插件/bg2.png);
}
.three {
    position: relative;
    background-image: url(./插件/bg3.png);
}
.four {
    background-image: url(./插件/bg4.png);
}
.one:hover {
    background-image: url(./插件/bg5.png);
}

.two:hover {
    background-image: url(./插件/bg6.png);
}

.three:hover {
    background-image: url(./插件/bg7.png);
}

.three:hover .box{
    display: block;  
}

.four:hover {
    background-image: url(./插件/bg8.png);
} 

.box {
    display: none;
    position: absolute;
    bottom: -120px;
    width: 120px;
    height: 120px;
    background-color: pink;
}

练习-商品信息

 

<!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>Document</title>
    <style>
        .box {
          background-color: pink;  
          width: 210px;
          font-weight: 500px;
          text-align: center;
        }
        .box2{
            font-size: 20px;
            font-family: "微软雅黑";
            text-align: center;
        }
        .box3 {
            font-size: 14px;
            text-align: center;
            color: aquamarine;
        }
        .box4 {
            text-align: center;
            color: chocolate;        
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./css选择器文件夹/插件/小米.jpg" alt="" width="200px" weight="300px">
        <div class="box2">xiaomi &nbsp; cv3</div>
        <div class="box3">防身份泄露</div>
        <div class="box4">3399起</div>
    </div>

</body>
</html>

 作业-小米框架

<!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>Document</title>
    <link href="./作业3.css" rel="stylesheet">
</head>
<body>
    <div class="father">
        <div class="son1"></div>
        <div class="son2">
             <ul> 
                <ul>
                    <li>
                        <a href="#">
    
                        </a>
                    </li>
                    <li>
                        <a href="#">
    
                        </a>
                    </li>
                    <li>
                        <a href="#">
    
                        </a>
                    </li>
                    <li>
                        <a href="#">
    
                        </a>
                    </li>
                    <li>
                        <a href="#">
    
                        </a>
                    </li>
                    <li>
                        <a href="#">
    
                        </a>
                    </li>
                    <li>
                        <a href="#">
    
                        </a>
                    </li>
                    <li>
                        <a href="#">
    
                        </a>
                    </li>
            </ul>
        </div>
    </div>
</body>

</html>

 作业-小米商城

<!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>Document</title>
    <link href="./作业4.css" rel="stylesheet">
</head>
<body>
    <div class="xiaomi_yemian">
        <div class="site-header">
           <div class="header-logo"></div>
           <div class="header_nav">
               <ul class="nav-list">
                   <li class="nav-category"></li>
                   <li class="nav-item"></li>
                   <li class="nav-item"></li>
                   <li class="nav-item"></li>
                   <li class="nav-item"></li>                   
                   <li class="nav-item"></li>
                   <li class="nav-item"></li>
                   <li class="nav-item"></li>
                   <li class="nav-item"></li>
                   <li class="nav-item"></li>  
               </ul>
               <div class="search">
                   <input type="search" id="search" value="1">
                   <input type="submit" id="sear" value="2">
               </div> 
           </div>
        </div>
        <div class="silde">
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c66eff8e22a48ded4854017b25cbf631.jpeg?thumb=1&w=695&h=261&f=webp&q=90"alt class="swiper">
            <div class="sit-category">
                <ul class="sit-category">
                    <li class="category-item"></li>
                    <li class="category-item"></li>
                    <li class="category-item"></li>
                    <li class="category-item"></li>
                    <li class="category-item"></li>
                    <li class="category-item"></li>
                    <li class="category-item"></li>
                    <li class="category-item"></li>
                    <li class="category-item"></li>
                    <li class="category-item"></li>
                </ul>
            </div>
            <div class="tubiao1"></div>
            <div class="tubiao2"></div>
            <div class="tubiao3"></div> 
        </div>       
    </div>
</body>
</html>
时间太赶，只完成了html

 

 

 

肥咩咩的大兔子
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
DAY ) mysql,MySQL last_day()函数
weixin_39824191的博客
03-12 2016
MySQL日期/时间last_day()函数last_day()是一个MySQL日期/时间函数，仅接受日期或datetime值。它用于获取指定日期的给定月份的最后一天。如果我们提供了无效的输入日期或日期时间，则它总是返回NULL值。句法以下是用于返回给定月份的最后日期的语法。参数说明日期：last_day函数仅接受一个参数，即date或datetime，以获取最后一天的日期。返回值此函数返回给定有...
安全基础：0-day漏洞
知行合一 止于至善
06-09 5713
这篇文章以阿里巴巴的FastJSon来介绍一下Zero-day（0-day）漏洞的基础常识。
雅礼集训Day4
DraZxlNDdt的博客
06-21 5097
今天炸的1p。。。。。 T1，给你100次询问，每次L，R，选[L,R]中的若干数进行异或，求有多少种结果，1
每日算法刷题Day4-完全数、分情况输出、平方矩阵、斐波那契数列匹配输出
timerring的博客
08-17 3万+
完全数、分情况输出、平方矩阵、斐波那契数列匹配输出。⭐每日算法题解系列文章旨在精选重点与易错的算法题，总结常见的算法思路与可能出现的错误，与笔者另一系列文章有所区别，并不是以知识点的形式提升算法能力，而是以实战习题的形式理解算法，使用算法。......
常见的0day攻击
heibaikong6的博客
03-17 6798
什么是0day 0day漏洞 通常是指还没有补丁的漏洞。也就是说官方还没有发现或者是发现了还没有开发出安全补丁的漏洞 0day攻击 利用0day漏洞进行的攻击，特点是利用简单，危害较大 常见0day——struts2 Struts2框架存在漏洞，平时说的存在struts2漏洞是指的远程命令/代码执行漏洞 影响范围 Struts2漏洞有很多，比较著名的几个远程命令/代码执行漏洞： ...
全国青少年信息学奥林匹克竞赛省选倒计时 day4
woshitiancai100的博客
04-03 2858
今天打了正睿省选附加赛day1和Public Judge
Java岗大厂面试百日冲刺 - 日积月累，每日三题【Day4】 —— 数据库1
陈哈哈的菜园子
06-04 1万+
百日闭关修炼，每日三道高频面试题。一起冲进大厂！看什么看？快上车！
Day.js 常用方法
热门推荐
halo1416的博客
04-21 4万+
前言 Day.js 是代替修改本地Date.prototype，Day.js对Date对象进行了封装，只需要调用Dayjs()即可。 相对moment.js而已，day.js的体积更小，只有2KB左右；moment.min.js 有16.7KB。 对应普通项目来说，对应时间的操作就只有那么几个（格式化、查询、计算），这些基于Day.js完全足够。并且Day.js的文档相对简单、清晰！ 该文章对比之前的moment.js的文章 Day.js官方文档   当前文章很多实例是以当前时间来处理的， 当前时间
什么是0day漏洞？
DATA8866的博客
07-31 1万+
我们循序渐进的来解释这个词： 1、0day漏洞到底是什么呢？首先你要知道，它是某一类漏洞的统一叫法。 2、“0day”顾名思义就是很快，因为直译过来就是“不到一天的时间”，是不是很快。 3、稍微官方一点的说法是：指那些没有公开过，因而也没有补丁的漏洞，也就是通常所说的“未公开漏洞”。 4、再容易理解一些呢，就是：已经被发现(有可能未被公开)，而官方还没有相关补丁的漏洞。 5、把第4点直译...
web渗透测试----30、0day漏洞
七天
07-28 3946
什么是0day 0day又称“零日漏洞”(zero-day)。0day的含义为破解，最早的破解是专门针对软件的，叫做WAREZ。 0表示zero，早期的0day表示软件在发行的24小时之内就出现破解版本。现在一般指的是没有公开，没有补丁的漏洞。 零日攻击或零时差攻击则是指利用这种0day漏洞进行的攻击。0day漏洞的利用程序对网络安全具有巨大威胁，从特征角度看，0day攻击与传统的黑客攻击有极大的相似特征，其区别仅仅在于0day攻击的对象以及渠道，是潜在的未知的，或者是虽然已经公布但尚未来得及修复的系统漏洞
1.30 C++ day4
01-30
1.30 C++ day4
Day4.py
04-21
Day4.py
ARM32day4点灯
03-19
ARM32day4点灯
Day4_2(UE4讲解).xlsx
09-02
Day4_2(UE4讲解)
Day4_1(UE4讲解).xlsx
09-02
Day4_1(UE4讲解)
flex：1
m0_47999208的博客
07-25 242
2.flex-shrink,在flex布局中经常会遇到页面宽度不够而导致的文字换行问题，由于flex布局默认flex-shrink为1,就是默认可以缩小然后会导致换行，需要设置flex-shrink:0,默认不缩小就可以了。上面是120px高，给下面的外盒子高度设置为calc(100% - 120px);答：给外部盒子添加display：flex,内部盒子设置为flex-grow：1。现在有一个上下盒子，上面是固定值，下面是随页面高度变换的，如何让下面盒子的子盒子高度适应外部的高度呢？
CSS相关记录
oThrowsException的博客
07-24 615
它接受两个参数，分别表示在X轴和Y轴上的缩放比例。如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。CSS的transform属性是一个功能强大的工具，允许你对HTML元素应用2D或3D转换效果，包括旋转、缩放、倾斜和移动等。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。scaleX()、scaleY()、scaleZ()：这些函数分别用于沿X轴、Y轴和Z轴缩放元素。
CSS的常见难见
weixin_62432037的博客
07-24 1004
选择器的优先级是指在多个选择器匹配同一元素时，决定哪个样式生效的规则。优先级越高的选择器，其样式越优先应用。
Programming in the Large CSSE2002
最新发布
w976j_的博客
07-25 445
❼❼❼SheePComponents❼❼Savingnotnot).TheandSeeSee。
字符串的操作 需求说明 某旅行网站的青岛游行程信息 Day1：抵达青岛，入住青岛特色客栈或酒店 Day2：栈桥→五四广场 Day3：海底世界→小麦岛 Day4：跨海大桥→天主教堂 Day5：电影博物馆→海底隧道 返程
05-12
day4 = "Day4：跨海大桥→天主教堂" day5 = "Day5：电影博物馆→海底隧道" return_trip = "返程" # 将每一天的行程信息拼接在一起 itinerary = day1 + "\n" + day2 + "\n" + day3 + "\n" + day4 + "\n" + day5 + "\...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值