day 4 learn html

2019/11/14

学习资料来自老男孩与尚学堂

1. CSS拾遗之图标

图标有三种制作方法：

  • 图片
  • css(小箭头用CSS搞定)
  • 自己画font(fontawsome插件)

    fontawsome插件下载之后，解压，新版的与老版不一样。

2. html文件的目录结构

xxx project

    - app

      - s1.html

      - s2.html

    - css

      - commons.css

    - script

      - commons.js

    - plugin

      - fontawsome

      - bootstrap

      - ...

3. CSS拾遗之a包含标签

image默认是有个边框的，在chrom中没事，但是在IE Browser里面就会把边框显示出来，所以要将image标签的边框设为0.

<hedad>

    <style>

        img{

            border: 0;

        }

        /*  IE浏览器会产生边框，所以要将边框设为0 */

    </style>

</head>

<body>

    <a href="wwww.baidu.com">lanxing</a>

    <a href="www.baidu.com">

        <img sytle="height:300px;width:400px" src="wallpaper1.jpg" alt="lanxing">

    <a>

<body>

4. CSS拾遗之箭头画法

 <style>

        .up {

            border-top: 30px solid green;

            border-right: 30px solid transparent;

            border-bottom: 30px solid transparent;

            border-left: 30px solid transparent;

            display: inline-block;

        }

        .down {

            border-top: 30px solid transparent;

            border-right: 30px solid transparent;

            border-bottom: 30px solid red;

            border-left: 30px solid transparent;

            display: inline-block;

        }

        .c1 {

            border: 30px solid transparent;

            border-top: 30px solid green;

            display: inline-block;

            margin-top: 40px;

        }

        .c1:hover {

            border: 30px solid transparent;

            border-bottom: 30px solid green;

            margin-top: 10px;

        }

    </style>

</head>

<body>

    <div class="up"></div>

    <div class="down"></div>

    <div style="height: 100px; background-color: red;">

        <div class="c1"></div>

    </div>

</body>

python day 22 CSS拾遗之箭头，目录，图标的更多相关文章

  1. CSS快速入门-箭头和图标

    一.三步搞懂箭头产生的原理 在前面的盒子模型一文中,我们已经知道了一个元素空间占位.为了弄明白箭头的产生,我们可以三步走: #demo12 { border: 100px solid; border- ...

  2. Python开发【第一篇】：目录

    本系列博文包含 Python基础.前端开发.Web框架.缓存以及队列等,希望可以给正在学习编程的童鞋提供一点帮助!!! Python开发[第一篇]:目录 Python开发[第二篇]:初识Python ...

  3. Python基于Python实现批量上传文件或目录到不同的Linux服务器

    基于Python实现批量上传文件或目录到不同的Linux服务器   by:授客 QQ:1033553122 实现功能 1 测试环境 1 使用方法 1 1. 编辑配置文件conf/rootpath_fo ...

  4. 【Python全栈-CSS】CSS入门

    CSS入门教程 参考: http://www.cnblogs.com/yuanchenqi/articles/5977825.html http://www.ruanyifeng.com/blog/2 ...

  5. 使用纯CSS实现带箭头的提示框

    爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6187323.html 1.全部代码 <!DOCTYPE html> < ...

  6. lib/sqlalchemy/cextension/processors.c:10:20: 致命错误： Python.h：没有那个文件或目录

    本文地址:http://www.cnblogs.com/yhLinux/p/4063444.html $ sudo easy_install sqlalchemy [sudo] password fo ...

  7. css实现带箭头选项卡

    这阵子在做一个web端项目中遇到一个问题,需要实现带箭头的选项卡点击可切换.起初没想太多,直接切一个向上的小箭头图片,外层div设置相同颜色的边框,再用相对定位和绝对定位.这种方法是可行的,但是因为手 ...

  8. 致命错误： Python.h：没有那个文件或目录

    In file included from greenlet.c:5:0: greenlet.h:8:20: 致命错误: Python.h:没有那个文件或目录 编译中断. error: Setup s ...

  9. 使用css画一个箭头

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

随机推荐

  1. SpringBoot——配置文件详解【五】

    前言 SpringBoot的配置文件 配置文件 SpringBoot使用一个全局的配置文件,配置文件名是固定的. application.properties application.yml 配置文件 ...

  2. 【Js】创建对象的6种方式总结、（底部包含属性名为动态的形式）

    一.new 操作符 + Object 创建对象 1 var person = new Object(); 2 person.name = "lisi"; 3 person.age ...

  3. xshell跳转设置 Xshell代理设置

    本机------->A(中转)------>B(目标服务器) 本机---------XXXXX------>B(目标服务器) 本机无法直接连接B服务器 第一步:本机连接中转服务器A, ...

  4. OD(lfdnb)

    由于一场意外,D死了,在此开一个新坑 2019.11.13 考前焦虑 智商为负 有点担心考试状态 2019.11.12 上午考试简直心态爆炸 T1看了一个小时不会 然后看T2,这时候wxy聚聚已经切了 ...

  5. 【luoguP2252】 取石子游戏

    题目链接 定义\(f[i][j]\)表示\(a=i,b=j\)时是必胜态还是必败态,博弈DP可以解决\(a,b \leq 100\) 的情况 然后就可以找规律了,发现\(f[i][j]=0\)的情况很 ...

  6. 食物链【NOI2001】（信息学奥赛一本通 1390）

    [题目描述] 动物王国中有三类动物A,B,C,这三类动物的食物链构成了有趣的环形.A吃B, B吃C,C吃A. 现有N个动物,以1-N编号.每个动物都是A,B,C中的一种,但是我们并不知道它到底是哪一种 ...

  7. vue+element table的弹窗组件

    在处理表格编辑相关的需求,是需要做一个弹框进行保存的:或者查看表格数据的详细信息时,也是需要做弹窗: 当然 ,这是类似于这样的 ,当然 element 已经帮我们做好 弹窗这一块 主要 我想记录的是 ...

  8. CF852A Digits

    CF852A Digits 隔壁yijian大佬写出了正解.那我就写一个随机化大法吧? 我们先考虑一种错误的贪心,每个数字分成一位,使其分割后数字和最小.虽然这样是错的,但是我们发现错误的概率很小,所 ...

  9. javascript系列--认识并理解构造函数，原型和原型链

    一.前言 介绍构造函数,原型,原型链.比如说经常会被问道:symbol是不是构造函数:constructor属性是否只读:prototype.[[Prototype]]和__proto__的区别:什么 ...

  10. Golang（三）Goroutine原理

    前言 最近用到了一些 Golang 异步编程的地方,感觉 Golang 相对于其他语言(如 Java)对多线程编程的支持非常大,使用起来也非常方便.于是决定了解一下 Goroutine 的底层原理. ...