每日一点前端-1-基础练习

阳光穿透心脏的1/2处 2021-06-24 16:11 679阅读 0赞

1.文字段落

![2789632-4ee9adfb8b887ac4.png][]

文字段落练习一

<h1>一级标题</h1>                            
    <h2>二级标题</h2>                               
    <h3>三级标题</h3>                               
    <hr>
    
    <font size="7">这是size=7的字体</font><p>
    <font size="6">这是size=6的字体</font><p>
    <font size="5">这是size=5的字体</font><p>
    <font size="4">这是size=4的字体</font><p>
    <font size="3">这是size=3的字体</font><p>
    <font size="2">这是size=2的字体</font><p>
    <font size="1">这是size=1的字体</font><p>
    <hr>
    
    文本文字标记<font>
    <p>
    <font size="5" color="#FF0000" face="Verdana, Geneva, sans-serif">字体的样式</font>
    </p>
    <p>
    <font size="2" color="#000000" face="Georgia, Times New Roman, Times, serif">字体的样式</font>
    </p>
    <hr>
    
    字型设置
    <B>文本加粗显示</B><p>
    <I>文本倾斜显示</I><p>
    <U>文本加下划线</U><p>
    <TT>设置文本以标准打印字体显示</TT><p>
    文字<SUB>设置文本下标</SUB><p>
    文字<sup>设置文本上标</sup><p>
    <big>设置文本以大字体显示一个big</big><p>
    <big><big><big><big>设置文本以大字体显示两四个big</big></big></big></big><p>
    <font size="1" color="#FF0000" face="Verdana, Geneva, sans-serif">重复使用big在DW中看不出效果，然而在浏览器中可以看出真的变得很大</font><p>
    <small>以小字体显示</small><p>
    <blink>闪烁</blink><p>
    <font size="1" color="#FF0000" face="Verdana, Geneva, sans-serif">说好的在ie中不可用呢，然而用火狐也看不出效果</font><p>
    <em>强调</em><p>
    <strong>加强</strong><p>
    <samp>范例</samp><p>
    <code>原始码</code><p>
    <var>变量</var><p>
    <dfn>定义</dfn><p>
    <cite>引用</cite><p>
    <adress>所在地址</adress><p>
    <font size="2" color="#FF0000" face="Verdana, Geneva, sans-serif">其实吧，很明显可以看出上面好多效果有类似的，边学边找不同吧</font><p>
    <hr>

![2789632-4d518670083c3d6a.png][]

文字段落练习二

<p align="center">center</p>
    <p align="justify">justify</p>
    <p align="left">left</p>
    <p align="right">right</p>
    <hr>
    换行标记<br>,<br>我看书上用<p><p>也可以
    <p><p>换的是段落
    </br>
    <hr>
    <hr>一直在用<hr aligh= 对齐方式 size=横线粗细width=横线长度color=横线颜色 noshade>
    <hr align="center" size="4" width="520px" color="#FF0000" noshade>
    这条线在DW中无颜色变化，但在浏览器中可以看出那像鲜血一样的红色，长度为520px
    <hr>
    <font color="#00FF00">特殊符号请按shift+7（在使用DW时）在英文输入模式下才有效呦</font>

2.超链接

![2789632-c9873388b6373f35.png][]

超链接练习

<p><a href=地址 name=字符串 target= 打开窗口方式>热点</a>
      </br>
      </p>
    <p><a href="http://www.baidu.com" target="_blank">_blank</a></br>
      <a href="http://www.baidu.com" target="new">_new</a></br>
      <a href="http://www.baidu.com" target="_parent">_parent</a></br>
      <a href="http://www.baidu.com" target="_self">_self</a></br>
      <a href="http://www.baidu.com" target="_blank">_top</a></p>
    </br>
    <a href = "Telnet:主机地址">热点</a></br>
    <a href="Telnet:"211.141.217.60">Telnet</a></br>
    <a href="mailto:956159241@qq.com">邮箱</a></br>
    news:目标地址
    <a href="news:new.chinaren.net">新闻组连接中国新闻网</a></br>

