首页 > 其他分享 >CSS学完就练-分享链接

CSS学完就练-分享链接

时间:2024-11-01 11:46:37浏览次数:1  
标签:E5% AE% 分享 学完 链接 CSS

前言

  1. 本习题适合初学CSS的同学,强烈建议练习
  2. 建议 FLEX一波带走
  3. 本题贴近实际业务,可以为将来面试工作做准备
  4. 练习之前,查看要求

应用场景

  1. 向用户分享一个链接时弹出的界面,在各大社交平台上都能看到身影
  2. 提供丰富功能如快速分享,扫描,复制等

要求

  1. 元素间距为8px
  2. 元素宽高必须与设计图保持一致,不能有像素上的误差

设计图

原型图链接

https://www.figma.com/design/nX2tf82f21ZGDNkKPkvUZj/%E8%AE%BE%E8%AE%A1%E5%AE%9E%E9%AA%8C%E5%AE%A4?node-id=225-2&t=lUNhXH9CoZ5mHyO9-1

标签:E5%,AE%,分享,学完,链接,CSS
From: https://www.cnblogs.com/blogin/p/18519878

相关文章

  • 【前端基础】CSS进阶
    目标:掌握复合选择器作用和写法;使用background属性添加背景效果01-复合选择器定义:由两个或多个基础选择器,通过不同的方式组合而成。作用:更准确、更高效的选择目标元素(标签)。后代选择器后代选择器:选中某元素的后代元素。选择器写法:父选择器子选择器{CSS属性},父子......
  • css渐变背景的顶级用法:linear-gradient()
    background-image:linear-gradient(110deg,rgb(1,228,161)49%,rgb(0,0,0)2%51%,rgb(226,237,251)49%); linear-gradient详解:简单实例:从头部开始的线性渐变,从红色开始,转为黄色,再到蓝色:background-image:linear-gradient(red,yellow,blue);linear-gradient(......
  • 推荐一个在react项目中为元素添加样式的第三方库(styled-components)(css in js方案)
    1、安装插件pnpm      pnpmistyled-components npm      npminstall styled-componentsyarn        yarn add styled-components2、创建一个js文件用于写样式(模板字符串写法)(1)以App.jsx组件为例,创建一个style.js样式文件,创建组件并暴露//......
  • 帝国CMS修改栏目顺序提示:您来自的链接不存在怎么办
    修改php.ini:如果服务器环境是宝塔:进入宝塔面板,找到你使用的PHP版本。点击“设置”,选择“配置文件”。搜索 max_input_vars,去掉前面的分号(如果有的话),并将值改为2000。保存并重启PHP。其他环境:找到 php.ini 文件,通常位于 /usr/local/php/etc/php.ini。使用VI命......
  • jquery/js通过当前URL对当前栏目链接高亮显示
    ​对于静态页面通过当前URL对当前栏目链接高亮显示这个技巧很多小伙伴问过墨鱼,今天放一下通用代码给小伙伴参考:HTML代码:<div class="nav"><a href="index.html">首页<a href="list_1.html">栏目一<a href="list_2.html">栏目二<a href="list_3.html&qu......
  • 跟着阿灵学前端——CSS 基础 (2)
    1.CSS长度单位px:像素em:相对元素font-size的倍数rem:相对根字体大小的倍数,html标签就是根。%:相对父元素计算的百分比。CSS中设置长度,必须加单位,否则样式无效。2.元素的显示模式块元素(block)又称:块级元素特点:在页面中独占一行,不会与任何元素共用一行,是从上到......
  • 编译和链接
     ⽬录1.翻译环境和运⾏环境2.翻译环境:预编译+编译+汇编+链接1.翻译环境和运⾏环境在ANSIC的任何⼀种实现中,存在两个不同的环境。第1种是翻译环境,在这个环境中源代码被转换为可执⾏的机器指令(⼆进制指令)。第2种是执⾏环境,它⽤于实际执⾏代码2.翻译环......
  • xshell终端识别http ftp 链接 ctrl点击打开链接
    前言全局说明xshell终端识别httpftp链接ctrl点击打开链接一、说明终端链接可以直接点击,比复制一下方便很多二、开启,中断连接识别2.1点工具--选项2.2点键盘鼠标--鼠标按图片勾选免责声明:本号所涉及内容仅供安全研究与教学使用,如出现其他风险,后果自负。......
  • css_repeating-linear-gradient
    在不指定背景颜色渲染区间的情况下,repeating-linear-gradient与linear-gradient的没有区别<divclass="testtest1"></div><divclass="testtest2"></div>.test{width:150px;height:150px;border:1pxsolid#ccc;display:inli......
  • python 自动将歌曲按照歌手分类创建软链接
    要使用Python获取MP3文件的信息,可以使用pymediainfo包。首先,你需要安装pymediainfo。下面是获取一首歌曲信息的例子"""Moduletodemonstratehowtouse`pymediainfo`toreadmetadatafromamediafile.Inthismodule,wereadthemetadataofagivenMP3fileand......