寒假打卡 2020/2/4 ——淘宝静态页面

效果图片(晚上写的明天有空的叭)

今天跟着视频整了个淘宝的静态页面,由于一些必要的图片只能截图,自己又懒,so…只写了个大概的框,一些文字内容就,放飞自我了~ 教学视频网址如下:

链接: https://ke.qq.com/webcourse/index.html#cid=231570&term_id=100273162&taid=2861371637336210&vid=5285890796490241647.

一些代码(一部分,我还没写完)

高亮的 代码片.

// An highlighted block
<!DOCTYPE html>
<html><head><title>淘!你喜欢~~~</title><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="css/index.css"><link rel="icon" href="taobao.ico"><base target="_blank">
</head><body><!-- 头部信息 --><div id="headMessage" class="clearfix layer"><ul class="fl"><li><span>中国大陆</span><span class="iconfont arrow">&#xe60b;</span></li><li><a href="#" class="login mr7"><strong>亲,请登录</strong></a><a href="#" class="mr7">免费注册</a></li><li><span class="iconfont mr5">&#xe63b;</span><span>消息</span><span class="iconfont arrow">&#xe60b;</span></li><li><a href="#">手机逛淘宝</a></li></ul><ul class="fr"><li><a href="#">我的淘宝</a><span class="iconfont arrow">&#xe60b;</span></li><li><a href="#"><span class="iconfont mr5 c4">&#xe604;</span>购物车<strong class="c4">28</strong></a><span class="iconfont arrow">&#xe60b;</span></li><li><a href="#"><span class="iconfont mr5 store">&#xe627;</span>收藏夹</a><span class="iconfont arrow">&#xe60b;</span></li><li><a href="#">商品分类</a></li><li class="line">|</li><li><a href="#">千牛卖家中心</a><span class="iconfont arrow">&#xe60b;</span></li><li><a href="#">联系客服</a><span class="iconfont arrow">&#xe60b;</span></li><li><a href="#"><span class="iconfont mr5 c4">&#xe611;</span>网站导航</a><span class="iconfont arrow">&#xe60b;</span></li></ul></div><!-- 头部广告 --><div id="headAd"><div class="layer clearfix"><a href="#" class="fl go"><img src="img/smallP.PNG" alt="图片"></a><ul class="fr"><li class="item1"><a href="#" class="fr"><img src="img/smallP.PNG" alt="图片"></a><h3><a href="">电视会场</a></h3><p><a href="">直降2000</a></p></li><li class="item2"><a href="#" class="fr"><img src="img/smallP.PNG" alt="图片"></a><h3><a href="">迪士尼</a></h3><p><a href="">直降3000</a></p></li><li class="item3"><a href="#" class="fr"><img src="img/smallP.PNG" alt="图片"></a><h3><a href="">宿舍用品</a></h3><p><a href="">直降100</a></p></li><li class="item4"><a href="#" class="fr"><img src="img/smallP.PNG" alt="图片"></a><h3><a href="">芭比娃娃</a></h3><p><a href="">直降100</a></p></li><li class="item5"><a href="#" class="fr"><img src="img/smallP.PNG" alt="图片"></a><h3><a href="">直升飞机</a></h3><p><a href="">直降10000</a></p></li></ul></div></div><!-- 头部搜索 --><div id="headSearch"><div class="layer clearfix"><!-- 分三部分,先左右,后中间 --><h1 class="fl"><a href="#" id="Taobao" target="_blank">淘宝网</a></h1><!-- 二维码 --><div class="code fr"><span class="iconfont close">&#xe637;</span><span class="c5">扫码好友</span><img src="img/smallP.PNG" alt="tupian"></div><!-- 搜索栏 --><div class="search"><!-- 搜索上部 --><ul class="searchTab clearfix"><li class="active">宝贝</li><li>天猫</li><li>店铺</li></ul><!-- 搜索中部 --><div class="searchContent clearfix"><!-- 搜索框 --><div class="searchBox fl"><input type="text"><div class="placeholder"><i class="iconfont">&#xe621;</i><span>dddddddddddddddddd</span></div><span class="iconfont">&#xe63f;</span></div><!-- 搜索按钮 --><div class="btn fl"><button class="submit">搜索</button></div></div><!-- 搜索下部 --><div class="hotkey"><a href="#">新款连衣裙</a><a href="#">四件套</a><a href="#">潮流T恤</a><a href="#">时尚女鞋</a><a href="#">短裤</a><a href="#">男士外套</a><a href="#">墙纸</a><a href="#">行车记录仪</a><a href="#">半身裙</a><a href="#">新款男鞋</a><a href="#">耳机</a><a href="#">时尚女包</a><a href="#">沙发</a></div></div></div></div><!-- 第一屏幕 --><div id="firstScreen"></div><!-- 第二屏幕 --><div id="secScreen"></div>
</body></html>

计划

  1. 2020/2/4 基本完成
  2. 2020/2/5 javascript教程
  3. 20202/6 javascript教程

