一.clear

清除浮动

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.clearfix:after{ /*善用after和defore*/
content: "111"; /*注意加引号*/
clear: both;
display: block;
visibility: hidden; /*隐藏并有高度*/
height: 0; /*去掉高度*/ }
.c{
width: 100px;
/*height: 100px;*/
background-color:red;
}
.c .item{
float:left;
width:30px;
background-color: green ;
} </style>
</head>
<body>
<div class='c clearfix'>
<div class='item'>123</div>
<div class='item'>456</div> </div> <div class="test">内容</div>
</body>
</html>

定义公共样式clearfix

避免每次都写标签clear:both来清除浮动

二.hover

样式一:

  为伪类加边框效果

<!DOCTYPE html>
<html lang="en">
<!--伪类1-->
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{margin: 0}
.ele{
border: 2px solid transparent;
}
.ele:hover {
border: 2px solid red;
}
.ele:hover .ele_item{
color: red;
}
</style>
</head>
<body>
<div class="ele">
<div class="ele_item">
123
</div>
test
</div> </body>
</html>

样式一

  加图片文字

<!DOCTYPE html>
<html lang="en">
<!--伪类2-->
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.main{
width: 200px;
height: 169px;
overflow: hidden;
position: relative;
}
.main .content{
position: absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
background-color: #666666;
opacity: 0.7;
text-align: center;
visibility: hidden;
}
.main:hover .content{
visibility: visible;
}
.main .content .c2{
color: red;
} </style>
</head>
<body>
<div class="main">
<div class="images"><img src="a.png"></div>
<div class="content">
<div>test</div>
<div class="c2">ttttt</div>
</div>
</div>
</body>
</html>

样式二

Z-index可被用于将在一个元素放置于另一元素之后

三.position

  规定元素的定位类型

说明

这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移

属性值

例 :

<!DOCTYPE html>
<html lang="en">
<!--position-->
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;
}
.main{
background-color: whitesmoke;
height: 800px;
}
.main .pos{
position: fixed;
right: 10px;
bottom: 10px;
width: 50px;
height: 50px;
background-color: rosybrown;
}
.main .pos2{
position: relative;
background-color: burlywood;
width: 800px;
margin: 0 auto;
height: 100px; } .main .pos2 .little_div{
position: absolute;
background-color: darksalmon;
width: 100px;
height: 30px;
left: 0;
bottom: 0; }
</style>
</head>
<body>
<div class="main">
<div class="pos2">
<div class="little_div"></div>
</div>
<div class="pos"></div>
</div> </body>
</html>

relative与absolute并用

四.实现小尖角

通过设置边框实现小尖角效果,如

<!DOCTYPE html>
<html lang="en">
<!--下拉尖角-->
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.up{
border-top: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 30px solid green;
border-left: 30px solid transparent;
display: inline-block;
}
.down{
border-top: 30px solid green;
border-right: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 30px solid transparent;
display: inline-block;
}
.c1{
border: 30px solid transparent;
border-top: 30px solid green;
display: inline-block;
margin-top: 40px;
}
.c1:hover{
border: 30px solid transparent;
border-bottom: 30px solid green;
display: inline-block;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="up"></div>
<div class="down"></div>
<div style="height: 100px;background-color: #666666">
<div class="c1"></div>
</div> </body>
</html>

小尖角

五.图标

一般实现制作图标有三种方式:

  • 图片(自定义)
  • CSS实现
  • fontawsome

本例引用第三方,fontawsome,网址:http://fontawesome.io/icons/

首先下载解压,引用,使用方法,例:

<!DOCTYPE html>
<html lang="en">
<!--图标-->
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="font-awesome/css/font-awesome.css">
</head>
<body>
<span class="icon-dollar"></span>
</body>
</html>

六.important

CSS写在不同的地方有不同的优先级, .css文件中的定义 < 元素style中的属性,但是如果使用!important,事情就会变得不一样

css定义中的用!important限定的定义却是优先级最高的

格式:

Tag:css   !important 

例:

<!DOCTYPE html>
<html lang="en">
<!--important-->
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
font-size: 16px;
color: red;
font-weight: bold;
}
.limit{
color: orchid !important;
} </style>
</head>
<body>
<div>
<p>没应用样式</p>
</div>
<div >
<a class="limit">应用了</a>
<p>hello</p>
</div>
</body>
</html>

