美文网首页
学习切图

学习切图

作者: 云飞霞舞 | 来源:发表于2017-11-24 21:21 被阅读0次

html

打开VScode文件,新建一个后缀为html的文件,
在右边第一行输入“!”回车,显示代码的主要结构。
<!DOCTYPE html>意思为代码形式为HTML格式的

<html lang="en">不用在意

<head>
    <title>Document</title>
</head>

这段代码为head元素,写CSS,写样式

<body>
</body>

body元素里写HTML。

css

如何显示一个红色50P的 HELLO WORLD
记住一定要保存代码

写属性时要在head元素里,style内容里写样式
body里定义了spandiv后,在head里写他们的属性时,要在style里写,
例如div{color:red;}
如果有在head里定义了多个span,要用class分别命名,例如

<span class="q">Hello world</span>
<div class="w">hello world</div>

这样在head元素中写属性时可分别写不同class的样式,例如

<style>
    .q{
        color: red;
        display: block;
    }
</style>

各个属性的意思

    span{
            color: blue;        字体颜色
            font-size: 80;        字体大小
            position: relative;   
            top: 50px;
            left: 50px;
            border: 1px solid red;
            display: block;
            width: 300px;
            text-align: center;
            padding: 20px 0;
    }

相关文章

  • 学习切图

    html 打开VScode文件,新建一个后缀为html的文件,在右边第一行输入“!”回车,显示代码的主要结构。

  • 「前端眼中的PS」切图

    如何开始切图 切图 切片工具 隐藏文字 可平铺背景的切图方法 PNG24切图方法 PNG8带背景切图方法 切图 如...

  • 切图工的修养:切图方法、切图工具经验谈。

    Foreword: 作为一个职业的切图工,如何切好图,把图切快,是切图工的工匠精神体现。 切图规范: *游戏切图和...

  • photoshop 切图技巧

    仅供学习,转载请注明出处 切图介绍 当在前端开发或者某些图片需要切下来的时候,可以使用photoshop的切图功能...

  • photoshop 制作雪碧图

    仅供学习,转载请注明出处 需求说明 在上一篇photoshop 切图技巧中,我使用批量切图的技巧切出了三张图片如下...

  • 切图

    图片切图命名 图性质_ 功能相关描述_ 图片描述(可无)_ 状态说明(可无)@2X.png 例如:bg_book...

  • 切图

    切图是从设计稿中切出网页的素材并在代码中引入图片,一般用于复杂的图片或者为了解决兼容问题,并且能用css解决,尽量...

  • 001-BFC实现常见的oa后台页面布局

    作为一个高级切图仔,在日常工作中,我们的任务是什么?切图!切图!切图!······ 没错,除了切图,还会接受来自产...

  • 几种ps切图的方法

    ps切图分为传统切图,一般切图,自动切图 这个链接很好的介绍了一些切图的方法gaea2.github.io/201...

  • 切图细节——点九切图

    1. 适用范围 根据屏幕横竖屏或展示面积不定,但具有明显的重复延展性,因此切出具有特点的部分,将重复部分用代码完成...

网友评论

      本文标题:学习切图

      本文链接:https://www.haomeiwen.com/subject/kptqbxtx.html