#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. FJUT3701 这也是一道数论题（线段树）题解

    Problem Description 好久没出数据结构题,现在赶紧来做道数据结构题热热身 小q现在要去银行,他有个很厉害的bug能看到前面排队的人.假如当前有人正在办理业务,那么肯定要等待前一个人完 ...

  2. CORS跨域请求

    一.问题: 服务器端代码 from flask import Flask from flask import make_response from flask import jsonify app = ...

  3. SOAPdenovo组装软件使用记录

    背景: 1.为什么要从头测序组装基因组? 基因组是不同表型的遗传基础:获得参考基因组是深入研究一个生物体全基因组的第一步也是必须的一步:从头测序组装能够对新的测序物种构建参考基因组: 2.为什么要研究 ...

  4. java笔记 -- java运算

    运算符: 算术运算符: 加减乘除求余 + , - , * , / , % 当参与/运算的两个操作数都是整数时, 表示整数除法, 否则表示浮点除法. 例: 15 / 2 = 7; 15 % 2 = 1; ...

  5. Vmware ESXi 的虚拟机的开机自启动

    ESXi 6.7 以前就注意到虚拟机有个菜单[action->autostart]可以用来自启动(物理机开机之后), 可是设置完之后,总是没成功. 今天重新google了,发觉不但虚拟机,整个物 ...

  6. [Spring MVC] 取控制器返回的ModelAndView/Map/Model/Request的对象

    ${key }页面可取, <input value="${key}"> 或者<%=request.getParameter("key")%&g ...

  7. Kayleigh O'Connor - I Won't Be There

    Do you feel like you're about to drown The wave is rushing over you throw you onto now I remember th ...

  8. RabbitMQ(3) Spring boot集成RabbitMQ

    springboot集成RabbitMQ非常简单,如果只是简单的使用配置非常少,springboot提供了spring-boot-starter-amqp项目对消息各种支持. 资源代码:练习用的代码. ...

  9. 『Python』源码解析_从ctype模块理解对象

    1.对象的引用计数 从c代码分析可知,python所有对象的内存有着同样的起始结构:引用计数+类型信息,实际上这些信息在python本体重也是可以透过包来一窥一二的, from ctypes impo ...

  10. 『TensorFlow』读书笔记_SoftMax分类器

    开坑之前 今年3.4月份的时候就买了这本书,同时还买了另外一本更为浅显的书,当时读不懂这本,所以一度以为这本书很一般,前些日子看见知乎有人推荐它,也就拿出来翻翻看,发现写的的确蛮好,只是稍微深一点,当 ...