训练营第六天学习笔记

来源：互联网发布：vue.js教程编辑：程序博客网时间：2024/06/07 12:25

回顾前5天学习的一个情况：
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.onload=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>

原图效果如下：

0 0