有效沟通问答-【官方】百战程序员_IT在线教育培训机构

<style>
        .container {
            position: relative;
            width: 900px;
            height: 600px;
            background-color: pink;
            margin: 0 auto;
        }

        .container img {
            position: absolute;
            width: 170px;
            border: 10px solid #f1f1f1;
        }

        .img1 {
            top: 0;
            left: 360px;
            transform: rotate(10deg);
        }
        .img2 {
            top: 100px;
            left: 100px;
            transform: rotate(-50deg);
        }
        .img3 {
            top: 200px;
            right: 100px;
            transform: rotate(55deg);
        }
        .img4 {
            top: 400px;
            left: 360px;
            transform: rotate(30deg);
        }
    </style>
</head>
<body>
    <div class="container">
        <img src="./img/1.jpeg" class="img1">
        <img src="./img/2.jpeg" class="img2">
        <img src="./img/3.jpeg" class="img3">
        <img src="./img/4.jpeg" class="img4">
    </div>

WEB前端全系列/第一阶段：HTML5+CSS3模块/浮动与定位 157楼

   <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: aliceblue;
        }

        .container {
            width: 1080px;
            margin: 0 auto;
        }

        .container ul {
            overflow: hidden;
            clear: both;
        }

        .container ul li {
            position: relative;
            float: left;
            list-style: none;
            background-color: #fff;
            margin: 10px 9px 0 0;
            width: 260px;
            height: 375px;
        }

        .container ul li:nth-child(4n) {
            margin-right: 0;
        }

        .container ul li a {
            display: block;
            width: 100%;
            height: 100%;
            text-align: center;
            text-decoration: none;
            padding-top: 20px;
        }

        img {
            width: 250px;
            height: 230px;

        }

        .container ul li a .text {
            width: 100%;
            margin-top: 20px;
        }

        .text .name {
            display: block;
            color: #333;
            font-size: 16px;
            margin-bottom: 3px;
        }

        .text .desc {
            display: block;
            color: #999;
            font-size: 15px;
        }

        .text .price i {
            font-style: normal;
            font-size: 17px;
            color: red;
        }

        .text .price {
            display: inline-block;
            color: red;
            font-size: 22px;
            /* padding-left: 14px; */
        }

        .text .price em {
            font-size: 16px;
            font-style: normal;
        }

        .prodect-sign {
            position: absolute;
            top: 15px;
            left: 20px;
            display: block;
            width: 55px;
            height: 55px;
            background-color: pink;
            border-radius: 60%;
            line-height: 55px;
            color: #fff;
            font-size: 16px;
        }
    </style>
</head>

<body>
    <div class="container">
        <ul>
            <li>
                <a href="#">
                    <img src="./img/1.webp" alt="">
                    <div class="text">
                        <span class="name">小米 11Pro</span>
                        <span class="desc">限时优惠,抢购吧</span>
                        <span class="price"><i>￥</i>1999<em>起</em></span>
                    </div>
                    <span class="prodect-sign">免息</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./img/2.png" alt="">
                    <div class="text">
                        <span class="name">小米 12Pro</span>
                        <span class="desc">限时优惠,抢购吧</span>
                        <span class="price"><i>￥</i>2999<em>起</em></span>
                    </div>
                    <span class="prodect-sign">免息</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./img/1.webp" alt="">
                    <div class="text">
                        <span class="name">小米 11U</span>
                        <span class="desc">限时优惠,抢购吧</span>
                        <span class="price"><i>￥</i>2222<em>起</em></span>
                    </div>
                    <span class="prodect-sign">免息</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./img/2.png" alt="">
                    <div class="text">
                        <span class="name">小米 12U</span>
                        <span class="desc">限时优惠,抢购吧</span>
                        <span class="price"><i>￥</i>3333<em>起</em></span>
                    </div>
                    <span class="prodect-sign">免息</span>
                </a>
            </li>
        </ul>
    </div>
</body>

偷懒用老师写的尺寸，但是看着好大啊，对于类名还是不会起名字，不会管理

