<!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. shiro的SecurityUtis

    接着上一篇来继续分析shiro源码 这篇主要讲解shiro里面的SecurityUtils 首先我们看该类供我们在业务中用的仅有两个get方法,那么这两个get方法获取的subject和sercuri ...

  2. 【转载】Docker+Kubernetes 干货文章精选

    主要涉及到以下关键字: K8S.Docker.微服务.安装.教程.网络.日志.存储.安全.工具.CI/CD.分布式.实践.架构等: 以下盘点2018年一些精选优质文章! 漫画形式: 漫画:小黄人学 S ...

  3. 高淇java300集异常机制作业

    1.以下关于异常的代码的执行结果是(C ).(选择一项) 1 2 3 4 5 6 7 8 9 10 11 12 public class Test {     public static void m ...

  4. Dotspatial 要素重叠部分去除

    private void toolStripButton32_Click(object sender, EventArgs e) { /重叠部分去除操作——测试成功 if (mapMain.Layer ...

  5. 安卓开发笔记（十三）：SQLite数据库储存（下）数据的增添，更改，删除，查询

      SQLite数据库存储(下) 1.增添数据 对于添加数据的话我们只需要在主活动当中import新的包以及在主活动当中写上适当的代码就可以了,不需要在我们之前创建新的类当中书写新的代码.现在的主活动 ...

  6. asp.net core重新加载应用配置

    asp.net core重新加载应用配置 Intro 我把配置放在了数据库或者是Redis里,配置需要修改的时候我要直接修改数据库,然后调用一个接口去重新加载应用配置,于是就尝试写一个运行时重新加载配 ...

  7. REST API disable / enable service auto start by API

    how to disable service auto start by API as the following how to enable service auto start by API as ...

  8. nginx 安装、启动、重启、关闭 （linux系统命令行）

    前言: 最近在部署我的hexo静态博客到腾讯云服务器上,用到了很多nginx的知识,在此做下总结: 刚接触的linux服务器上,nginx配置乱的有点令人发指,就把老的卸载了重新装一下. 1.卸载 y ...

  9. SDL 开发实战（七）： SDL 多线程与锁机制

    为什么要用多线程?在音视频领域主要是实现音视频同步.实现了音视频同步,我们的播放器就基本上合格了. 这里我们将讲解一下SDL的多线程与锁机制. 多线程的好处主要是能使程序更加充分利用硬件(主要是CPU ...

  10. mysql中截取指定字符前后的字符串

    使用SUBSTRING_INDEX()函数substring_index(str,delim,count) str:要处理的字符串 delim:分隔符 count:分隔符计数 例子取出上述表中数组的第 ...