回顾前5天学习的一个情况：
1.对于HTML：
由于移动互联网的快速发展，所以在学习上，我觉得应该更多的往这个方向去找一下资料进行学习。经过这几天的一个简单翻阅，其实写法上面和原来PC端是一致的，只需要在头部套入固定格式就可以了。代码如下：（至于body里面怎么布局就看项目了）
2.对于CSS：
我个人觉得有几个点是必须熟悉掌握的（我只是掌握了皮毛），在这里也列举一下，方便自己在学习的过程中可以时不时进行反思。
2.1. display的属性的三个元素各自的属性（block，inline，none）
2.2. margin：auto 设置水平居中
2.3. max-width 用于替代width，对于手机端来说处理小窗口的情况
2.4. position 主要用于布局
2.5. float 浮动，这个可以很好的控制图片的位置哟
2.6. clear 清除浮动
2.7. css框架
1.对于HTML：
由于移动互联网的快速发展，所以在学习上，我觉得应该更多的往这个方向去找一下资料进行学习。经过这几天的一个简单翻阅，其实写法上面和原来PC端是一致的，只需要在头部套入固定格式就可以了。代码如下：（至于body里面怎么布局就看项目了）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>手机网站</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="format-detection" content="telephone=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="author" content="duanliang, duanliang920.com" />
<style>
body{font-size:62.5%;font-family:"Microsoft YaHei",Arial; overflow-x:hidden; overflow-y:auto;}
.viewport{ max-width:640px; min-width:300px; margin:0 auto;}
</style>
</head>
<body>
<div>
这是我的第一个手机网页
</div>
</body>
</html>2.对于CSS：
我个人觉得有几个点是必须熟悉掌握的（我只是掌握了皮毛），在这里也列举一下，方便自己在学习的过程中可以时不时进行反思。
2.1. display的属性的三个元素各自的属性（block，inline，none）
2.2. margin：auto 设置水平居中
2.3. max-width 用于替代width，对于手机端来说处理小窗口的情况
2.4. position 主要用于布局
2.5. float 浮动，这个可以很好的控制图片的位置哟
2.6. clear 清除浮动
2.7. css框架
3.利用HTML+CSS+JQ制作百度搜索框
结合今天学习的知识点，利用一点点JQ来制作一个百度登录框的界面，鼠标点击后会变颜色和跳动哟。
这里运用到的JQ 里面的一个触发 focus 事件。另外就是在title里面增加一个小icon的link的方法。
设计思路如下：
作业图如下：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>百度一下，你就知道</title>
<link rel="icon" href="bd.png" type="image/x-icon">
<style type="text/css">
.header img{
margin: auto;
padding: 0;
height: 35px;
}
.main{
text-align: center;
margin-top: 5%;
}
input{
float: left;
margin-left: 34%
}
.input-box{
width: 540px;
height:30px;
border-color: blue 1px;
background: url(photo.png) no-repeat scroll right center transparent;
}
.button{
margin: 0;
padding: 0;
width: 100px;
height: 36px;
background-color: #3388ff;
color: white;
border:none;
}
</style>
<script type="text/javascript">
window.οnlοad=function(){
document.getElementByclass('input-box').focus();
}
</script>
</head>
<body>
<div class="bg">
<div class="header">
<img src="header.png" >
</div>
<div class="main">
<img src="logo.png">
<form>
<input name="shuru" type="text" class="input-box" />
<input name="sousou" type="submit" value="百度一下" class="button"/>
</form>
</div>
</div>
</body>
</html>原图效果如下：
742
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
