首页 > 解决方案 > 如何链接到css中的div并制作

有固定的宽度吗?

问题描述

我正在尝试将 html 链接到 css,但遇到问题并且卡住了。任何帮助表示赞赏

我尝试使用 div 类,但我是新手,所以不太确定该怎么做

HTML

<!DOCTYPE html>
<html>
<head>
    <title>About UnixCast</title>
    <link href="about.css" rel="stylesheet" type="text/css" />
</head>
<body>

    <div id="head">
        <div class="head">Hi there! I'm Lewis and welcome to UnixCast.com!</div>
        <div id="para">
        <div id="para1">
            <p>If you're reading this I just would like to say a huge thank you for taking the time to want to know who's behind UnixCast. I'm a full-time student with a big passion for learning. I enjoy studying physics and hope to get a degree in astrophysics sometime in the future. I've always had a passion for creating content online. From when YouTube was at the start of its big popularity boom, I fell in love with the idea of sharing content freely for everyone to see. My goals for my content are simple:
                <ul style="list-style-type:disc;">
                    <li>Share my passion and interest with the internet.</li>
                    <li>Educate my self on topics that I find interesting.</li>
                    <li>Inspire others to learn about the world around them.</li>
        </ul>
            </p>
        </div>
    </div>
    <div class="para2">
        <p>And that's basically it. If you feel like you'd enjoy my content then feel free to check out what I do by visiting my<a href="https://www.youtube.com/channel/UCPSlslWokRgiA3WEoMeqcFw?"> YouTube</a> and if you enjoy the content please consider subscribing! Have a great day and I hope to see you around!</p>
        </div>
    </div>
</body>
</html>

CSS

body{
    margin: 0px;
    padding: 0px;
    background-color: #19181D;
}
.head{
    font-family: sans-serif;
    font-size: 25px;
    color: white;
    position: relative;
    top: 10%;
    left: 5%;
    transform: translate(-50%, -50%);
}
.para1{
    font-family: sans-serif;
    font-size: 15px;
    color: white;
    position: relative;
    top: 120px;
    left: 5%;
    width: 320px;
    height: 320px;
    margin: 0 auto;
    transform: translate(-50%, -50%);
}

预期结果是让 html 与 css 链接

标签: htmlcsslinker-errors

解决方案


不知道你的html和css的水平,但是你的html需要调用css文件。你使用 .head 来调用你的 class = "head" 和你的 #head 来调用你的 id="head"。

由于您有 2 个头,我建议您使用不同的名称(以避免任何冲突)。 div="head_div"和其他id="head"->类似的东西!

如果你有你的css文件在一个文件夹中(比如说,称为CSS),你需要在你的href中定义路径(比如href="./CSS/cssfile.css

希望能帮助到你!

编辑:我的错,阅读您的文字并错过了标题-.-只需在<p>您想要更改的标签中添加一个 ID,然后在 CSS 中发挥您的魔力(设置您想要的宽度) <p id ="something"></p> CSS: #something{ css here; }


推荐阅读