文章目录
- 01_图片的列表
- 02_京东左侧导航条
- 03_网易新闻的右侧的列表
- 04_w3导航条
- 05_京东的轮播图
- 06_京东顶部导航条
- 07_背景重复
- 08_按钮练习
- 09_按钮练习
- 10_电影卡片
- 11_米兔的动画
- 11_米兔的动画
- 13.钟表
- 14.复仇者联盟
- 15.再做导航条
- 16.淘宝导航
- 17.移动端页面
- 18.美图
01_图片的列表
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>图片列表</title><link rel="stylesheet" href="./css/reset.css"><style>body{background-color: antiquewhite}.img-list{width: 190px;height: 470px;overflow: hidden;margin: 50px auto;background-color: #F4F4F4;}.img-list li:not(:last-child){margin-bottom: 9px;}.img-list img{width: 100%;}</style>
</head>
<body><ul class="img-list"><li><a href="javascript:;"><img src="./img/01/1.jpg" alt=""></a></li><li><a href="javascript:;"><img src="./img/01/2.jpg" alt=""></a></li><li><a href="javascript:;"><img src="./img/01/3.jpg" alt=""></a></li></ul></body>
</html>
02_京东左侧导航条
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>京东的左侧导航</title><link rel="stylesheet" href="./css/reset.css"><style>body{background-color: #bfa;}.left-nav{width: 190px;height: 450px;padding: 10px 0;background-color: #fff;margin: 50px auto;}.left-nav .item{height: 25px;line-height: 25px;padding-left: 18px;font-size: 12px;}.item .line{padding: 0 2px;}.item:hover{background-color: #d9d9d9;}.item a{font-size: 14px;color: #333;text-decoration: none;}.item a:hover{color: #c81623;}</style>
</head><body><nav class="left-nav"><div class="item"><a href="#">家用电器</a></div><div class="item"><a href="#">手机</a><span class='line'>/</span><a href="#">运营商</a><span class='line'>/</span><a href="#">数码</a></div><div class="item"><a href="#">电脑</a><span class='line'>/</span><a href="#">办公</a></div><div class="item"><a href="#">家居</a><span class='line'>/</span><a href="#">家具</a><span class='line'>/</span><a href="#">家装</a><span class='line'>/</span><a href="#">厨具</a></div><div class="item"><a href="#">男装</a><span class='line'>/</span><a href="#">女装</a><span class='line'>/</span><a href="#">童装</a><span class='line'>/</span><a href="#">内衣</a></div><div class="item"><a href="#">美妆</a><span class='line'>/</span><a href="#">个护清洁</a><span class='line'>/</span><a href="#">宠物</a></div><div class="item"><a href="#">女鞋</a><span class='line'>/</span><a href="#">箱包</a><span class='line'>/</span><a href="#">钟表</a><span class='line'>/</span><a href="#">珠宝</a></div><div class="item"><a href="#">男鞋</a><span class='line'>/</span><a href="#">运动</a><span class='line'>/</span><a href="#">户外</a></div><div class="item"><a href="#">房产</a><span class='line'>/</span><a href="#">汽车</a><span class='line'>/</span><a href="#">汽车用品</a></div><div class="item"><a href="#">母婴</a><span class='line'>/</span><a href="#">玩具乐器</a></div><div class="item"><a href="#">食品</a><span class='line'>/</span><a href="#">酒类</a><span class='line'>/</span><a href="#">生鲜</a><span class='line'>/</span><a href="#">特产</a></div><div class="item"><a href="#">艺术</a><span class='line'>/</span><a href="#">礼品鲜花</a><span class='line'>/</span><a href="#">农资绿植</a></div><div class="item"><a href="#">医药保健</a><span class='line'>/</span><a href="#">计生情趣</a></div><div class="item"><a href="#">图书</a><span class='line'>/</span><a href="#">文娱</a><span class='line'>/</span><a href="#">电子书</a></div><div class="item"><a href="#">机票</a><span class='line'>/</span><a href="#">酒店</a><span class='line'>/</span><a href="#">旅游</a><span class='line'>/</span><a href="#">生活</a></div><div class="item"><a href="#">理财</a><span class='line'>/</span><a href="#">众筹</a><span class='line'>/</span><a href="#">白条</a><span class='line'>/</span><a href="#">保险</a></div><div class="item"><a href="#">安装</a><span class='line'>/</span><a href="#">维修</a><span class='line'>/</span><a href="#">清洗</a><span class='line'>/</span><a href="#">二手</a></div><div class="item"><a href="#">工业品</a></div></nav></body></html>
03_网易新闻的右侧的列表
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>网易的新闻列表</title><link rel="stylesheet" href="./css/reset.css"><style>a{text-decoration: none;}.news-wrapper{width: 300px;height: 357px;margin: 50px auto;background-color: #fff;border-top: 1px solid #ddd;}.news-title{display: inline-block;height: 30px;border-top: 1px red solid;margin-top: -1px;padding-top: 10px;}.news-title a{color: #40406B;font-weight: bold;}.news-img{height: 150px;}.news-img .img-title{margin-top: -30px;color: #fff;font-weight: bold;padding-left: 30px;}.news-list{margin-top: 20px;}.news-list li{margin-bottom: 17px;}.news-list li::before{content: '■';color: rgb(218, 218, 218);font-size: 12px;margin-right: 4px;}.news-list li a{font-size: 14px;color: #666;}.news-list li a:hover{color: red;}</style>
</head><body><div class="news-wrapper"><h2 class="news-title"><a href="#">体育</a></h2><div class="news-img"><a href="#"><img src="./img/03/1.jpeg" alt="费德勒"><h3 class="img-title">费德勒首负迪米 扶额头不满发挥</h3></a></div><ul class="news-list"><li><a href="#">乔治:我爱LA 喜欢和LBJ一起打球</a></li><li><a href="#">格林:3年前降薪就在等KD 特制T恤嘲讽LBJ</a></li><li><a href="#">塔克4000双鞋让保罗羡慕嫉妒 乔丹被震惊</a></li><li><a href="#">CBA下季新赛制:常规赛4组循环 增至46轮</a></li></ul></div></body></html>
04_w3导航条
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>导航条</title><link rel="stylesheet" href="./css/reset.css"><style>.nav{width: 1210px;height: 48px;background-color: #E8E7E3;margin:100px auto;}.nav li{float: left;line-height: 48px;}.nav a{display: block;text-decoration: none;color: #777777;font-size: 18px;padding: 0 39px;}.nav li:last-child a{padding: 0 42px 0 41px;}.nav a:hover{background-color: #3F3F3F;color: #E8E7E3;}</style>
</head><body><ul class="nav"><li><a href="#">HTML/CSS</a></li><li><a href="#">Browser Side</a></li><li><a href="#">Server Side</a></li><li><a href="#">Programming</a></li><li><a href="#">XML</a></li><li><a href="#">Web Building</a></li><li><a href="#">Reference</a></li></ul></body></html>
05_京东的轮播图
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link rel="stylesheet" href="./css/reset.css"><style>.img-list{width: 590px;height: 470px;margin: 100px auto;position: relative;}.img-list li{position: absolute;}.img-list li:nth-child(4){z-index: 1;}.pointer{position: absolute;z-index: 9999;bottom: 20px;left: 40px;}.pointer a{float: left;width: 10px;height: 10px;margin: 0px 2px;border-radius: 50%;background-color: rgba(255, 255, 255, .3);background-clip: content-box;border: 2px solid transparent;}.pointer a.active,.pointer a:hover{background-color: #fff;border: 2px solid rgba(255, 255, 255, .3);}</style>
</head>
<body><ul class="img-list"><li><a href="javascript:;"><img src="./img/05/1.jpg"></a></li><li><a href="javascript:;"><img src="./img/05/2.jpg"></a></li><li><a href="javascript:;"><img src="./img/05/3.jpg"></a></li><li><a href="javascript:;"><img src="./img/05/4.jpg"></a></li><li><a href="javascript:;"><img src="./img/05/5.jpg"></a></li><li><a href="javascript:;"><img src="./img/05/6.jpg"></a></li><li><a href="javascript:;"><img src="./img/05/7.jpg"></a></li><li><a href="javascript:;"><img src="./img/05/8.jpg"></a></li><div class="pointer"><a class="active" href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a></div></ul>
</body>
</html>
06_京东顶部导航条
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>京东顶部导航条</title><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./fa/css/all.css"><style>.clearfix::before,.clearfix::after{content: '';display: table;clear: both;}body{font:12px/1.5 Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;}.top-bar-wrapper{width: 100%;background-color: #E3E4E5;height: 30px;line-height: 30px;border-bottom: 1px #ddd solid}.top-bar{width: 1190px;margin: 0 auto;position: relative;}.top-bar a ,.top-bar span,.top-bar i{color: #999;text-decoration: none;}.top-bar a:hover,.top-bar a.highlight{color: #f10215;}.location{float: left;}.location .fas{color: #f10215;}.location .city-list{display: none;width: 320px;height: 436px;background-color: white;border: 1px solid rgb(204, 204, 204);position: absolute;top:31px;z-index: 999;box-shadow: 0 2px 2px rgba(0, 0, 0, .2)}.location:hover .city-list{display: block;}.current-city{padding: 0 10px;border: 1px solid transparent;border-bottom: none;position: relative;z-index: 9999;}.location:hover .current-city{background-color: white;border: 1px solid rgb(204, 204, 204);border-bottom: none;padding-bottom: 1px;}.shortcut{float: right;}.shortcut .line{width: 1px;height: 10px;background-color: rgb(204, 202, 202);margin: 12px 12px 0;}.shortcut li{float: left;}</style>
</head><body><div class="top-bar-wrapper"><div class="top-bar clearfix"><div class="location"><div class="current-city"><i class="fas fa-map-marker-alt"></i><a href="javascript:;">北京</a></div><div class="city-list"></div></div><ul class="shortcut clearfix"><li><a href="javascript:;">你好，请登录</a><a class="highlight" href="javascript:;">免费注册</a></li><li class="line"></li><li><a href="javascript:;">我的订单</a></li><li class="line"></li><li><a href="javascript:;">我的京东</a><i class="fas fa-angle-down"></i></li><li class="line"></li><li><a href="javascript:;">京东会员</a></li><li class="line"></li><li><a class="highlight" href="javascript:;">企业采购</a><i class="fas fa-angle-down"></i></li><li class="line"></li><li><span>客户服务</span><i class="fas fa-angle-down"></i></li><li class="line"></li><li><span>网站导航</span><i class="fas fa-angle-down"></i></li><li class="line"></li><li><span>手机京东</span></li></ul></div></div>
</body></html>
07_背景重复
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.box1{width: 990px;height: 32px;margin: 0 auto;background: url('./img/07/bg.png') repeat-x;}</style>
</head>
<body><div class="box1"></div></body>
</html>
08_按钮练习
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>a:link{display: block;width: 93px;height: 29px;background-image: url('./img/08/link.png')}a:hover{background-image: url('./img/08/hover.png')}a:active{background-image: url('./img/08/active.png')}</style>
</head>
<body><a href="javascript:;"></a></body>
</html>
09_按钮练习
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>a:link{display: block;width: 93px;height: 29px;background-image: url('./img/09/btn.png')}a:hover{background-position: -93px 0;}a:active{background-position: -186px 0;}.box1{width: 128px;height: 46px;background-image: url('./img/09/amazon-sprite_.png');background-position:0 0;}.box2{width: 42px;height: 30px;background-image: url('./img/09/amazon-sprite_.png');background-position: -58px -338px;}</style>
</head>
<body><div class="box1"></div><div class="box2"></div><a href="javascript:;"></a></body>
</html>
10_电影卡片
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./fa/css/all.css"><style>.outer{width: 240px;margin: 100px auto;box-shadow: 0 0 10px rgba(0, 0, 0, .3);}.img-wrapper img{width: 100%;vertical-align: bottom;}.info{padding: 0 18px;color: #acaaaa;font-size: 14px;}.info .title{color: #717171;font-size: 18px;margin: 13px 0 15px 0;}.info .category i{margin-left: 4px;margin-right: 7px;}.info .intro{margin: 18px 4px;line-height: 20px;}.star-wrapper{height: 46px;line-height: 46px;border-top: 1px solid #e9e9e9;color: #ddd;padding: 0 16px;}.star-wrapper .star{float: left;}.star-wrapper .light{color: #b9cb41;}.star-wrapper .weibo{float: right;}</style>
</head>
<body><div class="outer"><div class="img-wrapper"><img src="./img/10/1.jpg" alt=""></div><div class="info"><h2 class="title">动画电影</h2><h3 class="category"><i class="fas fa-map-marker-alt"></i>动画</h3><p class="intro">这是一部迪士尼的动画电影，非常非常的好看</p></div><div class="star-wrapper"><ul class="star"><li class="fas fa-star light"></li><li class="fas fa-star light"></li><li class="fas fa-star"></li><li class="fas fa-star"></li></ul><ul class="weibo"><li class="fab fa-weibo"></li></ul></div></div></body>
</html>
11_米兔的动画
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.box1{height: 271px;width: 132px;margin: 0 auto;background-image: url(./img/11/bigtap-mitu-queue-big.png);background-position: 0 0;transition:0.3s steps(3);}.box1:hover{background-position: -396px 0;}</style>
</head>
<body><div class="box1"></div></body>
</html>
11_米兔的动画
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.box1{width: 256px;height: 256px;margin: 0 auto;background-image: url('./img/12/bg2.png');animation: run 1s steps(6) infinite;}@keyframes run {from{background-position: 0 0;}to{background-position: -1536px 0;}}</style>
</head>
<body><div class="box1"></div>
</body>
</html>
13.钟表
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>* {margin: 0;padding: 0;}.clock {width: 500px;height: 500px;margin: 0 auto;margin-top: 100px;border-radius: 50%;position: relative;background-image: url(./img/13/bg3.jpg);background-size: cover;}.clock>div {position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;}.hour-wrapper {height: 70%;width: 70%;animation: run 7200s linear infinite;}.hour {height: 50%;width: 6px;background-color: #000;margin: 0 auto;}.min-wrapper {height: 80%;width: 80%;animation: run 600s steps(60) infinite;}.min {height: 50%;width: 4px;background-color: #000;margin: 0 auto}.sec-wrapper {height: 90%;width: 90%;animation: run 10s steps(60) infinite;}.sec {height: 50%;width: 2px;background-color: #f00;margin: 0 auto}@keyframes run {from {transform: rotateZ(0);}to {transform: rotateZ(360deg);}}</style>
</head><body><div class="clock"><div class="hour-wrapper"><div class="hour"></div></div><div class="min-wrapper"><div class="min"></div></div><div class="sec-wrapper"><div class="sec"></div></div></div></body></html>
14.复仇者联盟
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>html {perspective: 800px}.cube {width: 200px;height: 200px;margin: 100px auto;transform-style: preserve-3d;animation: rotate 20s infinite linear;}.cube>div {width: 200px;height: 200px;opacity: 0.7;position: absolute;}img {vertical-align: top;}.box1 {transform: rotateY(90deg) translateZ(100px);}.box2 {transform: rotateY(-90deg) translateZ(100px);}.box3 {transform: rotateX(90deg) translateZ(100px);}.box4 {transform: rotateX(-90deg) translateZ(100px);}.box5 {transform:rotateY(180deg) translateZ(100px);}.box6 {transform: rotateY(0deg) translateZ(100px);}@keyframes rotate {form{transform:rotateX(0) rotateZ(0)}to{transform:rotateX(1turn) rotateZ(1turn)}}</style>
</head><body><div class="cube"><div class="box1"><img src="./img/14/1.jpg"></div><div class="box2"><img src="./img/14/2.jpg"></div><div class="box3"><img src="./img/14/3.jpg"></div><div class="box4"><img src="./img/14/4.jpg"></div><div class="box5"><img src="./img/14/5.jpg"></div><div class="box6"><img src="./img/14/6.jpg"></div></div>
</body></html>
15.再做导航条
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link rel="stylesheet" href="css/reset.css"><style>.nav{width: 1210px;height: 48px;line-height: 48px;margin: 50px auto;background-color: #E8E7E3;display: flex;}.nav li{flex-grow: 1;}.nav a{display: block;color: #808080;text-decoration: none;font-size: 16px;text-align: center;}.nav a:hover{background-color: #636363;color: #fff;}</style>
</head>
<body><ul class="nav"><li><a href="#">HTML/CSS</a></li><li><a href="#">Browser Side</a></li><li><a href="#">Server Side</a></li><li><a href="#">Programming</a></li><li><a href="#">XML</a></li><li><a href="#">Web Building</a></li><li><a href="#">Reference</a></li></ul>
</body>
</html>
16.淘宝导航
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>* {margin: 0;padding: 0;}.nav{width: 100%;}.nav-inner{display: flex;justify-content: space-around;}.item{width: 18%;text-align: center;}.item img{width: 100%;}.item a{color: #333;text-decoration: none;font-size: 16px;}</style>
</head><body><nav class="nav"><div class="nav-inner"><div class="item"><a href="#"><img src="img/16/1.png"><span>天猫</span></a></div><div class="item"><a href="#"><img src="img/16/2.png"><span>聚划算</span></a></div><div class="item"><a href="#"><img src="img/16/3.png"><span>天猫国际</span></a></div><div class="item"><a href="#"><img src="img/16/4.png"><span>外卖</span></a></div><div class="item"><a href="#"><img src="img/16/5.png"><span>天猫超市</span></a></div></div><div class="nav-inner"><div class="item"><a href="#"><img src="img/16/6.png"><span>充值中心</span></a></div><div class="item"><a href="#"><img src="img/16/7.png"><span>飞猪旅行</span></a></div><div class="item"><a href="#"><img src="img/16/8.png"><span>领金币</span></a></div><div class="item"><a href="#"><img src="img/16/9.png"><span>拍卖</span></a></div><div class="item"><a href="#"><img src="img/16/10.png"><span>分类</span></a></div></div></nav>
</body></html>
17.移动端页面
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>爱学习</title><link rel="stylesheet" href="./fa/css/all.min.css"><link rel="stylesheet" href="./css/style.css">
</head><body><header class="top-bar"><div class="menu-btn"><a href="#"><i class="fas fa-stream"></i></a></div><h1 class="logo"><a href="#">爱学习</a></h1><div class="search-btn"><a href="#"><i class="fas fa-search"></i></a></div></header><div class="banner"><a href="#"><img src="./img/17/banner.png" alt=""></a></div><nav class="menu"><a class="course" href="#"><i class="fas fa-book"></i>我的课程</a><a class="star" href="#"><i class="fas fa-cut"></i>明星讲师</a><a class="sub" href="#"><i class="fas fa-envelope"></i>我的订阅</a><a class="download" href="#"><i class="fas fa-globe"></i>我的下载</a></nav><div class="course-list"><div class="title"><h2>最新课程</h2><a class="more" href="#">更多+</a></div><div class="item-list"><div class="item"><div class="cover"><img src="img/17/cover.png" alt=""></div><h3 class="course-title">摄影课程</h3><div class="user-info"><div class="avatar"><img src="img/17/avatar.png" alt=""></div><div class="nickname">令狐冲</div></div></div><div class="item"><div class="cover"><img src="img/17/cover.png" alt=""></div><h3 class="course-title">摄影课程</h3><div class="user-info"><div class="avatar"><img src="img/17/avatar.png" alt=""></div><div class="nickname">令狐冲</div></div></div><div class="item"><div class="cover"><img src="img/17/cover.png" alt=""></div><h3 class="course-title">摄影课程</h3><div class="user-info"><div class="avatar"><img src="img/17/avatar.png" alt=""></div><div class="nickname">令狐冲</div></div></div><div class="item"><div class="cover"><img src="img/17/cover.png" alt=""></div><h3 class="course-title">摄影课程</h3><div class="user-info"><div class="avatar"><img src="img/17/avatar.png" alt=""></div><div class="nickname">令狐冲</div></div></div><div class="item"><div class="cover"><img src="img/17/cover.png" alt=""></div><h3 class="course-title">摄影课程</h3><div class="user-info"><div class="avatar"><img src="img/17/avatar.png" alt=""></div><div class="nickname">令狐冲</div></div></div><div class="item"><div class="cover"><img src="img/17/cover.png" alt=""></div><h3 class="course-title">摄影课程</h3><div class="user-info"><div class="avatar"><img src="img/17/avatar.png" alt=""></div><div class="nickname">令狐冲</div></div></div></div></div><div class="course-list"><div class="title"><h2>最新课程</h2><a class="more" href="#">更多+</a></div><div class="item-list"><div class="item"><div class="cover"><img src="img/17/cover.png" alt=""></div><h3 class="course-title">摄影课程</h3><div class="user-info"><div class="avatar"><img src="img/17/avatar.png" alt=""></div><div class="nickname">令狐冲</div></div></div><div class="item"><div class="cover"><img src="img/17/cover.png" alt=""></div><h3 class="course-title">摄影课程</h3><div class="user-info"><div class="avatar"><img src="img/17/avatar.png" alt=""></div><div class="nickname">令狐冲</div></div></div><div class="item"><div class="cover"><img src="img/17/cover.png" alt=""></div><h3 class="course-title">摄影课程</h3><div class="user-info"><div class="avatar"><img src="img/17/avatar.png" alt=""></div><div class="nickname">令狐冲</div></div></div><div class="item"><div class="cover"><img src="img/17/cover.png" alt=""></div><h3 class="course-title">摄影课程</h3><div class="user-info"><div class="avatar"><img src="img/17/avatar.png" alt=""></div><div class="nickname">令狐冲</div></div></div><div class="item"><div class="cover"><img src="img/17/cover.png" alt=""></div><h3 class="course-title">摄影课程</h3><div class="user-info"><div class="avatar"><img src="img/17/avatar.png" alt=""></div><div class="nickname">令狐冲</div></div></div><div class="item"><div class="cover"><img src="img/17/cover.png" alt=""></div><h3 class="course-title">摄影课程</h3><div class="user-info"><div class="avatar"><img src="img/17/avatar.png" alt=""></div><div class="nickname">令狐冲</div></div></div></div></div><div class="course-list"><div class="title"><h2>最新课程</h2><a class="more" href="#">更多+</a></div><div class="item-list"><div class="item"><div class="cover"><img src="img/17/cover.png" alt=""></div><h3 class="course-title">摄影课程</h3><div class="user-info"><div class="avatar"><img src="img/17/avatar.png" alt=""></div><div class="nickname">令狐冲</div></div></div><div class="item"><div class="cover"><img src="img/17/cover.png" alt=""></div><h3 class="course-title">摄影课程</h3><div class="user-info"><div class="avatar"><img src="img/17/avatar.png" alt=""></div><div class="nickname">令狐冲</div></div></div><div class="item"><div class="cover"><img src="img/17/cover.png" alt=""></div><h3 class="course-title">摄影课程</h3><div class="user-info"><div class="avatar"><img src="img/17/avatar.png" alt=""></div><div class="nickname">令狐冲</div></div></div><div class="item"><div class="cover"><img src="img/17/cover.png" alt=""></div><h3 class="course-title">摄影课程</h3><div class="user-info"><div class="avatar"><img src="img/17/avatar.png" alt=""></div><div class="nickname">令狐冲</div></div></div><div class="item"><div class="cover"><img src="img/17/cover.png" alt=""></div><h3 class="course-title">摄影课程</h3><div class="user-info"><div class="avatar"><img src="img/17/avatar.png" alt=""></div><div class="nickname">令狐冲</div></div></div><div class="item"><div class="cover"><img src="img/17/cover.png" alt=""></div><h3 class="course-title">摄影课程</h3><div class="user-info"><div class="avatar"><img src="img/17/avatar.png" alt=""></div><div class="nickname">令狐冲</div></div></div></div></div>
</body></html>
18.美图
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./fa/css/all.min.css"><link rel="stylesheet" href="./meitu/style.css">
</head>
<body>
<div class="top-bar-wrapper"><div class="top-bar"><div class="left-menu"><ul class="menu-icon"><li></li><li></li><li></li></ul><ul class="nav"><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="#"><i class="fas fa-search"></i></a><span>搜索 Meitu.com</span></li></ul></div><h1 class="logo"><a href="/">美图手机</a></h1><div class="user-info"><a href="#"><i class="fas fa-user"></i></a></div></div>
</div></body>
</html>
![[MFC]后台获取讯飞语音输入法内容](https://img-blog.csdnimg.cn/aa5cb35617994842b7d2bef1551bad73.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAUGFuZ0NvZGVy,size_18,color_FFFFFF,t_70,g_se,x_16)
