HTML5学习——第九天

最新推荐文章于 2024-08-21 13:29:36 发布
最新推荐文章于 2024-08-21 13:29:36 发布
阅读量180 收藏
点赞数 3
文章标签： html5 学习 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_64683517/article/details/140618074
版权

1.名鞋库网页小练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div class="header">
        <div>
            <ul>
                <li>欢迎登录名鞋库</li>
                <li>免费注册</li>
                <li>我的名鞋库<span></span></li>
                <li><i></i>手机名鞋库<span></span></li>
                <li>收藏名鞋库</li>
                <li><b></b>名鞋库客服</li>
                <li>
                    <strong></strong>
                </li>
            </ul>
        </div>
    </div>

    <div class="logo">
        <div></div>
        <div>
            <input type="text"><input type="submit" value="搜索">
            <ul>
                <li>热搜:</li>
                <li>跑步鞋</li>
                <li>帆布鞋</li>
                <li>篮球鞋</li>
                <li>跑步鞋</li>
                <li>帆布鞋</li>
                <li>篮球鞋</li>
            </ul>
        </div>
        <a href="#">
            购物车<span>0</span>件
        </a>
    </div>

    <div class="nav">
        <div class="container">
            <ul>
                <li>所有商品分类</li>
                <li>首页</li>
                <li>男子运动</li>
                <li>
                    <a href="#">女子运动</a>
                    <div class="box">
                        <dl>
                            <dt>运动鞋</dt>
                            <dd>休闲鞋</dd>
                            <dd>板鞋</dd>
                            <dd>跑步鞋</dd>
                            <dd>帆布鞋</dd>
                            <dd>拖鞋</dd>
                            <dd>网球鞋</dd>
                            <dd>健步鞋</dd>
                        </dl>
                        <dl>
                            <dt>服装</dt>
                            <dd>休闲鞋</dd>
                            <dd>板鞋</dd>
                            <dd>跑步鞋</dd>
                            <dd>帆布鞋</dd>
                            <dd>拖鞋</dd>
                            <dd>网球鞋</dd>
                            <dd>健步鞋</dd>
                            <dd>网球鞋</dd>
                            <dd>健步鞋</dd>
                        </dl>
                        <dl>
                            <dt>品牌推荐</dt>
                            <dd></dd>
                            <dd></dd>
                            <dd></dd>
                            <dd></dd>
                            <dd></dd>
                            <dd></dd>
                            <dd></dd>
                            <dd></dd>
                            <dd></dd>
                            <dd></dd>
                            <dd></dd>
                            <dd></dd>
                            <dd></dd>
                            <dd></dd>
                        </dl>
                    </div>
                </li>
                <li>儿童</li>
                <li>男鞋</li>
                <li>户外</li>
            </ul>
            <ul>
                <li>
                    运动小白
                    <img src="./images/dabai.png" alt="">
                </li>
                <li>上新区</li>
                <li>即将售罄</li>
                <li>逢八必杀</li>
            </ul>
        </div>
    </div>

    <div class="banner">
        <div class="container">
            <ul>
                <li>运动休闲鞋</li>
                <li>运动休闲服</li>
                <li>跑步</li>
                <li>篮球</li>
                <li>足球</li>
                <li>配件</li>
                <li>户外</li>
                <li>男鞋</li>
                <li>童鞋</li>
            </ul>
        </div>
        <!-- <img src="./images/banner.jpg" alt=""> -->
    </div>
