Watch 1 Star 1 Fork 0

权静 / baiduPageCSS

Create your Gitee Account
Explore and code with more than 5 million developers,Free private repositories !:)
Sign up
This repository doesn't specify license. Without author's permission, this code is only for learning and cannot be used for other purposes.
百度搜索主页,注册页面 spread retract

Clone or download
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README.md

baiduPage

百度搜索首页,注册页

clone

  • clone 后,
  • npm install
  • gulp 就可以了,压缩了js , css , 图片 文件,设置是一直监听文件变化。

经验总结

这是前几天整理文件,发现一年前胡乱写的百度搜索主页html文件,打开看到结构惨不忍睹,就整理了一下,顺便把当时不会实现的动画,搜索功能等实现了。

  • 结构 分为两个html文件,一个是搜索主页(index.html),一个是注册页面(index2.html)。

    • index.html 包含导航栏(包含显出的导航栏和隐藏的导航栏),百度图标,搜索框,二维码和尾部声明几个框架。用到一些实用技巧:用伪元素实现清除浮动流,用margin左右auto实现尾部声明和百度图标的居中等,当然也用到绝对定位实现居中。搜索框部分用小小的计算,是搜索框显得更符合正版百度搜索。
    • index2.html 包含注册和导航登录两部分,分居于页面左右两边。注册部分包含验证用户名,手机号,密码是否符合格式(简单验证)并给出相应提示。导航登录是一些文本,图片和中间一个滑动动画实现,滑动动画用到css3的transition。
  • js搜索框 特别说说搜索框的js实现,因为利用了百度搜索的Request URL和搜索路径,让body瞬间append和remove script 标签(src为简化的Request URL),实现虽然简单,但也是个重点吧。

  • gulp gulp前些天还能用的插件gulp-minify-css不能用了。提示改用了gulp-clean-css,gulp打包图片要耐心,比较慢。一点是首先等到npm install下载完全,第二是打包图片时间稍微长一些,不是电脑卡。我的npm install花了800多秒,图片打包完成花了大概一分多钟。

Comments ( 0 )

Sign in for post a comment

CSS
1
https://gitee.com/Fatty-Fish/baiduPage.git
git@gitee.com:Fatty-Fish/baiduPage.git
Fatty-Fish
baiduPage
baiduPage
master

Search

231008 48f1a665 1899542 231017 9a6720c6 1899542