码迷,mamicode.com
首页 > Web开发 > 详细

3、css边框以及其他常用样式

时间:2019-05-06 01:36:29      阅读:152      评论:0      收藏:0      [点我收藏+]

标签:垂直   居中   meta   消失   blog   常用   info   class   gre   

一、边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="border: 1px solid red">abc</div>        
    <div style="border: 1px dotted blue">abc</div>
</body>
</html>


#style="border: 1px   //边框1像素
#solid  //实线;    dotted  //虚线;还可以设置左、右;
#颜色


二、其他样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="height: 45px; width: 80%; border: 1px solid red">abc</div>

    <div style="height: 45px;
    width: 200px;
    border: 1px solid red;
    font-size: 20px;
    text-align: center;
    line-height: 45px;
    font-weight: bold;

    ">abc</div>
</body>
</html>



height           //高度,百分比
width        //宽度像素,百分比
text-align:ceter    //水平方向居中
line-height    //垂直方向根据标签高度居中
color        //字体颜色
font-size        //字体太小
font-weight     //字体加粗


三、float样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="width: 20%; background-color: red; float: left">1</div>
    <div style="width: 80%; background-color: blue; float: right">2</div>

</body>
</html>


float    //让标签飘起来,块级标签也可以堆叠;

技术图片


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            height: 38px;
            background-color: #dddddd;
            line-height: 38px;
        }

    </style>

</head>
<body style="margin: 0 auto">        #去掉顶部空隙
    <div class="pg-header">
        <div style="float: left;">收藏本站</div>
        <div style="float: right;">
            <a>登录</a>
            <a>注册</a>
        </div>
    </div>

    <div style="width: 300px; border: 1px solid red;">
        <div style="width: 96px; height: 30px; border: 1px solid green; float: left; "></div>    #div会逐个拼接;
        <div style="width: 96px; height: 30px; border: 1px solid green; float: left; "></div>
        <div style="width: 96px; height: 30px; border: 1px solid green; float: left; "></div>
        <div style="width: 96px; height: 30px; border: 1px solid green; float: left; "></div>
        <div style="width: 96px; height: 30px; border: 1px solid green; float: left; "></div>
        <div style="width: 96px; height: 30px; border: 1px solid green; float: left; "></div>
        <div style="clear: both"></div>
    </div>

</body>
</html>


四、display样式

行内标签:无法设置高度,宽度,padding margin
块级标签:可以设置高度,宽度,padding margin

display:none;    //让标签消失
display:inline;    //让块级标签变成行内标签
display:block;    //让行内标签变成块级标签
display:inline-block;
    //具有inline默认自己有多少占多少;
    //具有block,可以设置高度,宽度,padding margin;



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="background-color: red; display: inline">abc</div>
    <span style="background-color: red; display: block">abc</span>
</body>
</html>


五、内外边距

margin   //外边距

padding   //内边距

3、css边框以及其他常用样式

标签:垂直   居中   meta   消失   blog   常用   info   class   gre   

原文地址:https://www.cnblogs.com/weiyiming007/p/10817141.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!