第十一篇_<%=news.content%>中的content内容位置-CSDN博客

本文链接：https://blog.csdn.net/a530609250/article/details/86906669

盒子模型：
一个独立的盒子模型由网页内容，边框，内边距，外边距四部分组成。
网页内容（content）：位于最中间，网页的主要显示内容。
边框（border）：位于内边距外面，如果没有内边距就是包着内容的外框，它一般具有一定的厚度。
内边距（padding）：位于边框内部的空隙，是内容与边框的距离。
外边距（margin）：位于边框外部空隙，边框外面周围的距离。

border-width的属性设置方法：
border-width 简写属性为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。

只有当边框样式不是 none 时才起作用。如果边框样式是 none，边框宽度实际上会重置为 0。不允许指定负长度值。
border-width:thin medium thick;
上边框是 10px
右边框和左边框是中等边框
下边框是粗边框

border-style属性设置方法：
border-style 属性用于设置元素所有边框的样式，或者单独地为各边设置边框样式。

只有当这个值不是 none 时边框才可能出现。

例1：
border-style:dotted solid double dashed;
上边框是点状
右边框是实线
下边框是双线
左边框是虚线

外边距是盒子边框外，与其他盒子的距离，

margin-right 右外边距
margin-left 左外边距
margin-top 上外边距
margin-button 下外边距

内边距以padding开头。
以下示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #ww {
            background: url("img/bg.jpg") no-repeat;

            width:400px;
            height:500px;

        }
        .r01
        {
            width:260px;

            padding-top:80px;
            color:#FFF;
            font-size:14px;
            box-sizing: border-box;



        }
        .r02{

            height: 100px;


        }
        li{
            list-style: none;

        }
        .anniu{
            height: 49px;
            width: 150px;
            background-image: url("img/btn.jpg");
            background-repeat: no-repeat;
            margin-left: 85px;
            border: none;
        }
        span{
            color: red;
        }
        .yuanjiao{
            border-radius: 5px;
        }



    </style>
</head>
<body>
<div id="ww">
    <div class="r01">
        <form action="" method="get" name="asd">
            <ul>
                <li><span>*</span>姓名：
                <input type="text" class="yuanjiao">
                </li>
                <li>
                    <span>*</span>邮箱：
                    <input type="email" class="yuanjiao">
                </li>
                <li>
                    <span>*</span> 电话:&nbsp;&nbsp;
                    <input type="number" class="yuanjiao">
                </li>
                <li>
                    性别：&nbsp;&nbsp;
                    <select name="sex" class="yuanjiao">
                        <option>请选择</option>
                        <option>男</option>
                        <option>女</option>
                    </select>
                </li>
                <li>
                    年龄：&nbsp;&nbsp;
                    <select name="year" class="yuanjiao" >
                        <option>请选择</option>
                        <option>1</option>
                        <option>2</option>
                    </select>
                </li>
            </ul>
            <div class="r02">
                <input class="anniu" type="submit" value="" >
            </div>

        </form>



    </div>

</div>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #qq{
            border: 2px solid;
            border-radius: 8px;
            width: 300px;
            margin: 0px auto;
            border-color: orange;
            box-sizing: border-box;
        }
        li{
            list-style: none;
        }
        .a01{
            background: url("img/icon_01.jpg") -2px center no-repeat;
            padding-left: 10px;
            height: 50px;
            width: 298px;
            line-height: 50px;

            margin: 0px;
            border-bottom-color: gray;
            border-bottom-style: dashed;
            box-sizing: border-box;
        }

        .a02{
            background: url("img/icon_02.jpg") -2px center no-repeat;
            padding-left: 10px;
            height: 50px;
            width: 298px;
            line-height: 50px;

            margin: 0px;
            border-bottom-color: gray;
            border-bottom-style: dashed;
            box-sizing: border-box;
        }
        .a03{
            background: url("img/icon_03.jpg") -2px center no-repeat;
            padding-left: 10px;
            height: 50px;
            width: 298px;
            line-height: 50px;

            margin: 0px;
            border-bottom-color: gray;
            border-bottom-style: dashed;
            box-sizing: border-box;
        }
        .a04{
            background: url("img/icon_04.jpg") -2px center no-repeat;
            padding-left: 10px;
            height: 50px;
            width: 298px;
            line-height: 50px;

            margin: 0px;
            border-bottom-color: gray;
            border-bottom-style: dashed;
            box-sizing: border-box;
        }
        .a05{
            background: url("img/icon_05.jpg") -2px center no-repeat;
            padding-left: 10px;
            height: 50px;
            width: 298px;
            line-height: 50px;

            margin: 0px;
            border-bottom-color: gray;
            border-bottom-style: dashed;
            box-sizing: border-box;
        }
        .a06{
            background: url("img/icon_06.jpg") -2px center no-repeat;
            padding-left: 10px;
            height: 50px;
            width: 298px;
            line-height: 50px;

            margin: 0px;
            border-bottom-color: gray;
            border-bottom-style: dashed;
            box-sizing: border-box;
        }
        .a07{
            background: url("img/icon_07.jpg") -2px center no-repeat;
            padding-left: 10px;
            height: 50px;
            width: 298px;
            line-height: 50px;

            margin: 0px;
            border-bottom-color: gray;
            border-bottom-style: dashed;
            box-sizing: border-box;
        }
        .a08{
            background: url("img/icon_08.jpg") -2px center no-repeat;
            padding-left: 10px;
            height: 50px;
            width: 298px;
            line-height: 50px;

            margin: 0px;
            border-bottom-color: gray;
            border-bottom-style: dashed;
            box-sizing: border-box;
        }
        .a09{
            background: url("img/icon_09.jpg") -2px center no-repeat;
            padding-left: 10px;
            height: 50px;
            width: 298px;
            line-height: 50px;
            margin: 0px;
            border-bottom-color: gray;
            border-bottom-style: dashed;
            box-sizing: border-box;
        }
        .a10{
            background: url("img/icon_10.jpg") -2px center no-repeat;
            padding-left: 10px;
            height: 50px;
            width: 298px;
            line-height: 50px;

            margin: 0px;


            box-sizing: border-box;
        }
        a{
            color: black;
            text-decoration: none;
        }
        a:hover{
            color: red;
        }
    </style>
</head>

<body>
<div id="qq">
    <div class="a01">
        <ul>
            <li><a href="#">酒水、饮料</a></li>
        </ul>
    </div>
    <div class="a02">
        <ul>
            <li><a href="#">进口食品</a></li>
        </ul>
    </div>
    <div class="a03">
        <ul>
            <li><a href="#">休闲零食</a></li>
        </ul>
    </div>
    <div class="a04">
        <ul>
            <li><a href="#">地方特产</a></li>
        </ul>
    </div>
    <div class="a05">
        <ul>
            <li><a href="#">保健、冲调</a></li>
        </ul>
    </div>
    <div class="a06">
        <ul>
            <li><a href="#">粮油、生鲜</a></li>
        </ul>
    </div>
    <div class="a07">
        <ul>
            <li><a href="#">美容洗护</a></li>
        </ul>
    </div>
    <div class="a08">
        <ul>
            <li><a href="#">清洁洗涤</a></li>
        </ul>
    </div>
    <div class="a09">
        <ul>
            <li><a href="#">母婴、纸品</a></li>
        </ul>
    </div>
    <div class="a10">
        <ul>
            <li><a href="#">家居百货</a></li>
        </ul>
    </div>
</div>

</body>
</html>