JavaEE_day02_HTML+CSS

一、表单标签：

用<form></form>表示；
属性：action:表示点击注册按钮后的动作，其中#表示没有跳转
method：有get和post
代码示例如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>表单标签属性介绍</title>
    </head>
    <body>
        <form action="#" method="get">
        用户名:<input type="text" name="username" value="zhangsan" size="40px" maxlength="8" placeholder="请输入用户名"/><br />
        密码：<input  type="password" name="password" required="required"/><br />
        确认密码：<input type="password" name="password"/><br />
        性别：<input type="radio" name="sex" value="男"/>男
             <input type="radio" name="sex" value="女" checked="checked"/>女<br />
        爱好：<input type="checkbox" name="hobby"value="打篮球"/> 打篮球
        <input type="checkbox" name="hobby"value="听音乐"/> 听音乐
        <input type="checkbox" name="hobby"value="跑步"/> 跑步<br />
        头像：<input type="file" name="file"/><br />
        籍贯：
        <select name="province">
            <option>--请选择--</option>
            <option value="北京">北京</option>
            <option value="上海">上海</option>
            <option value="广州">广州</option>
        </select><br />
        自我介绍：
        <textarea name="zwjs"></textarea>
        <br />
        提交按钮:<input type="submit" value="注册"/><br />
        普通按钮：<input type="button" value="zhuce" /><br />
        重置按钮：<input type="reset" />
        </form>
    </body>
</html>
表格的合并：
  • rowspan：合并行
  • colspan：合并列
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>表格的合并</title>
    </head>
    <body>
        <table border="1px" width="300px" height="300px" align="center" cellpadding="0px" cellspacing="0px">
            <tr>
                <td colspan="2">11</td>
                <td>13</td>
                <td>14</td>
            </tr>
            <tr>
                <td>21</td>
                <td colspan="2" rowspan="2">22</td>
                <td>24</td>
            </tr>
            <tr>
                <td>31</td>
                <td rowspan="2">34</td>
            </tr>
            <tr>
                <td>41</td>
                <td>42</td>
                <td>43</td>
            </tr>
        </table>
    </body>
</html>

二、CSS初始

1、 div效果演示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>div效果演示</title>
        <style>
            div{
                border: 1px solid red;
                width: 400px;
                height: 200px;
            }
        </style>
    </head>
    <body>
        <div id="">
            成功是成功者的通行证，失败是失败者的墓志铭。
        </div> 
          成功是成功者的通行证，失败是失败者的墓志铭。AAA
    </body>
</html>

效果图如下：

div效果演示.png

2、span演示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>02_span演示</title>
        <style>
            span{
                border: 1px solid red;
                font-size: 30px;
            }
        </style>
    </head>
    <body>
        <span>
            成功是成功者的通行证，失败是失败者的墓志铭。
        </span>
    </body>
</html>

效果图如下：


span效果演示.png

三、CSS选择器

1、元素选择器：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>元素选择器</title>
        <style>
            div{
                font-size: 30px;
                color: red;
            }
        </style>
    </head>
    <body>
        <div>
            成功是成功者的通行证，失败是失败者的墓志铭。11
        </div>
        <div>
            成功是成功者的通行证，失败是失败者的墓志铭。22
        </div>
        <div>
            成功是成功者的通行证，失败是失败者的墓志铭。33
        </div>
        <div>
            成功是成功者的通行证，失败是失败者的墓志铭。44
        </div>
    </body>
</html>

效果图如下：

元素选择器.png

2、类选择器：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>类选择器</title>
        <style>
            .div2{
                font-size: 30px;
                color: pink;
            }
        </style>
    </head>
    <body>
        <div>
            成功是成功者的通行证，失败是失败者的墓志铭。11
        </div>
        <div class="div2">
            成功是成功者的通行证，失败是失败者的墓志铭。22
        </div>
        <div>
            成功是成功者的通行证，失败是失败者的墓志铭。33
        </div>
        <div  class="div2">
            成功是成功者的通行证，失败是失败者的墓志铭。44
        </div>
    </body>
</html>

效果图如下：

类选择器.png

3、id选择器：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>id选择器</title>
        <style>
            #div1{
                font-size: 30px;
                color: gold;
            }
        </style>
    </head>
    <body>
        <div id="div1">
            成功是成功者的通行证，失败是失败者的墓志铭。11
        </div>
        <div id="div1">
            成功是成功者的通行证，失败是失败者的墓志铭。22
        </div>
        <div>
            成功是成功者的通行证，失败是失败者的墓志铭。33
        </div>
        <div>
            成功是成功者的通行证，失败是失败者的墓志铭。44
        </div>
    </body>
</html>

效果图如下：

id选择器.png

