javaweb基础学习—— css

Posted 2020-10-25 慵懒的仙人掌

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javaweb基础学习—— css相关的知识，希望对你有一定的参考价值。

导入方式：(优先级：离的越近，优先级越高。导入样式优先级最低)

内部样式，
行内样式，
外部样式，
导入样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div,p,h1{
            /*宽度*/
            width:100px;
            /*高度*/
            height:100px;
            /*背景颜色*/
            background-color:yellow;
        }
    </style>
    <link href="css.css" rel="stylesheet" type="text/css">
    <style>
        @import "css.css";
    </style>
</head>
<body>
    <div style="width: 100px;height: 100px;background-color: aliceblue">呵呵</div>
    <p>换行</p>
    <h1>asd</h1>
</body>
</html>

View Code

选择器：
元素选择符：通配符，类选择器，id选择器，类型选择器 （*在IE中不代表通配符，而是代表根元素）
关系选择符：子元素选择器，兄弟元素选择器，相邻选择器，包含选择器。
属性选择符：当前元素[属性=“属性值”]{}
伪类选择符：（给html标签的某种状态设置样式）元素:link{}设置超链接被访问前的样式，元素：visited{}设置超链接地址被访问之后的样式，
                hover：设置元素在鼠标悬停时的样式。active：设置元素被用户激活时的样式
            注意：a:hover要位于a:link以及a:visited之后，a:active必须位于a:hoverzhihou
            较为可靠的顺序是：link visited hover active  利用love hate，即喜欢与讨厌来记忆
选择器的优先级：！important>内联>ID>类>标签|伪类|属性选择器>伪对象>继承>通配符
            注意：！important要写在属性值的后面，分号的前面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css-1.css" type="text/css">
    <style>
        a[href]{
            color:#66ccff;
        }
    </style>
    <style>
        ul li a:link {
            color: yellow;
        }
        ul li a:visited{
            color: blue;
        }
        ul li a:hover{
            color: #66ccff;
        }
        ul li a:active{
            color: red;
        }
    </style>

    <style>
        span{
            color: yellow !important;
        }
        p span{
            color: blue;
        }
        p  .ha{
            color: red;
        }
        p #ha{
            color: #66ccff;
        }

    </style>
</head>
<body>
    <a href="www.baidu.com">百度一下</a>
    <a>百度一下</a>
    <p>123</p>
    <p class="hp">456</p>
    <p id="hs">789</p>
    <ul>
        <li>
            这是列表
        </li>
        <li>
            这是列表
        </li>
        <li>
            这是列表
        </li>
    </ul>
    <ul>
        <li>
            <a href="#">伪类选择符</a>
        </li>
    </ul>
    <p>
        <span class="ha" id="ha">
            14548946123

        </span>
    </p>
</body>

View Code

元素选择符
*{
    background-color: #2cf7ff;
    padding: 0px;
    margin: 0px;
    font-family: ‘微软雅黑‘;
}
.hp{
    width: 100px;
    height: 100px;

}
#hs{
    color: aquamarine;
    font-family: ‘楷体‘
}
li{
    color: black;
}

div>p{
/*只选择子元素*/
}
p~h3{
/*只选择p标签后的h3元素*/
}
p+h3{
/*只选择与p相邻的h3元素*/
}
ul li{
/*不仅选择ul里的li元素，还选择li中的子元素*/
}

View Code

背景：
backgr-attachment:背景图像是否固定或随着页面的其余部分滚动
background-color:设置背景颜色
background-image:把图片设置为背景
background-position:设置背景的起始位置
background-repeat:设置背景是否以及如何重复

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            /*background-color: #66ccff;*/
            /*background-image: url("");*/
            /*background-repeat: no-repeat;*/
            /*background-position:  ;*/
            /*background-attachment: fixed;*/
            background: url("") no-repeat fixed;
        }
        div{

        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

View Code

边框：
border-width 边框宽度
border-style 边框样式
border-radius 设置圆角边框
box-shadow 设置对象阴影
border-image 边框背景图片

颜色：
Color Name，HEX，RGB，RGBA，透明色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container{
            width: 200px;
            height: 100px;
            background-color: #66ccff;
            border-width: 5px;
            border-color: yellow;
            border-style: solid;
            border-radius:10px;
            box-shadow: 5px 5px 10px rgba(0,0,0,0.2);/*水平位移，垂直位移，模糊度，颜色*/
        }
    </style>
</head>
<body>
    <div class="container">

    </div>

</body>
</html>

View Code

字体：
font 复合属性
font-style 设置字体样式
font-size 设置字体大小
font-weight 设置字体粗细
font-family 设置文本的字体名称
注意：可以使用本地不存在的字体，利用@font-face加入即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            font-size: 30px;
            font-style: italic;
            font-weight: 700/*bold*/;
            font-family: Arial;

        }
        @font-face {
            font-family: myfont;
            src :url("");
        }
        p{
            font-family: myfont;
        }
        p{
            font: italic bold 100px fantasy;
        }
    </style>