3.列表

![2789632-b1a4f8df323c0cf9.png][]

列表练习

<!DOCTYPE html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>HCJ第六个界面</title>
    <style type="text/css">
    .left{
    width:500px;
        color:#F69;
        border:double;
        float:left;
        }
    .Lleft{
    width:300px;
        color:#F69;
        border:double;
        float:left;
        }
    .right{
        overflow:scroll;
        }
    .Rright{
        overflow:scroll;
        }
    </style>
    </head>
    
    <body>
     <div class="left">无序列表一
     <ul type="square">
     <li>第一列</li>
     <li>第二列</li>
     <li>第三列</li>
     </ul>
     无序列表二
    <ul>
     <li type="disc">第一列disc实心圆显示</li>
     <li type="circle">第二列空心圆表示</li>
     <li type="square">第三列实心方块</li>
     </ul>
    <hr>
    有序列表一无类型
    <ol>
    <li>第二列</li>
    </ol>
    有序列表二小写英文字母
    <ol type="a">
    <li>第一列</li>
    
    <li>第二列</li>
    </ol>
    </div>
    <div class="right">
    定义列表标记
    <dl>
        <dt>电子商务
            <dd>电子商务是以电子的方式进行商务交易</dd>
        </dt>
        <dt>国际贸易
            <dd>国际贸易是世界各国间的贸易往来</dd>
        </dt>
    </dl>
    <div class="Lleft">列表的嵌套使用<br/>
    无序列表嵌套有序列表
    <ul type="square">
    <li>
    西大名著
            <ol type="I">
            <li>水浒传</li>
            <li>西游记</li>
            <li>红楼梦</li>
            <li>三国演义</li>
            </ol>
    </li>
    
    <li>
    君子志
            <ol type="i">
            <LI>仁</LI>
            <LI>义</LI>
            <LI>礼</LI>
            <LI>智</LI>
            <LI>信</LI>
                
            </ol>
    </li>
    </ul>
    </div>
    <div class="Rright">
    有序列表与无序列表的嵌套
    <ol>
        <li>    zhang zhong hua 
            <ul>
                <li>
                zhang
                </li>
                <li>zhong</li>
            </ul>
        </li>
        <li>hua zhong zhang
            <ul>
                <li>zhong </li>
                <li>hua</li>
            </ul>
        </li>
        
    </ol>
    </div>
    <hr>
    </div>
    </body>
    </html>

4.表格练习

![2789632-50602d5140038261.png][]

表格练习

