day09 css

<!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的更多相关文章

day09—css布局解决方案之全屏布局
转行学开发,代码100天——2018-03-25 今天,本文记录全屏布局的的方法.全屏布局,即滚动条不是全局滚动条,而是出现在内容区域内,:浏览器变大时,撑满窗口. 如:设置下图中布局,其中top区, ...
web笔记全
1.项目流程与数据库 1.课程体系阶段1(服务器开发): 项目导入/数据库/JS基础/NodeJS 阶段2(前端核心技术): HTML/AJAX/CSS/bootstrap 阶段3(前端进阶技术): ...
Matplotlib数据可视化（3）：文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
JavaWeb(HTML +css+js+Servlet....)
注意 1.不要把函数命名为add(),不然容易和自带的冲突报错 2.是createElement 不要把create中的e写掉了 3.记得是getElementsByTaxName和getElemen ...
CSS的未来
仅供参考前言完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...
前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
前端css兼容性与易混淆的点
一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...
理解CSS外边距margin
前面的话 margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有 ...
理解CSS视觉格式化
前面的话 CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应 ...

随机推荐

程序设计语言——实践之路笔记：Beginning
这本书已经看了不下3遍了,计划在6月写完1,3,6,7,8,9章的笔记. 为什么要写笔记呢,我觉得有这么几个必要: 1.一个概念的首次提出与补充会跨越几个章节,整理在一起有助记忆 2.所有书籍的安排都 ...
基于 HTML5 的 WebGL 3D 版俄罗斯方块
前言摘要:2D 的俄罗斯方块已经被人玩烂了,突发奇想就做了个 3D 的游戏机,用来玩俄罗斯方块...实现的基本想法是先在 2D 上实现俄罗斯方块小游戏,然后使用 3D 建模功能创建一个 3D 街机模 ...
Ceph万兆内网与系统万兆迁移
本文将总结一次为Ceph集群加装万兆内网(cluster network),后因需要对比实验来研究分布式存储集群在计算,网络,存储过程中各部分耗时比例,而将Ceph整体系统又整体搬移至万兆网的过程.但 ...
【STM32H7教程】第13章 STM32H7启动过程详解
完整教程下载地址:http://forum.armfly.com/forum.php?mod=viewthread&tid=86980 第13章 STM32H7启动过程详解本章教 ...
PHP全栈学习笔记12
php简介,php历史,php后端工程师职业前景,php技术方向,php后端工程师职业体系介绍. php是世界上使用最广泛的web开发语言,是超文本预处理器,是一种通用的开源脚本语言,语法吸收了c语言 ...
一文读懂Asp.net core 依赖注入（Dependency injection）
一.什么是依赖注入首先在Asp.net core中是支持依赖注入软件设计模式,或者说依赖注入是asp.net core的核心: 依赖注入(DI)和控制反转(IOC)基本是一个意思,因为说起来谁都离不 ...
Spring中的@conditional注解
今天主要从以下几方面来介绍一下@Conditional注解 @Conditional注解是什么 @Conditional注解怎么使用 1,@Conditional注解是什么 @Conditional注 ...
freemarker动态生成word并将生成的word转为PDF,openoffice转换word乱码
之前项目有个需求,需要先动态生成word内容,然后再预览生成word的内容(不能修改).整理一下,方便以后使用. 网上参考了好多大神的博客.具体也忘了参考谁的了,如有侵权,请告知修改. 思路一: 将目 ...
Odoo Linux服务器一键安装脚本使用指南
Odoo安装脚本介绍为了帮助更多Linux服务器维护人员快速部署Odoo,为此开源智造(OSCG)基于André Schenkels曾经开放的openerp-install-scripts所构建的基 ...
cesium 之图层管理器篇（附源码下载）
前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内 ...

day09 css

day09 css的更多相关文章

随机推荐

热门专题