</head>
<body>
    <p>hello world!!</p>
</body>
</html>

View Code

文本：
color 文本颜色
text-align 文本水平对齐方式
vertical-align 垂直对齐方式
line-height 行高（可以使单行文本进行垂直居中）
text-transform 设置文本大小写（一般用来规范英文文本的书写情况）
text-indent 文本缩进（单位 em是指当前文本大小）

文本装饰：
text-decoration 复合属性
text-decoration-line 文本装饰线条的位置
text-decoration-color 文本装饰线条的颜色
text-decoration-style 文本装饰线条的形状
text-shadow 文本阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="text.css" type="text/css">
</head>
<body>
    <p>文字颜色字颜色字颜色字颜色字颜色字颜色字颜色字颜色字颜色字颜色字颜色字颜色字颜色字颜色字颜色字颜色字颜色字颜色字颜色字颜色测试</p>
    <div>
        垂直居中
    </div>
    <p class="123">文本装饰线条</p>
</body>
</html>

View Code

body{
    color:red;
}
p{
    width:300px;
    height: 200px;
    background-color: #66ccff;
    text-align: left;
    text-indent: 2em;

}
#a{
    text-transform: capitalize;
    text-transform: uppercase;
    text-transform: lowercase;

}
div{
    width: 300px;
    height: 200px;
    background-color: aquamarine;
    font-size: 20px;
    line-height: 200px;
}
p{
    text-decoration-line: underline;
    text-decoration-color: #66ccff ;
    text-decoration-style: wavy;

    text-shadow: 5px 5px 5px yellow;
}

View Code

列表：
list-style-type：列表类型（列表前为圆点还是方点还是数字）
list-style-image:列表项图像
list-style-position：列表标志位置
list-style：复合属性

表格：
border：表格的边框（参数分别为：宽度，类型，颜色）
border-collapse：合并或使边框独立
td中设置width以及height，padding
text-align：文本对齐
td中设置background-color：设置表格的背景颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="list.css" type="text/css" />

</head>
<body>
    <ul>
        <li>列表元素</li>
        <li>列表元素</li>
        <li>列表元素</li>
    </ul>
    <table border="1px solid blue">
        <tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
        </tr><tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
        </tr><tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
        </tr>
    </table>
</body>
</html>

View Code

ul li{
    list-style-type: decimal;
    list-style-image: url("li.png");
    margin-left: 200px ;
    width: 200px;
    list-style-position: inside;
}
table{
    border-collapse: collapse;
    border-color: #66ccff;
}
td{
    width: 200px;
    height: 200px;
    /*padding-left: 10px;*/
    text-align: center;
    background-color: #66ccff;
}

View Code

块级元素：
特点： 每个块级元素都从新的一行开始，且其后面的元素也另起一行
        元素的高度，宽度，行高以及顶和底边距都可以设置
        元素宽度在不设置的情况下，与其父亲容器相同
可以设置display：block可将元素显示为块级元素。

内联元素：
特点：与其他非块级元素在一行
        元素的高度，宽度以及顶部和底部边距不可设置
        元素的宽度就是它包含的文字或者图片的宽度，不可改变
可以设置display：inline将元素显示为内联元素。

内联块级元素：
常用/*<img> <input>*/
特点：和其他非块级元素在一行
        元素的高度，宽度，行高以及顶部和底部的边距可以设置
可以设置display：inline-block将元素设置为内联块级元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="app.css" type="text/css"/>
</head>
<body>
    <div class="one">我是div</div>
    <div class="two">我是div
    <p>很好</p>
    </div>
    <span>我是内联元素</span>
    <a href="#">我是a</a>
</body>
</html>

View Code

div{
    width: 100px;
    height: 100px;
    display: inline;
}
.one{
    background-color: #66ccff;
}

.two{
    background-color: antiquewhite;
}
span{
    background-color: #66ccff;
    display: block;
}

View Code

盒子模型

内容：content，padding,border,margin

分类：
    标准盒：正常盒模型。怪异盒模型
    伸缩盒：新，旧

