html+css 百度首页练习
这几天看完了《css权威指南》,写了个百度页面,不带js的纯静态,主要目的就是掌握页面布局,字体颜色之类的没有深究。
写完了觉得很简单,毕竟一开始觉得只要模仿的像就行,但是缩小了浏览器窗口以后问题就出来了。比如搜索框随浏览器的缩小移位什么的,然后就去看百度首页的源码,这才知道要做到固定位置,应该怎么布置盒模型的嵌套,怎么定位元素等等。仅仅把一个元素放到大概位置是不难的,但是页面元素多/不想让元素随浏览器缩放移位的话就要好好规划布局了。
以下代码中,“百度一下”的搜索框实现有错误,其余各个盒模型基本按照百度源码的布置方式放置,没有去掉盒模型的边框,以便迅速查看。
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="baiducss.css">
<title>百度一下,你就知道</title>
</head>
<body>
<div id="top">
<!-- <p id="demo">alkfj</p>-->
<div id="right" >
<a class="bold" href="" target="_blank" >新闻</a>
<a class="bold" href="">hao123</a>
<a class="bold" href="">地图</a>
<a class="bold" href="">视频</a>
<a class="bold" href="">贴吧</a>
<a class="notbold" href="" >登陆</a>
<a class="notbold" href="" target="_blank" >设置</a>
<a class="more" href="" >更多产品</a>
</div>
</div>
<div id="middle">
<div id="m_wrapper">
<div id="lg">
<img src="bd_logo1.png" width="270" height="129" <!--onmouseover="mover(this)" onmouseout="mout(this)"-->>
</div>
<div id="wrapper">
<span id="search">
<span class="camera"></span>
<input class="first" type="text" onfocus="myFunction(this)">
</span>
<span id ="last">
<input class="second" type="submit" value="百度一下">
</span>
</div>
</div>
</div>
<div id="middle2"> <!-- middle和middle2的作用就是固定再中间的那层,使之不随浏览器窗口缩放而移动 -->
<div id="foot">
<div id="link">
<a href="">关于百度</a>
<a href="">about baidu</a>
<a href="">版权信息</a>
<p id="copyright">@2015copyright 京TCP3248702394</p>
</div>
</div>
</div>
</body>
</html>
body{
margin:;
padding:;
position: relative;
font: 12px arial;
} #top {
position: absolute;
height:32px;
border-bottom: 1px solid #EBEBEB;
width:100%;
min-width: 1000px;
} #right {
position: absolute;
top:;
right:;
width: 590px;
font-size: 13px;
text-align: right;
color:#999;
height:32px;
line-height: 32px;
}
#right .bold {
font-weight: bold;
/* cursor: pointer;*/ }
#right a {
position: relative;
margin-left:19px;
color:#555;
outline: none;
display: inline-block;
text-shadow: none;
}
#right .more {
width:66px;
color: #333;
height: 32px;
line-height: 32px;
background: #398BFB;
text-align:center;
border-bottom: 1px solid #f0f0f0;
text-decoration:none;
}
#middle {
position: relative;
height: 50%;
margin: 0 auto;
width: 1000px;
min-height: 293px;
border: 1px solid #b8b8b8;
}
#m_wrapper {
width: 641px;
height: 100%;
min-height: 293px;
margin: 0 auto;
border: 1px solid #b8b8b8;
}
#lg {
height: 61.8%;
min-height:181px;
position: relative;
text-align: center;
border: 1px solid red;
} #lg img {
position: absolute;
bottom: 10px;
left: 50%;
margin-left: -135px;
border: 1px solid red;
cursor: default;
}
#wrapper {
position: relative;
border: 1px solid #b8b8b8;
}
#search {
border: 1px solid #b8b8b8;
position: relative;
display: inline-block;
}
#search .first {
width: 480px !important;
padding-right: 48px;
height: 20px;
padding: 9px 7px;
border: 1px solid red;
font: 16px arial;
}
.camera {
position: relative;
right: 11px;
top: 50%;
margin-top: -8px;
height: 16px;
width: 18px;
background: gray;
}
#last {
width: 102px;
height: 38px;
border:1px solid #38f;
border-bottom: 1px solid #2e7ae5;
background-color: #38f;
display: inline-block;
}
#last.second {
height: 38px;
line-height: 38px;
background-color:#38f;
border:;
color: white;
font-size: 16px;
box-shadow: none;
padding:;
/* cursor: pointer;*/
}
#wrapper2 {
width: 500px;
margin: 0 auto;
}
/*#wrapper3 {
position: absolute;
top: 80px;
left: 450px;
}*/
#middle2 {
position: relative;
width: 1000px;
height: 40%;
margin: 0 auto;
min-height: 293px;
border: 1px solid #b8b8b8;
}
#foot {
position: relative;
width: 641px;
margin: 0 auto;
border: 1px solid #b8b8b8;
height: 200px;
min-height: 100px;
}
#link {
height: 38.2%;
border: 1px solid #b8b8b8;
text-align: center;
width: 100%;
position: relative;
}
#link p {
color: #b8b8b8;
font: 12px arial;
}
总结:
- text-align: center; width: 100%可让行内元素居中显示
- 行高(line-height) = 元素高(height) 时可以让元素居中显示,行高一般不要大于元素高,否则布局容易乱。
- height = line-height=xx px; overflow: hidden; 使单行文字垂直居中对齐。其他垂直居中对齐的方法见这篇文章:http://www.cnblogs.com/dearxinli/p/3865099.html
html+css 百度首页练习的更多相关文章
- 2019.4.9 HTML+CSS写静态百度首页
静态百度首页 4.10更新 更改所有样式为内部引入 换行全部换成使用边距实现 链接:https://pan.baidu.com/s/1iFNnQNw4PUtdj3MjlV-LZA 提取码:5b2i
- html布局小练习(百度首页)
绝对定位百度首页练习 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...
- 一款基于jQuery的仿百度首页滑动选项卡
今天给大家分享一款基于jQuery的仿百度首页滑动选项卡.这款选项卡适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...
- 模仿百度首页“元宵节汤圆”动图,并实现360°不停旋转(CSS3的animation动画效果)
模仿百度首页“元宵节汤圆”动图,并实现360°不停旋转(CSS3的animation动画效果) 效果图: 切图地址: https://ss1.bdstatic.com/5eN1bjq8AAUYm2zg ...
- 模仿百度首页“元宵节汤圆”动图(js的定时任务:setInterval)
模仿百度首页“元宵节汤圆”动图:(js的定时任务:setInterval) 原理:需要一张切图,通过不断定位使得图片就像一帧一帧的图片在播放从而形成了动画 效果图: 切图地址: https://ss1 ...
- 【教程】手把手教你如何利用工具(IE9的F12)去分析模拟登陆网站(百度首页)的内部逻辑过程
[前提] 想要实现使用某种语言,比如Python,C#等,去实现模拟登陆网站的话,首先要做的事情就是使用某种工具,去分析本身使用浏览器去登陆网页的时候,其内部的执行过程,内部逻辑. 此登陆的逻辑过程, ...
- Selenium2学习-009-WebUI自动化实战实例-007-Selenium 8种元素定位实战实例源代码(百度首页搜索录入框及登录链接)
此 文主要讲述用 Java 编写 Selenium 自动化测试脚本编写过程中,通过 ID.name.xpath.cssSelector.linkText.className.partialLinkTe ...
- selenium2入门 用testNG对百度首页输入框进行测试 (三)
如果还没有安装testNG的亲,可以点击http://www.cnblogs.com/milanmi/p/4346580.html查看安装过程. 这节主要是对百度首页的输入框进行输入测试. packa ...
- 云计算之路-阿里云上:访问阿里云CDN上的图片,自动跳转到百度首页
昨天有用户向我们反馈一篇博文(一条语句导致CPU持续100%)中的部分图片不能显示,我们的图片访问用的是阿里云CDN,原以为是某个CDN节点不稳定的问题,但在排查时发现这些图片不能显示竟然是因为请求时 ...
随机推荐
- Python3 操作系统与路径 模块(os / os.path / pathlib)
#!/usr/bin/env python # coding=utf-8 __author__ = 'Luzhuo' __date__ = '2017/5/7' import os def os_de ...
- Ubuntu 安装ftp
Ubuntu 用vsftpd 配置FTP服务器 网上的文章好难懂啊..只想要简单粗暴,弄好能用就行啊,复杂的以后研究不行吗...折腾好久,其实弄出来能用不就这么点内容吗... 本文在Ubuntu Se ...
- encodeURI、encodeURIComponent、btoa及其应用场景
escape不编码字符有69个:*,+,-,.,/,@,_,0-9,a-z,A-Z encodeURI不编码字符有82个:!,#,$,&,’,(,),*,+,,,-,.,/,:,;,=,?,@ ...
- Apache无法启动报错查看
wampserver橙色图标 查找原因 1.测试80端口 . 如已被占用,则改别的端口在启动apache.怎么改apache的的端口去百度一下都有. 2.找到httpd.exe的目录.在cmd命令行下 ...
- Javac源码解读-书目录
1.Javac编译器 (1)Javac编译器介绍(主要介绍如何从java源代码到class的一个转换过程) (2)Javac的源码(说明其中哪个功能由哪个主要的类来完成) (3)Javac支持的命令及 ...
- archlinux安装gnome的一些坑随记
问题1:网络设置无法查看,提示缺少NetworkManager 解决:安装networkmanager库,因为gnome调用的是networkmanager这个软件来管理网络的.然后要启动它:sudo ...
- PTA (Advanced Level) 1013 Battle Over Cities
Battle Over Cities It is vitally important to have all the cities connected by highways in a war. If ...
- %notfound的理解——oracle存储过程 .
文档中的解释:It returns TRUE if an INSERT, UPDATE, or DELETE statement affected no rows, or a SELECT INTO ...
- springboot主从数据库
是从springmvc的思路上来做的,主要就是配置主.从DataSource,再继承AbstractRoutingDataSource,重写determineCurrentLookupKey方法,通过 ...
- R语言多元素向量
使用冒号运算带有数值数据(数值的增加为1) # Creating a sequence from 5 to 13. v <- 5:13 print(v) # Creating a sequenc ...