响应式个人信息页面项目7-2用html5+css3

最新推荐文章于 2023-06-18 17:13:21 发布

Mr_jianghanlin

最新推荐文章于 2023-06-18 17:13:21 发布

阅读量3k

点赞数 6

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

本文链接：https://blog.csdn.net/mr_jianghanlin/article/details/105659987

版权

前端专栏收录该内容

23 篇文章 2 订阅

订阅专栏

项目7-2社交网站个人信息页面

首先来看看最终的效果图形：

当网页缩小到一定的范

首先要把第一张图片的框架搭建起来，应用浮动布局，和百分比布局都是可以的；有了基础的框架在进行进一步的美化，当做出第一张图的效果时，在上面的基础上加上媒体查询设置效应的参数就可以达到上述的效果图形。

项目中用到精灵图技术，精灵图有利于给用户更好的体验，节约了网页加载的时间;图片我会放到最后.

媒体查询的语法:

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

媒体查询的类型

在这里插入图片描述

简单的语法格式：

@media only screen and (max-width: 500px) {
    .gridmenu {
        width:100%;
    }

    .gridmain {
        width:100%;
    }

    .gridright {
        width:100%;
    }
}

下面是HTML的代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="one.css">
    <title></title>

</head>

<body>
    <div class="nav"> 个人信息</div>
    <div class="content">
        <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="touxiang.jpg"> </div>
            <div class="text1">科学怪人</div>
            <div class="two2">
                <div class="two2-one">2.5万<br>粉丝</div>
                <div> 100<br>关注</div>
            </div>
        </div>
        <div class="there">
            <div class="there1">
                <span class="there-images1"> </span>
                <span>修改密码</span>
            </div>
            <div class="there1">
                <span class="there-images2"> </span>
                <span>消息</span></button>
                <button>13</button>
            </div>
            <div class="there1">
                <span class="there-images3"> </span>
                <sapn>设置</sapn>
            </div>
            <div class="there1">
                <span class="there-images4"> </span>
                <sapn>退出登录</sapn>
            </div>

        </div>

    </div>



</body>

</html>

下面是css代码：


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

    }
	.one,.two,.there{
		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: 30%;


	}
    .two1{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        background-color:  #ffffff;


    }
    .two2{
        display: flex;

        width: 100%;
        height: 70px;
        background-color: #EF8D32;
        align-items: center;
    }
    .two2 div{
        width: 100%;
        margin-top: 8px;

        text-align: center;
        font-size: 14px;
    }
    .two2-one{
        border-right: 1px solid white;
    }
    .text1{
        font-size: 18px;
        color: red;
        margin-top: -10px;
        width: 100%;
        text-align: center;
        line-height: 40px;
        background-color: #FFFFFF;
    }
    .there1{width: 100%;
        height: 50px;
        background-color: #EF8D32;
        border: 1px solid indianred;
        color: white;
        cursor:pointer;

    }
    .there-images1{
        display: inline-block;

        width:25px;
        margin-top: 10px;
        height: 25px;
        background: url("img-sprite.png") no-repeat -1px 2px;
    }
    .there-images2{
          display: inline-block;

          width:25px;
          margin-top: 10px;
          height: 25px;
          background: url("img-sprite.png") no-repeat -30px 2px;
      }
    .there-images3{
            display: inline-block;
            width:25px;
            margin-top: 10px;
            height: 25px;
            background: url("img-sprite.png") no-repeat -60px 2px;
        }
    .there-images4{
              display: inline-block;
              width:25px;
              margin-top: 10px;
              height: 25px;
              background: url("img-sprite.png") no-repeat -90px 2px;
          }
    .one3:hover{
        background-color: #ee5a32;
    }
    .there1:hover{
           background-color: #ee5a32;
       }
    button{
        margin-top: 15px;
        float: right;
        background-color: #505771;
        border-radius: 5px;
        border: none;
        margin-right: 3px;}
    @media screen and (max-width: 500px) {
        .one,.two,.there{
            width: 100%;
            margin-top: 10px;

        }
    }

这个项目用的的图片：

在这里插入图片描述

Mr_jianghanlin

关注

6
点赞
踩
22

收藏

觉得还不错? 一键收藏
0
评论
响应式个人信息页面项目7-2用html5+css3

项目7-2社交网站个人信息页面首先来看看最终的效果图形：当网页缩小到一定的范首先要把第一张图片的框架搭建起来，应用浮动布局，和百分比布局都是可以的；有了基础的框架在进行进一步的美化，当做出第一张图的效果时，在上面的基础上加上媒体查询设置效应的参数就可以达到上述的效果图形。媒体查询的语法:@media mediatype and|not|only (media feature) { ...
复制链接

扫一扫