您的位置:时时app平台注册网站 > web前端 > 2018.3.29 div格式设置

2018.3.29 div格式设置

2019-11-14 20:18

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            /*标签名查找,名称相同,格式相同*/
            span{
                color: coral;
            }
            /*id名查找,名称不可重复*/
            #a{
                width: 100px;
                height: 100px;
                background-color: #5F9EA0;
            }
            /*class查找,名称可重复,格式相同*/
            .b{
                width: 100px;
                height: 100px;
                background-color: #8A2BE2;
                border: 1px solid green;
            }
            /*并列用“ ,”格式相同*/
            #c,.d{
                width: 100px;
                height: 100px;
                background-color: #FF0000;
                border: 1px solid green;
            }
            /*父级,子级用空格*/
            #fu #zi1,#zi2{
                width: 100px;
                height: 100px;
                background-color: black;
                border: 1px solid green;
            }
        </style>
    </head>
    <body>
        <span >
            标签名查找
        </span>
        <div id="a"></div>
        <div class="b"></div>
        <div class="b"></div>
        <div id="c"></div>
        <div class="d"></div>
        <div id="fu">
            <div id="zi1"></div>
            <div id="zi2"></div>
        </div>
    </body>
</html>

3、外部样式表  写在head内

代码示例:<style>
            p{width: 200px; height: 200px; background-color: darkmagenta;}
            #name1{width: 200px; height: 200px; background-color: coral;}
            .name2{width: 200px; height: 200px; background-color: aquamarine;}
            li.name3{width: 200px; height: 200px; background-color: cornflowerblue;}
            li#name4{width: 200px; height: 200px; background-color: bisque;}
            ol li{width: 200px; height: 200px; background-color: chartreuse}
        </style>

ID选择器    #ID名

代码示例:<style type="text/css">
        *{margin: 0px; padding: 0px;}
        table{background-color: aqua;}
        td{background-color: chartreuse;}
    </style>

做的示例小练习

CSS  层叠样式表

类选择器     .class名

<link rel="stylesheet"  href="路径"> 优点是 精简html的文件代码  缺点是控制不够精确

语法(属性式)  style:"样式:样式值;"   其优点是控制精确,缺点是不灵活,代码冗余

今天是CSS学习的第一天,老师讲了CSS的基本结构和写法,总起来还是比较简单的,但还是要多加练习~

表格样式:

图片 1

1、内联式 写在body内 

2、内嵌式 写在head内

复合选择器   逗号  空格  点

三种样式

        <div id="a"></div>
        <div id="b">
            <div id="c"></div>
            <div id="d"></div>
            <div id="e"></div>
        </div>
    </body>
</html>

页面的格式布局

选择器{样式:样式值}    其优点是代码精简  缺点是 控制不精确

标签选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{position: fixed;
              position: absolute;
              position: relative;
            
            }
            #a{width: 400px; height: 100px; background-color: #00FFFF;position: fixed; top: 10px; border: 2px solid green}
            #b{width: 400px; height: 100px; background-color: antiquewhite;position: fixed; top: 110px;border: 2px solid red}
            #c{width: 90px; height: 40px; background-color: black;position:absolute;border: 2px solid coral;top: -80px; left: 10px;}
            #d{width: 90px; height: 40px; background-color: lavenderblush;position:absolute; bottom: 10px; border: 2px solid darkgray;right: 20px;}
            #e{width: 90px; height: 40px; background-color: hotpink;position:relative; left: 480px;border: 2px solid dodgerblue;top: 60px;}
        </style>
    </head>
    <body>

4、注释的语法

            position:fixed;  固定 top(必须设置)   left  right  bottom      z-index
            position:absolute;  绝对定位
            1、只有本身:在页面中定位(根据top属性来)
            2、有嵌套关系  a.嵌套他的标签没有position:还是在页面中定位
                         b.嵌套他的标签有position:在嵌套他的标签里面定位
            position:relative;  相对定位

/* 注释的内容 */

 

本文由时时app平台注册网站发布于web前端,转载请注明出处:2018.3.29 div格式设置

关键词: