<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        @font-face{

            font-family:myFont;

            src:url("本墨悠圆.ttf");

        }

        p{

            font-family: "myFont";

            font-size: 20px;

            font-style: italic;

            font-weight: bolder;

            color: #ff6e49;

            line-height: 100px;

            letter-spacing: 10px;

            text-decoration: none;

            text-align: left;

            text-overflow: ellipsis;

            white-space: nowrap;

            overflow: hidden;

        }

        div{

            width: 300px;

            height: 200px;

        }

    </style>

</head>

<body>

    <div>

        <p>字体相关属性-本墨悠圆-字体很多行-字体很多行-字体很多行-字体很多行-字体很多行</p>

    </div>

</body>

</html>
<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        #myDiv{

            width: 600px;

            height: 400px;

            /*background-color: lightblue;*/

            background-image: url("baidu_jgylogo3.gif");

            background-repeat: no-repeat;

            background-attachment: scroll;

            border: 1px solid red;

        }

        .div2{

            width: 600px;

            height: 400px;

            border: 2px dashed blue;

        }

    </style>

</head>

<body>

    <div id="myDiv"></div>

    <div class="div2"></div>

    <div class="div2"></div>

    <div class="div2"></div>

</body>

</html>
<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        .container{

            border: 2px dashed darkorange;

            width: 500px;

            position: absolute;

        }

        .demo{

            border: 2px solid blue;

            width: 300px;

            position: relative;

            left: 50px;

            top: 50px;

        }

    </style>

</head>

<body>

    <div class="container">

        <div>aaaaaa</div>

        <div class="demo">bbbbbb</div>

        <div>cccccc</div>

    </div>

    <!--

    .子元素有relative定位时，不脱离文档流

    .子元素有absolute定位时，脱离文档流

    .子元素有absolute定位时，参考1.父级元素定位 .body原点定位

    .子元素有relative定位时，参考1.自身原点定位

    -->

</body>

</html>
<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        #div1{

            width: 300px;

            height: 200px;

            border: 1px solid red;

        }

        #div2{

            width: 400px;

            height: 200px;

            border: 2px dashed greenyellow;

            position: fixed;

            right: 100px;

        }

        .div3{

            width: 500px;

            height: 200px;

            border: 3px double burlywood;

        }

    </style>

</head>

<body>

<div id="div1"></div>

<div id="div2"></div>

<div class="div3"></div>

<div class="div3"></div>

<div class="div3"></div>

<div class="div3"></div>

<div class="div3"></div>

</body>

</html>
<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        div{

            position: fixed;

        }

        #myDiv1{

            z-index: ;

        }

    </style>

</head>

<body>

<div id="myDiv1"><img src="jgz.jpg"/></div>

<div id="myDiv2"><img src="bkb.jpg"/></div>

<div id="myDiv3"><img src="ym.jpg"/></div>

</body>

</html>
<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        #div1{

            width: 200px;

            height: 100px;

            border: 1px solid #0000FF;

            float: left;

        }

        #div2{

            width: 210px;

            height: 110px;

            border: 2px dashed #ff6e49;

            float: left;

            clear: both;

        }

        #div3{

            width: 220px;

            height: 120px;

            border: 3px double blueviolet;

            float: left;

        }

    </style>

</head>

<body>

<div id="div1"></div>

<div id="div2"></div>

<div id="div3"></div>

</body>

</html>
<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

           <style>

         #myDiv1{

             width: 300px;

             height: 200px;

             border: 3px dashed red;

             /*display: none; /!*消失*!/*/

             visibility: hidden; /*隐藏*/

         }

        #myDiv2{

            width: 300px;

            height: 200px;

            border: 3px dashed blue;

        }

    </style>

</head>

<body>

<div id="myDiv1"></div>

<div id="myDiv2"></div>

</body>

</html>
<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        #fruits{

            list-style-type: upper-roman;

            list-style-position: inside;

            list-style-image: url("icon.jpg");

        }

    </style>

</head>

<body>

<ul id="fruits">

    <li>香蕉</li>

    <li>哈密瓜</li>

    <li>无籽西瓜</li>

</ul>

</body>

</html>
<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        #myDiv{

            border: 2px #ff6e49 dashed;

            width: 400px;

            height: 300px;

            margin-bottom: 100px;

            padding: 50px;

            background-color: blueviolet;

            /*border-top: ;

              border-left: ;

            */

            /*border-style: solid dashed dotted groove;*/

            /*border-color: #626fff #ff3b2d;*/

            /*border-width: 10px 20px 30px 40px;*/

        }

        #div2{

            width: 400px;

            height: 300px;

            border: 2px red solid;

        }

    </style>

