个人信息界面

最新推荐文章于 2024-07-23 09:37:50 发布

syc暮云。

最新推荐文章于 2024-07-23 09:37:50 发布

阅读量3.2k

点赞数 2

文章标签： css html

本文链接：https://blog.csdn.net/zzfr_llex/article/details/105863629

版权

Markdown编辑器进行了界面设计更新，增加了图片拖拽、KaTeX数学公式、甘特图等功能。用户可自定义代码高亮样式，创建标题、列表、表格，并支持快捷键操作。还支持插入链接、图片、代码片，以及创建自定义列表和注脚。

摘要由CSDN通过智能技术生成

1、主页代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/xinxi.css">
    <title></title>

</head>
<body>
    <div class="nav"><h2>个人信息</h2></div>
    <div class="a">
        <div class="one">
            <input type="text" class="one1" placeholder="         |请输入旧密码"><br>
            <input type="text" class="one2" placeholder="         |请输入新密码"><br>
            <button class="one3">修改密码</button>
        </div>
        <div class="two">
            <div class="two1"><img src="img/11.jpg"> </div>
            <div class="text1">往事随风</div>
            <div class="two2">
                <div class="two2-one">999<br>粉丝</div>
                <div>99<br>关注</div>
            </div>
        </div>
        <div class="three">
            <div class="three1">
                <span class="three-image1"> </span>
                <span>修改密码</span>
            </div>
            <div class="three1">
                <span class="three-image2"> </span>
                <span>消息</span></button>
                <button>99</button>
            </div>
            <div class="three1">
                <span class="three-image3"> </span>
                <sapn>设置</sapn>
            </div>
            <div class="three1">
                <span class="three-image4"> </span>
                <sapn>退出登录</sapn>
            </div>
        </div>
    </div>
</body>
</html>

2、样式表

body{
		background-color: #fff0f5;
	}
    .a{
        	display: flex;
        	margin-top: 60px;
        	justify-content: space-around;
        	color: white;
        	flex-wrap: wrap;

    	}
	.one,.two,.three{
			width: 30%;
        	display: flex;
        	flex-direction: column;
        	align-items: center;
		}
    .one{
        	order:0;
        	background: #FFFFFF;
        	height: 200px;

    	}

	.nav{
			text-align: center;
		}
	.one1{
			width: 90%;
			height:70px;
        	margin-top: 20px;
			background: url(yonghumin.png) no-repeat ;
			border: 3px solid #E1DED6
		}
	.one2{
			width: 90%;
			height: 70px;
			background:  url(password.png) no-repeat ;
			border: 3px solid #E1DED6;
		}
	.one3{
			width: 100%;
			height: 80px;
			background-color: #EF8D32;
			margin-top:-10px;
			color: white;
        	cursor:pointer;
		}
	.two1 img{
        	margin-top: 5px;
			width: 80%;
			height: 80%;
        	border-radius: 50%;
		}
    .two1{
        	display: flex;
        	justify-content: center;
        	align-items: center;
        	width: 100%;
        	background-color:  #ffffff;
    	}
    .two2{    
			width: 100%;
        	height: 70px;
        	display: flex;
        	align-items: center;
        	background-color: #EF8D32;
    	}
    .two2 div{
        	width: 100%;
        	margin-top: 8px;
        	font-size: 14px;
    		text-align: center;
    	}
    .two2-one{
        	border-right: 1px solid white;
    	}
    .text1{
        	color: red;
      		width: 100%;
        	font-size: 18px;
        	margin-top: -10px;
        	line-height: 40px;
        	text-align: center;
        	background-color: #FFFFFF;
    	}
    .three1{
    		width: 100%;
        	height: 50px;
        	color: white;
       		cursor:pointer;
        	background-color:#EF8D32;
        	border: 1px solid indianred;
    	}
    .three-image1{
        	width:25px;
			height: 25px;
        	margin-top: 10px;
        	display: inline-block;
        	background: url("../img/key.png") no-repeat -1px 2px;
    	}
    .three-image2{
         	width:25px;
			height: 25px;	
        	margin-top: 10px;
        	display: inline-block;
        	background: url("../img/key.png") no-repeat -30px 2px;
      	}
    .three-image3{
            width:25px;
            height: 25px;
            margin-top: 10px;
            display: inline-block;
            background: url("../img/key.png") no-repeat -60px 2px;
        }
    .three-image4{
            width:25px;
            height: 25px;
            margin-top: 10px;
            display: inline-block;
            background: url("../img/key.png") no-repeat -90px 2px;
        }
    .one3:hover{
        	background-color: #ee5a32;
        }
    .three1:hover{
        	background-color: #ee5a32;
        }
    button{
    		border: none;
        	float: right;
        	margin-top: 13px;
        	margin-right: 4px;
        	border-radius: 4px;
        	background-color: pink;
        }
    @media screen and (max-width: 500px) {
        .one,.two,.there{
            width: 100%;
            margin-top: 10px;
        }
    }

在这里插入图片描述

欢迎使用Markdown编辑器

你好！这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。

新的改变

我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：

全新的界面设计 ，将会带来全新的写作体验；
在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展示；
增加了 图片拖拽 功能，你可以将本地的图片直接拖拽到编辑区域直接展示；
全新的 KaTeX数学公式 语法；
增加了支持甘特图的mermaid语法¹ 功能；
增加了 多屏幕编辑 Markdown文章功能；
增加了 焦点写作模式、预览模式、简洁写作模式、左右区域同步滚轮设置 等功能，功能按钮位于编辑区域与预览区域中间；
增加了 检查列表 功能。

功能快捷键

撤销：Ctrl/Command + Z
重做：Ctrl/Command + Y
加粗：Ctrl/Command + B
斜体：Ctrl/Command + I
标题：Ctrl/Command + Shift + H
无序列表：Ctrl/Command + Shift + U
有序列表：Ctrl/Command + Shift + O
检查列表：Ctrl/Command + Shift + C
插入代码：Ctrl/Command + Shift + K
插入链接：Ctrl/Command + Shift + L
插入图片：Ctrl/Command + Shift + G
查找：Ctrl/Command + F
替换：Ctrl/Command + G