<!DOCTYPE html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>HCJ第 七个界面</title>
    <style type="text/css">
    .left{
        float:left;
        width:100px;
        }
    .center{
        float:left; 
        margin-left:30px;
        }
    .right{
        float:right;
        }
    
    </style>
    </head>
    
    <body>
    <div class="left">创建一个表格
    <table>
        <tr>
            <td>1.1</td>
            <td>1.2</td>
        </tr>
        <tr>
            <td>2.1</td>
            <td>2.2</td>
        </tr>
    </table>
    
    创建一个表格加属性
    <table bgcolor="#00CC99" border="2" bordercolor="#CCFF33" bordercolordark="#003399" cellspacing="10px" cellpadding="5px" width="20px">
        <tr>
            <td>1.1</td>
            <td>1.2</td>
        </tr>
        <tr>
            <td>2.1</td>
            <td>2.2</td>
        </tr>
    </table>
    <table bgcolor="#00CC99" border="2" bordercolor="#CCFF33" bordercolordark="#003399" cellspacing="10px" cellpadding="5px" width="20px">
        <caption align="left"><font color="#FF0000">表格标题</font></caption>
        <tr>
            <td>1.1</td>
            <td>1.2</td>
        </tr>
        <tr>
            <td>2.1</td>
            <td>2.2</td>
        </tr>
    </table>
    <hr/>
    
    <table bgcolor="#00CC99" border="2" bordercolor="#CCFF33" bordercolordark="#003399" cellspacing="10px" cellpadding="5px" width="20px">
        <caption align="top"><font color="#FF0000">colspan和rowspan属性实现表格的跨列和跨行处理rowspan</font></caption>
        <tr>
            <td rowspan=2>1.1</td>
            <td>1.2</td>
        </tr>
        <tr>
            
            <td>2.2</td>
        </tr>
    </table>
    <table bgcolor="#00CC99" border="2" bordercolor="#CCFF33" bordercolordark="#003399" cellspacing="10px" cellpadding="5px" width="20px">
        <caption align="top"><font color="#FF0000">colspan和rowspan属性实现表格的跨列和跨行处理colspan</font></caption>
        <tr>
            <td colspan=2>1.1</td>
        </tr>
        <tr>
            <td>2.1</td>
            <td>2.2</td>
        </tr>
    </table>
    </div>
    <div class="center">
    做一个跨行跨列的实验,如图<br/>
    ![](images/1.png)<br/>
    <caption align="top">表格实验</caption>
    <table border="5px" bordercolor="#FFFF00" bordercolordark="#000066">
        <tr rowspan=2 height="20px" align="center">
            <td colspan="6" width="420px"  >1.1</td>
        
        </tr>
        
        <tr align="center">
            <td rowspan=4 colspan="3">3.1</td>
            <td>3.4</td>
            <td>3.5</td>
            <td>3.6</td>
        
        </tr>
        <tr align="center">
            <td>4.4</td>
            <td>4.5</td>
            <td>4.6</td>
        
        </tr>
        <tr align="center">
            <td>5.4</td>
            <td>5.5</td>
            <td>5.6</td>
        
        </tr>
        <tr align="center">
            
            <td>6.4</td>
            <td>6.5</td>
            <td>6.6</td>
        
        </tr>
    
    
    
    </table>
    
    </div>
    
    
    
    
    
    
    <div class="right">
    <table border="5px" bordercolor="#FFFF00" bordercolordark="#000066" background="images/5.JPG">
        <tr rowspan=2 height="20px" align="center">
            <td colspan="6" width="420px"  >1.1</td>
        
        </tr>
        
        <tr align="center">
            <td rowspan=4 colspan="3">3.1</td>
            <td>3.4</td>
            <td>3.5</td>
            <td>3.6</td>
        
        </tr>
        <tr align="center">
            <td>4.4</td>
            <td>4.5</td>
            <td>4.6</td>
        
        </tr>
        <tr align="center">
            <td>5.4</td>
            <td>5.5</td>
            <td>5.6</td>
        
        </tr>
        <tr align="center">
            
            <td>6.4</td>
            <td>6.5</td>
            <td>6.6</td>
        
        </tr>
    
    
    
    </table>
    </div>
    
    </body>
    </html>

5.实现滚动效果

![2789632-b7c88de34b204d8f.png][]

滚动效果

实现滚动效果<br/>
    <marquee bgcolor="0000FF" behavior="ALTENRATE" direction="left" scrollamout=5 scroldelay="100" height="60" width="100" >
    滚吧
    </marquee><br/><br/><br/><br/>
    
    <marquee bgcolor="0000FF" behavior="scroll" direction="right" scrollamout=10 scroldelay="100" height="60" width="100" truespeed=2>
    滚吧
    </marquee><br/><br/><br/><br/>
    
    <marquee bgcolor="0000FF" behavior="slide" direction="top" scrollamout=10 scroldelay="100" height="60" width="100" >
    滚吧
    </marquee><br/><br/><br/><br/>

6.表单练习

![2789632-607ebce86638bc1e.png][]

表单练习

