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. 【Nginx】在Windows下使用Nginx解决前端跨域问题

    提出问题:因为一些历史原因,后台代码不能动.请求别人的接口拿数据显示在前端,怎么办呢? 分析问题:通过ajax请求. 解决问题:因为浏览器的同源策略,所以需要解决跨域问题.(同源策略:请求的url地址 ...

  2. python与javascript 引入模块的方法对比

    1.引入整体模块对比 python 方法一: # 引入全部函数 from xxx import * # 直接使用模块里面的各函数或者属性 test() 方法二: # 引入全局的模块 import gl ...

  3. ESA2GJK1DH1K升级篇: STM32远程乒乓升级,基于WIFI模块AT指令TCP透传方式,定时访问升级(含有数据校验)

    实现功能概要 定时使用http访问云端的程序版本,如果版本不一致,然后通过http下载最新的升级文件,实现升级. 测试准备工作(默认访问我的服务器,改为自己的服务器,请看后面说明) 一,下载BootL ...

  4. bat修改文件内容

    #file.vbsSet fso = Wscript.CreateObject("Scripting.FileSystemObject")set f=fso.opentextfil ...

  5. TensorFlow中的 tensor 张量到底是什么意思？

    详见[Reference]: TensorFlow中的“Tensor”到底是什么? 以下摘录一些要点: 这个图好生动呀!~ 标量和向量都是张量(tensor).

  6. 浅谈设计模式-visitor访问者模式

    先看一个和visitor无关的案例.假设你现在有一个书架,这个书架有两种操作,1添加书籍2阅读每一本书籍的简介. //书架public class Bookcase { List<Book> ...

  7. 转载：Linux命令行快捷键

    常用 Ctrl + 左右键:在单词之间跳转 Ctrl + A:跳到本行的行首 Ctrl + E:跳到页尾 Ctrl + U:删除当前光标前面的所有文字(还有剪切功能) Ctrl + K:删除当前光标后 ...

  8. [转帖]AWR报告参数：DB TIME和DB CPU

    AWR报告参数:DB TIME和DB CPU http://blog.itpub.net/12679300/viewspace-1182396/ 一.前言:AWR报告是了解ORACLE运行的一个重要报 ...

  9. 最近C#项目中不小心踩的低级坑

    都是很基础的错误问题,大部分都是因为不查一下资料就直接根据其它类似语言的经验写代码导致的 1. 一个企业微信上的正常的界面突然不能滚动了 本以为是浏览器代码计算问题,结果发现是JS出错导致. 2. R ...

  10. python的JSON库

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,易于人阅读和编写. 1.json库的使用 使用 JSON 函数需要导入 json 库:import jso ...