css布局实现一个笔记本电脑效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局实现一个笔记本电脑效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;700;900&display=swap"); *, *::after, *::before { margin: 0; padding: 0; box-sizing: inherit; } html { /* This defines what 1rem is */ font-size: 62.5%; /* 1 rem = 10px; 10px/16px = 62.5% */ } body { box-sizing: border-box; font-family: "Poppins", sans-serif; width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; flex-direction: column; background-color: #fff; } .laptop { display: flex; justify-content: center; align-items: center; flex-direction: column; } .screen-outer { position: relative; background-color: #000; width: 30rem; height: 21rem; border-radius: 15px; } .screen-inner { position: absolute; top: 1.5rem; left: 0.9rem; height: calc(100% - 3.8rem); width: calc(100% - 1.7rem); background-color: #fff; } .screen-inner img { width: 100%; height: 100%; } .bottom-strip.........完整代码请登录后点击上方下载按钮下载查看
网友评论0