#p1{
/*        border-width: 1px;*/
        /*边框实线*/
        /*border-style: solid;*/
        /*边框虚线*/
        /*border-style: dashed;*/
        /*边框点线*/
        /*border-style:dotted;*/
        /*边框双线*/
        /*border-style:double;*/
        /*边框颜色*/
        /*border-color: red;*/
        /*简单写法*/
/*        border: 1px dotted orange;*/
        border-bottom: 1px dotted #A2A0A0;
        border-left: 2px double red;
        /*背景颜色*/
/*        background-color: blue;*/
        background-image: url(img/a.jpg);
        /*背景图位置        */
        background-position: -30px -500px;
    }    
  元素标签引用案例

li{
        border-bottom: 1px dotted yellow;
    }
    body{
        background-image: url(img/2.png);
        background-repeat: repeat-y;
        background-attachment: fixed;
    }

<ul  type="dis">
        <li>选项一</li>
        <li>选项二</li>
    </ul>

CSS图片位置的调整 案例
<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

    #in1{

        background-image:url(img/bg.png);

        background-position: -247px -90px;

        text-indent: 25px;

    }

</style>

</head>

<body>

    <input type="text" id="in1">

</body>

</html>
给文字添加触碰效果，点击后效果，移动到效果

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>伪类</title>

    <style>

        /*未访问的样式*/

        #a1:link{

            text-decoration: none;

            color: red;

        }

        /*访问后的样式*/

        #a1:visited{

            color: yellow;

        }

        /*鼠标悬浮时的样式*/

        #a1:hover{

            color:#666666;

        }

        /*点击时的样式*/

        #a1:active{

            color:blue;

        }

        /*hover可以用在任意标签*/

        #p1:hover{

            color: pink;

        }

    </style>

</head>

<body>

      <a href="#" id="a1">百度</a>

      <p id="p1">这是p标签</p>

<a href="#" style="text-decoration: none;">去下划线超链接样式</a>

</body>

</html>
有序列表无需列表用CSS样式快速编辑

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

    ul li{

        /*list-style-type: circle;*/

        list-style-image: url(img/sp.png);

    }

    ol li{

        list-style-type: lower-alpha;

    }

</style>

</head>

<body>

    <!--无序列表-->

    <ul>

        <li>语文</li>

        <li>数学</li>

        <li>英语</li>

    </ul>

    <!--有序列表-->

    <ol>

        <li>美术</li>

        <li>体育</li>

        <li>艺术</li>

    </ol>

</body>

</html>

CSS样式补充第二天的更多相关文章

  1. CSS样式补充代码

    CSS符号属性: list-style-type:none; /*不编号*/ list-style-type:decimal; /*阿拉伯数字*/ list-style-type:lower-roma ...

  2. CSS样式表-------第二章：选择器

    二 .选择器 内嵌.外部样式表的一般语法: 选择器 { 样式=值: 样式=值: 样式=值: ...... } 以下面html为例,了解区分一下各种样式的选择器 <head> <met ...

  3. html学习第二天—— 第七章——CSS样式基本知识

    外部式css样式,写在单独的一个文件中外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css”为扩展名,在<head>内(不是在<s ...

  4. HTML第二部分 CSS样式表

    CSS(cascading style sheets,层叠样式表),作用是美化HTML网页. /*注释*/   注释语法 2.1 样式表的基本概念 2.1.1样式表的分类 1.内联样式表 和HTML联 ...

  5. 11-19网页基础--第二部分CSS样式表基本概念

    CSS,全称(Cascading Style Sheets,层叠样式表),作用是美化HTML网页. 一.基本概念:是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言. 你可能对C ...

  6. 网站开发综合技术 第二部分 CSS样式表

    第2部分 CSS样式表 CSS(Cascading Style Sheets,层叠样式表),作用是美化HTML网页. /*注释*/    注释语法 2.1.样式表的基本概念 2.1.1.样式表分类 1 ...

  7. CSS样式----图文详解：css样式表和选择器

    主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS三种扩展选择器:组合选择器.后代选择 ...

  8. css样式兼容不同浏览器问题解决办法

    在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所 有浏览器 ...

  9. CSS样式----CSS的继承性和层叠性（图文详解）

    CSS的继承性 我们来看下面这样的代码,来引入继承性: 上方代码中,我们给div标签增加红色属性,却发现,div里的每一个子标签<p>也增加了红色属性.于是我们得到这样的结论: 有一些属性 ...

随机推荐

  1. UVA11019 Matrix Matcher

    思路 AC自动机匹配二维模式串的题目 因为如果矩形匹配,则每一行都必须匹配,考虑对于一个点,设count[i][j]记录以它为左上角的与模式矩形大小相同的矩形中有多少行和模式矩形匹配 然后把模式矩形的 ...

  2. Learning-Python【32】：进程理论基础

    什么是进程 进程就是一个程序在一个数据集上的一次动态执行过程.是用来描述程序执行过程的虚拟概念.进程的概念起源于操作系统,进程是操作系统最核心的概念,操作系统其它所有的概念都是围绕进程来的.进程一般由 ...

  3. NVIDIA 驱动安装(超详细)

    目录 1. 删除原有驱动 2. 安装依赖 3. 禁用nouveau驱动: 4. reboot 5. 获取kernel source (important) 6. 关掉x graphic 服务 7. 安 ...

  4. Nat Med：单独使用anti-CTLA4治疗前列腺癌效果差的原因

    肿瘤细胞能够分泌特定的细胞因子,结合T细胞表面的受体抑制其活性,从而来影响免疫细胞杀死肿瘤细胞的能力.这一类细胞因子被冠名为抗肿瘤免疫反应的“check point”.针对这类check point信 ...

  5. spark streaming将处理结果存入mysql中（使用c3p0连接池）

    1.c3p0相应的架包导入工程中 将以下四个架包导入工程, 主要有三个架包:c3p0-0.9.5.2.jar c3p0-oracle-thin-extras-0.9.5.2.jar mchange-c ...

  6. echarts的axisLabel的文字内容过长的解决办法

    通过查找资料学习,我总结了四种解决的办法,不一定是最好的,但是希望能够帮助到需要的童鞋,同时如果大家有什么更好的方法欢迎指导. 方法一:这种方法就是将文本内容转换为字符串数组,然后再按需求换行,需要每 ...

  7. ubuntu 18.04安装clojure工程的cli工具lein

    官网的安装过程https://leiningen.org/#install 是文字描述,并不够lazy. 我仿照code,chrome nodejs的方式,给出下面的命令行安装过程 wget http ...

  8. rabbitMQ 的三种Exchange

    rabbitMQ 的Exchange有3种路由方式:  direct.fanout.topic ,以下为详细说明 1.  Direct Exchange 处理路由键.需要将一个队列绑定到交换机上,要求 ...

  9. English trip EM2-LP-4B At School Teacher:Russell

    课上内容(Lesson) Where is Loki a student?  Loki is in Meten, BaobaoStreet, Chengdu. What is he studying? ...

  10. micro-template改造

    (function ($) { $.fn.razor = function (data) { var render=$(this).data('razor'); if (!render) { var ...