</body>
</html>
*{
    margin: 0;
    padding: 0;
}
ul,li{
    list-style: none;
}
a{
    text-decoration: none;
}
html,body{
    height: 100%;
}
body{
    min-width: 1600px;
    height: 100%;
}
.header{
    height: 26px;
    background-color: #eeeeee;
}
.header>div{
    width: 1194px;
    height: 100%;
    /* background-color: #eeeeee; */
    margin: auto;
}
.header ul{
    float: right;
}
.header li{
    float: left;
    font-size: 12px;
    color: #666666;
    height: 26px;
    line-height: 26px;
    padding: 0 16px;
    /* 相对定位 */
    position: relative;
}
/* 伪元素 - 显示模式:行内元素 */
.header li::after{
    /* 填充内容 */
    content: '';
    background-color: orange;
    /* width: 100px;
    display: inline-block; */
    width: 1px;
    height: 16px;
    background-color: #d5d5d5;
    /* background-color: red; */
    /* 绝对定位 */
    position: absolute;
    right: -0.5px;
    top: 50%;
    transform: translateY(-50%);

}
/* n : 0123456789..... */
.header ul>:nth-child(-n + 2){
    color: #ff6600;
}
.header ul>:nth-child(1)::after{
    /* width: 0; */
    display: none;
    /* height: 0; */
}
.header span{
    width: 0;
    height: 0;
    border: 4px solid transparent;
    border-top-color: #666666;
    position: absolute;
    right: 10px;
    top: 10px;
}
.header ul>:nth-child(3){
    padding-right: 26px;
}
.header ul>:nth-child(4){
    padding-right: 26px;
    padding-left: 31px;
}
.header i{
    width: 10px;
    height: 14px;
    background-color: pink;
    position: absolute;
    left: 15px;
    top: 5px;
    background-image: url(./images/default_icon_bg.png);
    background-position: -510px -13px;
}
.header b{
    width: 15px;
    height: 15px;
    background-color: pink;
    position: absolute;
    left: 13px;
    top: 4px;
    background-image: url(./images/default_icon_bg.png);
    background-position: -504px -43px;
}
.header ul>:nth-child(6){
    padding-left: 35px;
}
.header ul>:last-child{
    width: 122px;
}
.header strong{
    width: 122px;
    height: 13px;
    /* background-color: pink; */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-image: url(./images/default_icon_bg.png);
    background-position: -318px -66px;
}

.logo{
    width: 1194px;
    height: 78px;
    /* background-color: pink; */
    margin: auto;
    overflow: hidden;
}
.logo>:nth-child(1){
    width: 421px;
    height: 64px;
    /* background-color: aqua; */
    background-image: url(./images/default_icon_bg.png);
    margin-top: 7px;
    float: left;
}
.logo>:nth-child(2){
    width: 340px;
    height: 100%;
    /* background-color: plum; */
    float: left;
    margin-left: 120px;
    padding-top: 16px;
    box-sizing: border-box;
}
.logo>:nth-child(2)>:nth-child(1){
    width: 274px;
    height: 30px;
    box-sizing: border-box;
    border: 2px solid #d5d5d5;
    border-right: 0;
    vertical-align: top;
    outline: none;
}
.logo>:nth-child(2)>:nth-child(2){
    width: calc(100% - 274px);
    height: 30px;
    border: 0;
    background-color: #444444;
    font-size: 15px;
    color: #fff;
}
.logo ul{
    margin-top: 8px;
}
.logo li{
    float: left;
    font-size: 12px;
    color: #898989;
    line-height: 1;
    padding: 0 4px;
}
.logo>a{
    float: right;
    width: 126px;
    height: 34px;
    background-image: url(./images/default_icon_bg.png);
    background-position: 0 -64px;
    margin-top: 20px;
    text-indent: 45px;
    line-height: 34px;
    color: #676767;
    font-size: 12px;
    border-radius: 5px;
}
.logo span{
    color: red;
    margin: 0 4px;
}

