实验二 响应式、弹性盒子应用

最新推荐文章于 2020-11-20 09:07:48 发布
最新推荐文章于 2020-11-20 09:07:48 发布
阅读量258 收藏 2
点赞数
分类专栏： H5+CSS3 文章标签： html5 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fantasy_geek/article/details/105664561
版权

HTML:

<!DOCTYPE HTML>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>个人信息页面</title>
	<link href="css/personal_info.css" rel="stylesheet" type="text/css" media="all"/>
</head>
<body>
<h1>个人信息</h1>
<div class="element">
	<div class="element-left">
		<div class="edit">
			<form>
				<ul>
					<li>
						<input type="text" placeholder="请输入旧密码"  ><a href="#" class="user1"></a>
					</li>
					<li>
						<input type="text" placeholder="请输入新密码"  ><a href="#" class="lock1"></a>
					</li>
				</ul>
			</form>
			<div class="submit">
				<input type="submit"  value="修改密码" >
			</div>
		</div>
	</div>
	<div class="element-right">
		<div class="teddy-bear">
			<div class="teddy-text">
				<img src="images/b1.jpg" alt=""  class="img-responsive">
				<h4>科学怪人</h4>
			</div>
			<div class="teddy-follow">
				<ul>
					<li class="folw-h"><h3>2.5万</h3>
						<p>粉丝</p>
					</li>
					<li class="folw-r"><h3>100</h3>
						<p>关注</p>
					</li>
					<div class="clear"></div>
				</ul>
			</div>
		</div>
	</div>
	<div class="element-last">
		<ul class="content">
			<li class="menu button">
				<a href="#">个人资料<span class="icon"></span></a>
			</li>
			<li class="menu button">
				<a href="#">消息<span class="icon stat"></span><i>13</i></a>
			</li>
			<li class="menu button">
				<a href="#">设置<span class="icon msg"></span></a>
			</li>
			<li class="menu info button">
				<a href="#">退出登录<span class="icon signout"></span></a>
			</li>
		</ul>
	</div>
	<div class="clear"> </div>
</div>
</body>
</html>

CSS:


