小白之WEB前端--第一篇_小白动态gif胖砸-CSDN博客

本文链接：https://blog.csdn.net/qq_41553660/article/details/83241408

小白之WEB前端响应式页面

第一次接触到响应式页面是去年第一次接触框架的时候，接触到了响应式的框架“Bootshrap”这是很简单的css+html的框架，应该很多人用它进行响应式页面的创造。
那之后实验室的指导老师给我一个网站问我能不能把这个网页改成响应式网页，那个网页的构造很简单，但是我那时候很懒就不想再用bootshrap就直接改了样式。

首先这个页面的百分比要明白，然后页面的布局全部变成百分比，然后将页面的字体大小变成em样式，这个样式就可以让字体随着页面的大小来改变自己的百分比。
废话不多说，先上代码。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>胖砸的日常bug</title>
		<link rel="stylesheet" href="css/body.css" />  <!--引用主文章超链接-->
		<link rel="stylesheet" href="css/feet.css" /> <!--引用尾导航栏 -->
		<link rel="stylesheet" href="css/titile.css" /><!-- 引用导航栏 -->
		<style>
		a{text-decoration: none;}/*超链接样式*/
       </style>
       <script type="text/javascript" src="http://cdn.webfont.youziku.com/wwwroot/js/wf/youziku.api.min.js"></script>
       <script type="text/javascript">
       $youziku.load("body", "6c81f08bc56245d1b023699a5f33c269", "NaiYou");
       /*$youziku.load("#id1,.class1,h1", "6c81f08bc56245d1b023699a5f33c269", "NaiYou");*/
      /*．．．*/
      $youziku.draw();
     </script><!--字体问题-->
	</head>
	<body>
		<div class='tit' >
			<div class="tit_1">于胖胖的个人博客</div>
			<div class="tit_2">
				<div class="daily">
					<tr>
						
				<td valign="middle">	<a href="life.html">生活胖砸</a></div></td>
			<td valign="middle">	<div class="stu"><a href="study.html">学习胖砸</a></div></td>
				<td valign="middle"><div class="bug"><a href="bug.html">埋坑胖砸</a></div></td>
				</tr>
			</div>
		</div>
		<div class="text">
			<div class="text_call">
				
			</div>
			<div class="text_fist">
				<div class="call_1">标题</div>
				<div class="call_2">文章</div>
			</div>
			<div class="text_right">胖砸</div>
		</div>
		<div class="feet"></div>
	</body>
</html>

接下来是css样式块

.text{
	height:90em;
	width:100%;
	color:darkslategrey;
	background-color: coral;
	font-size: 1.5vw;
}/*整个网页主体部分*/
.text_fist{
	height: 100%;
	width:60% ;
	
}/*网页日志部分*/
.text_call{
	height:100% ;
	width: 20%;
	float: left;
}
/*网页联系交谈框*/
.text_right{
	height: 100%;
	width: 20%;
	float:right;
}
/*右边导航栏*/
.text_head{
	color: aquamarine;
	float: left;
	
	
}
.call_1{
	margin: 0 auto;
	text-align: center;
	color: dimgray;
	
}
/*文章主标题*/
.call_2{
	margin:0 auto;
	text-align:center ;
	color: #000000;
}
/*文章的主体*/