1.前端之路-css-一颗爱心

原创 2017年10月06日 23:41:45


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
.one{
margin: 0 auto;
padding: 0px;
width: 500px;
height: 500px;
background-color: rgba(0,0,45,0.5);
}
.two{
width: 160px;
height: 160px;
margin: 0 auto;
background-color: red;
position: relative;
top: 150px;
}
.two:before{
content: "";
display: block;
width: 160px;
height: 160px;
border-radius: 50%;
background-color: red;
position: relative;
top: -80px;


}
.two:after{
content: "";
display: block;
width: 160px;
height: 160px;
border-radius: 50%;
background-color: red;
position:relative;
right: -80px;
top: -160px;
}
.two{
transform: rotate(-45deg);
}
</style>
<body>
<div class="one">
<div class="two">

</div>
</div>
</body>
</html>


相关文章推荐

[前端大神之路]CSS_Secreats

  • 2015年08月17日 11:11
  • 8.66MB
  • 下载

CSS系列——前端进阶之路:初涉Less

CSS系列——前端进阶之路:初涉Less 阅读目录 一、Less介绍 1、官方介绍2、自己理解3、Less、Sass、Stylus 二、Less使用入门 ...

CSS系列——前端进阶之路:初涉Less

前言:最近帮一个朋友解决点问题,在查看组件源码的时候涉及到了less语法,这可难倒博主了。没办法,既然用到就要学呗,谁让咱是无所不能的程序猿呢!所以今天来学习下Less,算是笔记,也希望给初学less...

前端学习之路css(01)-简介

CSS 简介1. CSS是什么 CSS 指层叠样式表 (Cascading Style Sheets); 样式定义如何显示 HTML 元素; 样式通常存储在样式表中; 把样式添加到 HTML 4.0 ...

前端学习之路css(04)-基础知识

CSS 分组与嵌套分组选择器在样式中,我们可能有很多元素拥有同样的样式,我们可以使用分组选择器将它们一次性定义出来。每个选择器用逗号分隔。嵌套选择器它适用于选择器内部的选择器样式。CSS Dimens...

前端学习之路css(06)-基础知识

CSS 导航栏在CSS中我们利用链接列表来表示导航栏,给出一些常见简易的导航栏。CSS 下拉菜单下拉菜单我们需要在style中定义以下属性; .dropdown,包含下拉按钮的块样式; .dropbt...

前端菜鸟的自学之路(二)——CSS网页布局

基础教程 HTML+HTML5 CSS+CSS3 文中涉及到的具体属性已添加参考手册中的相关说明,查看有助于理解记忆。 课程 网页布局基础 本文类似于课程笔记、课程回顾,最好结合视频一起食...

前端学习之路css3(03)-基础知识

多列一般情况下,我们是将div分隔成若干行来显示信息的,但是在CSS3中我们还可以将div分隔成若干列来显示布局,一般包含以下属性。01. column-count用来设置要分隔的列数,例子。02. ...

前端学习之路css(03)-基础属性

CSS ul(列表样式)在html中有两种列表样式,无序列表和有序列表。一般无序列表特殊图形(比如小圆点等)来表示列表的标号,有序列表用数字等来表示标号。在CSS样式中,我们可以定义不同样式的列表展示...

前端学习之路css(05)-基础知识

CSS 组合选择符组合选择器可表示两个选择器之间的关系,它包括了4中组合方式: 后代选取器(以空格分隔’ ‘); 子元素选择器(以大于号分隔’>’); 相邻兄弟选择器(以加号分隔’+’); 普通兄弟选...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:1.前端之路-css-一颗爱心
举报原因:
原因补充:

(最多只允许输入30个字)