iOS转前端之仿写百度首页
来源:互联网 发布:m16双头螺栓数控编程 编辑:程序博客网 时间:2024/05/19 19:58
抱歉,这几天有点忙,部门开季度大会。。。今天来继续填坑。
前三篇我们已经介绍了HTML、CSS的一些知识,相信大家已经迫不及待想实际运用一下了。OK,今天我们来写一个Demo,模仿百度首页写一个静态的页面,后面学了JS,还可以加一些动态的东西。话不多说,上代码。
首先我们打开WebStorm,新建一个工程,先创建一个index.html文件,作为主文件:
然后需要用到css文件,那就创建一个,最后是在外面创建一个文件夹来存放,这样便于管理:
准备工作完成了,下面直接看代码吧:
html部分代码:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>百度一下,你就知道</title> <link href="css/index.css" rel="stylesheet"></head><body> <!--头部--> <div id="header"> <!--javascript:void(0) 点击跳转不动--> <a href="#">新闻</a> <a href="#">hao123</a> <a href="#">地图</a> <a href="#">视频</a> <a href="#">贴吧</a> <a href="#">登录</a> <a href="#">设置</a> <a href="#" class="more-Product">更多产品</a> </div> <!--主要内容--> <div id="content"> <div class="logo"> <!--<img src="images/bd_logo.png">--> <img src="images/logo_white_ee663702.png"> </div> <div class="search"> <input type="text" value=""> <a href="#">百度一下</a> </div> <div class="dom"> <img src="images/d_1.png"> <img src="images/d_2.png"> <img src="images/d_3.png"> <img src="images/d_4.png"> </div> <div class="dom"> <img src="images/d_5.png"> <img src="images/d_6.png"> <img src="images/d_7.png"> <img src="images/d_8.png"> </div> </div> <!--尾部--> <div id="foot"> <p class="foot-top"> <a href="#">把百度设为主页</a> <a href="#">关于百度</a> <a href="#">About Baidu</a> </p> <p class="foot-bottom"> @2017 Baidu <a href="#">使用百度必读</a> 意见反馈 <img src="images/copy_rignt_24.png"> </p> </div></body></html>
a, p, div, img, input, body, head, title { padding: 0; margin: 0;}a{ color: black;}body { font-size: 13px; /*背景图片*/ background: url("../images/bg.jpg");}/*头部*/#header { background: rgba(0, 0, 0, 0.2); text-align: right; margin: 0px 0px 30px 0; height: 38px; line-height: 38px;}#header a { margin-right: 7px; font-weight: bolder; font-size: 15px; color: white;}#header a.more-Product { background: #3385ff; color: white; display: inline-block; height: 28px; width: 80px; text-align: center; line-height: 28px; text-decoration: none; font-weight: normal;}/*主要内容*/#content{ /*background: green;*/}#content .logo { text-align: center;}#content .logo img{ width: 270px; height: 129px;}#content .search { /*background: blue;*/ width: 600px; height: 33px; /*块级元素居中*/ margin: 0 auto;}#content .search input { width: 500px; height: 33px; padding: 5px; box-sizing: border-box; border: 1px solid #ddd;}#content .search a { background: #3385ff; color: white; display: inline-block; height: 33px; width: 100px; text-align: center; line-height: 33px; text-decoration: none; font-weight: normal; float: right;}/*伪类 获取焦点时 去除边框蓝色*/#content .search input:focus { outline: none; border: 1px solid #3385ff;}#content .dom { margin-top: 30px; text-align: center;}#content .dom img { width: 150px; margin: 5px;}#content .dom img:hover { /*设置不透明度*/ opacity: 0.7;}/*尾部*/#foot{ /*background: yellow;*/ margin-top: 120px; text-align: center;}#foot p { margin-top: 10px;}#foot p a { color: blue;}#foot p.foot-top a { margin: 0px 5px;}
最后运行的效果如下:
通过这个小Demo,可以把之前学到的基础知识综合的使用起来。OK,后面学完js再来做一些炫酷的东西。
代码可以在我的github找到 传送门。
阅读全文
0 0
- iOS转前端之仿写百度首页
- web前端之百度首页仿写
- web前端之千牛网首页仿写
- iOS转前端之仿写登录页面
- iOS 仿百度外卖-首页重力感应
- Html+Css基础之仿百度首页
- 网页练习之仿百度首页
- 前端作品仿2015/3/21百度首页面
- iOS转前端之仿写宠物网(适配不同尺寸)
- 仿百度新闻首页
- 仿百度首页
- 仿百度首页div+css
- Java写的爬虫爬百度首页Code《转自零基础写Java知乎爬虫之先拿百度首页练练手》
- 仿新版百度首页,99%还原真实百度首页。
- 前端设置- 仿Chinaz首页菜单导航
- WEB前端:rem布局仿淘宝首页
- HTML之百度首页
- 仿百度首页背景图片始终全屏
- 4-3 简单求和 (10分)
- 【JavaSE系列-基础篇6】——泛型方法
- Android Studio 快捷键
- nginx WebSockt 403
- 安卓交互之Toast的使用
- iOS转前端之仿写百度首页
- Linux_常用软件安装问题
- App跳转
- PostgreSQL 锁解密
- 基于WiFi信号的动作数据集
- Uva12325
- android intent-fliter 标准Category
- redis 所有基础的命令
- java如何产生1到10之间的随机数