zoukankan      html  css  js  c++  java

  • css_初阶

    s10.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <form>
        <fieldset>
            <legend>登陆</legend>
            <label for="username">用户名:</label>
            <input id="username" type="text" name="user" value="alex">
            <br>
            <label for="Password">密码:</label>
            <input id="Password"type="text" name="password">
            <br>
            <input type="reset" value="重置">
            <input type="submit" value="提交">

        </fieldset>
    </form>
    </body>
    </html>

     

     

    s11.html

    <!DOCTYPE html>
    
<html lang="en">
    
<head>
    
    <meta charset="UTF-8">
    
    <title>Title</title>
    
    <style>
    
        /*#i1{
    
            background-color:#095bcc;
    
             height: 58px;
    
        }<!--id    选择器-->
    
         #i2{
    
            background-color:#095bcc;
    
             height: 58px;
    
         }
    
         #i3{
    
            background-color:#095bcc;
    
             height: 58px;
    
         }
    
        .c1{
    
            background-color:#895ccc;
    
             height: 18px;
    
         }<!--class    选择器-->
    
         */
    
        /*div{*/
    
        /*background-color:black;*/
    
        /*color:white;*/
    
        /*}<!--div    标签选择器对所有的div标签都有效都会设置此样式-->*/
    
        /*<css    注释: /* */
    

    
        /*span div {*/
    
            /*background-color: blue;*/
    
            /*color: #FFFFFF;*/
    
        /*}*/
    

    
        /*<!--*/
    
        /*    层级选择器用空格 span下的div标签有效-- >*/
    
        /*#i4,#i5,#i6{*/
    
            /*background-color: maroon;*/
    
            /*color: black;*/
    
        /*}<!--    组合选择器用逗号-->*/
    
        /*.i4,.i5,.i6{*/
    
            /*background-color: lawngreen;*/
    
            /*color: red;*/
    
        /*}<!--    组合选择器-->*/
    
            .c2[n="jack"]{width: 100px;height: 100px }<!--属性选择器对选择到的标签再通过属性再进行一次筛选-->
    
    <!--最常用的是class选择器，其次是标签选择器 id选择器可以不用-->
    
    </style>
    
</head>
    
<body>
    
<div id="i1">a</div><!--id选择器-->
    
    <div id="i2">b</div>
    
<div id="i3">c</div>
    

    
<div class="c1">ffff</div><!--syle属性背景颜色高度-->
    
    <span class="c1">11<div>22</div></span><!--class选择器-->
    
    <div class="c1">3</div>
    

    
<div id="i4">2233</div><!--id选择器-->
    
    <div id="i5">dgdg</div>
    
<div id="i6">kkdlg</div>
    

    
<div class="i4">aaaaaaaaaaa</div>
    
<div class="i5"> bbbbbbbb</div>
    
<div class="i6">cccccccccc</div>
    

    
<input class="c2" n="jack" type="text">
    
<input class="c2"  type="password">
    

    
</body>
    
</html>

     

     

    s12.html

    <!DOCTYPE html>
    
<html lang="en">
    
<head>
    
    <meta charset="UTF-8">
    
    <title>Title</title>
    
    <style>
    

    
        .c1{
    
            background-color: red;
    
            color: white;
    
        }
    
        .c2{
    
            font-size: 52px;
    
            color: black;
    
        }
    
    </style>
    
</head>
    
<body>
    
    <div class="c1 c2" style="color: pink" >gggggggggggggghhhhh</div>
    
    <div class="c1 c2" style="color: pink" >gggggggggggggghhhhh</div>
    
    <div class="c1 c2" style="color: pink" >gggggggggggggghhhhh</div>
    
    <div class="c1 c2" style="color: pink" >gggggggggggggghhhhh</div>
    

    
</body>
    
</html>
    

    
<!--标签上 style优先，然后是编写顺序，下面的优先-->

     

     

    commons.css

    .c1{
    
    background-color: red;
    
    color: white;
    
}
    
.c2{
    
    font-size: 52px;
    
    color: black;
    
}
    

    
<!--stylesheet css文件可被引用-->

     

    s13.html

    <!DOCTYPE html>
    
<html lang="en">
    
<head>
    
    <meta charset="UTF-8">
    
    <title>tile</title>
    
    <link rel="stylesheet" href="commons.css"><!--引用css文件-->
    
    </head>
    
<body>
    
<div class="c1 c2" style="color: pink">ajsddiia</div>>
    
</body>
    
</html>

     

     

    s14.html

    <!DOCTYPE html>
    
<html lang="en">
    
<head>
    
    <meta charset="UTF-8">
    
    <title>Title</title>
    
</head>
    
<body>
    
    <div style="border: 1px solid red;"><!--边框像素为1像素实体的红色-->
    
        <!--<div style="border-left:1px dotted red ;">dotted     虚线-->
    
            ddfd
    
    </div>
    
    <div style="height: 48px;width:80% ;
    
    color: red;
    
    border:1px solid red;
    
    font-size: 22px;
    
    text-align: center;
    
    line-height: 48px;
    
    font-weight:bold;
    
    ">ddddddddddd</div>
    
     <!--<width宽度可以设置占的屏幕显示百分比，但height不能设置占的百分比>-->
    
    <!--<height: 48px;80% div    高度和宽度>-->
    
    <!--<color: red;div    里字体颜色>-->
    
    <!--<border:1px solid red;div    加边框边框线粗1像素实体的边框线为红色>-->
    
    <!--<font-size: 22px;div    里字体大小>-->
    
    <!--text-align: center;    字体左右居中-->
    
    <!--<line-height: 48px;    等于height的像素高度 ;字体上下居中>-->
    
    <!--<font-weight:bold;    字体粗细>-->
    
    </body>
    
