第三天

1.css的相关知识

（1）css的作用：美化并提供更好的管理方法。

（2）css的代码可通过style属性、style标签、link标签外链实现。

（3）选择器常用id、class、父子、标签。

（4）样式是由名字：词组成，样式之间用；隔开，一个选择器可以跟多个样式。

css学习链接：http://www.w3school.com.cn/css/css_jianjie.asp

2.使用css简单美化后的页面的页面代码

   <!DOCTYPE html>
   <html>
       <head>
          <meta charset='UTF-8'/>
          <title>留言本</title>
         <style>
              .warp{
                  width:600px;
                  margin:0px auto;
              }
              .add{overflow: hidden;}
              .add .content{
                  width:598px;60
                  margin:0px;
                  padding:0px;
              }
               .add .user{
                  float:left;
              }
              .add .btn{
                  float:right;
              }

              .msg{margin:20px 0px;background: #ccc;   padding:5px;}
              .msg .info{overflow: hidden;}
              .msg .user{float:left;color:blue;}
              .msg .time{float:right;color:#999;}
              .msg .content{width:100%;}
           </style>
      </head>
<body>
    <!--发表留言内容-->
    <div class='warp'>
            <div class='add'>
                <textarea class='content' cols='50' rows='5'></textarea>
                <input class='user' type='text'/>
                <input class='btn' type='submit' value='发表留言'/>
            </div>

        <!--查看留言内容-->
        <div class='msg'>  
            <div class='info'>
                <span class='user'>用户名</span>
                <span class='time'>2017-1-1 11:11:11</span>
            </div>
            <div class='content'>
                我是留言内容。 我是留言内容。 我是留言内容。 我是留言内容。
            </div>
        </div>
        <div class='msg'>  
            <div class='info'>
                <span class='user'>用户名</span>
                <span class='time'>2017-1-1 11:11:11</span>
            </div>
            <div class='content'>
                我是留言内容。 我是留言内容。 我是留言内容。 我是留言内容。
            </div>
        </div>
        <div class='msg'>  
            <div class='info'>
                <span class='user'>用户名</span>
                <span class='time'>2017-1-1 11:11:11</span>
            </div>
            <div class='content'>
                我是留言内容。 我是留言内容。 我是留言内容。 我是留言内容。
            </div>
        </div>
    </div>
</body>

</html>

3.css简单美化后的页面

image

最后编辑于：2020.08.19 10:44:00