D3 2018 7 28 作业

最新推荐文章于 2024-02-22 20:42:28 发布

Priate7

最新推荐文章于 2024-02-22 20:42:28 发布

阅读量95

点赞数

分类专栏：每日作业

本文链接：https://blog.csdn.net/qq_39986477/article/details/81261725

版权

每日作业专栏收录该内容

5 篇文章 0 订阅

订阅专栏

今天先写代码在写用到了什么！

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>MARGINTEST</title>
        <style type="text/css">
            div{
                width:400px;
                height:200px;
                background-color: deepskyblue;
                margin:50px 50px 50px 50px;·
                padding: 30px 30px 30px 30px;
                float:right;
                }
                .divtest{background-color: red;}
        </style>
    </head>
    <body>
    <div>测试margin</div>
    <div>测试margin</div>              
    <div style="background-color:blue">单独定义</div>
    <div style="background-color:blue">单独定义</div>
    <div class="divtest">类选择器</div>
    <div class="divtest">类选择器</div>
    <div class="divtest">类选择器</div>
    </body>
</html>

上面这段用到了标签选择器，还有使用margin padding width height back-ground去修饰div的的细节，分别是外距，内距，宽，高，背景色。使用了对div的单独定义<div style="background-color:blue">单独定义</div>注意要使用style去修饰div，第三点我用了类选择器，.divtest{background-color: red;通过这句定义类，然后在

<div class="divtest">类选择器</div>

这调用类的内容，最后在css里加入了代码float:right使之向右悬浮。效果图如下这里写图片描述

div {
        background-color:red;
        width:500px;
        height:200px;
        margin:50px 50px 50px 50px;
        padding: 30px 30px 30px 30px;
    }

这是一段css文件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link href="css/FIRST.css"rel="stylesheet" />
        <style type="text/css">
        img 
        {
            float:right
        }
        </style>    
    </head>
    <body>
        <div><span style="font-family: forte;">我喜欢你啊</span></div>
        <div></div>
        <div></div>
    </body>
</html>

在这段代码里调用文件，使代码实现复用。效果如下这里写图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
        input
        {
            border-color: red;
        }
        </style>
    </head>
    <body>
        <div>
            学生姓名：<input type="text" id="stuname">
        </div>
    </body>
</html>

实现对输入框的美化，效果如下这里写图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>XUANZEQItest</title>
        <style type="text/css">
        #seconddiv
            {
            background-color:red;
            width:500px;
            height:200px;
            margin:50px 50px 50px 50px;
            padding: 30px 30px 30px 30px;
            }
        div span
            {
            color:#ff9955;
            }
        </style>
    </head>
    <body>
        <div id="seconddiv">id选择器div元素</div>
        <div style="width:500px;height:200px;background-color: burlywood;margin:50px 50px 50px 50px;padding: 30px 30px 30px 30px;">
            <span>div中的第一个span元素 后代选择器测试</span></br>
            <span>div中的第二个span元素 后代选择器测试</span>
        </div>
    </body>
</html>

分别是后代选择器和id选择器的使用。效果如图
今天学的是css，了解了路径。

Priate7

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
D3 2018 7 28 作业

今天先写代码在写用到了什么！&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;MARGINTEST&lt;/title&gt; &lt;style type="text/css"
复制链接

扫一扫

专栏目录