css3，css的基础全局运用
浮动
1.浮动起来的盒子不占用位置，浮动了一个盒子下面的标准流的盒子会顶上来
可用清除浮动的方法来解决标准流会顶替位置的问题
清除浮动给父盒子加overflow: hidden;
鼠标经过事件
：hover为鼠标经过事件
transform给盒子一个移动效果 可用于鼠标经过事件
.daohang ul li:hover {
transform: translateY(-5px);
transition:all 0.4s;
border-bottom: 2px solid red;
}
选择器o(╥﹏╥)ofirst-child选择ul标签的第一个li
.mokuai ul li:first-child {
position: relative;
float: left;
width: 268px;
height: 218px;
}
last-child选择最后一个li标签.mokuai ul li:last-child {
float: right;
width: 291px;
height: 218px;
border-right: 1px solid #ccc;
}盒子阴影的做法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
}
div:hover {
box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
css3，css的基础全局运用的更多相关文章
- 前端工程师面试问题归纳（一、问答类html/css/js基础）
一.参考资源 1.前端面试题及答案整理(一) 2.2017年前端面试题整理汇总100题 3.2018最新Web前端经典面试试题及答案 4.[javascript常见面试题]常见前端面试题及答案 5.W ...
- HTML5/CSS3 第一章基础
HTML5/CSS3基础 1. HTML 1.1 什么是HTML HTML是用来制作网页的标记语言 HTML是Hypertext Markup Language的英文缩写,即超文本标记语言 HTML语 ...
- CSS 设计彻底研究（一）(X)HTML与CSS核心基础
第1章 (X)HTML与CSS核心基础 这一章重点介绍了4个方面的问题.先介绍了 HTML和XHTML的发展历程以及需要注意的问题,然后介绍了如何将CSS引入HTML,接着讲解了CSS的各种选择器,及 ...
- 精通CSS+DIV基础总结(一)
这段时间学习了玩了DIV+CSS的视频,感觉效率不高.前边的Javascript总结的不好,但是看了后边的JQuery,觉得学习的再多一点,再进行Javascript的总结.DIV+CSS总结,估计会 ...
- 第二部分----CSS的基础语法
PART-1 CSS的基础常识 一.什么是CSS? W3C标准中,倡导有3:其一为内容与表现分离,其二为内容与行为分离,其三为内容结构的语义化.其倡导中第一条的"表现"指的便可以说 ...
- CSS的基础学习
CSS学习 --------学习资源 http://www.csszengarden.com/ CSS语法检查http://jigsaw.w3.org/css-validator/ 配置CSS的方法: ...
- 2天驾驭DIV+CSS （基础篇）（转）
这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” 将你引入两大误区 ...
- HTML+CSS+JS基础知识
HTML+CSS+JS基础知识 目录 对HTML+CSS+JS的理解 基础知识 对HTML+CSS+JS的理解 基础知识 插入样式表的三种方式 外部样式表:<link rel="sty ...
- 【笔记-前端】div+css排版基础，以及错误记录
现在的网站对于前端的排版已经逐渐不使用<table>,而是使用div+css. 使用这种方法的最大好处就在于在维护页面时,可以只维护css而不去改动html. 可是这种方式对于初学者来说可 ...
随机推荐
- Java入土---基本DOS命令
基本DOS命令 打开cmd方式 开始+系统+命令提示符 win+R,输入cmd 在任意文件夹下,按住shift + 右键,打开命令行窗口 资源管理器里打开 常用DOS命令 盘符切换 E: dir命令查 ...
- C++ STL vector扩容原理分析
扩容特点: 1)新增元素:vector通过一个连续的数组存放元素,如果集合已满,在新增数据的时候,就要分配一块更大的内存,将原来的数据复制过来,释放之前的内存,在插入新增的元素: 2)对vector的 ...
- jq集成月份插件（不要年月日，只要年月）
最近项目中报表统计需要按照月份进行统计,以前用的jq-ui的插件,里面集成的是年月日,修改了好久,觉得太过麻烦,就换了个思路,由于赶时间,所以就度娘了,找到了一个很简洁又简单的Demo,但是发现和我的 ...
- 八、Java面向对象编程
Java面向对象 初识面向对象 面向过程 & 面向对象 面向过程思想 步骤清晰简单,第一步做什么,第二部做什么... 面对过程适合处理一些较为简单的问题 面向对象思想 物以类聚,分类的思维模式 ...
- Linux内核驱动模块编写尝试
课堂笔记 源代码 /*file: hello.c*/ #ifndef _KERNEL_ #define _KERNEL_ #endif #ifndef MODULE #define MODULE #e ...
- 常用命令行指令 Windows & Linux
一.Linux linux常用命令详解:https://www.cnblogs.com/yuncong/p/10247583.html 挂载U盘到linux一个文件夹中 二.Windows 1.查看电 ...
- virtualenv和virtualenvwrapper pipenv安装
virtualenv和virtualenvwrapper pipenv安装 virtualenvwrapper工具 virtualenvwrapper是用来管理virtualenv的扩展包,用着很方便 ...
- APACHE ACTIVEMQ安装
APACHE ACTIVEMQ安装 一.特点 支持各种语言和协议的客户端.如:Java.C.C++.C#.Ruby.Perl.Python及Php. 完全支持JMS的客户端及其他消息代理 完全支持JM ...
- CF1452E Two Editorials (思维题，暴力+差分)
题目描述: 给你m个位于[1,n]的区间p,现在有长度为K的区间b和c.设对于区间$p[i]$,定义$a[i]$为$p[i]$分别与b,c相交长度的较大值,现在问区间b和c位于何处时,$\sum p_ ...
- 『现学现忘』Docker基础 — 34、DockerFile文件详解
目录 1.DockerFile文件说明 2.Dockerfile构建过程解析 (1)Docker容器构建三步骤 (2)Dockerfile文件的基本结构 (3)Dockerfile注意事项 (4)Do ...