学习打卡 2020/2/4相关推荐

  1. 坚持学习打卡的人,将来会变成什么样?

    坚持打卡的人,将来会变成怎么样?让我们拭目以待.我组织了一个打卡活动,希望大家踊跃参加. 有一个励志故事: 在中国的最东边生长着一种竹子,名叫"毛竹".那里的农民到处播种,每天精心 ...

  2. numpy 转存为matlab_Numpy学习打卡task01

    今天带来的是Datawhale自主学习Numpy下学习打卡笔记第一部分-输入输出(为什么没有上,别问,问就是numpy.tan(90)).本文大致介绍了numpy的相关背景知识.本文素材来自网络及da ...

  3. 普中科技开发板使用说明书_百度大脑加持,米尔科技FZ3深度学习计算卡评测

    如果你要问我现在电子产业什么最热,那无疑是AI,而基于大数据训练的深度学习技术可以说是目前AI应用的最广,最成功的产品形态了,覆盖我们生活的方方面面,诸如购物.看病.新闻编辑等,在这高深技术的背后少不 ...

  4. zynq无法识别sd卡_百度米尔携手推出FZ3深度学习计算卡!

    前言:百度大脑是百度 AI 核心技术引擎,包括视觉.语音.自然语言处理.知识图谱.深度学习等AI核心技术和AI开放平台. 基于 Xilinx Zynq UltraScale+ MPSoC 的 Edge ...

  5. cad截图软件_AutoCAD电气制图协会线上CAD学习打卡活动结束

    为了给同学们营造一个良好的学习氛围,让同学们在轻松的氛围下完成自己的CAD学习计划,在6月10日,AutoCAD电气制图协会举办的为时7天的线上CAD学习打卡活动正式结束.此次线上CAD学习打卡活动由 ...

  6. Mathmatica的学习打卡day 16

    Mathmatica的学习打卡day 16 ----太原理工大学机器人团队 今天的学习内容为二维数据作图(学习来自哔哩哔哩) ListPlot函数 ListPlot函数是用来绘制散点图的,ListPl ...

  7. 微信群,组队学习打卡

    组队学习打卡.一年时间太长,我怕不能每天坚持学习,希望可以和有梦想的你每天来组队打卡学习以此培养出来一个好习惯!!! 为了保证群的质量,有以下群规需要遵守: 为了防止偷偷潜水,每人进群前必须交5元违约 ...

  8. 基于Android的学生学习打卡监督系统

    文档+任务书+选题申请表+开题报告+开题答辩PPT+项目源码 毕 业 论 文 目 录 1.绪论 1 1.1课题开发背景 2 1.2课题开发目的及意义 3 2.系统分析 3 2.1研究目标 3 2.2需 ...

  9. 5-2 学习打卡(11.7)

    这是最后一次在5-2写文章了,下周准时搬到七楼,上面桌子感觉更大点,不知道是不是我的错觉,最近放松了几日,整个人状态已经恢复不少,现在知道学习要有多元性,之前一直刷题刷我的几丝迷茫与浮躁. To do ...

最新文章

  1. 解表化饮什么意思_为什么有人动不动就一身汗,有人再热也不出汗?中医告诉真实原因...
  2. Storm(一)集群搭建
  3. 2016年EDM营销新年策略分享
  4. sql查询所有商品的信息_属于菜鸟的sql 干货(7)
  5. 125. Valid Palindrome
  6. hashmap删除指定key_HashTable和HashMap的区别详解
  7. 数据结构关键路径_数据结构与算法之关键路径_一点课堂(多岸学院)
  8. 开机cpu风扇声音大_联想拯救者R720笔记本,开机显示暗屏,二修机多故障完美修复...
  9. 案例 实现文件读写器 c# 1614523907
  10. Java开发人员可以从Spring框架中学到编程技巧
  11. 显示visual studio试用版序列号输入框小程序_Visual Studio 2008试用版的评估期已经结束 的解决方法...
  12. Linux(二、三、四)简单命令、系统目录结构、文件类型、命令行管理文件学习
  13. 技术江湖--讲座笔记
  14. MySQL之B+树详解
  15. OpenCore 黑苹果安装教程
  16. 打造我们自己的数字图书馆
  17. 云产研见客户的行为分析
  18. 【TWVRP】遗传算法求解带时间窗的含充电站车辆路径规划问题【含Matlab源码 1177期】
  19. 仿射变换和透视变换矩阵的参数含义与区别
  20. vue3+ts Type ‘xxx[]‘ is not assignable to type ‘never[]‘

热门文章

  1. mysql忘记密码win10_win10 mysql8.0.12 忘记root密码如何重置密码
  2. 安装glib2.6x
  3. ei论文计算机,容易写的计算机ei论文题目 计算机ei专业论文题目如何拟
  4. 图像处理基础与理解 随笔一 图像的内插
  5. 【ACWing】1022. 宠物小精灵之收服
  6. 友情检测北京某大学网站
  7. android 涟漪背景,Android 水波效果 | 涟漪效果 实现
  8. iOS-使用CoreLocation定位
  9. 边缘之战鸣枪 新华三蓄势待发
  10. Newline required at end of file but not found.