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. [冬令营day1T3]Tree

    题目描述 Description  给一棵N个节点的无根树,求路径长度=K的简单路径数 输入描述 Input Description 第一行两个正整数N,K 接下来N-1行,每行两个正整数x,y,表示 ...

  2. Anaconda3（0）环境基本使用

    https://blog.csdn.net/u012005313/article/details/82347817 主要内容: 查看环境列表 创建新的 Python 环境 激活/停止 Python 环 ...

  3. [ZJJOI2013]K大数查询 整体二分

    [ZJJOI2013]K大数查询 链接 luogu 思路 整体二分. 代码 #include <bits/stdc++.h> #define ll long long using name ...

  4. #lua中编写shader的方式

    lua中编写shader的方式 1. 字符串拼接 类似于下面这种 vertDefaultSource = "\n".."\n" .. "attribu ...

  5. 推荐IOS Moneky测试工具Fast Monkey

    推荐IOS Moneky测试工具Fast Monkey 1 介绍 非插桩 iOS Monkey, 支持控件,每秒4-5 action事件 2 下载 https://github.com/zhangzh ...

  6. CentOS 7下JumpServer安装及配置

    环境 系统 # cat /etc/redhat-release CentOS Linux release 7.4.1708 (Core) # uname -r 3.10.0-693.21.1.el7. ...

  7. C运算符优先级和结合性

    C中运算符优先级和结合性一览表: 在上表中能总结出一下规律: (1)结合方向只有三个是从右往左,其余都是从左往右: (2)逗号运算符的优先级最低: (3)对于优先级,有一个普遍规律:算术运算符 > ...

  8. adb和fastboot的使用

    1.前言 随着Android系统的普及,ADB(Android Debug Bridge)逐渐成了Android设备调试的必不可少的一种重要工具,该工具可以完成多种功能,例如跟踪系统日志,上传或下载文 ...

  9. 剑指阿里P6，25岁小伙怒斩三面，喜提offer（Java研发岗）

    本文提供者:洎扰の庸人 微信公众号:慕容千语的架构笔记.欢迎关注一起进步. 进阿里一直都是身为程序员的我,最初的梦想,经过去年面试蚂蚁金服失败的挫折后,今年再次鼓起勇气投简历,经过一位前辈的内推省了很 ...

  10. Faker伪数据生成

    版本信息:Faker==3.0.0factory-boy==2.12.0 provider: # encoding=utf-8 import randomfrom faker.providers im ...