好文分享

本文目标： 1、掌握background-origin背景原点的使用 问题： 1、实现以下效果，使用纯DIV+CSS，必须使用背景原点background-orgin 附加说明： 立即学习“前端免费学习笔记（深入）”； 1、每个相框宽500px,高500px，其中border宽20px,里面文字pa…

本文目标： 1、掌握background-clip背景裁切的3种实现 问题： 要求实现以下效果，使用纯DIV+CSS，必须使用background-clip 附加说明： 立即学习“前端免费学习笔记（深入）”； 1、相框宽度为500px,高500px，其中border宽20px,里面文字padding…

本文目标： 1、掌握background-size背景图片大小的几种设置方法 问题： 1、实现以下效果，使用纯DIV+CSS，必须使用background-size 附加说明： 1、背景图片大小本身是500*300大小 立即学习“前端免费学习笔记（深入）”； 2、div容器宽度600*300大小 3…

要实现镜像翻转，有两种实现方法： 方法一：利用css动画属性rotate旋转来实现 具体代码： .mirrorRotateLevel { transform: rotateY(180deg); /* 水平镜像翻转 */}.mirrorRotateVertical { transform: rotat…

本文目标： 1、掌握background-image多背景的实现 问题： 1、实现以下效果，使用纯DIV+CSS，必须使用background-image 附加说明： 1、整体宽度是1000px，高300px，要求页面居中显示 立即学习“前端免费学习笔记（深入）”； 2、背景图片宽，高均为300px…

本文目标： 1、掌握css3中属性选择器几种用法 问题： 1、要求使用div+css实现以下效果，但是要求css文件中全部使用属性选择器来设置元素样式 附加说明： 1、整个div宽为850，要求在页面中居中显示 立即学习“前端免费学习笔记（深入）”； 2、标题大小为28，加粗显示 3、其他字体14p…

css中实现背景透明通常有如下3种方式，以下是这三种方式的不透明度为80%的写法： css3的opacity:x，x 的取值从 0 到 1，如opacity: 0.8 css3的rgba(red, green, blue, alpha)，alpha的取值从 0 到 1，如rgba(255,255,2…

本文目标： 1、掌握css中结构性伪类选择器—target的用法 问题： 1、实现以下菜单效果，当点击公众号弹出4个子菜单，当点击小程序，弹出另外2个子菜单，之前展示的子菜单需要自动收缩起来，且使用纯DIV+CSS，必须使用结构性伪类选择器—target    附加说明： 1、整体宽度是140px …

本文目标： 1、掌握css中结构性伪类选择器—nth-child的用法 问题： 1、实现以下效果，且使用纯DIV+CSS，必须使用结构性伪类选择器—nth-child 当鼠标悬停在某个单元格上时，背景变成紫色 附加说明： 1、每个单元格宽145，带1个像素边框，左边padding为5，上下paddi…

本文为大家展示了几款美观的表格样式，希望大家可以喜欢。 1、单像素边框CSS表格 table.gridtable {font-family: verdana,arial,sans-serif;font-size:11px;color:#333333;border-width: 1px;border-…