浮动

1.浮动起来的盒子不占用位置，浮动了一个盒子下面的标准流的盒子会顶上来

​

可用清除浮动的方法来解决标准流会顶替位置的问题

清除浮动给父盒子加overflow: hidden;

鼠标经过事件

：hover为鼠标经过事件

​

transform给盒子一个移动效果 可用于鼠标经过事件

.daohang ul li:hover {

    transform: translateY(-5px);

     transition:all 0.4s;

     border-bottom: 2px solid red;

  }

选择器o(╥﹏╥)o

first-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的基础全局运用的更多相关文章

  1. 前端工程师面试问题归纳（一、问答类html/css/js基础）

    一.参考资源 1.前端面试题及答案整理(一) 2.2017年前端面试题整理汇总100题 3.2018最新Web前端经典面试试题及答案 4.[javascript常见面试题]常见前端面试题及答案 5.W ...

  2. HTML5/CSS3 第一章基础

    HTML5/CSS3基础 1. HTML 1.1 什么是HTML HTML是用来制作网页的标记语言 HTML是Hypertext Markup Language的英文缩写,即超文本标记语言 HTML语 ...

  3. CSS 设计彻底研究（一）(X)HTML与CSS核心基础

    第1章 (X)HTML与CSS核心基础 这一章重点介绍了4个方面的问题.先介绍了 HTML和XHTML的发展历程以及需要注意的问题,然后介绍了如何将CSS引入HTML,接着讲解了CSS的各种选择器,及 ...

  4. 精通CSS+DIV基础总结(一)

    这段时间学习了玩了DIV+CSS的视频,感觉效率不高.前边的Javascript总结的不好,但是看了后边的JQuery,觉得学习的再多一点,再进行Javascript的总结.DIV+CSS总结,估计会 ...

  5. 第二部分----CSS的基础语法

    PART-1 CSS的基础常识 一.什么是CSS? W3C标准中,倡导有3:其一为内容与表现分离,其二为内容与行为分离,其三为内容结构的语义化.其倡导中第一条的"表现"指的便可以说 ...

  6. CSS的基础学习

    CSS学习 --------学习资源 http://www.csszengarden.com/ CSS语法检查http://jigsaw.w3.org/css-validator/ 配置CSS的方法: ...

  7. 2天驾驭DIV+CSS （基础篇）（转）

    这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” 将你引入两大误区 ...

  8. HTML+CSS+JS基础知识

    HTML+CSS+JS基础知识 目录 对HTML+CSS+JS的理解 基础知识 对HTML+CSS+JS的理解 基础知识 插入样式表的三种方式 外部样式表:<link rel="sty ...

  9. 【笔记-前端】div+css排版基础，以及错误记录

    现在的网站对于前端的排版已经逐渐不使用<table>,而是使用div+css. 使用这种方法的最大好处就在于在维护页面时,可以只维护css而不去改动html. 可是这种方式对于初学者来说可 ...

随机推荐

  1. tp5怎么防sql注入 xss跨站脚本攻击

    在 application/config.php 中有个配置选项 框架默认没有设置任何过滤规则,你可以是配置文件中设置全局的过滤规则 则会调用这些函数 自动过滤 // 默认全局过滤方法 用逗号分隔多个 ...

  2. 手绘流程图，教你WSL2与Docker容器无缝互相迁移

    摘要:本文主要介绍WSL2与Docker容器无缝迁移镜像. 本文分享自华为云社区<WSL2与Docker容器,无缝互相迁移>,作者: tsjsdbd . 注:本文提到的WSL都是指WSL2 ...

  3. yum源出现 AppStream‘ 缓存失败，忽略这个 repo。同步仓库 ‘base‘ 缓存失败，忽略这个 repo 的问题解决办法

    今天安装Wget时出现如下错误 到 /etc/yum.repos.d/目录下编辑CentOS-Base.repo ,更改为如下内容. vim CentOS-Base.repo # CentOS-Bas ...

  4. LGP4841题解

    无向联通图计数板子 首先,这个太难了,先让我们来求一个简单的: 无向图计数. 一共 \(\frac {n \times (n+1)} 2\) 条可能存在的边,枚举一条边是否存在,就有 \(2^{\fr ...

  5. CentOS 5.11源修改

    CentOS 5.11源 将源中所有网址替换为 http://archive.kernel.org/centos-vault/你的版本/ 一条sed命令即可解决 sed -i 's@http://xx ...

  6. CentOS8安装Geant4笔记（三）：Geant4介绍、编译、安装支持Qt5界面并运行exampleB1例程显示Qt界面

    前言   上一篇,安装了Qt5环境.  本篇在服务器CentOs8.2上安装geant4软件,geant4使用Qt5来显示.   GEANT4 介绍   Geant4 是一个用于模拟粒子穿过物质的工具 ...

  7. C++ 接口的实现方式

    一.接口的定义 有时候,我们得提供一些接口给别人使用.接口的作用,就是提供一个与其他系统交互的方法.其他系统无需了解你内部细节,并且也无法了解内部细节,只能通过你提供 给外部的接口来与你进行通信.根据 ...

  8. 74CMS 3.0任意文件写入漏洞

    一. 启动环境 1.双击运行桌面phpstudy.exe软件 2.点击启动按钮,启动服务器环境 二.代码审计 1．双击启动桌面Seay源代码审计系统软件 2．因为74CMS3.0源代码编辑使用GBK编 ...

  9. hutool包里的ObjectUtil.isNull和ObjectUtil.isEmpty的区别

    大家都用过hutool包把,包路径为:cn.hutool.core.util,最近再使用的过程中一直没高明白ObjectUtil.isEmpty和ObjectUtil.isNull两者到底有那些区别, ...

  10. 不想业务被中断？快来解锁华为云RDS for MySQL新特性

    摘要:新特性上线!华为云RDS for MySQL又添新技能,实力保障业务连续性. 本文分享自华为云社区<不想业务被中断?快来解锁华为云RDS for MySQL新特性>,作者:Gauss ...