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. Discuz!开发之模板标签语法学习

    一.加载模板 使用template()函数显示已存在模板: 在Discuz!程序执行中可以通过 include template('模板文件夹/模板名称无后缀');的方式进行解析! template( ...

  2. phpcms网站迁移无法更新内容提示Table 'led_com.lz_' doesn't exist的解决方法

    新接的一位客户说要把旧phpcms网站迁移到新的服务器并更换新域名,这对ytkah是小菜一碟,但往往事与愿违,忽略了一些细节会很惨的.进入新站后台怎么都无法生成内容,提示Table 'led_com. ...

  3. 五个goland进行go开发的小技巧

    五个goland进行go开发的小技巧 本文译自5 Tips To Speed Up Golang Development With IntelliJ Or Goland 确实很实用. 1. 实现int ...

  4. Java 基本类型、封装类型、常量池、基本运算

    基本数据类型: byte:Java中最小的数据类型,在内存中占8位(bit),即1个字节,取值范围-128~127,默认值0 short:短整型,在内存中占16位,即2个字节,取值范围-32768~3 ...

  5. 网络协议 13 - HTTPS 协议

    之前说了 HTTP 协议的各种问题,但是它还是陪伴着互联网.陪伴着我们走过了将近二十年的风风雨雨.现在有很多新的协议尝试去取代它,来解决性能.效率等问题,但它还还能靠着“多年的情分”活的滋润.然而,近 ...

  6. 箭头函数可不用return直接将表达式作为函数返回值

    箭头函数如果函数体只有一个表达式,那么表达式将作为函数的返回值,这种写法无须加上return关键字, 看下面两个函数定义 var testAf = () => '111'; var testAf ...

  7. 出现：Microsoft Visual C++ 14.0 is required 的解决方案

    以安装pandas为例: 如:pip install scrapy 时出现: error: Microsoft Visual C++ 14.0 is required. Get it with “Mi ...

  8. CF852A Digits

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

  9. Docker整合dockerfly实现UI界面管理(单机版)

    一.搜索镜像 docker search dockerfly 二.根据镜像使用排名(一般情况下拉取使用率最高的镜像名),我这里使用的是阿里云镜像地址 docker pull registry.cn-h ...

  10. 一文带你了解elasticsearch

    一文带你了解elasticsearch cxf2102100人评论160人阅读2019-07-02 21:31:36   elasticsearch es基本概念 es术语介绍 文档Document ...