Html5开发——html+css基础一（百度首页）

最新推荐文章于 2024-03-16 09:51:29 发布
最新推荐文章于 2024-03-16 09:51:29 发布
阅读量162 收藏
点赞数
原文链接：http://www.cnblogs.com/Kround/p/3873309.html
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度</title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        body{text-align: center;}
        .header{text-align: right;font-size: 12px;margin: 10px;}
        .mainnav{font-size: 14px;text-indent: -112px;}
        .mainnav a{padding-left: 15px;}
        .input{margin-top: 5px;}
        .input input{width: 450px;height: 32px;}
        .input button{width: 95px;height: 38px;}
        .subnav{margin-top: 35px;}
        .wrapper{height: 100%;position: fixed;min-height: 500px;width: 100%;}
        .footer{position: absolute;bottom: 80px; width: 100%;}
        .footersub1{margin-top: 20px;}
        .footersub2{font-size: 12px;}
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="header">
            <a href="">搜索设置</a>
            <a href="">|</a>
            <a href="">登录</a>
            <a href="">注册</a>
        </div>
        <img class="logo" src="baidu.gif">
        <div class="mainnav">
            <a href="">新闻</a>
            <a href="">网页</a>
            <a href="">贴吧</a>
            <a href="">知道</a>
            <a href="">音乐</a>
            <a href="">图片</a>
            <a href="">视频</a>
            <a href="">地图</a>
        </div>
        <div class="input">
            <input type="text">
            <button>百度一下</button>
        </div>
        <div class="subnav">
            <a href="">百科</a>
            <a href="">文库</a>
            <a href="">hao123</a>
            <a href="">|</a>
            <a href="">更多>></a>
        </div>
        <div class="footer">
            <div>
                <a href="">把百度设为首页</a>
            </div>
            <div class="footersub1">
                <a href="">加入百度</a>
                <a href="">|</a>
                <a href="">搜索风云榜</a>
                <a href="">|</a>
                <a href="">关于百度</a>
                <a href="">|</a>
                <a href="">About Baidu</a>        
            </div>
            <div class="footersub2">
                <a href="">©2014 Baidu 使用百度前必读 京ICP证030173号 <img src="gs.gif"></a>
            </div>
        </div>
    </div>
</body>
</html>

我个人比较喜欢使用div做布局，不知道这样布局有木有问题？难点在于实现“footer“跟随浏览器底端移动！（1随着浏览器的底端上下运动PS：具体效果可以参考百度首页）

关键点在于“wrapper”，这个大的div具有浏览器的高度（因为高度100%PS：我是这样理解的）还设置了一个最小高度min-height（不能让1移动到其它内容部分）position: fixed是让div相对于浏览器定位。

“footer”中的position: absolute;bottom: 80px;（“footer”相对于父节点wrapper绝对定位，bottom是1距离底部的距离）。

PS：难点就在于对“wrapper”和“footer”的理解。

转载于:https://www.cnblogs.com/Kround/p/3873309.html