4、层级选择器：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>层级选择器</title>
        <style>
            div p{
                font-size: 30px;
                color: blue;
            }
        </style>
    </head>
    <body>
        <div>
            成功是成功者的通行证，失败是失败者的墓志铭。11
        </div>
        <div>
            成功是成功者的通行证，失败是失败者的墓志铭。22
        </div>
        <div>
            <p>
                成功是成功者的通行证，失败是失败者的墓志铭。33
            </p>            
        </div>
        <div>
            成功是成功者的通行证，失败是失败者的墓志铭。44
        </div>
        <div>
            <p>
                成功是成功者的通行证，失败是失败者的墓志铭。55
            </p>
        </div>
        <p>
            成功是成功者的通行证，失败是失败者的墓志铭。66
        </p>    
    </body>
</html>

效果图如下：

层级选择器.png

5、属性选择器：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>属性选择器</title>
        <style>
            input[type='text']{
                background-color: red;
            }
            input[type='password']{
                background-color: blue;
            }
        </style>
    </head>
    <body>
        用户名：<input type="text" name="username"/><br />
        密码：<input type="password" name="password"/>
    </body>
</html>

效果图如下：

属性选择器.png

四、CSS引入方式

1、内部引入：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>内部引入</title>
        <style type="text/css">
            div{
                font-size: 30px;
                color: red;
            }
        </style>
    </head>
    <body>
        <div>
            成功是成功者的通行证，失败是失败者的墓志铭。11
        </div>
        <div>
            成功是成功者的通行证，失败是失败者的墓志铭。22
        </div>
        <div>
            成功是成功者的通行证，失败是失败者的墓志铭。33
        </div>
        <div>
            成功是成功者的通行证，失败是失败者的墓志铭。44
        </div>
    </body>
</html>

效果图如下：

内部引入.png

2、行内引入：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>行内引入</title>
        <style>
            div{
                font-size: 30px;
                color: yellowgreen;
            }
        </style>
    </head>
    <body>
        <div>
            成功是成功者的通行证，失败是失败者的墓志铭。11
        </div>
        <div style="font-size: 40px;color: blue;"> 
            成功是成功者的通行证，失败是失败者的墓志铭。22
        </div>
        <div>
            成功是成功者的通行证，失败是失败者的墓志铭。33
        </div>
        <div style="font-size: 20px;color: black;">
            成功是成功者的通行证，失败是失败者的墓志铭。44
        </div>
    </body>
</html>

效果如图：

行内引入.png

3、外部引入：
hml代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>外部引入</title>
        <link rel="stylesheet" href="style.css" type="text/css" />
    </head>
    <body>
        <div>
            成功是成功者的通行证，失败是失败者的墓志铭。11
        </div>
        <div>
            成功是成功者的通行证，失败是失败者的墓志铭。22
        </div>
        <div>
            成功是成功者的通行证，失败是失败者的墓志铭。33
        </div>
        <div>
            成功是成功者的通行证，失败是失败者的墓志铭。44
        </div>
    </body>
</html>

style.css代码如下：

div {
    font-size: 30px;
    color: red;
}

五、CSS浮动

属性float，有left和right两个值

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS浮动</title>
        <style>
            #one{
                border: 1px solid red;
                width: 600px;
                height: 150px;
                float: left;
            }
            #two{
                border: 1px solid black;
                width: 600px;
                height: 190px;
                float:left;
            }
            #three{
                border: 1px solid blue;
                width: 600px;
                height: 150px;
                float: left;
            }
                /*清除浮动*/
        /*  #clear{
                clear: both;
            }*/
        </style>
    </head>
    <body>
        <div id="one">
            
        </div>
        
        <div id="clear">
            
        <div id="two">
            
        </div>
        <div id="three">
            
        </div>
    </body>
</html>

效果图如下：

CSS浮动.png
取消超链接的下划线：
a{
    text-decoration: none;
 }
CSS的盒子模型：

内边距属性：


外边距属性：


最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 14,693评论 1赞 92
  • 优秀第三方
    发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 14,636评论 4赞 61
  • 笑话
    上课时，老师说：“家里养宠物的小朋友请举手。” 小明回答：“我爸爸的宠物最厉害了！听妈妈说，爸爸在外面养了一只狐狸...
    山的那一边_ChenLei阅读 1,774评论 0赞 1
  • 蕨蕨草
    命兮蕨蕨无华， 食兮味味无佳。 路遥本非己过， 无为却因不发。 昨夜常思前错， 今晨已忘明忧。 此又何解其难， 岁...
    丹潮映蕊阅读 3,523评论 0赞 0
  • [七律] 入秋访友
    凉风消暑骄阳怯，立木寒蝉啼未休。 夜落金钱牵影乱，断肠始娇赏花羞。 临窗共忆经年梦，对月同吟昔日悠。 古道长亭莫相...
    暮南乡阅读 1,711评论 2赞 3

友情链接更多精彩内容