important应用

七.overflow

  规定溢出元素的首选滚动方法

例:

<!DOCTYPE html>
<html lang="en">
<!--页面布局-->
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{margin: 0px}
.top{
background-color: #666666;
height: 30px;
}
.center .center_left{
position: absolute;
background-color: antiquewhite;
width: 110px;
left: 0;
}
.center .content{
position: absolute;
background-color: #2459a2;
top: 30px;
left: 112px;
right: 0;
bottom: 0;
overflow: auto;
} </style>
</head>
<body>
<div class="top"></div>
<div class="center">
<div class="center_left">
<ul>
<li>menu</li>
<li>menu</li>
<li>menu</li>
<li>menu</li>
<li>menu</li>
</ul>
</div>
<div class="content">
<h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1>
<h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1>
<h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1>
<h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1>
</div>
</div> </body>
</html>

内容溢出滚动

八.小实例

1.登录框

<!DOCTYPE html>
<html lang="en">
<!--登录框-->
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.login_des{
position: relative;
width: 200px;
}
.login_des .user_info{
width: 160px;
height: 30px;
padding-right: 30px;
}
.login_des .user_logo{
position: absolute;
top: 8px;
left: 170px;
}
</style>
</head>
<body>
<div class="login_des">
<input type="text" class="user_info">
<span class="user_logo">R</span>
</div> </body>
</html>

2.提示框

边缘标签:relative,absolute

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<style>
a {color: #428bca;
text-decoration: none;
} .modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
background-color: #white;
opacity: 0.8;
} .modal {
position: fixed;
top: 30%;
left: 50%;
z-index: 1030;
} .hide {
display:none;
}
</style> </head>
<body>
<div>
<input type="button" onclick="fadeIn();" value="模态对话框"/>
</div>
<div id="shade" class="modal-backdrop hide">
<div class="modal">
<img src="./images/loading_32.gif"/>
</div>
</div>
<script >
function fadeIn() {
document.getElementById('shade').className = 'modal-backdrop';
} function fadeOut() {
document.getElementById('shade').className = 'modal-backdrop hide';
}
</script>
</body>
</html>

3.购物产品选择框

<!DOCTYPE html>
<html lang="en">
<!--加减框-->
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{margin: 0}
.left{
float: left;
}
.select{
background-color: #999999;
height: 25px;
width: 140px;
border: 1px solid darksalmon;
}
.select .minus{
width: 20px;
height: 25px;
line-height: 25px;
text-align: center;
cursor: pointer;
}
.select .plus{
width: 20px;
height: 25px;
line-height: 25px;
text-align: center;
cursor: pointer;
} .select .content input{
width: 88px;
height: 23px;
border: 0;
border-left: 1px solid darksalmon;
border-right: 1px solid darksalmon;
}
</style>
</head>
<body>
<div class="select">
<div class="minus left" onclick="Minus()">-</div>
<div class="content left">
<input id = "count" type="text" name="num" value="0"/>
</div>
<div class="plus left" onclick="Plus()">+</div>
</div>
<script type="text/javascript">
// 定义函数
function Plus() {
var old_str = document.getElementById("count").value;
var old_int = parseInt(old_str)
var new_int = old_int + 1;
document.getElementById("count").value = new_int
}
function Minus() {
var old_str = document.getElementById("count").value;
var old_int = parseInt(old_str)
var new_int = old_int - 1;
document.getElementById("count").value = new_int
}
</script>
</body>
</html>