内边距：padding
在content之外，边框内
边框：border
border-width 边框宽度
border-style 边框样式
border-radius 设置圆角边框
box-shadow 设置对象阴影
border-image 边框背景图片
外边距：margin
围绕在内容边框的区域就是外边距，外边距默认为透明区域
外边距接受任何长度单位以及百分数值
注意：外边距合并（取相邻元素外边距较大的值）

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 50px;
            height: 50px;
            padding: 5px;
            border: 5px;
            margin: 5px;
        }
    </style>
</head>
<body>
    <div>
        哈哈哈哈
    </div>

</body>
</html>

View Code

怪异盒子模型：将盒子模型的初始padding+margin+content固定为width与height

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: #66ccff;
            padding: 20px;
            border: 1px solid bisque;
            box-sizing: border-box;
        }
        .content{
            width: 100px;
            height:100px;
            background-color: brown;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="content">

        </div>
    </div>

</body>
</html>

View Code

伸缩盒（旧）
box-orient：伸缩盒对象子元素的排列方式
box-pack：垂直居中
box-align：水平居中
box-flex：伸缩盒对象子元素如何分配其剩余空间
box-direction：伸缩盒对象的子元素的排列顺序是否进行反转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<link rel="stylesheet" href="flexbox.css" type="text/css">-->
    <style>
        .container{
            width: 600px;
            height: 600px;
            background-color: #66ccff;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-box-pack: center;
            -webkit-box-align: center;
            -webkit-box-direction: reverse;
        }
        .one{
            width: 100px;
            height: 100px;
            background-color: antiquewhite;
            -webkit-box-flex: 3;
        }
        .two{

            width: 100px;
            height: 100px;
            background-color: pink;
            -webkit-box-flex: 2;

        }
        .three{
            width: 100px;
            height: 100px;
            background-color: #6fc9fa;
            -webkit-box-flex: 1;
        }
        /*display: -webkit-box; 将元素变成（旧）盒子*/
    </style>
</head>
<body>
    <div class="container">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>

    </div>

</body>
</html>

View Code

伸缩盒（新）
display: -webkit-flex; 变成（新）盒子
flex：复合属性
flex-grow 按比例分配
flex-flow复合属性，设置伸缩盒对象的子元素排列方式
flex-direction 伸缩盒对象在父容器中的位置
flex-wrap： 设置伸缩盒对象的子元素超出父容器时是否换行
order：设置伸缩盒对象的子元素出现的顺序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container{
            width: 600px;
            height: 600px;
            background-color: #66ccff;
            display: -webkit-flex;
            /*变成盒子*/
            -webkit-flex-direction: row;
            -webkit-flex-flow: wrap;

        }
        .one{
            width: 100px;
            height: 100px;
            background-color: antiquewhite;
            -webkit-flex-grow: 1;
            -webkit-order:3;
        }
        .two{

            width: 100px;
            height: 100px;
            background-color: pink;
            -webkit-flex-grow: 1;
            -webkit-order:2;


        }
        .three{
            width: 100px;
            height: 100px;
            background-color: #3ffa72;
            -webkit-flex-grow: 1;
            -webkit-order:1;

        }
    </style>
</head>
<body>
    <div class="container">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
    </div>

</body>
</html>

View Code

position 把元素放到静态的，相对的，绝对的或者固定的位置中
top    元素向上的偏移量
left   元素向左的偏移量
right  元素向右的偏移量
bottom  元素向下的偏移量
z-index 设置元素的堆叠顺序
CSS position属性：
static:对象遵循常规流。此时四个定位偏移属性不会被应用
relative：对象遵循常规流，并且参照常规流中的位置通过top，right，bottom，left这四个定位偏移属性进行偏移，不影响常规流中的任何元素
absolute：对象脱离常规流，其实偏移属性参照的是离自身最近的定位祖先元素，如果没有定位祖先元素，则一直回溯到body元素，其margin不与其他任何margin折叠
fixed：与absolute一致，但偏移定位是以窗口为参考。出现滚动条时对象不会碎着滚动。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0px;
            margin: 0px;
        }
        .one{
            width: 100px;
            height: 100px;
            background-color: #66ccff;
            position: relative;
            z-index: -1;
        }
    </style>
</head>
<body>
    <div class="one">哈哈哈哈</div>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>

</body>
</html>

View Code

浮动：
float：  left
        right
        none
        inherit 从父级继承浮动属性
