Web前端开发-边框设置

Web前端开发,自学笔记整理


边框设置

1.边框设置技巧


<html>
    <head>
        <meta charset="UTF-8">
        <title>title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            ul {
                margin: 30px;
                width: 400px;
                height: 300px;
                /*border: 1px solid gray;*/
            }
            li {
                width: 79px;
                height: 150px;
                border: 1px solid gray;
                float: left;
                list-style: none;

                /*边框设置技巧*/
                margin: -1px 0 0 -1px;
            }
        style>
    head>
    <body>
        <ul>
            <li>li>
            <li>li>
            <li>li>
            <li>li>
            <li>li>
            <li>li>
            <li>li>
            <li>li>
            <li>li>
            <li>li>
        ul>
    body>
html>

2.网店效果


<html>
    <head>
        <meta charset="UTF-8">
        <title>title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            .box {
                width: 1000px;
                height: 474px;
                margin: 50px auto;
            }
            .box dl {
                width: 198px;
                height: 237px;
                border: 1px solid lightgray;
                float: left;
                margin: -1px 0 0 -1px;
            }
            .box dl dt {
                height: 165px;
                border-bottom: 1px solid lightgray;
                text-align: center;
            }
            .box dl dt i {
                display: inline-block;
                vertical-align: middle;
                height: 100%;
                width: 0;
            }
            .box dl dt a {
                display: inline-block;
                vertical-align: middle;
            }
            .box dl dd p {
                height: 34px;
                line-height: 34px;
                padding-left: 16px;
            }
            .box dl dd p a {
                text-decoration: none;
                font-size: 14px;
                color: gray;
            }
            .box dl dd span {
                padding-left: 16px;
                line-height: 36px;
                color: red;
                font-size: 14px;
            }
        style>
    head>
    <body>
        <div class="box">
            
            <dl>
                <dt>
                    <a href="#">
                        <img src="img/shop1.png" />
                    a>
                    <i>i>
                dt>
                <dd>
                    <p> <a href="#">优步智能跑步机a>p>
                    <span>¥2099.00span>
                dd>
            dl>

            <dl>
                <dt>
                    <a href="#">
                        <img src="img/shop2.png" />
                    a>
                    <i>i>
                dt>
                <dd>
                    <p> <a href="#">优步智能跑步机a>p>
                    <span>¥2099.00span>
                dd>
            dl>

            <dl>
                <dt>
                    <a href="#">
                        <img src="img/shop3.png" />
                    a>
                    <i>i>
                dt>

                <dd>
                    <p> <a href="#">优步智能跑步机a>p>
                    <span>¥2099.00span>
                dd>
            dl>
            <dl>
                <dt>
                    <a href="#">
                        <img src="img/shop4.png" />
                    a>
                    <i>i>
                dt>

                <dd>
                    <p> <a href="#">优步智能跑步机a>p>
                    <span>¥2099.00span>
                dd>
            dl>
            <dl>
                <dt>
                    <a href="#">
                        <img src="img/shop1.png" />
                    a>
                    <i>i>
                dt>

                <dd>
                    <p> <a href="#">优步智能跑步机a>p>
                    <span>¥2099.00span>
                dd>
            dl>
            <dl>
                <dt>
                    <a href="#">
                        <img src="img/shop1.png" />
                    a>
                    <i>i>
                dt>

                <dd>
                    <p> <a href="#">优步智能跑步机a>p>
                    <span>¥2099.00span>
                dd>
            dl>
            <dl>
                <dt>
                    <a href="#">
                        <img src="img/shop1.png" />
                    a>
                    <i>i>
                dt>
                <dd>
                    <p> <a href="#">优步智能跑步机a>p>
                    <span>¥2099.00span>
                dd>
            dl>
            <dl>
                <dt>
                    <a href="#">
                        <img src="img/shop1.png" />
                    a>
                    <i>i>
                dt>
                <dd>
                    <p> <a href="#">优步智能跑步机a>p>
                    <span>¥2099.00span>
                dd>
            dl>
            <dl>
                <dt>
                    <a href="#">
                        <img src="img/shop1.png" />
                    a>
                    <i>i>
                dt>
                <dd>
                    <p> <a href="#">优步智能跑步机a>p>
                    <span>¥2099.00span>
                dd>
            dl>
            <dl>
                <dt>
                    <a href="#">
                        <img src="img/shop1.png" />
                    a>
                    <i>i>
                dt>
                <dd>
                    <p> <a href="#">优步智能跑步机a>p>
                    <span>¥2099.00span>
                dd>
            dl>
        div>
    body>
html>

Web前端开发-边框设置_第1张图片

你可能感兴趣的:(HTML/CSS)