前端小练——CSS如何做十字图样

#box{position:absolute;/* 定位改变位置 */top:0;left:10;right:0;bottom:30;width:40px;height:30px;/* 设置宽高 */margin:auto;background-color: red;border-radius: 0 5px;/* 设置边框圆角 */}#box::before{content:"";/* 设置一个虚拟的，不占空间的块 */position:absolute;left:50%;top:0;/* 设置位置为box的竖线 */width:2px;height:45%;/* 设置宽高 */margin-left:-1px;margin-top: 8px;/* 调整位置 */background-color:white;}#box::after{content:"";/* 设置一个虚拟的，不占空间的块 */position:absolute;left:0;top:40%;/* 设置位置为box的横线 */width:33%;height:2px;/* 设置宽高 */margin-top:2px;margin-left:13px;/* 调整位置 */background-color:white;}

这是css部分代码

<div id="box"></div>

这是html部分代码

右上角就是完成图

就是利用：after和：before来完成

前端小练——CSS如何做十字图样相关推荐

前端小练————天猫国际登录页
html代码部分 <!DOCTYPE html> <html lang="en"><head><meta charset="UT ...
前端小练————三国杀登录页
html部分 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF- ...
（简单课设）前端小白刚做的一个简单的移动端项目的分享和总结
前端小白刚做的一个简单的移动端项目的分享和总结所用技术为简单的div+css 直接上图片代码部分小滴服务接下来是企业项目部分接下来是我的小滴部分 (另外两个部分内容非常简单,没必要粘贴代码了 ...
做一个纯前端小程序，只需要简单几步
前段时间某神秘企业员工被禁止拥有自媒体,所以如果大家在盗版网站或者某条看到这篇文章,而且昵称还叫什么泽哥**钊,不用慌,就是我!!! 我这技术这么烂,也要被限制,辛苦某某部门了.也不知道啥时候禁止我发 ...
前端小demo_day02_聚光灯(CSS)实现
前端小demo_day02_聚光灯(CSS)实现写在前面前端练习的第三天,今天实现了一个聚光灯的效果,看到这个效果的第一眼的时候,就感觉会用到我们第一天学习到的一个新属性clip-path ,一起 ...
前端小项目（一）| 电影院座位预定（html，css，js）
前端小项目(一)| 电影院座位预定前言开始好好学习前端啦.学紫色爱心记录一波!! 初步学了html,css,js,在github上找了几个前端小项目模仿着练练手.第一个就是电影院座位预定页面,主要 ...
css+less+scss,你只懂CSS？做前端你还要会 Less、Sass或Stylus
网站前端开发,CSS是必备的知识,但随着WEB项目越来越大,CSS的预处理越来越重要. 为什么需要CSS的预处理? CSS 是一门非程序式语言,没有变量.函数.SCOPE(作用域)等,要维护我们的CS ...
mySQL微信小程序的div_做一个微信小程序的完整流程
一. 引言最近在和朋友探讨开发一个小程序,都说近一两年是小程序快速发展的一年,不懂技术的人,大部分零售店面都开始想做一个小程序帮助推广销售.虽然小程序技术门槛没那么高,但自己独立做一个小程序还是需要 ...
前端基础：CSS 3
前端基础:CSS 3 文章目录前言一.什么是CSS 0. CSS的简单介绍 1. 什么是CSS 2. CSS发展史 3. CSS的快速入门及优势 4. 四种CSS导入方式二.选择器 1. 三种基 ...

前端小练——CSS如何做十字图样

前端小练——CSS如何做十字图样相关推荐

最新文章

热门文章