仿百度图片首页--HTML+CSS练手项目1【Table】

【本文为原创，转载请注明出处】

技术【CSS+HTML】布局【Table】

图片准备【百度图标、10张不同类型图】

------------------------------------------------------------------------------------------------------------

步骤1 table 布局

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>仿百度网页</title>

 </head>

 <body>

 <table">

     <tr>

         <td></td>

         <td></td>

         <td></td>

         <td></td>

         <td></td>

         <td></td>

         <td></td>

         <td></td>

         <td></td>

     </tr>

     <tr>

         <td colspan="9"></td>

     </tr>

     <tr>

         <td colspan="9">

             <input type="text"/><button></button>

         </td>

     </tr>

     <tr>

         <td colspan="9">

             <table >

                 <tr>

                     <td></td>

                     <td></td>

                     <td></td>

                     <td></td>

                     <td></td>

                 </tr>

                 <tr>

                     <td></td>

                     <td></td>

                     <td></td>

                     <td></td>

                     <td></td>

                 </tr>

             </table>

         </td>

     </tr>

     <tr>

         <td colspan="9">

         </td>

     </tr>

 </table>

 </body>

 </html>

table布局

步骤2 填充HTML内容

html要求：跨行合并

table嵌套table

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>仿百度网页</title>

</head>

<body>

<table>

    <tr>

        <td><a href="#">收藏本页</a></td>

        <td><span>|</span></td>

        <td><a href="#">百度首页</a></td>

        <td><span>|</span></td>

        <td><a href="#">百度图片APP</a></td>

        <td><span>|</span></td>

        <td><a href="#">登录</a></td>

        <td><span>&nbsp;</span></td>

        <td><a href="#">注册</a></td>

    </tr>

    <tr>

        <td colspan="9"><img src="img/logo.png"/></td>

    </tr>

    <tr>

        <td colspan="9">

            <input type="text"/><button>百度一下</button>

        </td>

    </tr>

    <tr>

        <td colspan="9">

            <table>

                <tr>

                    <td><a href="#"><img src="img/img01.jpeg" /></a></td>

                    <td><a href="#"><img src="img/img02.jpeg" /></a></td>

                    <td><a href="#"><img src="img/img03.jpeg" /></a></td>

                    <td><a href="#"><img src="img/img04.jpeg" /></a></td>

                    <td><a href="#"><img src="img/img05.jpeg" /></a></td>

                </tr>

                <tr>

                    <td><a href="#"><img src="img/img06.jpeg" /></a></td>

                    <td><a href="#"><img src="img/img07.jpeg" /></a></td>

                    <td><a href="#"><img src="img/img08.jpeg" /></a></td>

                    <td><a href="#"><img src="img/img09.jpeg" /></a></td>

                    <td><a href="#"><img src="img/img10.jpeg" /></a></td>

                </tr>

            </table>

        </td>

    </tr>

    <tr>

        <td colspan="9">

            <span>&copy;2016 Baidu</span>

            <a href="#">使用百度前必读</a>

            <span>|</span>

            <a href="#">高级搜索</a>

            <span>|</span>

            <a href="3">帮助</a>

        </td>

    </tr>

</table>

</body>

</html>

完善网页

步骤3 CSS样式【大小、位置、颜色、图片】

css要求：导航栏浮右，字体颜色大小，内外边距

百度图标大小，位置居中，内外边距

输入框和按钮颜色、长度和宽度，字体颜色，内外边距

照片模块的位置、半透明背景、图片大小，内外边距

底部导航栏位置居中，居于底部【不足之处，浏览器窗口大小改变任一直位于底部】

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>仿百度网页</title>

    <link rel="stylesheet" href="css/index.css">

</head>

<body>

