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视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应 ...
随机推荐
- OsharpNS轻量级.net core快速开发框架简明入门教程-Osharp.Redis使用
OsharpNS轻量级.net core快速开发框架简明入门教程 教程目录 从零开始启动Osharp 1.1. 使用OsharpNS项目模板创建项目 1.2. 配置数据库连接串并启动项目 1.3. O ...
- Netbeans IDE 安装Emmet插件并解决Emmet插件无效果问题
Emmet是许多流行文本编辑器的插件,它极大地改进了HTML和CSS工作流程:在Netbeans IDE 下安装Emmet:1.打开Netbeans IDE编辑器,选择 工具—>插件选项,在 可 ...
- 【重学计算机】操作系统D5章:文件系统
1. 文件系统 文件系统概述 文件的组织: 逻辑结构:流式.记录式 物理结构:顺序.连接.直接.索引 文件的存取:顺序.直接.索引 文件的控制:逻辑控制.物理控制 文件的使用:打开.关闭.读.写.控制 ...
- .net core 并发下的线程安全问题
抱歉,其实内容并不如题!!!真正的题目应该为<.net core 并发下由于注入模式引起的线程安全问题> 背景(写测试demo所出现的异常,供大家学习与拍砖): .net core web ...
- 更好用的css命名方式——BEM命名
一.什么是BEM? BEM代表块(Block),元素(Element),修饰符(Modifier).无论是什么网站页面,都可以拆解成这三部分. 二.带你认识网页 我们来看一下qq的官网,它可以由三个块 ...
- sql自动生成golang结构体struct实体类
废话不多说直接上地址 使用地址 http://www.linkinstars.com:8090/auto-code 项目github https://github.com/LinkinStars/Au ...
- NET微信公众号开发环境搭建(一)-了解微信由来
公众号的应用,开发及调试环境搭建 花生壳要注册 需要二十多块钱 ,还要实名认证,估计要一两天才能审核通过 主要就是在 windows搭建测试环境 1.微信的应用场景 360百科微信简介 ht ...
- Android App渗透测试工具drozer,Qark,Androguard
一. drozer简介 drozer(以前称为Mercury)是一款Android安全测试框架. drozer允许您通过承担应用程序的角色并与Dalvik VM,其他应用程序的IPC端点和底层操作系统 ...
- 开发vue但不使用vue-cli和webpack相关注意事项
1.绑定vue组件使用new Vue() 2.new Vue()需要在dom结构生成之后才有效(毕竟有需要el) 3.Vue.component注册全局组件在vue容器组件挂载之前才有效 4.当然,可 ...
- 我是如何拿到蚂蚁金服 offer 的 ?
阅读本文大概需要 5.6 分钟. 作者:翟洪毅 一.梦想和被拒 二.积累 三.结语 首先介绍一下投稿作者 翟洪毅,16年华理计算机本科毕业.在年前拿到了蚂蚁金服Java开发的offer,P6. 工 ...