<!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. 关于CTO角色的认知

    从3月份到现在2个月过去了,整个数据平台从0到1,算是有了一个基本的样子,跌跌撞撞的勉强支撑起运营的一些基本业务,当然这仅仅是开始,下一步还要从零打造自己的UBS系统,想想都兴奋呢!接下来总结下自己这 ...

  2. c#位运算基本概念与计算过程

    前言 一些非常基础的东西,在实际工作中没有用到.很少用到.一旦遇到,又不知所云.最近遇到一个问题,把一个int16(short) .两个bool变量整合成一个int32(int),当听到这个要求时,我 ...

  3. 网页的cdn引用地址，js，react，bootstrap

    react+----这三个够用了 <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js">< ...

  4. 了解Scala 宏

    前情回顾 了解Scala反射介绍了反射的基本概念以及运行时反射的用法, 同时简单的介绍了一下编译原理知识, 其中我感觉最为绕的地方, 就属泛型的几种使用方式了. 而最抽象的概念, 就是对于符号和抽象树 ...

  5. Java 在PDF文档中绘制图形

    本篇文档将介绍通过Java编程在PDF文档中绘制图形的方法.包括绘制矩形.椭圆形.不规则多边形.线条.弧线.曲线.扇形等等.针对方法中提供的思路,也可以自行变换图形设计思路,如菱形.梯形或者组合图形等 ...

  6. Vue.js 学习笔记 第1章 初识Vue.js

    本篇目录: 1.1 Vue.js 是什么 1.2 如何使用Vue.js 本章主要介绍与Vue.js有关的一些概念与技术,并帮助你了解它们背后相关的工作原理. 通过对本章的学习,即使从未接触过Vue.j ...

  7. 瑞芯微发布最新旗舰应用处理器-RK3588

    在瑞芯微电子第四届“开发者之春”大会上,瑞芯微推出了新一代8nm旗舰处理器-RK3588 这个芯片将采用8nm 制程工艺.基于A76+A55 内核组合,具备4K UI性能.8K VPU,拥有NPU2. ...

  8. 代码规范：idea上添加阿里巴巴Java开发插件

    在一个项目中,不可缺少的是书写代码的规范,没有好的代码规范约束,大家各写各的,十分不利于代码的维护与修改.     首先来看看如何在idea上添加这个插件: 直接上图 点击右边的蓝色按钮就可以安装了, ...

  9. 基于HTTP协议的几种实时数据获取技术

    原文链接https://www.cnblogs.com/xrq730/p/9280404.html,作者博客园----五月的仓颉,转载请注明出处,谢谢 HTTP协议 HTTP协议大家都很熟悉了,开始本 ...

  10. mysql之数据库添加索引优化查询效率

    项目中如果表中的数据过多的话,会影响查询的效率,那么我们需要想办法优化查询,通常添加索引就是我们的选择之一: 1.添加PRIMARY KEY(主键索引) mysql>ALTER TABLE `t ...