会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 134361个问题
WEB前端全系列/第一阶段:HTML5+CSS3模块/浮动与定位 301楼
WEB前端全系列/第一阶段:HTML5+CSS3模块/前端入门与基础知识 302楼
WEB前端全系列/第一阶段:HTML5+CSS3模块/商城官网项目 303楼

内联式可以不用加type=text?css吗?

但是我下面的这样也是可以运行的欸,用的还比较多

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<style type="text/css">

    *{

        margin: 0;

        padding: 0;

        text-decoration: none;

        box-sizing: border-box;

    }

    body{

        min-height: 100vh;

        background-color: skyblue;

    }

    .login-box{

        width: 360px;

        background: #fff;

        height: 580px;

        padding: 80px 40px;

        border-radius: 10px;

        position: absolute;

        left: 50%;

        top:50%;

        transform: translate(-50%,-50%);

    }

    .login-box h1{

        text-align: center;

        margin-bottom: 60px;


    }

    .txtb{

        position: relative;

        margin: 30px 0;

    }

    .txtb input{

        width: 280px;

        height: 50px;

        border: 1px solid #bbb;

        border-radius: 5%;

    }

    .txtb select{

        width: 200px;

        height: 25px;

        border: 1px solid #bbb;

        border-radius: 5%;

    }

    .logbtn{

        display: block;

        width: 100%;

        height: 50px;

        border: none;

        font-size: 20px;

        background-size: 200%;

        background-color: #ff6300;

        outline: none;

        cursor: pointer;

        transition: .5s;

    }

    .logbtn:hover{

        background-position: right;

    }

    .bottom-text{

        margin-top: 60px;

        text-align: center;

        font-size: 13px;

       

    }


</style>

<body>

<form action="LoginServlet" method="post" class="login-box" >

    <h1>宿舍管理系统</h1>

    <div class="txtb">

        <input type="text" name="username"><br/>

    </div>

    <div class="txtb">

        <input type="password" name="password"><br/>

    </div>

    <div class="txtb">

        <p>你选择登录的身份是?</p>

        <select>

            <option>学生</option>

            <option>老师</option>

            <option>宿舍管理员</option>

        </select>

    </div>

    <input type="submit" class="logbtn" value="提交">


    <div class="bottom-text">


    </div>


</form>

</body>

</html>



WEB前端全系列/第一阶段:HTML5+CSS3模块/初识CSS 305楼
WEB前端全系列/第一阶段:HTML5+CSS3模块/浮动与定位 310楼
WEB前端全系列/第一阶段:HTML5+CSS3模块/CSS3新特性 311楼
WEB前端全系列/第一阶段:HTML5+CSS3模块/商城官网项目 312楼
WEB前端全系列/第一阶段:HTML5+CSS3模块/HTML5基础元素 313楼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./iconfont.css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: #f1f1f1;
        }
        .slide{
            width: 234px;
            height: 420px;
            background-color: rgba(105,101,101,0.6);
            padding: 20px 0;
            margin: 100px;
            position: relative;
        }
        .slide ul{
            list-style: none;
        }
        .slide ul li{
            width: 100%;
            height: 42px;
            line-height: 42px;
            text-align: left;
            padding-left: 30px;
            box-sizing: border-box;
        }
        .slide ul li:hover{
            background-color: #ff6700;
           
        }
        .slide ul li a{
            display: inline-block;
            text-decoration: none;          
            color: #fff;
           
        }
       
        .slide .iconfont{
            display: inline-block;
            font-size: 24px;
            color: #fff;
            position: absolute;
            right: 10px;
        }
        .slide-list{
            width: 992px;
            height: 460px;
            background-color: #fff;
            position: absolute;
            top: 0;
            left: 234px;
            border: 1px solid #e0e0e0;
            border-left:none ;
            box-sizing: border-box;
            box-shadow: 0 4px 16px rgba(0,0,0,0.18);
            display: none;
            overflow: hidden;
            clear: both;
        }
        /* 鼠标滑动到li标签上,对应的div出现 */
        .slide ul li:hover>.slide-list{
            display: block;
        }
        .slide-list .text{
            display: block;
            width: 208px;
            height: 70px;
            line-height: 70px;
            /* background-color: red;     */
            float: left;
            margin-left: 30px;
            margin-top: 7px;
            font-size:normal;
        }
        .slide-list .text:hover>i{
            color: #ff6700;

        }
        .slide-list .text img{
            display: inline-block;
            /* 垂直对齐方式 */
            vertical-align: middle;
           
           
        }
        .slide-list .text i{
            font-size:normal;
            display: inline-block;
            color:black;
            font-size: 16px;  
        }
    </style>