<!DOCTYPE html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>HCJ第十一个界面</title>
    
    <style type="text/css">
    #left{
        width:50%;
        border:groove;  
        float:left;
        }
    </style>
    </head>
    
    <body>
    <div id="left">创建表单
    <form action="" method="post" enctype="application/x-www-form-urlencoded" name="form1" target="_parent">
    呵呵呵
    </form><p>
    
    使用文本域<p>
    <label>我的数据
        <input type="text" name="text" id="1.1" value="我的数据" size="30">
    </label>
    <hr/>
    
    表单和文本域放在一起
    <form action="" method="post" enctype="application/x-www-form-urlencoded" name="form2" target="_parent">
        <label>我的数据
        <input type="text" name="text" id="1.2" value="我的数据" size="30">
        </label>
    
    </form>
    <font color="#FF0000">&好吧，没看出来分开有什么区别，边练边学吧
    </font>
    <p>
    使用文本域
    <form action="" method="post" enctype="application/x-www-form-urlencoded" name="form3" target="_parent">
        <label>请输入数据（200字以内）
        <script type="text/javascript">
            function checkLen(obj){
                var  maxChars = 200;
                if (obj.value.length > maxChars)
                obj.value = obj.value.substring(0,maxChars);
                var curr = maxChars - obj.value.length;
                document.getElementById("count").innerHYML = curr.toString();   
        }
    
        </script>
        <textarea onkeyup="checkLen(this)" name="text" id="1.3" cols="30" rows="5">我
        </textarea>
        </label>
    </form><p>
    
    <form action="" method="post" enctype="application/x-www-form-urlencoded" name="form3" target="_parent">
                <script type="text/javascript">
            window.onload = function (){
                document.getElementById('1.4').onkeydown = function(){
                    if (this.value.length >= 10)
                    event.returnValue = false;
                    }
                } 
        </script>
        <label>限制用键盘输入，不能粘贴复制       
        <textarea   name="text" id="1.4" cols="30" rows="5">我   
        </textarea>
        </label>
    </form>
    <font color="#000099">JS函数不会调用，暂时搁置！！！！！！！！！！！！！！！！！！！！！！！</font>
    </div>
    <div id="right">
        使用按钮<br/>
        <form action="" method="post" enctype="application/x-www-form-urlencoded" name="form4" target="_parent">
        <label>提交
            <input type="reset" name="button" id = "1.5" value="button"/>
            
        </label>
    
    </form>
        使用单选按钮和复选框
        <form action="" method="post" enctype="application/x-www-form-urlencoded" name="form5" target="_parent">
            <label>我去
            <input type="radio" name="radio1" id = "radio1" value="radio1"/>
            
        </label>
            <label>我不去
            <input type="radio" name="radio1" id = "radio2" value="radio2"/>
            
        </label>
       
        </form>
        
        
        <form action="" method="post" enctype="application/x-www-form-urlencoded" name="form5" target="_parent">
            <label>篮球
            <input type="checkbox" name="checkbox1" id = "checkbox1" value="checkbox1"/>
            </label>
            <label>乒乓球
            <input type="checkbox" name="checkbox2" id = "checkbox2" value="checkbox2"/>
            </label>
            <label>足球
            <input type="checkbox" name="checkbox3" id = "checkbox3" value="checkbox3"/>
            </label>
        </form><br/>
        
        使用列表菜单
        <form action="" method="post" enctype="application/x-www-form-urlencoded" name="form1" target="_parent">
        <label>
            <select name="11" id ="11">
                <option selected>梅花</option>
                <option>桂花</option>
                <option>兰花</option>
                <option>喇叭花</option>
            
            </select>
        </label>
    </form><p>
    
    使用文件域
        <form action="" method="post" enctype="multipart/form-data" name="form1" >
        <label>选择文件
            <input name="file" type="file" id="file" size="25" maxlength="50"/>
        </label>
    </form><p>
    
    使用图像域
        <form action="" method="post" name="form1" >
        <label>图像
            <input name="image" type="image" id="image"  src="images/9.jpg" alt="没有了" width="102.4" height="64"/>
        </label>
    </form><p>
    
    使用隐藏域
        使用图像域
        <form action="" method="post" name="form1" >
        <label>隐藏
            <input name="hidden" type="hidden" id="hidden"  value="123"/>
        </label>
    </form>
    
    
    </div>
    </body>
    </html>