</html>

     

     

    s15.html

    <!DOCTYPE html>
    
<html lang="en">
    
<head>
    
    <meta charset="UTF-8">
    
    <title>Title</title>
    
</head>
    
<body>
    
    <div style="width: 20%;background-color: red;float: left">1</div>
    
    <div style="width: 20%;background-color: black;float: left">2</div>
    

    
</body>
    
</html>
    
<!--float让标签飘起来块级标签也可以堆叠起来-->

     

     

    s16.html

    <!DOCTYPE html>
    
<html lang="en">
    
<head>
    
    <meta charset="UTF-8">
    
    <title>Title</title>
    
</head>
    
<body>
    
    <div style="background-color: red;display: inline">assf</div>
    
    <span style="background-color: red;display: block">ffff</span>
    
    <span style="background-color: blue;height: 50px;width: 70px">Alex</span>
    
    <a href="http://www.baidu.com" style="background-color: blue">Eric</a>
    
    <span style="display: inline-block;background-color: blue;height: 50px;width: 70px">CCC</span>
    

    
</body>
    
</html>
    

    
<!--display: inline 块级标签变行内-->
    
<!--display: block     行内标签变块级-->
    
<!--display: inline-block     具有行内标签的特性(有多少占多少)，又可以设置高度宽度边距-->
    
<!--display:none     让标签消失-->
    
<!--    行内标签无法设置高度宽度边距-->
    
<!--    块级标签可以设置高度宽度边距-->

     

     

    s17.html

    <!DOCTYPE html>
    
<html lang="en">
    
<head>
    
    <meta charset="UTF-8">
    
    <title>Title</title>
    
</head>
    
<body style="margin:0 ">
    
    <div style="border:1px solid red;height: 70px">
    
        <div style="background-color: green;height: 50px;margin-top:0px "></div>
    
    </div>
    

    
</body>
    
</html>
    

    
<!--<margin 外边距可以移到外面的边距>-->
    
<!--<body style="margin: 0 auto;" margin    使用例子去掉上面边距>-->

     

     

    s18.html

    <!DOCTYPE html>
    
<html lang="en">
    
<head>
    
    <meta charset="UTF-8">
    
    <title>Title</title>
    
</head>
    
<body style="margin: 0 ;">
    
    <div style="border: 1px solid red;height: 70px;">
    
        <div style="background-color: green;height: 50px ;padding-top: 0px">asdfd</div>
    
    </div>
    
</body>
    
</html>
    

    
<!--padding内边距里面 div填充颜色-->
    
<!--<body style="margin:0 auto;" margin    使用例子去掉上面边距>-->

     

     

    s19_作业.html

    <!DOCTYPE html>
    
<html lang="en">
    
<head>
    
    <meta charset="UTF-8">
    
    <title>Title</title>
    
    <style>
    
        .pg-header {
    
            height: 38px;
    
            background-color: #dddddd;
    
            line-height: 38px;
    
        }
    
    </style>
    
</head>
    
<body style="margin: 0 auto;"><!--style="margin: 0 auto 去掉上面那个缝隙-->
    
    <div class="pg-header">
    
    <div style="width: 860px;margin: 0 auto"><!--div里style放margin:0 auto div会居中-->
    
            <div style="float: left">收藏本站</div>
    
        <div style="float: right;">
    
            <a>登录</a>
    
            <a>注册</a>
    
        </div>
    
        <div style="clear: both"></div>
    
    </div>
    
</div>
    
<div>
    
    <div style="width: 860px;margin: 0 auto;">
    
        <div style="float: left;">
    
            log
    
        </div>
    
        <div style="float: right">
    
            <div style="height: 50px;width: 100px;background-color: #888888"></div>
    
        </div>
    
        <div style="clear:both"></div>
    
    </div>
    
</div>
    
<div style="background-color: red">
    
    <div style="width: 860px;margin: 0 auto;">
    
        asdad
    
    </div>
    
    <div style="clear: both"></div>
    
</div>
    
<div style="width: 300px;border: 1px solid red;"><!--div放的时候左边优先-->
    
    <!--<div style=" 300px;border: 1px solid red;"    不设置高度，是为了让里面的div的高度占本div的高度百分之百>-->
    
        <div style="width: 96px;height: 30px; border: 1px solid green;float: left;"></div>
    
    <div style="width: 96px;height: 30px; border: 1px solid green;float: left"></div>
    
    <div style="width: 96px;height: 30px; border: 1px solid green;float: left;"></div>
    
    <div style="width: 96px;height: 30px; border: 1px solid green;float: left;"></div>
    
    <div style="width: 96px;height: 30px; border: 1px solid green;float: left;"></div>
    
    <div style="width: 96px;height: 30px; border: 1px solid green;float: left;"></div>
    
    <div style="width: 96px;height: 30px; border: 1px solid green;float: left;"></div>
    
    <div style="width: 96px;height: 30px; border: 1px solid green;float: left;"></div>
    
    <div style="clear: both;"></div><!--<div style="clear: both;"相当于div里面的div浮起来了，div又把里面的div拉起来了，重新显示父类div表格>-->
    

    
    </div>
    
</body>
    
</html>
    

    
<!--margin: 0 auto  0表示距离上下边距是0 auto表示当前div左右自动居中-->
  • 相关阅读:
    someThink
    快捷键
    typedef 的本质
    读取配置文件
    stl file
    摘自CSDNhttp://blog.csdn.net/gnuhpc/archive/2009/11/13/4808405.aspx
    thread demo
    B/S和C/S区别 java程序员
    上传文件 java程序员
    （八）VS的操作和使用技巧 java程序员
  • 原文地址：https://www.cnblogs.com/leiwenbin627/p/10660571.html
Copyright © 2011-2022 走看看