html，css初学

qq_48566899

已于 2023-07-21 13:25:49 修改

阅读量376

点赞数

分类专栏： java 文章标签： html css 前端

于 2023-07-21 13:25:16 首次发布

本文链接：https://blog.csdn.net/qq_48566899/article/details/131848874

版权

java 专栏收录该内容

13 篇文章 5 订阅

订阅专栏

安装VSCODE ,插件：live server ，html support

html

然后为了更好地理解，请逐步输入，并及时查看效果

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>

    </head>
    <body>
        <div class="box">        
            <h1>非顶级程序员</h1>
            <h2>hhh </h2>
            <img src="./test2.jpg" alt="图片" width="200px">
            <br>
            <a href="http://www.baidu.com" target="_blank">百度</a>//跳转页面到百度
            <br>//换行
            hello world 
        </div>

    </body>
</html>

添加style设置居中

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            .box{
                width:600px;
                height:1200px;
                margin:auto;
                top:0;
                left:0;
                right: 0;
                bottom: 0;
                text-align: center;
            }

        </style>
    </head>
    <body>
        <div class="box">        
            <h1>非顶级程序员</h1>
            <h2>hyq </h2>
            <img src="./test2.jpg" alt="图片" width="200px">
            <br>
            <a href="http://www.baidu.com" target="_blank">百度</a>
            <br>
            hello world bilibili
        </div>

    </body>
</html>

css

demo3.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>Document</title>
    <style>
        h2{
            color:purple;
        }
    </style>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1 style="color:red;">标题</h1>
    <h2>hello</h2>
    <h3>world</h3>
</body>
</html>

在这里插入图片描述
创建style.css

h3{
    color:green;
}

类选择器
.my_p{}

id选择器
#my_p{}

属性选择器
a[title=""]{}

通用选择器
*{
font-family:"  "
}

制作一个简单的登陆页面

理解box

在这里插入图片描述

原文链接：https://blog.csdn.net/Laollaoaolao/article/details/119454636

label

< label> 标签为 input 元素定义标注（标记

<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<p>点击其中一个文本标签选中选项：</p>

<form action="demo_form.php">
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" value="male"><br>
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" value="female"><br><br>
  <input type="submit" value="提交">
</form>

</body>
</html>

在这里插入图片描述

a href=“#”

href在是CSS代码的一种意思是指定超链接目标的URL。在HTML和JSP页面代码里的作用是标签，其作用是插入一个超链接，“#”是默认当前页面，可以把#换成想跳转的页面。

\通常有如下用法： <a href="#" onclick="window.close()">关闭</a> 。

将href="#"是指链接到当前页面，其实是无意义的，页面也不会刷新，关键是后面的onclick，当点击“关闭”时，会执行window.close()代码。

display:flex？

一：display:flex 布局
display:flex 是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。

Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性会失效。

二：flex的六大属性
flex-direction 容器内元素的排列方向(默认横向排列)
1：flex-direction:row; 沿水平主轴让元素从左向右排列

2：flex-direction:column; 让元素沿垂直主轴从上到下垂直排列

3：flex-direction:row-reverse;沿水平主轴让元素从右向左排列

原文链接：https://blog.csdn.net/Vodka688/article/details/115190822

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="box">
        <h2>Login</h2>
        <div class="input-box">
            <label >账号</label>
            <input type="text">
        </div>
        <br>
        <div class="input-box">
            <label>密码</label>
            <input type="password" >
        </div>
        <div class="btn-box">
            <a href="#">忘记密码</a>
            <div>
                <botton>登陆</botton>
                <botton>注册</botton>
            </div>
        </div>
    </div>
</body>
</html>

@charset "utf-8";

*{
    margin:0;
    padding:0;
}
body{
    display:flex;
    flex-direction: column;
    justify-content:center;
    align-items: center;
    height: 100vh;
    background: url(./test2.jpg) no-repeat;
    background-size: cover;
}
.box{
    display:flex;
    flex-direction: column;
    justify-content:center;
    align-items: center; 
    width: 350px;
    height: 380px;
    border-top: 1px solid rgba(255,255,255,0.5);
    border-left: 1px solid rgba(s255,255,255,0.5);
    border-bottom: 1px solid rgba(255,255,255,0.2);
    border-right: 1px solid rgba(255,255,255,0.2);
    backdrop-filter: blur(5px);

}
.box > h2 {
    color: rgba(22, 21, 21, 0.9);
    margin-bottom: 20px;
}
.box .input-box {
    display: felx;
    flex-direction: column;
    justify-content: center;
    align-items: start;
}

.box .input-box > label {
    color: rgba(85, 36, 36, 0.9);
    margin: 10px;
    font-size: 15px;
}

.box .input-box > input {
    color: rgba(85, 36, 36, 0.9);
    font-size: 14px;
    height:20px;
    width: 200px;
    background: rgba(255,255,255,0.3);
    border:1px solid rgba(255,255,255,0.5);
    border-radius: 5px;
    transparent:3s;
    outline: none;
    padding:0 10px;


}
.box .input-box > input:focus {
    border: 1px solid rgba(255,255,255,0.2);


}
.box .btn-box{
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 250px;
    align-items: start;
    text-align:center
    
}

.box .btn-box > a:hover{
  
    color:rgba(255,255,255,1)；  
   
}

.box .btn-box > div{
    display: flex;
    flex-direction: rows;
    
    justify-content: center;
    align-item:start;

   
}
.box .btn-box > div >botton{
    margin:0px;
    
    width:130px;
    border:1px solid rgba(41, 33, 33, 0.5);
    height:25px;
    padding:1px;
    border-radius: 5px;
    background-color: rgb(232, 236, 240);
}

.box .btn-box > div >botton:nth-of-type(2){
    margin-left: 10px;
    
    width:130px;
   
}

在这里插入图片描述