<table class="table-one">

    <tr class="nav">

        <td><a href="#">收藏本页</a></td>

        <td><span>|</span></td>

        <td><a href="#">百度首页</a></td>

        <td><span>|</span></td>

        <td><a href="#">百度图片APP</a></td>

        <td><span>|</span></td>

        <td><a href="#">登录</a></td>

        <td><span>&nbsp;</span></td>

        <td><a href="#">注册</a></td>

    </tr>

    <tr class="logo">

        <td colspan="9"><img src="img/logo.png"/></td>

    </tr>

    <tr class="search">

        <td colspan="9">

            <input type="text"/><button>百度一下</button>

        </td>

    </tr>

    <tr class="picture">

        <td colspan="9">

            <table class="table-two">

                <tr>

                    <td><a href="#"><img src="img/img01.jpeg" /></a></td>

                    <td><a href="#"><img src="img/img02.jpeg" /></a></td>

                    <td><a href="#"><img src="img/img03.jpeg" /></a></td>

                    <td><a href="#"><img src="img/img04.jpeg" /></a></td>

                    <td><a href="#"><img src="img/img05.jpeg" /></a></td>

                </tr>

                <tr>

                    <td><a href="#"><img src="img/img06.jpeg" /></a></td>

                    <td><a href="#"><img src="img/img07.jpeg" /></a></td>

                    <td><a href="#"><img src="img/img08.jpeg" /></a></td>

                    <td><a href="#"><img src="img/img09.jpeg" /></a></td>

                    <td><a href="#"><img src="img/img10.jpeg" /></a></td>

                </tr>

            </table>

        </td>

    </tr>

    <tr class="foot">

        <td colspan="9">

            <span>&copy;2016 Baidu</span>

            <a href="#">使用百度前必读</a>

            <span>|</span>

            <a href="#">高级搜索</a>

            <span>|</span>

            <a href="#">帮助</a>

        </td>

    </tr>

</table>

</body>

</html>

完整的index.html

*{

    /* 消除浏览器的影响*/

    margin: 0px;

    padding: 0px;

}

body{

    background: url("../img/background.jpg");

    /*设置背景图片大小 background-size: 100%;*/

    background-size: 100%;

}

a{

    text-decoration: none;

}

table{

    width: 100%;

    height: 100%;

}

/*顶部导航*/

.nav{

    float:right;

}

.nav td{

    float: left;

    padding: 5px 2px 5px 0px;

}

.nav a{

    font-size: 11px;

    color: #FFFFFF;

}

.nav span{

    font-size: 11px;

    color: #FFFFFF;

}

/*网页logo*/

.logo td{

    text-align: center;

}

.logo img{

    width: 250px;

    margin: 50px 0px 10px 0px ;

}

/*搜索框*/

.search td{

    text-align: center;

    padding: 0px 0px 40px 0px;

}

.search input{

    width: 450px;

    width: 450px;

    height: 33px;

    /*input和button对不齐 input和button都加上vertical-align:top；*/

    vertical-align: top;

}

.search button{

    width: 90px;

    height: 37px;

    font-size: 13px;

    color: #FFFFFF;

    background-color: #38f;

    /*input和button对不齐 input和button都加上vertical-align:top；*/

    vertical-align: top;

    border: #38f;;

}

/*图片*/

.table-two{

    width: 674px;

    height: 272px;

    margin: 0 auto;

    /*半透明背景色  background-color:rgba(255,255,255,0.3);*/

    background-color:rgba(255,255,255,0.3);

    padding: 4px 4px 0px 4px;

}

.table-two img{

    width: 130px;

    height: 130px;

    margin: 2px 2px 2px 2px;

}

/*脚注*/

.foot td{

    position: fixed;

    bottom: 5px;

    left:;

    right:;

    text-align: center;

}

.foot a,span{

    color: #FFFFFF;

    font-size: 15px;

    padding: 0px 2px 0px 0px;

}

完整的index.css

步骤4 知识点整理

设置背景图片大小 background-size: 100%;

margin:0 auto; 与 text-aglin的区别【未整理】

底部导航栏 position: fixed; bottom: 5px; left: 0;right: 0;*/

半透明背景色 background-color:rgba(255,255,255,0.3);

input和button对不齐 vertical-align:top；

-------------------------------------------------------------------------

【完整代码链接：https://github.com/C-XingM/Search】

【不足之处望指出，一起努力学习前端】

仿百度图片首页--HTML+CSS练手项目1【Table】的更多相关文章