*{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
ul{list-style:none;}
body {
    font-family: 'Roboto', sans-serif;
    background: url(../images/2.png)repeat 0px 0px;
    font-size: 100%;
}
a {
    text-decoration: none;
}
a:hover {
    transition: 0.5s all;
    -webkit-transition: 0.5s all;

}
h1 {
    text-align: center;
    font-size: 3em;
    color: #3C2F24;
    margin: 2em 0em 1em 0em;
    font-family: '΢���ź�';
}
.edit {
    margin:0% auto;
    background: #fff;
}
form {
    padding: 10% 4% 8% 4%;
}
form li {
    list-style: none;
    width: 100%;
    font-weight: 500;
    border: 1px solid #ccc;
    background: #fff;
    margin: 1em 0;
    outline: none;
}

input[type="text"] {
    width: 83%;
    padding:1em 0em 1em 1.7em;
    color: #858282;
    font-size: 15px;
    outline: none;
    background: none;
    font-weight: 500;
    border: none;
}
.user1 {
    height: 20px;
    width: 20px;
    display: block;
    float: left;
    margin: 12px -17px 0px 0px;
    border-right: 1px solid #999;
    padding: 5px 16px 0 0;
    background: url(../images/user.png) no-repeat 8px 2px ;
}
.lock1 {
    height: 20px;
    width: 20px;
    display: block;
    float: left;
    margin: 12px -17px 0px 0px;
    border-right: 1px solid #999;
    padding: 5px 16px 0 0;
    background: url(../images/lock.png) no-repeat 8px 2px ;
}
.submit input[type="submit"]{
    font-size:20px;
    font-weight: 400;
    color: #fff;
    cursor: pointer;
    outline: none;
    padding:21px 20px;
    width: 100%;
    border: none;
    transition: 0.1s all;
    -webkit-transition: 0.1s all;
    background: #ef8d32;

}
input[type="submit"]:hover{
    background:#ee5a32;
}
/* ribbon style */
.h2 h2 {
    color: #fff;
    font-size: 1.2em;
    padding: 7px 9px 5px 27px;
    font-weight: 300;
}
/*--*/
.icon{
    background: url(../images/img-sprite.png);
    width: 25px;
    height: 23px;
    display: inline-block;
    float:left;
}
.icon {
    background: url(../images/img-sprite.png) no-repeat -1px -2px;
}

.stat{
    background: url(../images/img-sprite.png) no-repeat -30px -4px;
}

.msg{
    background: url(../images/img-sprite.png) no-repeat -62px -2px;
}

.signout{
    background: url(../images/img-sprite.png) no-repeat -93px -2px;
}
ul.content {
    width: 100%;
    margin: 0 auto;
    background: #ef8d32;
    font-weight: 100;
}
li.button a {
    padding: 23.5px 27px;
    margin: 0;
    display: block;
}
li.button {
    list-style: none;
    text-align: left;
}
li.menu{
    padding: 0;
    width: 100%;
    border-bottom: 1px solid #CD5F4A;
    margin: 0;
}
li.menu:hover {
    background: #ee5a32;
}
li.button a:hover{
    text-decoration:none;
}
li.button a span{
    margin-right: 22px;
}
li.menu.info {
    border-bottom: none;
}
li.button i {
    background: #505771;
    float: right;
    padding: 4px 12px;
    font-size: 13px;
    display: block;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    font-style: normal;
}
a, a:visited {
    color:#fff;
}
p{
    padding:10px;
    text-align:center;
}
.element {
    width: 60%;
    margin: 0 auto 7em;
    padding: 2em;
    display: flex;   
    flex-flow: row;   
}
.element-left {
    margin:0 1.5%;
    flex: 3.3 ;    
    order: 1;      
}
.element-right {
    margin:0 1.5%;
    flex: 3.3 ;     
    order:2;       
}
.element-last {
    margin:0 1.5%;
    flex: 3.3 ;    
    order:3;        
}
/*--teddy-bear--*/
.teddy-bear {
    text-align: center;
}
.teddy-text {
    background: #fff;
    padding: 1em 1em;
}

.teddy-text h4 {
    color: #ee5a32;
    font-size: 1.2em;
    margin: 0.5em 0 0;
}
.teddy-text img {
    border-radius: 70px;
    border: 3px solid #ee5a32;
    padding: 8px;
    width: 60%;
}
.teddy-follow {
    background: #ef8d32;
    padding: 0.7em 0em 0.7em 0em;
}
.teddy-follow li {
    display: inline-block;
    text-align: center;
    float: left;
    width: 49%;
}
.teddy-follow li h3 {
    font-size: 0.95em;
    color: #fff;
    font-weight: bold;
}
.teddy-follow li p {
    font-size: 0.8em;
    color: #fff;
}
.teddy-follow li.folw-h {
    border-right: 1px solid #fff;
}
.element-bg-img img {
    border-radius: 6px 6px 0px 0px;
}

.temperatur h2 {
    color: #ee5a32;
    font-size: 3.2em;
    display: inline-block;
    vertical-align: top;
    font-family: 'Roboto', sans-serif;
}

.clear{
    clear:both; 
}

@media(max-width:1366px){
    input[type="text"], input[type="password"] {
        padding: 1em 0em 1em 0.7em;
    }
    .user1 {
        margin: 12px -3px 0px 0px;
        padding: 5px 10px 0 0;
    }
    .lock1 {
        margin: 12px -3px 0px 0px;
        padding: 5px 10px 0 0;
    }
}
@media(max-width:1280px){
    input[type="text"], input[type="password"] {
        width: 75%;
    }
}
.element {
    width: 82%;
    margin: 0 auto 6em;
}
form {
    padding: 12% 4% 12% 4%;
}

@media(max-width:768px){
    .element {
        width: 80%;
    }
    li.button a {
        padding: 23.5px 16px;
    }
    input[type="text"] {
        width: 60%;
    }
    .teddy-text h4 {
        font-size: 1em;
    }

    li.button a {
        padding: 22.5px 10px;
    }
}
@media (max-width: 667px){
    input[type="text"] {
        width: 70%;
    }
    form {
        padding: 13% 6% 13% 6%;
    }
    .teddy-text h4 {
        font-size: 0.92em;
    }
}
@media (max-width: 640px){
    .element{
        margin: 0 auto 2em;
        flex-flow: column; 
    }
    .element-left,.element-right,.element-last{
        order: 0;
        margin: 1%;
    }
    h1 {
        font-size: 2em;
        margin: 1em 0em 0.5em 0em;
    }

    form {
        padding: 13% 13% 13% 13%;
    }
    input[type="text"] {
        width: 85%;
    }
    ul.content {
        width:100%;
    }
}
@media (max-width: 600px){
    input[type="text"] {
        width: 80%;
    }
}
@media (max-width: 568px){
    input[type="text"] {
        width: 70%;
    }
}

断点效果：
在这里插入图片描述

任由天高
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
医疗研究实验室响应式网站模板
01-22
医疗研究实验室响应式网站模板
CSS3 -webkit-transition(属性渐变)
热门推荐
tuhuolong的专栏
10-16 3万+
transition(属性渐变):"CSS Transitions allow property changes in CSS values to occur smoothly over a specified duration" -webkit-transition：CSS属性(none|all|属性)  持续时间  时间函数  延迟时间 CSS属性(transition-pro
CSS3 Transition属性详解
weixin_34409357的博客
06-01 212
  W3C标准中对CSS3的transition这是样描述的:“CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。” 下面我们从最简单的语法和属性值开始一步一步来学习transition的具体使用： 语法：   1 2 3 ...
响应式Web开发实验一代码及实验结果
杨涛的博客
03-26 820
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ...
Css3响应布局 弹性盒子
yyf0409的博客
08-08 600
弹性盒子（flexbox） 组成：弹性容器（Flex container）和弹性子元素（Flex  item） 弹性容器（Flex container）： display:flex|inline-flex; 内部包含一个或多个弹性子元素 注意：设置为弹性容器后，子元素的float/clear/vertical-align属性将失效 属性  1.flex-direction
教育实验bootstrap响应式html静态模板
12-04
教育实验bootstrap响应式html静态模板
响应式开发alibaixiu应用首页
最新发布
01-06
响应式开发alibaixiu应用首页
应用商店APP团队响应式网页模板
01-22
应用商店APP团队响应式网页模板
响应式设计：固定比例（弹性盒子）
小头Sophia
12-30 7476
1.固定的百分比    （聚划算的手机站点） 2.决绝两边盒子宽度固定，中间盒子宽度随浏览器的大小而变化的问题（固比固的方法） 示例代码： html> lang="en"> charset="UTF-8"> 固比固的方法 /* 清空所有的margin和padding */ *{
CSS3 -webkit-transition
weixin_43219354的博客
09-16 8054
transition(属性渐变): “CSS Transitions allow property changes in CSS values to occur smoothly over a specified duration” 过渡——Transition在W3C的描述：“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击...
html5 CSS过度-webkit-transition
Allen_白的专栏
06-28 1250
-webkit-transition: all 0.5s;color: #b91003;margin-left: 40px !important; 效果是 在0.5秒内容字体颜色逐渐红 向左边逐渐margin-left直到40px
css盒子模型_两小时学会CSS-弹性盒子模型
weixin_39921504的博客
11-20 122
弹性盒子模型布局的传统解决方案，基于盒状模型，依赖display 属性+ position 属性+ float属性。它对于那些特殊布局非常不方便 垂直居中等。 Flex 简便 、完整 、响应式 实现各种页面布局。 Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。...
响应式个人信息页面项目7-2用html5+css3
Mr_jianghanlin的博客
04-21 3078
项目7-2社交网站个人信息页面 首先来看看最终的效果图形： 当网页缩小到一定的范 首先要把第一张图片的框架搭建起来，应用浮动布局，和百分比布局都是可以的；有了基础的框架在进行进一步的美化，当做出第一张图的效果时，在上面的基础上加上媒体查询设置效应的参数就可以达到上述的效果图形。 媒体查询的语法: @media mediatype and|not|only (media feature) { ...
CSS3中动画效果新属性----transition&transform
郭佩东的技术之路
07-05 6860
W3C标准中对css3的transition这是样描述的：“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。”       transition主要包含四个属性值：执行变换的属性：transition-property,变换延续的时间：transition-durat
GET和POST协议详解
fantasy_geek的博客
04-02 3305
一、GET请求报文分析： 技术分享图片 1、 请求行： a) GET（描述该请求采用了什么请求方法），HTTP协议中包含8种请求方法： GET 请求获取Request-URI 所标识的资源 POST 在Request-URI 所标识的资源后附加新的数据 HEAD 请求获取由Request-URI 所标识的资源的响应消息报头 PUT 请求服务器存储一个资源，并用Requ...
常用的CSS3选择器
fantasy_geek的博客
03-05 3148
常用的CSS选择器 CSS选择器的作用就是从HTML页面中找出特定的某类元素。常用的几类CSS选择器如下表所示。 伪选择器比较特殊，分为伪元素和伪类元素两种。 一、属性选择器 1.E[att^=value]属性选择器 E[att^=value]属性选择器是指选择名称为E的标记，且该标记定义了att属性，att属性值包含前缀为value的子字符串。需要注意的是E是可以省略的，如果省略则表示可以匹配...
HTML5中常用的文本标签
fantasy_geek的博客
03-14 2831
HTML5中常用的文本标签 详解： 一、<wbr>标签 <wbr> 标签的定义 <wbr>标签的定义<wbr>标签是英文单词“Word Break Opportunity”的缩写，表示单词换行时机； <wbr>标签属于单标签，也叫空标签，只书写成<wbr>或<wbr/>皆可，但后者较为规范； <wbr&gt...
弹性盒子怎么实现响应式
04-11
弹性盒子（Flexbox）是CSS3中的布局模式，它可以使容器内的元素自适应布局，实现响应式布局。通过设置容器的display为flex，可以让容器内的...同时也可以通过媒体查询和JavaScript动态计算来实现响应式弹性盒子布局。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值