注意：float在绝对定位和display为none时不生效（此时该元素被去除）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
        }
        .one{
            float: left;
            background-color: #66ccff;
        }
        .two{
            background-color: #3ffa72;
        }
        .three{
            background-color: bisque;
        }
        .container{
            width: 600px;
            height: 600px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>

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

View Code

clear属性：
去掉浮动值，包括继承来的属性
属性值与float相同

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .text1{
            float: right;
            background-color: #66ccff;

        }
        .text2{
            clear: right;
            background-color: #3ffa72;
        }
    </style>
</head>
<body>
    <div class="text1">1</div>
    <div class="text2">2</div>

</body>
</html>

View Code

visibility:
设置是否显示对象，此属性是为隐藏的对象保留其所占据的物理空间，与display：none不同
希望对象可视，则其父对象也必须可视
属性值：visibel
        hidden

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .one{
            width: 100px;
            height: 100px;
            background-color: #66ccff;
            visibility: visible;
        }

    </style>
</head>
<body>
    <div class="one">大家好</div>

</body>
</html>

View Code

overflow
复合属性，设置对象处理溢出内容的方式，效果等同overflow-x+overflow-y
属性值：visible：对溢出的内容不做处理，内容可能会超出容器（默认）
        hidden：隐藏溢出的内容
        scroll：隐藏溢出的内容，溢出的内容以滚动条的方式出现
        auto：按需觉得是否出现滚动条。（此为body对象以及textarea的默认值）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .content{
            width: 200px;
            height: 200px;
            overflow: scroll;
        }
    </style>
</head>
<body>
    <div class="content">大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好</div>

</body>
</html>

View Code

2D,3D转换

2D：translate，rotate，scale，skew
3D：rotateX，rotateY

浏览器内核：
Chrome/Safari     Webkit
Firefox           moz
Presto            o
IE                ms

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: #66ccff;
        }
        .change{
            transform: translate(100px,200px);
            transform: rotate(30deg);
            transform: scale(2.3);
            transform: skew(50deg,50deg);
            transform: rotateX(120deg);
            transform: rotateY(120deg);
        }
    </style>
</head>
<body>
    <div > 初始</div>
    <div class="change"> 变换后</div>
</body>
</html>

View Code

过渡：


transition   复合属性
transition-property  应用过渡的css属性的名称
transition-duration  定义过渡效果花费的时间，默认0
transition-timing-function  规定过渡效果的时间曲线。默认为ease
            取值： linear      线性过渡
                    ease        平滑过渡
                    ease-in     由慢到快
                    ease-out    由快到慢
                    ease-in-out 由慢到快再到慢