.nav{
    height: 34px;
    background-color: #a21f25;
}
.nav>.container{
    width: 1194px;
    height: 100%;
    /* background-color: #a21f25; */
    margin: auto;
}
.nav>.container>:nth-child(1){
    float: left;
}
.nav>.container>:nth-child(1)>li{
    padding: 0 26px;
}
.nav>.container>:nth-child(2){
    float: right;
}
.nav>.container>:nth-child(2)>li{
    padding: 0 10px;
}
.nav>.container li{
    float: left;
    line-height: 34px;
    font-size: 14px;
    color: #fff;
    /* 相对定位 */
    position: relative;
}
.nav a{
    color: #fff;
}
.nav>.container>:nth-child(1)>:nth-child(n + 3):hover{
    background-color: #444444;
}
.nav>.container>:nth-child(1)>:nth-child(2){
    background-color: #444444;
}
.nav>.container>:nth-child(1)>:nth-child(n + 3)::after{
    content: '';
    width: 2px;
    height: 13px;
    background-color: #fff;
    /* 绝对定位 */
    position: absolute;
    right: -2px;
    top: 50%;
    transform: translateY(-50%);
}
.nav>.container>:nth-child(1)>:nth-child(n + 3):hover::after{
    display: none;
}
.nav>.container>:nth-child(1)>:last-child::after{
    display: none;
}
.nav>.container>:nth-child(1)>:nth-child(n + 3){
    padding-left: 28px;
}
.nav>.container>:nth-child(1)>:last-child{
    padding-left: 26px;
}
.nav>.container>:nth-child(2)>:last-child{
    color: yellow;
}
.nav>.container>:nth-child(2)>li::after{
    content: '';
    width: 1px;
    height: 14px;
    background-color: #fff;
    /* 绝对定位 */
    position: absolute;
    right: -0.5px;
    top: 50%;
    transform: translateY(-50%);
}
.nav>.container>:nth-child(2)>li>img{
    position: absolute;
    left: -39px;
    top: -21px;
}
/* 二级导航 */
.nav .box{
    width: 668px;
    height: 281px;
    background-color: #fff;
    /* 绝对定位 */
    position: absolute;
    left: 0;
    top: 34px;
    display: none;
    color: #000; 
    padding-top: 17px;
    padding-left: 19px;
    box-sizing: border-box;
    line-height: 1;
}
.nav li:hover>.box{
    display: block;
}
.nav .box>dl{
    float: left;
}
.nav .box>:nth-child(-n + 2){
    width: 166px;
}
.nav dt{
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
}
.nav dd{
    font-size: 12px;
    color: #545653;
    line-height: 24px;
}
.nav .box>:last-child{
    width: 282px;
    /* background-color: orange; */
}
.nav .box>:last-child>dd{
    width: 33.3333%;
    height: 40px;
    /* background-color: aqua; */
    float: left;
    background-image: url(./images/201409101646002.png);
}
.nav .box>:last-child>:nth-child(3){
    background-position: 0 -80px;
}
.nav .box>:last-child>:nth-child(4){
    background-position: 0 -115px;
}
.nav .box>:last-child>:nth-child(5){
    background-position: 0 -150px;
}
.nav .box>:last-child>:nth-child(6){
    background-position: 0 -190px;
}
.nav .box>:last-child>:nth-child(7){
    background-position: 0 -230px;
}
.nav .box>:last-child>:nth-child(8){
    background-position: 0 -270px;
}
.nav .box>:last-child>:nth-child(9){
    background-position: 0 -310px;
}
.nav .box>:last-child>:nth-child(10){
    background-position: 0 -345px;
}
.nav .box>:last-child>:nth-child(11){
    background-position: 0 -385px;
}
.nav .box>:last-child>:nth-child(12){
    background-position: 0 -425px;
}
.nav .box>:last-child>:nth-child(13){
    background-position: 0 -465px;
}
.nav .box>:last-child>:nth-child(14){
    background-position: 0 -495px;
}
.nav .box>:last-child>:nth-child(15){
    background-position: 0 -535px;
}

