仿百度图片首页--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 ...

随机推荐

ethtool 强制设置网卡运行模式为100M
ethtool -s eth0 autoneg off speed 100 duplex full
win10系统优化方法及chkdsk工具使用
发现安装了测试版的Win10真的很慢!其实Win10在每次升级后,的确会比老版慢上很多,这只要是因为新增加的安全功能,往往会对系统速度造成拖累.但有很多方法都可以让你的系统运行如飞. http://b ...
Python的threading和multiprocessing
Python的threading 基础用法, 通过 threading.Thread() 创建线程, 然后 start() 和 join() import time import threading ...
java合并多个word 2007 文档基于docx4j
参考文章:http://dh.swzhinan.com/post/185.html 引入的jar包 <dependency> <groupId>org.docx4j</g ...
C++ int double float对应的长度以及二进制
#include <iostream> using namespace std; void showIntBit(int a); void showDoubleBit(double a1) ...
ubuntu 各压缩文件解压命令大全
.tar 解包:tar xvf xxx.tar 打包:tar cvf xxx.tar DirName (注:tar是打包,不是压缩!) .gz 解压1:gunzip FileName.gz 解压2:g ...
Centos7环境下部署搭建discuz论坛
1.首先搭建lnmp环境 2.从官网复制git地址(https://gitee.com/ComsenzDiscuz/DiscuzX),在服务器上安装git命令 yum install git -y ...
python入门之格式化输出
目录扩展: 保留几位小数一.占位符格式化输出 1.1 %s 1.2 %d 二..format()方式三.f-string 扩展: 保留几位小数保留两位小数 a = 12345.2487 pri ...
python面试题300道答案参考1
提示自己整合的答案,虽有百家之所长,仍很局限,如有需要改进的地方,或者有更好的答案,欢迎提出! [合理利用 Ctrl+F 提高查找效率] 文章来源 https://www.cnblogs.co ...
springcloud使用之断路器hystrix
上一篇文章提到我们最近开了个新项目,目的是将新的业务放到新项目中,老项目单独维护,再逐步迁移老项目到新项目里.但就在前端时间生产环境发生了一个事故,事故开始的异常是我们的业务发现前端h5页面办理很慢, ...

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

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

随机推荐

热门专题