transition-delay     规定过渡效果的延迟时间，默认0

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .one{
            width: 100px;
            height: 100px;
            background-color: #66ccff;
            transition: background-color 2s linear;
        }
        .one:hover{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="one"> 效果</div>

</body>
</html>

View Code

动画：
animation 复合属性
animation-name 检索或者设置对象所应用的动画名称
animation-duration 检索或者设置对象动画的持续时间
animation-timing-function 检索或者设置对象动画的过渡类型
animmation-delay 检索或者设置对象动画的延迟时间
animation-iteration-count 检索或者设置对象动画出的循环次数。infinite 无线循环
animation-direction  检索或者设置对象动画在循环中是否反向运动。normal 正常方向  alternate 正反交替

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .one{
            width: 100px;
            height: 100px;
            background-color: #66ccff;
            animation-name :cartoon;
            /*animation-duration:5s;*/
            /*animation-timing-function: linear;*/
            /*animation-delay:2s;*/
            /*border-radius: 5px;*/
            /*animation-iteration-count: infinite;*/
            /*animation-direction: alternate;*/
            animation: cartoon 2s linear 2s infinite alternate;
        }
        @keyframes cartoon {
            0%{
                transform: rotate(0deg);
                background-color: yellow;
            }
            25%{
                transform: rotate(90deg);
                background-color: brown;
            }
            50%{
                transform: rotate(180deg);
                background-color: #3ffa72;
            }
            75%{
                transform: rotate(270deg);
                background-color: bisque;
            }
            100%{
                transform: rotate(360deg);
                background-color: #66ccff;
            }
        }
    </style>
</head>
<body>
    <div class="one">
        效果
    </div>

</body>
</html>

View Code

多列：
columns 复合属性
column-width 每列的宽度
column-count 列数
column-gap  列与列之间的间隙

column-rule 列与列之间的边框   复合属性
column-rule-width 列与列之间的边框厚度
column-rule-style 列与列之间的边框样式
column-rule-color 列与列之间的边框颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container{
            /*-webkit-column-count: 2;*/
            /*-webkit-column-width:500px ;*/
            -webkit-columns: 2 500px;
            /*-webkit-column-rule-style: solid;*/
            /*-webkit-column-rule-color: #66ccff;*/
            -webkit-column-rule: 5px solid #66ccff ;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="one">
            <img src="1.png"width="300px">
            选项卡管理：
            通过执行js命令实现新开选项卡window.open()
            不同的选项卡是存在列表里browser.window_handles
            通过browser.window_handles[0]就可以操作第一个选项卡
        </div>
         <div class="two">
            <img src="1.png"width="300px">
            选项卡管理：
            通过执行js命令实现新开选项卡window.open()
            不同的选项卡是存在列表里browser.window_handles
            通过browser.window_handles[0]就可以操作第一个选项卡
        </div>

    </div>

</body>
</html>

View Code

CSS Hack :针对不同的浏览器或者不同版本的浏览器写相应的css代码的过程

实现形式：

css属性前缀法：在css样式属性名前加上一些只有特定浏览器才能识别的hack前缀
- IE6
* IE7
\9  IE6`10
\0  IE8`10
\9\0 IE9和IE10

选择器前缀法：在css选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack
*html IE6
*+html IE7

IE条件注释法：（IE10+不再支持条件注释）
<!-- [if IE]>
这段文字只在IE浏览器中显示
<![endif]-->
<!-- [if IE 6]>
这段文字只在IE6浏览器中显示
<![endif]-->
<!-- [if gte IE 6]>
这段文字只在IE6以上版本浏览器中显示
<![endif]-->
<!-- [if ！ IE 8]>
这段文字不在IE8浏览器中显示
<![endif]-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .one{
            width: 100px;
            height: 100px;
            background-color: #66ccff;
        }
        .two{
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="one">111111</div>
    <div class="two">111111</div>
</body>
</html>

View Code

媒体查询

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,body{
            margin: 0;
            padding: 0;

        }
        /*.d1{*/
            /*width: 100%;*/
            /*height: 800px;*/
            /*background-color: #66ccff;*/
        /*}*/
        @media screen and(max-width: 640px){
            .d1{
                width: 100%;
                height: 800px;
                background-color: #66ccff;
            }

        }

        @media screen and(min-width: 800px) {
            .d1 {
                width: 100%;
                height: 800px;
                background-color: green;
            }
        }
        @media  screen and (min-width: 640px)  and(max-width: 800px){
              .d1{
                  width: 100%;
                  height: 800px;
                  background-color: red;
              }
        }


    </style>
</head>
<body>
    <div class="d1">

    </div>

</body>
</html>

View Code

居中方式：
margin：0 auto（将一个块级元素居中）

文字居中:line-height;text-align;center（将块级元素之间的文字居中）

由table演变来的居中：
display:table(将外部声明为表格)

display: table-cell;（将文字所在p标签设置为单元格）
text-align: center;
vertical-align: middle;

利用伸缩盒：display: -webkit-box;
-webkit-box-align: center;
-webkit-box-pack: center;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,body{
            margin: 0;
            padding: 0;

        }
        .container{
            width: 100%;
            min-width: 996px;
            height: 70px;
            background-color: #66ccff;

        }
        .header{
            width: 80%;
            min-width: 996px;
            height: 50px;
            background-color: #3ffa72;
            margin: 0px auto;
            text-align: center;
            line-height: 50px;

        }
        ul li{
            display: inline-block;

        }
        .two{
            display: table;
            width: 200px;
            height: 200px;
            background-color: green;
        }
        p{
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }
        .outer{
            display: -webkit-box;
            width: 200px;
            height: 200px;
            background-color: yellow;
            -webkit-box-align: center;
            -webkit-box-pack: center;
        }
        .inner{
            width: 100px;
            height: 100px;
            background-color: #3ffa72;
            display: -webkit-box;
            -webkit-box-align: center;
            -webkit-box-pack: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <ul>
                <li>列表</li>
                <li>列表</li>
                <li>列表</li>
            </ul>
        </div>
    </div>
    <div class="one">
        <div class="two">
          <p>哈哈哈</p>
        </div>
    </div>
    <div class="outer">
        <div class="inner">
          哈哈哈
        </div>
    </div>

</body>
</html>

View Code

以上是关于javaweb基础学习—— css的主要内容，如果未能解决你的问题，请参考以下文章

动态SQL基础概念复习（Javaweb作业5）