7.表单应用

![2789632-a1e138817ec7e7ca.png][]

表单应用

<!DOCTYPE html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>HCJ第十一个界面</title>
    <style type="text/css">
    .table{
            margin-left:400px;
            background-image:url(images/5.jpg);
            border:3px;
            border-color:#FF0;
            border-style:dotted;
            }
    </style>
    </head>
    
    <body>
    
    <table class="table" >
        <caption align="center">填写注册信息</caption>
        <tr>
            <td width="100">用户名</td>
            <td width="200">
                <form enctype="application/x-www-form-urlencoded" name="form1" id="form1" >
                    <label>
                        <input type="text" id="text" name="text" size="20" />
                    </label>
                </form>
            </td>
        </tr>
        
        <tr>
            <td>密码</td>
            <td>
                <form id="form2" name="form2" enctype="application/x-www-form-urlencoded">
                <label>
                    <input id="password" name="password" type="password"  size="20"/>
                </label>
                
                </form>
            </td>
        </tr>
        
        <tr>
            <td>
                确认密码
            </td>
            <td>
                <form id="form3" name="form3" enctype="application/x-www-form-urlencoded">
                <label>
                    <input id="password2" name="password2" type="password" size="20" />
                </label>
                
                </form>
            </td>
        </tr>
        
        <tr>
            <td>
            真实姓名
            </td>
            <td>
                <form enctype="application/x-www-form-urlencoded" name="form1" id="form1" >
                    <label>
                        <input type="text" id="text" name="text" size="20" />
                    </label>
                </form>
            </td>
        </tr>
       
        <tr>
            <td >
                婚否
            </td>
            <td>
                <form enctype="application/x-www-form-urlencoded" name="form4" id="form4" >
                    <label>已婚
                        <input type="radio" id="radio1" name="radio"  />
                  
                    </label>
                    <label>未婚
                        <input type="radio" id="radio2" name="radio"  />
                  
                    </label>
                </form>
            </td>
        </tr>
        
        <tr>
            <td >
                课余爱好
            </td>
            <td>
                <form enctype="application/x-www-form-urlencoded" id="form5" name="form">
                    <label>足球
                        <input type="checkbox" id="zuqiu" name="checkbox"/>
                    </label>
                    <label>篮球
                        <input type="checkbox" id="lanqiu" name="checkbox"/>
                    </label>
                    <label>棒球
                        <input type="checkbox" id="bangqiu" name="checkbox"/>
                    </label>
                
                </form>
            </td>
        </tr>
        
        <tr>
            <td >
                出生月份
            </td>
            <td>
                <form enctype="application/x-www-form-urlencoded" id="form7" name="form7">
                <label>
                    <select id="month">
                    <option selected>一月</option>
                    <option>二月</option>
                    <option>三月</option>
                    <option>四月</option>
                    <option>五月</option>
                    <option>六月</option>
                    <option>七月</option>
                    <option>八月</option>
                    <option>九月</option>
                    <option>十月</option>
                    <option>十一月</option>
                    <option>十二月</option>
                    </select>
                </label>
                </form>
            </td>
        </tr>
        
        <tr >
            <td colspan="2" align="center">
            <form enctype="application/x-www-form-urlencoded"  name="form8" id="form8">
            <input type="button" value="提交" id="tijiao" name="tijao"/>
            <input type="reset" value="reset" id="reset" name="reset"/>
            </form>
            </td>
        </tr>
    </table>
    </body>
    </html>

8.html5存储访问次数

![2789632-e851feadd8cee5e0.png][]

存储访问次数

