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. LCD硬件原理

    想象一下,屏幕的后面有一个电子枪,电子枪位于某个像素的背后,然后向这个像素发射红绿蓝三原色,从而就可以组成任意一种颜色.简单的说,电子枪在像素的背后一边移动,一边向像素发射红绿蓝. 如果要编写出LCD ...

  2. 201871010109-胡欢欢《面向对象程序设计（java）》第二周学习总结

    开头: 项目 内容 这个作业属于哪个课程 <任课教师博客主页链接>     https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 <作业链接地 ...

  3. split分割字符串返回字符串数组

    <script type="text/javascript"> var str='liu jin yu'; var str1=str.split(' '); docum ...

  4. EasyUI前后端分离

    陈旧的开发模式 美工(ui工程师:出一个项目模型) java工程师:将原有的html转成jsp,动态展示数据 缺点: 客户需要调节前端的展示效果 解决:由美工去重新排版,重新选色.Vs前后端分离 美工 ...

  5. ESA2GJK1DH1K基础篇: 移植官方MQTT包,让TCP实现MQTT功能(以GPRS模块为例)

    前言 这节代码将在这一节的基础上实现 拷贝第一节测试里面的MQTT文件夹到当前工程 当前工程建个MQTT的文件夹,用于存放那个MQTT文件夹里面的内容 添加文件到里面 注意:::: 实际源码拷贝位置 ...

  6. C#中的Queue集合

    Queue<T>集合 特点:先进先出,简单来说,就是新添加的元素是顺序添加在集合尾部,但是,移除的时候是从顶部开始移除元素. 三个方法: Enqueue(T obj);//顺序添加一个值到 ...

  7. iptables 数据走向流程

    链的规则存放于哪些表中(从链到表的对应关系): PREROUTING 的规则可以存在于:raw表,mangle表,nat表. INPUT 的规则可以存在于:mangle表,filter表,(cento ...

  8. 根据 oracle 标准计算超长字符串的长度

    Oracle 数据库使用 sql语句 :    select lengthb('输入字符串') from dual  ,  来计算 字符串 所占的字节长度(比如,一个汉字3个字节),但是用这个leng ...

  9. Java 并发系列之二：java 并发机制的底层实现原理

    1. 处理器实现原子操作 2. volatile /** 补充: 主要作用:内存可见性,是变量在多个线程中可见,修饰变量,解决一写多读的问题. 轻量级的synchronized,不会造成阻塞.性能比s ...

  10. django orm 外键id返回对应的名称

    原文:https://blog.csdn.net/gghhm/article/details/99652143 当我们在写django的orm模块时,有时候会在用外键关联时,保存的是对应表中的id字段 ...