</head>

<body>

    <!-- 盒子模型将html中每一个元素看作为一个盒子，用几个属性描述这个盒子

        border 边框

            border类型：实线、虚线、双实线等

            border的粗细：通过px来描述

            border的颜色：通过color表示颜色

        margin 外边距

            width属性 外边距长：距离其他元素的距离，两个外边距是可以重叠的

        padding 内补丁

            width属性 内补丁长：边距距离内容的距离

    -->

    <div id="myDiv">aaa</div>

    <div id="div2"></div>

</body>

day09 css的更多相关文章

  1. day09—css布局解决方案之全屏布局

    转行学开发,代码100天——2018-03-25 今天,本文记录全屏布局的的方法.全屏布局,即滚动条不是全局滚动条,而是出现在内容区域内,:浏览器变大时,撑满窗口. 如:设置下图中布局,其中top区, ...

  2. web笔记全

    1.项目流程与数据库 1.课程体系 阶段1(服务器开发): 项目导入/数据库/JS基础/NodeJS 阶段2(前端核心技术): HTML/AJAX/CSS/bootstrap 阶段3(前端进阶技术): ...

  3. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  4. JavaWeb(HTML +css+js+Servlet....)

    注意 1.不要把函数命名为add(),不然容易和自带的冲突报错 2.是createElement 不要把create中的e写掉了 3.记得是getElementsByTaxName和getElemen ...

  5. CSS的未来

    仅供参考 前言 完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...

  6. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  7. 前端css兼容性与易混淆的点

    一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...

  8. 理解CSS外边距margin

    前面的话   margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有 ...

  9. 理解CSS视觉格式化

    前面的话   CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应 ...

随机推荐

  1. .NET Core使用Quartz执行调度任务进阶

    一.前言运用场景 Quartz.Net是一个强大.开源.轻量的作业调度框架,在平时的项目开发当中也会时不时的需要运用到定时调度方面的功能,例如每日凌晨需要统计前一天的数据,又或者每月初需要统计上月的数 ...

  2. win10环境下如何运行debug

    在学习汇编的时候,会需要用到debug调试程序,但是现在win10默认已经移除了这个插件,我们需要手动安装,下面就告诉大家如何在win10环境下安装debug. 1:准备工具 1.1 DOSBox 1 ...

  3. openlayers4 入门开发系列之地图导航控件篇（附源码下载）

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  4. cmd实现cab文件的压缩与解压

    压缩(makecab): 1.单文件压缩 makecab ip2.txt ip2.txt.cab 2.多文件压缩 makecab /f c:\list.txt /d expresstype=mszip ...

  5. Error:"MetaStoreClient lost connection. Attempting to reconnect (1 of 24) after 5s. getCurrentNotificationEventId" occurs as HiveServer2 fails to start as it cannot connect to Metastore in HDP 3.0

    SupportKB Problem Description:After upgrading to HDP 3.0, the HiveServer2 fails to start and the fol ...

  6. 【死磕 Spring】----- IOC 之 获取 Document 对象

    原文出自:http://cmsblogs.com 在 XmlBeanDefinitionReader.doLoadDocument() 方法中做了两件事情,一是调用 getValidationMode ...

  7. js取数组最大值的四种方式

    var arr = [7,2,0,-3,5];1.apply()应用某一对象的一个方法,用另一个对象替换当前对象 var max = Math.max.apply(null,arr);console. ...

  8. 【专题教程第8期】基于emWin模拟器的USB BULK上位机开发，仅需C即可，简单易实现

    说明:1.如果你会emWin话的,就可以轻松制作上位机.做些通信和控制类上位机,比使用C#之类的方便程度一点不差,而且你仅会C语言就可以.2.并且成功将emWin人性化,可以做些Windows系统上的 ...

  9. 宝塔面板设置腾迅COS自动备份网站

    之前写了如何配置腾迅云COS并挂载到服务器中,今天看到宝塔面板中有腾迅云COS的插件,不过研究了下,只是将COS绑定在宝塔面板中,不能自动备份,需要用到宝塔的计划任务功能 1.下载腾迅云COS插件 2 ...

  10. MySQL 中 update 修改数据与原数据相同会再次执行吗？

    阅读本文大概需要 2.8 分钟. 作者:powdba 来源:阿里云栖社区 一.背景 本文主要测试MySQL执行update语句时,针对与原数据(即未修改)相同的update语句会在MySQL内部重新执 ...