视频网站大杂烩--HTML+CSS练手项目1【Frameset】
[本文为原创,转载请注明出处] 技术[CSS+HTML] 布局[Frameset] -------------------------------------------------------- ...
JavaScript仿百度图片浏览效果（转载）
转载来源:https://www.jb51.net/article/98030.htm 这是一个非常好的案例,然而jquery的时代正在徐徐关闭. 当你调整浏览器宽高,你会发现它不是自适应的.当你想把 ...
web前端学习部落22群分享给需要前端练手项目
前端学习还是很有趣的,可以较快的上手然后自己开发一些好玩的项目来练手,网上也可以一抓一大把关于前端开发的小项目,可是还是有新手在学习的时候不知道可以做什么,以及怎么做,因此,就整理了一些前端项目教程, ...
webpack练手项目之easySlide（二）：代码分割（转）
在上一篇 webpack练手项目之easySlide(一):初探webpack 中我们一起为大家介绍了webpack的基本用法,使用webpack对前端代码进行模块化打包. 但是乍一看webpack ...
推荐：一个适合于Python新手的入门练手项目
随着人工智能的兴起,国内掀起了一股Python学习热潮,入门级编程语言,大多选择Python,有经验的程序员,也开始学习Python,正所谓是人生苦短,我用Python 有个Python入门练手项目, ...
webpack练手项目之easySlide（二）：代码分割
Hello,大家好. 在上一篇 webpack练手项目之easySlide(一):初探webpack 中我们一起为大家介绍了webpack的基本用法,使用webpack对前端代码进行模块化打包. 但 ...
80个Python练手项目列表
80个Python练手项目列表我若将死,给孩子留遗言,只留一句话:Repetition is the mother of all learning重复是学习之母.他们将来长大,学知识,技巧.爱情 ...
webpack练手项目之easySlide（三）：commonChunks（转）
Hello,大家好. 在之前两篇文章中: webpack练手项目之easySlide(一):初探webpack webpack练手项目之easySlide(二):代码分割与大家分享了webpack的 ...
Python之路【第二十四篇】：Python学习路径及练手项目合集
Python学习路径及练手项目合集 Wayne Shi· 2 个月前参照:https://zhuanlan.zhihu.com/p/23561159 更多文章欢迎关注专栏:学习编程. 本系列Py ...

随机推荐

讨厌的linux----vsftpd 匿名上传配置
核心一句话: vsftpd: refusing to run with writable anonymous root 匿名账号的根目录,不允许写入,否则匿名登录验证失败只有再 ftp 命令操作, ...
ZooKeeper相关资料集锦
1.ZooKeeper相关概念总结 https://github.com/Snailclimb/JavaGuide/blob/master/docs/system-design/framework/Z ...
Windows通过URL启动本机App
Windows通过URL启动本机App http://xxx.itdhz.com/?file=001-Windows/100-Windows通过URL启动本机App
Python10大热门项目
文章地址:https://baijiahao.baidu.com/s?id=1625230403885659615&wfr=spider&for=pc 今天给大家盘点一下实验楼最热门的 ...
Linux虚拟机：发布WebService接口出现异常，无法访问接口
Linux虚拟机:发布WebService接口出现异常,无法访问接口今天在部署WebService工程的时候遇到的问题: 在Linux虚拟机上部署一个tomcat同时在tomcat下放置2个工程,其 ...
JS项目快速压缩（windows平台）
问题当下JS项目都有node_modules,从而项目文件多,容量大. 如何快速压缩一个JS项目? 方法首先对JS项目安装生产环境的依赖npm install --production. 这时不要 ...
Flume监控指标项
配置监控 1.修改flume-env.sh export JAVA_OPTS="-Dcom.sun.management.jmxremote -Dcom.sun.management.jmx ...
js开启和关闭页面滚动【亲测有效】
在移动端的页面开发过程中,经常会遇到点击弹框禁止页面滚动的情景,下面就来说下具体的做法... 第一步:构建一个函数 function bodyScroll(event){ event.preventD ...
C# Selenium操作指南,关闭黑色CMD窗口/禁用图片/隐藏浏览器等
引用部分:1. 2. 配置部分: ChromeDriverService driverService = ChromeDriverService.CreateDefaultService(); dri ...
执行redis命令redis-trib.rb查看集群信息报错cannot load such file -- redis (LoadError)
问题描述: 在执行redis-trib.rb命令查看集群状态的时候,报错: [aiprd@hadoop1 ~]$ redis-trib.rb check Traceback (most recent ...

仿百度图片首页--HTML+CSS练手项目1【Table】

仿百度图片首页--HTML+CSS练手项目1【Table】的更多相关文章

随机推荐

热门专题