<!DOCTYPE html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>HCJ第十三个界面</title>
    </head>
    
    <body>
    1.localStorage方法
    <script type="text/javascript">
    localStorage.lastname="东方不败";
    document.write("Last name:" + localStorage.lastname);
    </script>
    <br/><br/><br/>
    
    2.sessionStorage方法，关闭浏览器后，数据被删除
    <script type="text/javascript">
    sessionStorage.lastname="Smith";
    document.write(sessionStorage.lastname);
    </script>
    <p><font color="#CC0000">好吧^_^并没发现干嘛用的</font>
    </p><br/><br/><br/>
    
    3.记录访问次数<br/><br/>
    <script type="text/javascript">
    if (localStorage.pagecount){
        localStorage.pagecount=Number(localStorage.pagecount)+1;
        }
    else{
        localStorage.pagecount=1;
        }
    document.write("Visits:       " + localStorage.pagecount + "   time(s).");
    </script>
    <p>刷新页面会看到计数器再增长</p>
    <p>请关闭页面，计数器会继续基数</p>
    
    4.用session统计次数时，关闭浏览器，次数就会重置<br/><br/>
    <script type="text/javascript">
    if (sessionStorage.pagecount){
        sessionStorage.pagecount=Number(sessionStorage.pagecount)+1;
        }
    else{
        sessionStorage.pagecount=1;
        }
    document.write("Visits:       " + sessionStorage.pagecount + "   time(s).");
    </script>
    
    
    
    
    
    
    
    
    
    </body>
    </html>

9.初识Canvas

![2789632-9c364d3973acfc72.png][]

初识Canvas

<!DOCTYPE html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>HCJ第十三个界面</title>
    <style type="text/css">
            body{
                font-size:70%;
                font-family:Verdana, Geneva, sans-serif;    
                }
    </style>
    <script type="text/javascript">
        function cnvs_getCoordinates(e){
            x=e.clientX;
            y=e.clientY;
            document.getElementById("xycoordinates").innerHTML = "Coordinates:("+ x +","+ y +")";
            }
        
        function cnvs_clearCoordinates(){
            document.getElementById("xycoordinates").innerHTML="";
            }
    </script>
    </head>
    
    <body style="margin:0px">
    
    <canvas id="myCanvas" width="200" height="200" >
    </canvas>
    <script type="text/javascript">
    
    var c = document.getElementById("myCanvas");
    var cxt = c.getContext("2d");
    cxt.fillStyle = "#FF0000";
    cxt.fillRect(0,0,150,75);
    </script>
    <hr/>
    
    <p>把鼠标悬停在下面的矩形上可以看到坐标</p>
    <div id = "coordiv" style="float:left;width:199px;height:99px;border:1px solid #00C"onmouseover="cnvs_getCoordinates(event)"
    onMouseout="cnvs_clearCoordinates()">
    </div>
    
    <br/>
    <br/>
    
    <br/>
    <div id="xycoordinates">
    </div>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/><br/>
    <br/>
    <hr/>
    
    在指定位置划线
    <p>
    <canvas id="myCanvas1" width="200" height="200" style="border:1px solid #0F0">
    Your browser does not support the canvas element.
    </canvas>
    
    <script type="text/javascript">
        var c = document.getElementById("myCanvas1");
        var cxt = c.getContext("2d");
        cxt.moveTo(10,10);
        cxt.lineTo(150,50);
        cxt.lineTo(10,50);
        cxt.stroke();
    </script>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <canvas id="macanvas2" width="300" height="150" style="">
    
    <canvas>
    </body>
    </html>

10.渐变

![2789632-373fcd8320d11837.png][]

渐变颜色

<canvas id="myCanvas" width="200" height="200" style="border:1px solid #930">
    your browser does not support the canvas element.
    </canvas>
    <script type="text/javascript">
    var c = document.getElementById("myCanvas");
    var cxt = c.getContext("2d");
    var grd = cxt.createLinearGradient(0,0,175,50);
    grd.addColorStop(0,"#FF0000");
    grd.addColorStop(1,"#00FF00");
    cxt.fillStyle=grd;
    cxt.fillRect(0,0,175,50);
    
    
    </script>

11.表单新特性

![2789632-ded8588faf394a0c.png][]

表单新特性