CSS应用内容补充及小实例的更多相关文章

  1. JavaScript 小实例 - 表单输入内容检测,对页面的增删改

    JavaScript 小实例 - 表单输入内容检测,对页面的增删改 效果体验地址:https://xpwi.github.io/js/JavaScript01/jsForm.html 功能: 1.向页 ...

  2. django Form 表单 总结与小实例

    开头寄语: 这几天一直在看Django的form表单验证,然后想对于这几天要有个总结. 首先,先来看一下找到的一个form表单验证的流程: 验证过程 流程详解1. 函数full_clean()依次调用 ...

  3. canvas实践小实例一 —— 画板工具

    前面讲了一部分的canvasAPI的基础知识,光看API的介绍确实是很无趣乏味,需要一点可以激发内心的激情的东西来激励自己来学习,于是就了伴随canvasAPI学习的小实例,这样通过API的知识,结合 ...

  4. python 全栈开发,Day93(vue内容补充,VueX)

    昨日内容回顾 1. 页面的布局 Vue中使用Bootstrap搭页面 1. 安装 1. npm install bootstrap@3.3.7 -S 2. 使用 1. import 'bootstra ...

  5. jquery-1 jquery几个小实例

    jquery-1  jquery几个小实例 一.总结 一句话总结:jquery真的是简单加简便. 1.jquery中改变多个css属性怎么整? 可以链式连接方式,也可以大括号整多个.中间是键值对加引号 ...

  6. Objective-C之@类别小实例

    *:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...

  7. 一个简单的Android小实例

    原文:一个简单的Android小实例 一.配置环境 1.下载intellij idea15 2.安装Android SDK,通过Android SDK管理器安装或卸载Android平台   3.安装J ...

  8. Entity Framework 的小实例:在项目中添加一个实体类,并做插入操作

    Entity Framework 的小实例:在项目中添加一个实体类,并做插入操作 1>. 创建一个控制台程序2>. 添加一个 ADO.NET实体数据模型,选择对应的数据库与表(Studen ...

  9. WCF小实例以及三种宿主

    WCF小实例以及三种宿主 最近一直在学习WCF相关知识,下面将通过一个小实例对所学的知识进行简单的回顾:本实例是一个简单三层操作数据库,并且也简单实现的三种宿主(控制台宿主,IIS宿主以及Window ...

随机推荐

  1. 简单几何(凸包) POJ 1113 Wall

    题目传送门 题意:求最短路线,使得线上任意一点离城堡至少L距离 分析:先求凸包,答案 = 凸包的长度 + 以L为半径的圆的周长 /*********************************** ...

  2. VMware-workstation-full-10.0.1-1379776 CN

    从V10版本开始,VMware Workstation 官方自带简体中文了,以后大家不需要汉化啦! 今天,VMware Workstation 10.0.1正式发布,版本号为Build 1379776 ...

  3. hihocoder #1290 : Demo Day (2016微软编程测试第三题)

    #1290 : Demo Day 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 You work as an intern at a robotics startup. ...

  4. PHP程序输出日历

    以下代码只是简单实现日历的效果和逻辑思路,没有使用类封装,权当抛砖引玉,有兴趣的朋友可以封装起来,方便调用. <?php /** * PHP利用时间函数输出日历 * Rain.zen $ int ...

  5. java删除数组中的第n个数

    package test; import java.util.Scanner; public class Deletearr { public static void deletearr(){ Sca ...

  6. [Swift]LeetCode830. 较大分组的位置 | Positions of Large Groups

    In a string S of lowercase letters, these letters form consecutive groups of the same character. For ...

  7. koa2入门(3)mongoose 增删改查

    项目地址:https://github.com/caochangkui/demo/tree/koa-mongoose 连接数据库 数据库名字为:koa-mongoose const mongoose ...

  8. composer install Your requirements could not be resolved to an installable set of packages

    composer install --ignore-platform-reqs 或者 composer update --ignore-platform-reqs

  9. DML DDL

    DDL 1.SQL分为5大类: DDL:数据定义语言 DCL:数据控制语言 DML:数据操纵语言 DTL:数据事务语言 DQL:数据查询语言 2.DDL(data definition languag ...

  10. STM32F4 HAL Composite USB Device Example : CDC + MSC

    STM32F4 USB Composite CDC + MSC I'm in the process of building a USB composite CDC + MSC device on t ...