<!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. 使用Rotativa在ASP.NET Core MVC中创建PDF

    在本文中,我们将学习如何使用Rotativa.AspNetCore工具从ASP.NET Core中的视图创建PDF.如果您使用ASP.NET MVC,那么Rot​​ativa工具已经可用,我们可以使用 ...

  2. Redis缓存穿透、缓存雪崩和缓存击穿理解

    1.缓存穿透(不存在的商品访问数据造成压力) 缓存穿透,是指查询一个数据库一定不存在的数据.正常的使用缓存流程大致是,数据查询先进行缓存查询,如果key不存在或者key已经过期,再对数据库进行查询,并 ...

  3. java到底是引用传递还是值传递？

    今天我们来讲讲一个在学习中容易误解的问题,面试中也偶尔问到,java方法调用时到底是值传递还是引用传递? 首先,请大家来做一个判断题,下面的3个问题是否描述正确 1. java基本数据类型传递是值传递 ...

  4. FontAwesome 图标字体库的使用

    在前端开发中,许多新手常会遇见一个问题,参考的网页上有类似下图的图标,但在资源里却找不到对应的文件,这是因为这些网页使用了图标库.这里介绍一种常见的图标库——FontAwesome的使用. 1.登录F ...

  5. github SSH配置

    目录 github SSH配置 前言 ssh 配置 github SSH配置 前言 github有两种更新的渠道,一种是https的,一种是ssh的,其中https每次都要输入密码,非常烦.所以,最好 ...

  6. Vue应用框架整合与实战--Vue技术生态圈篇

    实用框架以及工具 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 Element-UI ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 ...

  7. 积极拥抱.NET Core开源社区

    潘正磊在上海的Tech Summit 2018 大会上给我们的.NET Core以及开源情况带来了最新信息. .Net Core 开源后取得了更加快速的发展,目前越活跃用户高达400万人,每月新增开发 ...

  8. C#常见金额优选类型及其三种常用的取整方式

    这两天一直在做一个商城后台的对账方面的工作,忽然发现C#真的有很多值的学习的东西: 一.C#常用的三种取整方式(主要适用于double.decimal.float这一类型的数据): Math.Roun ...

  9. Android开发：UI相关（一）自定义样式资源

    一.自定义样式资源:   1.在drawble中新建xml资源文件:     如果新建的xml文件没有自动放置在drawable文件夹下,就手动移动到drawable下. 2.编写样式代码: < ...

  10. Linux下Springboot解决`APR based Apache Tomcat Native library`提示

    最近转行做java,开发基于Springboot的项目,版本号为2.1.0.RELEASE. 启动应用,发现以下提示: The APR based Apache Tomcat Native libra ...