JavaEE_day02_HTML+CSS

一、表单标签:

表示;
属性:action:表示点击注册按钮后的动作,其中#表示没有跳转
method:有get和post
代码示例如下:



    
        
        表单标签属性介绍
    
    
        
用户名:
密码:
确认密码:
性别:
爱好: 打篮球 听音乐 跑步
头像:
籍贯:
自我介绍:
提交按钮:
普通按钮:
重置按钮:
表格的合并:
JavaEE_day02_HTML+CSS_第1张图片
  • rowspan:合并行
  • colspan:合并列


    
        
        表格的合并
    
    
        
11 13 14
21 22 24
31 34
41 42 43

二、CSS初始

1、 div效果演示



    
        
        div效果演示
        
    
    
        
成功是成功者的通行证,失败是失败者的墓志铭。
成功是成功者的通行证,失败是失败者的墓志铭。AAA

效果图如下:

JavaEE_day02_HTML+CSS_第2张图片
div效果演示.png

2、span演示



    
        
        02_span演示
        
    
    
        
            成功是成功者的通行证,失败是失败者的墓志铭。
        
    

效果图如下:


span效果演示.png

三、CSS选择器

1、元素选择器:



    
        
        元素选择器
        
    
    
        
成功是成功者的通行证,失败是失败者的墓志铭。11
成功是成功者的通行证,失败是失败者的墓志铭。22
成功是成功者的通行证,失败是失败者的墓志铭。33
成功是成功者的通行证,失败是失败者的墓志铭。44

效果图如下:

JavaEE_day02_HTML+CSS_第3张图片
元素选择器.png

2、类选择器:



    
        
        类选择器
        
    
    
        
成功是成功者的通行证,失败是失败者的墓志铭。11
成功是成功者的通行证,失败是失败者的墓志铭。22
成功是成功者的通行证,失败是失败者的墓志铭。33
成功是成功者的通行证,失败是失败者的墓志铭。44

效果图如下:

JavaEE_day02_HTML+CSS_第4张图片
类选择器.png

3、id选择器:



    
        
        id选择器
        
    
    
        
成功是成功者的通行证,失败是失败者的墓志铭。11
成功是成功者的通行证,失败是失败者的墓志铭。22
成功是成功者的通行证,失败是失败者的墓志铭。33
成功是成功者的通行证,失败是失败者的墓志铭。44

效果图如下:

JavaEE_day02_HTML+CSS_第5张图片
id选择器.png

4、层级选择器:



    
        
        层级选择器
        
    
    
        
成功是成功者的通行证,失败是失败者的墓志铭。11
成功是成功者的通行证,失败是失败者的墓志铭。22

成功是成功者的通行证,失败是失败者的墓志铭。33

成功是成功者的通行证,失败是失败者的墓志铭。44

成功是成功者的通行证,失败是失败者的墓志铭。55

成功是成功者的通行证,失败是失败者的墓志铭。66

效果图如下:

JavaEE_day02_HTML+CSS_第6张图片
层级选择器.png

5、属性选择器:



    
        
        属性选择器
        
    
    
        用户名:
密码:

效果图如下:

属性选择器.png

四、CSS引入方式

1、内部引入:



    
        
        内部引入
        
    
    
        
成功是成功者的通行证,失败是失败者的墓志铭。11
成功是成功者的通行证,失败是失败者的墓志铭。22
成功是成功者的通行证,失败是失败者的墓志铭。33
成功是成功者的通行证,失败是失败者的墓志铭。44

效果图如下:

JavaEE_day02_HTML+CSS_第7张图片
内部引入.png

2、行内引入:



    
        
        行内引入
        
    
    
        
成功是成功者的通行证,失败是失败者的墓志铭。11
成功是成功者的通行证,失败是失败者的墓志铭。22
成功是成功者的通行证,失败是失败者的墓志铭。33
成功是成功者的通行证,失败是失败者的墓志铭。44

效果如图:

JavaEE_day02_HTML+CSS_第8张图片
行内引入.png

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



    
        
        外部引入
        
    
    
        
成功是成功者的通行证,失败是失败者的墓志铭。11
成功是成功者的通行证,失败是失败者的墓志铭。22
成功是成功者的通行证,失败是失败者的墓志铭。33
成功是成功者的通行证,失败是失败者的墓志铭。44

style.css代码如下:

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

五、CSS浮动

属性float,有left和right两个值



    
        
        CSS浮动
        
    
    
        

效果图如下:

JavaEE_day02_HTML+CSS_第9张图片
CSS浮动.png
取消超链接的下划线:
a{
    text-decoration: none;
 }
CSS的盒子模型:
JavaEE_day02_HTML+CSS_第10张图片

内边距属性:


JavaEE_day02_HTML+CSS_第11张图片

外边距属性:


JavaEE_day02_HTML+CSS_第12张图片

你可能感兴趣的:(JavaEE_day02_HTML+CSS)