HTML与CSS实例介绍

最新推荐文章于 2023-02-07 10:29:16 发布

keep_humble

最新推荐文章于 2023-02-07 10:29:16 发布

阅读量358

点赞数

文章标签： html和css实例解析 css和html分离完整代码 css和html工程目录结构

本文链接：https://blog.csdn.net/qq_43270444/article/details/102723958

版权

大二期末结束的时候自己接触过这方面的内容，但是自己当时没有好好学，现在实习需要，就自己从网上搜了一些代码，但是由于自己也没看什么教学视频，在调代码的过程中还是走了很多弯路，记录一下自己掉过的坑，如有错误，还麻烦各位指正。
1.先发一张工程目录图，当时不知道结构，文件夹放错了位置，导致后期调试出了很多错，希望此图对大家有帮助
目录这里插入图片描述
2.附上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
    <link rel="stylesheet" media="screen" href="/css/login.css">
</head>
<body>
<div class="box">
    <h2>Login</h2>
    <form class="form-box">
        <div class="inputBox">
            <input type="text" name="" required="">
            <label>Username</label>
        </div>
        <div class="inputBox">
            <input type="password" name="" required="">
            <label>Password</label>
        </div>
        <input type="submit" name="" value="提交">

    </form>
</div>
</body>
</html>

在这里我掉坑了，因为我用的是css和html分离，要用到<link rel="stylesheet" media="screen" href="/css/login.css">，但是由于我最开始参考百度内容，把css的文件夹位置放错了，导致css样式一直无法生效
3.login.css代码：

body{
margin: 0;
padding: 0;
background: url("…/images/3.jpg");
font-family: sans-serif;
background-size: cover;
}
.box{
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
width: 400px;
padding: 40px;
background: rgba(0,0,0,.8);
box-sizing: border-box;
box-shadow: 0 15px 25px rgba(0,0,0,.5);
border-radius: 10px;

}
.box h2{
margin: 0 0 30px;
padding: 0;
color: #fff;
text-align: center;
}
.box .inputBox{
position: relative;
}
.box .inputBox input{
width: 100%;
padding: 10px 0;
font-size: 16px;
color: #fff;
margin-bottom: 30px;
border-bottom: 1px solid #fff;
outline: none;
background: transparent;

}
.box .inputBox label{
position: absolute;
top:0;
left: 0;
padding: 10px 0;
font-size: 16px;
color: #fff;
pointer-events: none;
transition: .5s;
}
.box .inputBox input:focus ~ label,
.box .inputBox input:valid ~label{
top:-18px;
left: 0;
color: #03a9f4;
font-size: 12px;
}
.box input[type=‘submit’]{
background: transparent;
border: none;
outline: none;
color: #03a9f4;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
top: 50%;
left: 50%;

}

我在这里又掉坑了，主要是背景图片的url出现了错误，大家一定不要漏写啊，我当时写的是/images/3.jpg,果断不对；如果说你用的不是css和html的分离，那么你的url应该是：

 background: url("/images/3.jpg");

在这里插入图片描述
4.效果图：

最后想说，大家需要现成的css样式进行调试，可以到禅意花园进行下载奥。

keep_humble

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML与CSS实例介绍

大二期末结束的时候自己接触过这方面的内容，但是自己当时没有好好学，现在实习需要，就自己从网上搜了一些代码，但是由于自己也没看什么教学视频，在调代码的过程中还是走了很多弯路，记录一下自己掉过的坑，如有错误，还麻烦各位指正。1.先发一张工程目录图，当时不知道结构，文件夹放错了位置，导致后期调试出了很多错，希望此图对大家有帮助2.附上代码：<!DOCTYPE html><ht...
复制链接

扫一扫