仿百度首页HTML和CSS,仿百度首页

野性酷女 2022-10-07 12:47 260阅读 0赞

实现的效果如下图:

![89bdf10b4f57][]

屏幕快照 2017-07-26 13.48.01.png

新手写代码的悲哀,知道代码一堆问题却无从下手,只能贴上实现代码了,html文件中代码:

baidu

*  成都: 34C 轻度 122
 *  [ 换肤][Link 1]
 *  [ 消息][Link 1]

*  更多产品
 *  [ 设置][Link 1]
 *  [ 闻人慕学][Link 1]
 *  [ 学术][Link 1]
 *  [ 贴吧][Link 1]
 *  [ 视频][Link 1]
 *  [ 地图][Link 1]
 *  [ hao123][Link 1]
 *  [ 新闻][Link 1]

!\[\](baidu.png)

百度一下

*   设为首页
 *  @2017 Baidu
 *  使用百度前必读
 *  意见反馈
 *  京ICP证030173号

京公网安备

CSS中的代码:

/\*\*使其是整个完整视图 不会又边距\*/

\* \{

margin:0;

padding:0;

/\*\*头部css\*/

div.header \{

width: 100%;

height: 40px;

margin-top: 10px;

/\*background-color: red;\*/

text-align: center;

border-bottom-width: 1px;

border-color: gray;

border-bottom-style: solid; /\*必须指定风格线条才会展示 默认为none\*/

position: relative;

min-width: 1000px; /\*\*避免外围盒子的宽度大于内部盒子的宽度 导致浮动的问题\*/

ul.left \{

list-style-type: none;

margin-left: 10px;

text-align: center;

li.left \{

float: left;

li.width \{

width: 50px;

text-align: center;

ul.right \{

list-style-type: none;

text-align: center;

li.right \{

float: right;

width: 80px;

text-align: center;

button.blue \{

background-color: blue;

color: white;

text-align: center;

width: 80px;

height: 40px;

margin-top: -10px;

padding-top: 0;

/\*\*图片和输入框的\*/

div.center \{

text-align: center;

position: relative;

min-width: 500px;

.img \{

width: 300px;

height: 150px;

li.left \{

border-width: 1px;

button.baidu \{

background-color: blue;

color: white;

text-align: center;

width: 80px;

height: 45px;

margin-top: 0;

padding-top: 0;

margin-left: -10px;

position: relative;

.input \{

width: 50%;

height: 40px;

border-color: gray;

border-width: 1px;

margin-top: 10px;

min-width: 10cm; /\*设置宽度最小值\*/

/\*\*底部\*/

div.bottom \{

position: relative;

text-align: center;

margin-top: 1cm;

/\*\*如何让他居中浮动 如何又使它固定距离底部多少\*/

ul.bottom \{

text-align: center;

list-style-type: none;

position: relative;

float: left;

left: 50%;

li.bottom \{

float: left;

position: relative;

right: 50%;

p.bottom \{

text-align: center;

知识点小结

外层盒子的宽度要大于内层盒子的宽度,否则浮动的展示会有问题,往第二层展示了

浮动居左,整体又要居中,可是使外层盒子向右移动50%,内存盒子向左移动50%

[89bdf10b4f57]: /images/20221005/888eaf7876f14d38a54a0b0659c8114b.png
[Link 1]: https://www.baidu.com/

仿百度首页HTML和CSS,仿百度首页

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 HTML+CSS 仿NASA首页（期末考试项目）

相关工业项目首页百度地图

相关 H5仿高德，百度地图首页伸缩面板，记录一下

相关仿百度首页HTML和CSS,仿百度首页

相关 html仿百度首页

相关 Android 仿百度手机助手首页滑动效果

相关 java 爬去百度首页HTML源码

相关百度首页制作

相关【Web crawler】爬虫之百度首页

相关仿百度页面，实现百度一下js部分代码