JavaWeb前端知识-CSS进阶

最新推荐文章于 2024-10-10 10:46:31 发布

饮马长城窟

最新推荐文章于 2024-10-10 10:46:31 发布

阅读量266

点赞数

分类专栏： javaweb 文章标签： java web 前端 css

本文链接：https://blog.csdn.net/junshan2009/article/details/68585200

版权

javaweb 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

头文件的写法:

         </style>

2.1轮廓
h1{
outline:red double 5px
outline-color:red
}
2.2 尺寸
css的尺寸允许你控制元素的高度和宽度,还有增加行间距
<–style type=”text/css”>
p{
background-color:red;
weight:20px;
heignt:100px;
line-height:50px;–行高

2.3css的单位
px:像素点
em:当前字体的尺寸–常用,可以自适应品屏幕
pt:磅,絶対単位
pc:12字活点
body{
font-size:12pt;
}
css分类
设置元素的可见度,浮动,如何控制元素
#p1,#p2 {
display:–见chm
}
浮动:float:left||right
a:hover{background-color:red} 鼠标指上去的背景色变化
visibilyty :可见的
cursor:鼠标放在指定区域的鼠标显示类型
css的定位机制
普通流,浮动流,绝对定位
position: static, relative,absolute,fixed
{
position:relative;
left:-20px;
z-index=-1;层叠在下面;
}
伪类:
当一个元素结合动作后的反应
a:focus{

}
DIV+css布局

<style type="text/css">
#conta{
    border:10px #9C6;
    margin:10px;

    }
    #head,#footer{
        color:#F00;
        background-color:#003;
        padding:10px 20px
        }
        #left{
            float:left;
            width:160px;
            padding:1em;
            }
            #content{
                magin-left:190px;
                border-left:1px;
                padding:10px;
                }
</style>
</head>

<body>
<div id="conta">
<div id="head" >
<h2>这是我们的标题</h2>
</div>
<div id="left">
<p>左边缩进的内容</p>
</div>
<div id="content"></div>
<div id="footer"></div>

</div>

</body>