</head>
<body>

    <div class="slide">
        <ul>
            <li>
                <a href="#">手机</a>
                <span class="iconfont icon-jiantou"></span>
                <div class="slide-list">
                    <a  class="text" href="#">
                        <img src="./Redmi K50 Pro.webp" >
                        <i>Redmi K50 Pro</i>
                    </a>
                    <a  class="text" href="#">
                        <img src="./Xiaomi 12X.webp" alt="">
                        <i>Xiaomi 12X</i>
                    </a>
                    <a  class="text" href="#">
                        <img src="./Xiaomi Civi.webp" alt="">
                        <i>Xiaomi Civi</i>
                    </a>
                    <a  class="text" href="#">
                        <img src="./Xiaomi 10S.webp" alt="">
                        <i>Xiaomi 10S</i>
                    </a>
                    <a  class="text" href="#">
                        <img src="./Redmi K50 Pro.webp" alt="">
                        <i>Redmi K50</i>
                    </a>
                    <a  class="text" href="#">
                        <img src="./Redmi K50 Pro.webp" >
                        <i>Redmi K50 Pro</i>
                    </a>
                    <a  class="text" href="#">
                        <img src="./Xiaomi 12X.webp" alt="">
                        <i>Xiaomi 12X</i>
                    </a>
                    <a  class="text" href="#">
                        <img src="./Xiaomi Civi.webp" alt="">
                        <i>Xiaomi Civi</i>
                    </a>
                    <a  class="text" href="#">
                        <img src="./Xiaomi 10S.webp" alt="">
                        <i>Xiaomi 10S</i>
                    </a>
                    <a  class="text" href="#">
                        <img src="./Redmi K50 Pro.webp" alt="">
                        <i>Redmi K50</i>
                    </a>
                    <a  class="text" href="#">
                        <img src="./Redmi K50 Pro.webp" >
                        <i>Redmi K50 Pro</i>
                    </a>
                    <a  class="text" href="#">
                        <img src="./Xiaomi 12X.webp" alt="">
                        <i>Xiaomi 12X</i>
                    </a>
                    <a  class="text" href="#">
                        <img src="./Xiaomi Civi.webp" alt="">
                        <i>Xiaomi Civi</i>
                    </a>
                    <a  class="text" href="#">
                        <img src="./Xiaomi 10S.webp" alt="">
                        <i>Xiaomi 10S</i>
                    </a>
                    <a  class="text" href="#">
                        <img src="./Redmi K50 Pro.webp" alt="">
                        <i>Redmi K50</i>
                    </a>
                    <a  class="text" href="#">
                        <img src="./Redmi K50 Pro.webp" >
                        <i>Redmi K50 Pro</i>
                    </a>
                    <a  class="text" href="#">
                        <img src="./Xiaomi 12X.webp" alt="">
                        <i>Xiaomi 12X</i>
                    </a>
                    <a  class="text" href="#">
                        <img src="./Xiaomi Civi.webp" alt="">
                        <i>Xiaomi Civi</i>
                    </a>
                    <a  class="text" href="#">
                        <img src="./Xiaomi 10S.webp" alt="">
                        <i>Xiaomi 10S</i>
                    </a>
                    <a  class="text" href="#">
                        <img src="./Redmi K50 Pro.webp" alt="">
                        <i>Redmi K50</i>
                    </a>
                    <a  class="text" href="#">
                        <img src="./Redmi K50 Pro.webp" >
                        <i>Redmi K50 Pro</i>
                    </a>
                    <a  class="text" href="#">
                        <img src="./Xiaomi 12X.webp" alt="">
                        <i>Xiaomi 12X</i>
                    </a>
                    <a  class="text" href="#">
                        <img src="./Xiaomi Civi.webp" alt="">
                        <i>Xiaomi Civi</i>
                    </a>
                    <a  class="text" href="#">
                        <img src="./Xiaomi 10S.webp" alt="">
                        <i>Xiaomi 10S</i>
                    </a>
                    <a  class="text" href="#">
                        <img src="./Redmi K50 Pro.webp" alt="">
                        <i>Redmi K50</i>
                    </a>
                    <a  class="text" href="#">
                        <img src="./Redmi K50 Pro.webp" >
                        <i>Redmi K50 Pro</i>
                    </a>
                    <a  class="text" href="#">
                        <img src="./Xiaomi 12X.webp" alt="">
                        <i>Xiaomi 12X</i>
                    </a>
                    <a  class="text" href="#">
                        <img src="./Xiaomi Civi.webp" alt="">
                        <i>Xiaomi Civi</i>
                    </a>
                    <a  class="text" href="#">
                        <img src="./Xiaomi 10S.webp" alt="">
                        <i>Xiaomi 10S</i>
                    </a>
                   
                </div>
            </li>
            <li>
                <a href="#">电视</a>
                <span class="iconfont icon-jiantou"></span>
                <div class="slide-list">小米2</div>
            </li>
        </ul>
    </div>
   
</body>
</html>

image.png


为什么这个字体我设置的normal但是还是斜体

WEB前端全系列/第一阶段:HTML5+CSS3模块/CSS应用技巧 314楼
WEB前端全系列/第一阶段:HTML5+CSS3模块/商城官网项目 315楼

课程分类

百战程序员微信公众号

百战程序员微信小程序

©2014-2025百战汇智(北京)科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园
网站维护:百战汇智(北京)科技有限公司
京公网安备 11011402011233号    京ICP备18060230号-3    营业执照    经营许可证:京B2-20212637