WEB前端全系列/第一阶段：HTML5+CSS3模块/浮动与定位 158楼

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .nav {
            width: 100%;
            height: 60px;
            position: relative;
            text-align: center;
        }

        .nav ul {
            overflow: hidden;
            clear: both;
        }

        .nav ul li {
            list-style: none;
            float: left;
            padding: 25px 30px;
        }
        .nav ul li a {
            color: #333;
            text-decoration: none;
            font-size: 25px;
        }

        .nav-list {
            width: 100%;
            height: 300px;
            position: absolute;
            left: 0;
            display: none;
        }
        .nav li:hover>.nav-list {
            display: block;
        }
        .nav li:hover>a {
            color: blue;
        }
    </style>
</head>
<body>
    <div class="nav">
        <ul>
            <li>
                <a href="#">首页</a>
                <div class="nav-list" style="background-color:pink";></div>
            </li>
            <li>
                <a href="#">手机</a>
                <div class="nav-list" style="background-color:skyblue";></div>
            </li>
            <li>
                <a href="#">平板</a>
                <div class="nav-list" style="background-color:pink";></div>
            </li>
            <li>
                <a href="#">配件</a>
                <div class="nav-list"  style="background-color:skyblue";></div>
            </li>
            <li>
                <a href="#">服务器</a>
                <div class="nav-list" style="background-color:pink";></div>
            </li>
            <li>
                <a href="#">下载</a>
                <div class="nav-list"  style="background-color:skyblue";></div>
            </li>
        </ul>
    </div>

WEB前端全系列/第一阶段：HTML5+CSS3模块/浮动与定位 159楼

<style>
        * {
            margin: 0;
            padding: 0;
        }

        .nav {
            width: 100%;
            height: 60px;
            line-height: 60px;
            background-color: #666;
        }

        .nav ul {
            width: 1000px;
            margin: 0 auto;
        }

        .nav ul li {
            list-style: none;
            float: left;
            padding: 0 20px;
        }
       
        .nav ul::after {
            content: "";
            margin: 0 auto;
            display: block;
            clear: both;
        }
        .nav ul li a {
            text-decoration: none;
            font-size: 20px;
            color: #b0b0b0;

        }

        .nav ul li:hover {
            background-color: #222;
        }
    </style>
</head>
<body>
    <div class="nav">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">电视</a></li>
            <li><a href="#">家电</a></li>
            <li><a href="#">服务</a></li>
            <li><a href="#">平板</a></li>
        </ul>
        <p>hahah</p>
    </div>
</body>

WEB前端全系列/第一阶段：HTML5+CSS3模块/浮动与定位 160楼

为什么在div布局中color不能给div给予颜色而是要用

background-color

WEB前端全系列/第一阶段：HTML5+CSS3模块/初识CSS 161楼

为什么行内元素就不显示，设置成块元素就显示了呢？老师怎么没往下讲呢？还是这个问题有点低级，哈哈哈

WEB前端全系列/第一阶段：HTML5+CSS3模块/CSS应用技巧 162楼

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

body{

background-color: #f5f5f5;

}

.exhibit{

width: 1226px;

height: 628px;

margin: 0 auto;

/* background-color: aqua; */

}

.left{

float: left;

width: 234px;

height: 614px;

/* background-color: black; */

}

.right{

float: right;

width: 992px;

height: 614px;

/* background-color: #fff; */

}

.box{

float: left;

width: 234px;

height: 300px;

padding: 20 auto;

margin-bottom: 14px;

margin-left: 14px;

background-color: #fff;

text-align: center;

}

.sal{

height: 160px;

width:160px;

margin-top: 20px;

}

.ex{

height: 614px;

width: 234px;

}

.title{

margin: 0 10px 2px;

font-size: 14px;

font-weight: 400;

color: #333;

text-align: center;

}

.desc{

margin: 0 10px 10px;

height: 18px;

font-size: 12px;

color: #b0b0b0;

text-overflow: ellipsis;

white-space: nowrap;

text-align: center;

overflow: hidden;

}

.price{

margin: 0 10px 14px;

text-align: center;

color: #ff6700;

}

</style>

</head>

<body>

</div>

<h3 class="title">Redmi Note 11 5G</h3>