dizhou0143
关注
利用HTML5仿制百度首页
Watermelon_devil的博客
06-21 771
制作百度首页，要用到div进行分块，需要对快的位置进行控制，一般有对div进行规范大小width，height分别对应宽度高度margin：有对div进行定位有margin-top,margin-left,margin-right,margin-buttomfloat-left:吧div元素进行从左到右排列，了解这些事后就能仿制一个百度首页了 成品如下...
html-简易仿制百度页面
weixin_52192654的博客
03-05 995
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="imgs/favicon.ico"/> <link rel="stylesheet" type="text/css...
百度首页(HTML5)
不良少年
05-26 1万+
一 效果图(分三部分)1 图一 : header(位于右上角)2 图二 : content(位于中间位置)3 图三 : footer(位于底部的中间)二 需要创建的文件三 HTML中设计的部分(先将主旨部分搭建好)<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>百度首页</title>
用HTML做百度页面
weixin_65120685的博客
07-01 1152
HTML
html制作百度页面
m0_51660215的博客
07-03 7806
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin-top: 0; margin-left: 0; } /*搜索框样式 */ #divput{ margin-left: 420px; margi.
HTML5+CSS3+JS入门教程 + 源代码 pdf
03-28
总之，这个"HTML5+CSS3+JS入门教程"结合源代码，是一个全面学习网页开发的好资源，适合想要入门前端开发的初学者。通过系统学习，你可以掌握构建现代网页所需的核心技术，并有能力开发出富有吸引力且功能丰富的网站...
动态网页设计与制作（HTML5+CSS3+JavaScript）（第3版）-PPT课件.zip
07-13
动态网页设计与制作是互联网开发领域中的核心技能之一，它涉及到HTML5、CSS3和JavaScript等关键技术。这些技术的结合使得网页不仅具有丰富的视觉效果，还能实现交互性和动态功能。以下将详细介绍这些知识点： HTML5...
web前端期末大作业——基于html+css+javascript学生宿舍管理系统网站
qq_3200628753的博客
08-15 161
🧑‍🎓 学生管理系统网页设计 、OA管理系统、后台管理模板、智能停车系统、等网站的设计与制作。🏷️HTML网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和图文并茂页面。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新......
HTML期末学生大作业——基于html+css+javascript+jquery+bootstrap响应式音乐酒吧网站
HTML网页设计
08-06 711
🎵 音乐网页设计 、🎸仿网易云音乐、各大音乐官网网页、🎶明星音乐演唱会主题、🥁爵士乐音乐、民族音乐、等网站的设计与制作。🏷️HTML音乐网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和图文并茂页面。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结......
前端：HTML百度页面制作（快速简单）
最新发布
m0_59401963的博客
03-16 2162
本文开发出来的网页只是静态版本的，可以在搜索框里查询你想了解的东西，搜索出来的数据均是百度处理，并且只制作html，不涉及到css等，学会之后就可以制作任何一个搜索页面
初学者用HTML和CSS写的百度页面
06-04
主要用于练习HTML和css写的百度页面，初学者也可以自己试着来写一下，还是有点用的
百度首页html代码
11-06
利用纯html语言编写的百度首页，是本上实现了百度界面模块
百度首页 用HTML写的
02-19
ＨＴＭＬ写的简单首页——初学的，见谅——
百度首页制作
06-07
使用HTML制作百度，并实现其各项功能
HTML+CSS自制百度页面
NJR10byh的博客
06-07 1409
短时间完成一个百度页面（仅仅是页面，不能搜索！！！） HTML部分： <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>百度一下, 你就知道</title> <link rel="shortcut icon" href="baidu.ico" /> <link rel="stylesheet" href="Baidu.css" t
域名展示页 html5,百度首页在页面的展示过程
weixin_39732716的博客
05-31 495
从百度URL的输入到页面展示大概分为以下几个环节：输入百度的URL地址——对URL中域名( baidu.com)进行解析——服务器处理——网站处理——浏览器处理——绘制网页1. 在浏览器中输入百度的URL地址2. 对URL中域名进行解析对于www.baidu.com的URL，浏览器实际上不知道www.baidu.com(域名)到底是什么东西？需要查找www.baidu.com网站所在的服务器的IP...
前端----HTML 百度首页制作
热门推荐
nO0b
09-24 1万+
效果图: 用百度首页的制作对布局进行了简单的练习,存在一些缺陷,比如 底部的小图标懒得搞上去 这个小警徽和小图标 右上角的标题颜色没有细致修改 登陆和设置的浅色没有设置   但是设置了form表单,点击百度一下button时会直接打开真实的百度搜索内容 分析百度搜索url设置相应表单项 https://www.baidu.com/s?wd=搜索内容&amp;ok=提交 ...
百度页面的html5结构,HTML5+CSS3网站设计基础教程
weixin_39528289的博客
06-03 379
HTML5与CSS3是下一代Web应用技术的基础，使互联网进入了一个崭新的时代。本书从HTML5和CSS3的基础知识入手，重点讲解HTML5和CSS3新增功能和最新前端技术，通过大量实例对HTML5和CSS3进行深入浅出的分析，使读者在学习技术的同时，掌握Web开发和设计的精髓，提高综合应用能力。本书共10章，第 1～2章主要讲解HTML5的基础知识，包括HTML5的发展历史、HTML5的优势及浏...
简单html页面代码分享---百度
qq_59430243的博客
02-02 2145
页面制作分享
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值