Web前端基础（09）

更新时间：2022-08-22 14:55:14

4.内边距

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #d1 {
                width: 100px;
                height: 100px;
                border: 1px solid red;
                /* 添加内边距会影响元素的宽高 */
                padding-top: 20px;
                padding-left: 50px;
            }

            #d2,#d3 {
                width: 100px;
                height: 100px;
                border: 1px solid red;
            }

            div>div {
                width: 25px;
                height: 25px;
                background-color: green;
            }
            #d2{
            padding: 25px 0 0 25px;
            width: 75px ;
            height: 75px;
            }
            #d3>div{
                /*除了给上级元素添加overflow:hidden可以
                 解决粘连问题,给上级元素添加边框也能解决*/
                margin: 25px 0 0 25px;
            }

        </style>
    </head>
    <body>
        <div id="d1">内边距测试</div>
        <div id="d2">
            <div></div>
        </div>
        <div id="d3">
            <div></div>
    </body>
</html>

显示效果：

Web前端基础（09）

5.学子商城练习1

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            body{
                font: 12px "simhei",Arial, Helvetica, sans-serif;
                color: #666;
            }
            a{
                /*宽高132*40 颜色#Oaaled */
                width: 132px;
                height: 40px;
                background-color: #0aa1ed ;
                display: block;
                text-align: center;
                line-height: 40px;
                color: white ;
                text-decoration: none ;
                border-radius: 3px;
                font-size: 20px;
            }
            #d1>div {
                width: 245px;
                height: 232px;
                margin: 68px 0 0 36px;
            }
            #d1{
                width: 611px;
                height: 376px;
                background-color: #e8e8e8;
                /*设置背景图片*/
                background-image: url(http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_computer_img1.png);
                background-size: 318px 319px;
                background-repeat: no-repeat ;
                background-position: 90% 70%;
                overflow: hidden;
                }
                #p1{
                    font-size: 32px;
                    color: #333;
                }
                
                #p3{
                    font-size: 24px;
                    font-weight: bold;
                    color: #0aa1ed;
                }
        </style>
    </head>
    <body>
        <div id="d1">
            <div>
                <p id="p1">灵越 燃7000系列</p>
                <p id="p2">酷睿双核i5处理器|256GB SSD| 8GB内存<br />
                    英特尔HD显卡620含共享显卡内存</p>
                <p id="p3">￥999999.99</p>
                <a  href="#">查看详情</a>
            </div>
        </div>
    </body>
</html>

显示效果：

Web前端基础（09）

6.学子商城练习2

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            body{
                font: 12px "simhei",Arial, Helvetica, sans-serif;
                color: #666;
            }
            a{
                /*宽高132*40 颜色#Oaaled */
                width: 132px;
                height: 40px;
                background-color: #0aa1ed ;
                display: block;
                text-align: center;
                line-height: 40px;
                color: white ;
                text-decoration: none ;
                border-radius: 3px;
                font-size: 20px;
            }
            #d1>div {
                width: 253px;
                height: 232px;
                margin: 39px 0 0 25px;
            }
            #d1{
                width: 400px;
                height: 376px;
                background-color: #e8e8e8;
                /*设置背景图片*/
                background-image: url(http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_computer_img2.png);
                background-size: 290px 232px;
                background-repeat: no-repeat ;
                background-position: 90% 90%;
                overflow: hidden;
                }
                #p1{
                    font-size: 32px;
                    color: #333;
                }
                #p3{
                    font-size: 24px;
                    font-weight: bold;
                    color: #0aa1ed;
                }
        </style>
    </head>
    <body>
        <div id="d1">
            <div>
                <p id="p1">颜值 框不住</p>
                <p id="p2">酷睿双核i5处理器|256GB SSD| 8GB内存<br />
                            英特尔HD显卡620含共享显卡内存
                <p id="p3">￥999999.99</p>
                <a  href="#">查看详情</a>
            </div>
        </div>
    </body>
</html>

显示效果：

Web前端基础（09）

本节所有的代码: https://download.csdn.net/download/qq_44273429/12729648

上一篇 : ：Java：apache.poi读写Excel文件下一篇 : Java笔记：Maven软件依赖管理

Web前端基础（09）

相关阅读

推荐文章