.banner{
    /* width: 1194px; */
    height: 386px;
    background-color: #ccc;
    /* margin: auto; */
    /* position: relative; */
    background-image: url(./images/banner.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.banner>.container{
    /* 最小宽度 */
    /* min-width: 1000px;*/
    /* 最大宽度 */
    /* max-width: 1000px;  */
    width: 1194px;
    height: 100%;
    /* background-color: #ccc; */
    margin: auto;
}
.banner>.container>ul{
    width: 136px;
    height: 100%;
    background-color: #1f1909;
}
/* .banner>img{
    height: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
} */
 .banner>.container>ul>li{
    color: #fff;
    font-size: 12px;
    text-indent: 40px;
    height: 42.8px;
    line-height: 42.8px;
    position: relative;
 }
 .banner>.container>ul>li::before{
    content: '';
    width: 17px;
    height: 10px;
    /* background-color: pink; */
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    background-image: url(./images/navcats_icon.png);
    background-position: -4px -58px;
 }
 .banner>.container>ul>li:hover{
    background-color: #aa0001;
    text-decoration: underline;
 }
 .banner>.container>ul>li::after{
    content: '';
    /* background-color: pink; */
    width: 0;
    height: 0;
    border: 4px solid transparent;
    border-left-color: #fff;
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
 }
 .banner>.container>ul>li:hover::after{
    display: block;
 }

结果展示：

2.过渡

<style>
        div{
            width: 300px;
            height: 100px;
            background-color: aqua;
            /* margin-left: 0; */
            /* 设置需要过渡的样式属性*/
            /* transition-property: width; */
            /* 设置过渡的时间 */
            /* transition-duration: 2s; */
            /* 设置延迟时间 */
            /* transition-delay: 5s; */
            /* 设置运动形式 */
            /* 慢速开始,加速,慢速结束 */
            /* transition-timing-function: ease; */
            /* 加速 */
            /* transition-timing-function: ease-in; */
            /* 减速 */
            /* transition-timing-function: ease-out; */
            /* 先加速再减速 */
            /* transition-timing-function: ease-in-out; */
            /* 匀速 */
            /* transition-timing-function: linear; */
            /* 步长/帧率 */
            /* transition-timing-function: steps(5); */
            /* 贝塞尔曲线 */
            /* transition-timing-function: cubic-bezier(0.18, 0.89, 1, 0.24); */

            /* 连写 - 取值不分先后顺序 - 单独只设置一个时间默认代表过渡时间 - 当出现两个时间取值的时候,第一个代表过渡时间,第二个代表延迟时间 - all代表选中当前标签的所有css属性名*/
            /* transition: width 2s 1s linear; */
            /* transition: width 1s linear,height 2s linear; */
            transition: all linear 2s;
        }
        div:hover{
            width: 600px;
            height: 400px;
            background-color: pink;
            margin-left: 200px;
            opacity: .5;
        }
    </style>

3.旋转

 <style>
        div{
            width: 300px;
            height: 300px;
            background-color: aqua;
            text-align: center;
            line-height: 300px;
            margin: auto;
        }
        img{
            width: 200px;
            vertical-align: middle;
            transition: all 2s linear;
        }
        div:hover>img{
            transform: rotate(360deg);
            transform: rotate(-360deg);
            /* transition: all 2s linear; */
        }
        p{
            width: 200px;
            height: 200px;
            background-color: orange;
            margin: auto;
            /* 裁剪 */
            /* clip-path: polygon(100px 0,200px 200px,0 200px); */
            clip-path: polygon(0 100px,50px 50px,100px 100px,100px 0, 150px 50px,100px 100px,200px 100px,150px 150px,100px 100px,100px 200px,50px 150px,100px 100px);
            transition: all 2s linear;
        }
        p:hover{
            transform: rotate(180deg);
        }
    </style>

Nefertari Emotional
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
100天精通鸿蒙从入门到跳槽——第5天：TypeScript 知识储备：函数
猫头虎：授渔优于赠鱼，兴趣引领智慧，探索之乐尤显珍贵。商务合作：Libin9iOak，共赴知识与乐趣的探索之旅！
01-18 5万+
在探索鸿蒙精通之旅的第5天，我们深入了解TypeScript—— JavaScript的超集，它增添了静态类型检查的强大功能。本篇博客专注于TypeScript中的函数特性，覆盖了函数声明、参数、返回值、重载、箭头函数、类型别名、类型保护和类型断言等关键概念。通过本文，读者将能够提升代码质量，使其更加健壮和可维护。不仅适用于鸿蒙开发，也适用于广泛的JavaScript生态系统。关键词: TypeScript函数, 鸿蒙开发, JavaScript静态类型, 代码质量提升, 可维护代码。
PyTorch深度学习实战（18）——目标检测基础
盼小辉丶的博客
09-29 3317
目标检测是计算机视觉领域中的重要任务，它旨在从图像或视频中准确地定位和识别出感兴趣的目标物体，目标是将输入图像中的目标区域框出，并为每个目标提供正确的类别标签，在许多应用领域都有广泛的应用，包括智能监控、自动驾驶、人脸识别等。在本节中，介绍了如何利用 ybat 准备训练数据集、使用 SelectiveSearch 库实现区域提议算法、对模型的预测执行非极大值抑制以及衡量模型性能。
HTML5+CSS3学习笔记第九天
weixin_72043867的博客
08-16 799
web页面动态效果：平面转换、空间转换、动画效果
HTML5学习笔记 —— HTML开发入门
Lee Chen的博客
05-10 1649
来源于我的HTML5学习笔记，通过它可以快速入门HTML5，同时可以作为工作中快速查找知识点的利器。
Web前端HTML5表单的应用——调查问卷
weixin_60146902的博客
10-25 1667
调查问卷页面：该项目界面包含用户名输入框，日期格式输入框，性别单选按钮，兴趣复选框，文本域和提交按钮等。当用户单击提交按钮后就会将表单中填写的用户信息提交给服务器。其中体重的type类型为number表示只能填写数字格式内容；颜色的type类型为color，表示在颜色板中选择颜色。(注:number和color为HTML5新增的type类型)
web前端学习（五）——HTML5中设置简单的CSS样式（选择器、内联样式、内部样式表及外部样式表）
★★光亭★★
12-22 1万+
web前端学习（五）——HTML5中设置简单的CSS样式（选择器、内联样式、内部样式表及外部样式表）
HTML5画布框架fabricjs学习笔记（三）——自定义选择控制框样式
石沉溪洞
01-07 5257
这篇博文的主要内容有： 1. 如何修改控制框中的控制点、控制线的样式 2. 如何使用贴图覆盖默认的控制点样式 3. 如何添加自定义的控制点（如删除、锁定等）
网络安全入门学习第十五课——PHP基础
p36273的博客
06-10 1900
含义：Web的本意是蜘蛛网，在计算机领域中称为网页构成：它是一个由很多互相链接的超文本文件组成的系统资源：系统中每个有用的文件都称为“资源”，并由“通用资源标识符”（URI）进行定位，这些资源通过超文本传输协议（Hypertext Transfer Protocol，HTTP）传送给用户，用户单击链接即可获得资源。
HTML5+CSS大作业——个人网页设计(7页)
热门推荐
11-30 1万+
HTML5+CSS大作业——个人网页设计(7页) 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载! 获取更多源码 PC电脑端关注我们 ????作者主页-更多源码 ????HTML期
HarmonyOS开发预科之HTML5学习
lp00_00的博客
04-22 1089
HarmonyOS 开发预科班，前端必备！！！
HTML5期末大作业：网站——个人博客
04-18
这个“HTML5期末大作业：网站——个人博客”项目显然旨在让学生掌握并实践HTML5的相关知识，通过创建一个完整的个人博客网站来提升技能。在这个项目中，我们可以探讨以下几个关键知识点： 1. **HTML5结构元素**：...
JAVA-SE入门学习——第九讲IO流
06-08
JAVA-SE入门学习——第九讲IO流 在 Java 中，IO 流（Input/Output Stream）是一种基本的输入/输出机制，它允许程序读取和写入各种类型的数据。IO 流是 Java 编程语言的核心组件之一，它提供了一种通用的方式来处理...
三天学会PHP——第一天
08-28
【第一天学习重点】 1. **PHP环境搭建**：学习第一天，首先需要安装PHP运行环境，通常包括PHP解释器、Web服务器（如Apache或Nginx）以及数据库（如MySQL）。通过XAMPP或WAMP等集成环境可以简化这个过程。 2. **PHP...
HTML5教程——不错的教材
12-04
这个"HTML5教程——不错的教材"压缩包提供了一份详细的PDF教程，对于想要学习或深入了解HTML5的初学者来说，是一份非常有价值的资源。 HTML5的主要改进包括以下几个方面： 1. **语义化标签**：HTML5引入了一系列新...
php学习教程——十天学会php
01-09
**第九天：PHP与Web框架** - PHP框架介绍：Laravel, Symfony, CodeIgniter等 - MVC模式的理解与应用 - 使用框架快速开发Web应用 **第十天：PHP安全实践** - 输入验证与过滤 - 跨站脚本攻击（XSS）防护 - 跨站请求...
一、HTML5知识点精讲
最新发布
IT_Mr_guo的博客
08-21 245
1。
Freertos学习笔记
qq_45031559的博客
08-21 638
Freertos学习笔记
零基础学习人工智能—Python—Pytorch学习（六）
kiba518的博客
08-21 890
前言 本文主要讲神经网络的上半部分。 这篇文章开始有很多公式了，这些公式都很简单，但是如果是不经常在脑海里思考公式的人，那可能需要多花点时间做一下自我训练，个人感觉，也就几天时间，就能把自己感觉给调整出来。 习惯了公式看下面内容就会轻松很多，另外如果要深入学习人工智能，熟练的认知公式也是个必须的事情。 另外，我发现我前面文章写的有歧义的地方还是挺多，虽然，已经改了一部分，但，可能还有没发现的，大...
一起学习LeetCode热题100道（48/100）
weixin_53224223的博客
08-20 537
7.注意：虽然代码中包含了回溯部分（即减少当前路径和的计数并从prefixSums中删除它），但在本问题中，由于树是无环的，并且我们不需要精确跟踪每条路径，因此这部分是多余的。输入：root = [5,4,8,11,null,13,4,7,2,null,null,5,1], targetSum = 22。输入：root = [10,5,-3,3,2,null,11,3,-2,null,1], targetSum = 8。1.这是主函数，接收根节点和目标和作为参数，并返回满足条件的路径数量。
HTML5 Canvas游戏与娱乐开发基础
第八章和第九章，通过实际的游戏开发案例——太空保龄球游戏和小行星躲避游戏，将前面学到的知识整合运用。这两个项目将理论与实践相结合，让读者体验到使用HTML5 Canvas开发游戏的乐趣和挑战。 第十章则展望了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值