<body>
    html5中新增了如下表单输入类型
    <ul type="square">
    <li>email</li>
    <li>url</li>
    <li>number</li>
    <li>range</li>
    <li>Date pickers(date,month,week,time,datetime,datetime-local)</li>
    <li>search</li>
    <li>color</li>
    </ul>
    <br/><br/><br/>
    
    1.email<br/><br/>
    <form action="demo_form.asp" method="get">
    E-mail:<input type="email" name="user_eamail" /><br/><br/>
    <input type="submit"/>
    
    </form>
    
    2.url<br/><br/>
    <form action="demo.asp" method="get">
        Homepage:<input type="url" name="user_url" />
        <input type="submit"/>
    </form>
    
    
    
    
    
    
    
    
    </body>

12.css设置修饰

![2789632-021c93a34b67ceaa.png][]

css修饰

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    /*input.smallInput{
        background:#ffffff;
        border-bottom-color:#ff6633;
        border-bottom-width:1px;
        border-top-width:0px;
        border-left-width:0px;
        border-right-width:0px; solid #ff6633;
        color:#0000000;
        font-size:9pt;
        font-style:normal}
    */
    input.buttonface{
        background:#ffcc00;
        border:1 solid #ff6633;
        color:#ff0000;
        font-size:9pt;
        font-style:normal;
        font-variant:normal;
        font-weight:normal;
        height:25px;
        line-height:normal;}
    
    
    .mm {
        text-indent:2em;
        }
    .nn:first-letter{
        font-family:"Times New Roman", Times, serif;
        font-size:24px;
        color:#900;
    }
    
    </style>
    </head>
    
    <body>
    <h3>文本缩进</h3>
    <h5>段首缩进</h5>
    <p class="mm">我是一个好孩子，哈哈哈</p>
    
    <h5>文本下沉</h5>
    <p class="nn">我是一个好孩子，哈哈哈</p>
    <h5>文本对齐text-align</h5>
    <p style="text-align:center">我是一个好孩子</p>
    <h5>文本对齐virtical-align</h5>
    <p style="vertical-align:middle"> 我是一个好孩子</p>
    
    
    制作绚丽的文本框<br/>
    <input type="submit" name="submit" value="彩色按钮" class="buttonface">
    </body>
    </html>

![2789632-3b18269684ea9294.png][]

公众号.png

[2789632-4ee9adfb8b887ac4.png]: /images/20210615/a0c18ec22cd741ab89bde537f12685e3.png
[2789632-4d518670083c3d6a.png]: /images/20210615/d270f935ac5b4441a02e8f8872029eaf.png
[2789632-c9873388b6373f35.png]: /images/20210615/cfac7509f7bb419a8de02a0d10b88ef1.png
[2789632-b1a4f8df323c0cf9.png]: /images/20210615/3b1fa056019547b9a6ede5ee566eef93.png
[2789632-50602d5140038261.png]: /images/20210615/450d2189364d433d9fec1a553d7aa266.png
[2789632-b7c88de34b204d8f.png]: /images/20210615/b2f3073906144be5ac6a3206dbc90b0f.png
[2789632-607ebce86638bc1e.png]: /images/20210615/5c5f341871b445d290c8d1bc8bd98343.png
[2789632-a1e138817ec7e7ca.png]: /images/20210615/fe26a9efd55a42d18d234846077dc4eb.png
[2789632-e851feadd8cee5e0.png]: /images/20210615/3351993a4f6049a99ce5ce54341e53e8.png
[2789632-9c364d3973acfc72.png]: /images/20210615/0165c71fe1e34cbf9ce8a00ce6ca8525.png
[2789632-373fcd8320d11837.png]: /images/20210615/7afb53da991c465f83ba0964f75b02f3.png
[2789632-ded8588faf394a0c.png]: /images/20210615/9360d0fcdc43496782e0392e9f92647c.png
[2789632-021c93a34b67ceaa.png]: /images/20210615/d966049d43e141fb8f29aebd4a33cca0.png
[2789632-3b18269684ea9294.png]: /images/20210615/92b740ec88dd4f668fb8f623c3781f28.png