css--一些基本属性
关于css各标签的属性: w3cschool一应俱全
设置固定的图片:
body
{
background-image: url(bgimage.gif);
background-attachment: fixed;
}
边框设置属性:
效果:
.c1{
/* 200*200是正方形 */
width: 200px;
height: 200px;
/*height: 100px;*/
/*border: 10px dashed blue;*/
border-left: 10px dashed green;
border-right: 10px dashed red;
border-bottom: 10px dashed yellow;
border-top: 10px solid purple;
border-radius: 50%;
/*background: url("xyjy.png") no-repeat;*/ /*溢出的部分隐藏*/
overflow: hidden; }
.c1 img{
/*按照父级标签的宽度来展示,并且进行等比缩放*/
max-width: 100%;
} <div class="c1">
<img src="xyjy.png" alt="">
</div>
关于div浮动
效果:
div使用float进行浮动,浮动后产生异常需要处理一下,将浮动后外面加上一层
.clearfix:after{
content: '';
display: block;
clear: both;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>-->
<!--<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>-->
<style> .c1{
width: 200px;
height: 100px;
border: 1px solid black; } .c2{
background-color: red;
/*display: none;*/
/*visibility: hidden;*/
} .c3{
background-color: blue;
}
.c3,.c4{
display: inline-block;
} /*.sp1{*/
/*border: 1px solid red;*/
/*display: block;*/
/*width: 100px;*/
/*height: 100px;*/
/*}*/ </style> </head>
<body> <div class="c1"> </div>
<div class="c1 c2"> </div>
<div class="c1 c3">
我是c3标签
</div>
<div class="c1 c4">
我是c4标签
</div> <!--<span class="sp1">-->
<!--我是span1-->
<!--</span>--> <!--<span class="sp1">-->
<!--我是span2-->
<!--</span>--> </body>
</html>
示例
定位:返回顶部按钮
效果:
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>-->
<!--<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>--> <style>
body{
margin:;
padding:;
} .c1,.c2,.c3{
width: 100px;
height: 600px;
background-color: red;
border: 1px solid black ;
} /*相对定位*/
/*.c2{*/
/*position: relative;*/
/*left: 102px;*/
/*!*top:-102px;*!*/
/*bottom:102px;*/
/*!*right: ;*!*/
/*}*/
/*绝对定位*/
.c2{
background-color: yellow;
position: absolute;
height: 100px;
left: 60px;
top:20px; }
.c4{
width: 200px;
height: 200px;
background-color: pink;
position: relative;
left: 100px;
top:150px; } .back-top{
position: fixed;
bottom: 20px;
right: 20px;
width: 80px;
height: 40px;
background-color: rgba(255,165,0,0.5); text-align: center;
line-height: 40px;
border-radius: 5%; }
.back-top:hover{
background-color: rgba(255,165,0,1);
} .back-top a{
color: white;
text-decoration: none;
} </style> </head>
<body> <a name="top">顶部位置在这里</a> <div class="c1">
c1
</div> <!--测试一下相对定位和绝对定位的组合使用-->
<div class="c4">
<div class="c2"> </div> </div> <!--简单测试相对定位和绝对定位的-->
<!--<div class="c2">-->
<!--c2-->
<!--</div>-->
<div class="c3">
c3
</div> <span class="back-top">
<a href="#top">返回顶部</a>
</span> </body>
</html>
代码
溢出:
当文字超过div的大小时,使用overflow:scroll
效果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>-->
<!--<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>-->
<style> div{
width: 200px;
height: 200px;
border: 1px solid red;
overflow: scroll;
} </style>
</head>
<body> <div>
犀一点通. </div> </body>
</html>
代码
z-index完成模拟注册对话框
效果
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>-->
<!--<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>-->
<style>
body{
margin:;
padding:;
} .content{
height: 600px;
width: 600px;
border:1px solid blue;
background-color: pink;
} .shadow{
background-color: black;
/*整个标签内容的颜色的透明度*/
opacity: 0.2; position: fixed;
width: 100%;
height: 900px;
top:;
left:;
color:red;
z-index:; } .reg{
width: 1000px;
height: 360px;
background-color: white;
border-radius: 5%;
position: fixed;
top:50%;
left: 50%;
margin-left:-500px;
margin-top: -180px;
z-index:;
}
</style> </head>
<body> <div class="content"> 文字
</div> <div class="content"> <a href="">金风玉露一相逢,便胜却人家无数</a> </div>
代码
透明度属性:
rgba设置的是单独属性的透明度
opacity设置的是整个标签的透明度
效果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>-->
<!--<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>--> <style>
.c1,.c2{
width: 100px;
height: 100px;
/*background-color: red;*/
border: 1px solid red;
} /*rgba设置的是单独属性的透明度*/
.c1{
background-color: rgba(255,0,0,0.5);
} /*整个标签的透明度设置*/
.c2{
background-color: rgb(255,0,0);
opacity: 0.5;
} </style> </head>
<body> <div class="c1">
xxxxxx </div>
<div class="c2">
ssssss </div> </body>
</html>
透明度代码
css--一些基本属性的更多相关文章
- css选择器基本属性
选择器一,相邻选择器: 1,相邻选择器 1),定义:相邻选择器匹配指定元素的相邻兄弟元素 2),用法:如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器 3),表示符 ...
- CSS3条件判断——@supports/window.CSS.supports()(转)
CSS3条件判断,听起来"不明觉厉",如果你对CSS稍为熟悉一点的话,你会发现CSS中的"@media"就是条件判断之一.是的,在CSS3的条件判断规范文档中包 ...
- HTML and CSS学习概述-续
1, CSS是层叠样式表(Cascading Style Sheets)的缩写,它用于定义HTML元素的显示形式,是一种格式化网页内容的技术.CSS现在已经被大多数浏览器所支持,成为网页设计者必须 ...
- day15 web前端之css
css的概念以及初体验 概念: CSS(cascading style sheet)也就是层叠样式表:它是一种网页设计的新技术,现在已经被大多数浏览器所支持,层位网页设计必不可少的工具之一.优点: ...
- jquery进阶(1)
今天我们接着来学习jQuery中的内容,包括css的操作.尺寸的操作.文档的操作.动画(有待补充),事件处理操作. 一.CSS 在css中可以设置css的基本属性 - .css("color ...
- Matplotlib数据可视化(3):文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- html基础--css基本属性
HTML基础--css基本属性 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- CSS基础篇之了解CSS和它的基本属性
CSS是什么? CSS英文全名是Cascading Style Sheets翻译过来就是层叠样式表,它主是把网页表现与内容分离的一种样式设计语言.这种语言能优化我们编程,把东西简化和优化写法,而且不同 ...
- css基本属性
CSS属性分类(最最常用的属性):颜色和长度文字盒模型布局定位背景文本和其他 常用CSS属性: <style>div{ color:#23729e; /*前景色*/ background: ...
- 第二章 CSS基本属性
1.CSS:层叠样式表 一个元素允许同时应用多种样式,页面元素最终的样式即为多种样式的叠加效果. 2.CSS样式优先级 行内样式表>内部样式表>外部样式表[就近原则] id选择器>类 ...
随机推荐
- 「小程序JAVA实战」小程序搜索功能(55)
转自:https://idig8.com/2018/09/23/xiaochengxujavashizhanxiaochengxusousuogongneng54/ 通过用户搜索热销词,将热销词添加到 ...
- linux nohup命令使程序在后台运行的方法
在linux操作系统中从后台一直运行某个程序的方法,就是使用nohup命令了. Unix/Linux下一般比如想让某个程序在后台运行,很多都是使用 & 在程序结尾来让程序自动运行. 比如要运行 ...
- ORA-10873
[问题现象] SQL> ALTER DATABASE OPEN; alter database open * ERROR at line 1: ORA-10873: file 36 needs ...
- METAL渲染是什么?
METAL渲染是什么? Metal渲染是由苹果公司为iOS8以及更新版本开发的全新的底层渲染API.它侧重于减少GPU驱动的工作量,从而当Metal调用时,CPU的消耗将降至最低.这样一来,游戏就可以 ...
- Spring Boot 、mybatis 、swagger 和 c3p0 整合
文件路径如下 添加依赖 <?xml version="1.0" encoding="UTF-8"?> <project xmlns=" ...
- SVG与HTML、JavaScript的三种调用方式
一.在HTMl中访问SVG的DOM Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHig ...
- 布局xml文件不能预览
原因:xml文件里,有一些值没有设置属性. 如: <LinearLayout android:layout_width="fill_ ...
- ubuntu系统中解决github下载速度慢问题
如果你在使用github,出现访问和下载速度慢问题,可以通过修改host解决.记得不要踩坑哦!分四步: 第一步:查询速度快的IP地址 在http://tool.chinaz.com/dns中查询下面三 ...
- 学习C++的50条忠告
1. 把C++当成一门新的语言学习: 2. 看<Thinking In C++>,不要看<C++变成死相>: 3. 看<The C++ Programming Langu ...
- 从数据池中捞取的存储过程控件使用完以后必须unprepare
从数据池中捞取的存储过程控件使用完以后必须unprepare,否则会造成输入参数是仍是旧的BUG. 提示:动态创建的存储过程控件无此BUG.此BUG只限于从数据池中捞取的存储过程控件. functio ...