移动端常用布局写法

最新推荐文章于 2022-08-30 10:24:12 发布

咸菜汤小白

最新推荐文章于 2022-08-30 10:24:12 发布

阅读量194

点赞数

分类专栏： HTML css

本文链接：https://blog.csdn.net/qq_40930251/article/details/105013814

版权

css 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

HTML

4 篇文章 0 订阅

订阅专栏

代码需引用jQuery

<body>
	
	<div class="box">
		<div class="box_header">
			<div class="box_header_c">
				<div class="box_header_img"></div>
			
				<div class="box_header_mune">
					<ul>
						<li>互动</li>
						<li>职业</li>
						<li>嘉宾</li>
						<li>信息</li>
					</ul>
				</div>
			</div>
			
		</div>
		
		<div class="box_con">
			<div class="box_con1">
				<div class="box_con_c">
					
					<div class="box_con_c_div">
						<div class="toux"></div>
						<div class="wenzi">
							<div class="name">管理员</div>
							<div class="liaotian">聊天内容聊天内容聊天内容聊天内容</div>
						</div>
					</div>
					<div class="box_con_c_div">
						<div class="toux"></div>
						<div class="wenzi">
							<div class="name">管理员</div>
							<div class="liaotian">聊天内容聊天内容聊天内容聊天内容</div>
						</div>
					</div>
					<div class="box_con_c_div">
						<div class="toux"></div>
						<div class="wenzi">
							<div class="name">管理员</div>
							<div class="liaotian">聊天内容聊天内容聊天内容聊天内容</div>
						</div>
					</div>
					<div class="box_con_c_div">
						<div class="toux"></div>
						<div class="wenzi">
							<div class="name">管理员</div>
							<div class="liaotian">聊天内容聊天内容聊天内容聊天内容</div>
						</div>
					</div>
					<div class="box_con_c_div">
						<div class="toux"></div>
						<div class="wenzi">
							<div class="name">管理员</div>
							<div class="liaotian">聊天内容聊天内容聊天内容聊天内容</div>
						</div>
					</div>
					<div class="box_con_c_div">
						<div class="toux"></div>
						<div class="wenzi">
							<div class="name">管理员</div>
							<div class="liaotian">聊天内容聊天内容聊天内容聊天内容</div>
						</div>
					</div>
					
					
				</div>
				<div class="box_con_b">
					<div class="box_con_b_c">
						<div class="box_con_b_con">
							<div class="box_con_b_left">
								<i></i>
								<input type="" name="" placeholder="快来聊天啊" />
							</div>
							<div class="box_con_b_right">发送</div>
						</div>
						
					</div>
				</div>
			</div>	
			<div class="box_con2" style="display: none;">con2</div>
			<div class="box_con3" style="display: none;">con3</div>
			<div class="box_con4" style="display: none;">con4</div>
			
		</div>
		
	</div>
	
</body>

@charset "utf-8";
		
/* CSS Document text-overflow:ellipsis; overflow:hidden; white-space:nowrap;*/
/*global */
/*屏幕变换字体大小不跟这变*/
html {width: 100%;height: 100%;-webkit-text-size-adjust: none;-moz-text-size-adjust: none;-ms-text-size-adjust: none;-o-text-size-adjust: none;text-size-adjust: none;}
body {width: 100%;height: 100%;margin: 0;padding: 0; font-size:0.9em;  
line-height: 1.5;background:#efeff4;    font-family: PingFang SC,Hiragino Sans GB,Microsoft YaHei;}
dl,dd,dt,ul,li{ list-style:none;margin:0; padding:0}
h1,h2,h3{ margin:0; padding:0;}
textarea,input{font-family: Helvetica,sans-self;}
em,i{font-style:normal}
a,button,input{-webkit-tap-highlight-color:rgba(255,0,0,0);}

.box{
	overflow: scroll;
	height: 100%;
}
.box_header{
	height: 230px;
}
.box_header_c{
	position: fixed;
	width: 100%;
	z-index: 10000;
}
.box_header_img{
	background: #0077B3;
	height: 190px;
}
.box_header_mune{
	height: 40px;
	position: relative;
}
.box_header_mune ul{
	display: flex;
}
.box_header_mune ul li{
	justify-content: center;
	list-style: none;
	width: 33.3%;
	text-align: center;
	background-color: #009688;
	height: 40px;
	line-height: 40px;
	color: #fff;
}
.box_header_mune ul li:hover{
	background-color: #007AFF;
}





.box_con_c_div{
	position: relative;
	padding: 10px 20px 10px 10px;
}
.toux{
	position: absolute;
	width: 50px;
	height: 50px;
	border-radius: 25px;
	background: #009688;
}
.wenzi{
	padding-left: 60px;
}
.name{
	
}
.liaotian{
	background: #fff;
	border-radius: 1px 5px 5px 15px;
	padding: 5px 10px;
	margin-top: 6px;
}





.box_con_b{
	height: 45px;
}
.box_con_b_c{
	position: fixed;
	bottom: 0;
	height: 45px;
	left: 0;
	right: 0;
	background: #ccc;

}
.box_con_b_con{
	padding: 5px 80px 5px 10px;
	position: relative;
}
.box_con_b_left{
	position: relative;
	background: #fff;
	border-radius: 20px;
	padding: 0 20px 0 35px;
}
.box_con_b_left i{
	position: absolute;
	left: 10px;
	top: 4px;
	display: block;
	height: 20px;
	width: 20px;
	border: 1px solid red;
}
.box_con_b_left input{
	position: relative;
	top: 0;
	left: 5px;
	background-color: #fff;
	height: 30px;
	border: none;
	width: 100%;
}

.box_con_b_right{
	position: absolute;
	right: 10px;
	top: 7px;
	width: 60px;
	height: 30px;
	border-radius: 15px;
	line-height: 30px;
	color: #fff;
	text-align: center;
	background-color: #007DDB;
}

<script>
	var ah2 = document.querySelectorAll(".box_header_mune ul li")
	var ap = document.querySelectorAll(".box_con>div")
	// 遍历元素<br>　　//这里我们要通过foe循环去获取li中的索引，然后成功的运用到下面的div中。
	for (var i = 0; i < ah2.length; i++) {
		// 编号
		ah2[i].index = i;
		// 各种事件
		ah2[i].onclick = function() {
			for (var j = 0; j < ap.length; j++) {
				ap[j].style.display = "none"
			}
			// 显示
			ap[this.index].style.display = "block";
		}

	}
	
</script>

咸菜汤小白

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动端常用布局写法

代码需引用jQuery<body> <div class="box"> <div class="box_header"> <div class="box_header_c"> <div class="box_header_img"></div> <div class="box...
复制链接

扫一扫

专栏目录