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

随机推荐

JVM探究之 —— 类加载过程
1. 类加载是什么虚拟机把描述类的数据从Class文件加载到内存,并对数据进行校验.转换解析和初始化,最终形成可以被虚拟机直接使用的Java类型,这就是虚拟机的类加载机制. 与那些在编译时需要进行连 ...
微信小程序 input 的 type属性 text、number、idcard、digit 区别
微信小程序的 input 有个属性叫 type,这个 type 有几个可选值: text:不必解释 number:数字键盘(无小数点) idcard:数字键盘(无小数点.有个 X 键) digit:数 ...
Default Activity Not Found解决方法
2018年04月07日 17:22:44 Luckily_Liu 阅读数 13573更多分类专栏: android 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上 ...
mysql时间和本地时间相差13个小时的问题
首先需要查看mysql的当前时区,用time_zone参数 mysql> show variables like '%time_zone%'; +------------------+----- ...
C# selenium 高级
https://www.cnblogs.com/morang/p/7441091.html https://www.cnblogs.com/tobecrazy/p/4817946.html https ...
Ubuntu 16.04 catkin_make 常见操作
参考博客:https://answers.ros.org/question/54178/how-to-build-just-one-package-using-catkin_make/ 1. catk ...
MSYS 工具和TOOLCHAIN的配置
博客转载:https://blog.csdn.net/hunterhuang2013/article/details/70880569 1. MSYS2 自带的开发环境,安装的包叫 msys2-dev ...
MySQL慢查询参数
开启mysql慢查询日志修改/etc/mysql/my.cnf配置文件,添加: [mysqld]slow_query_log = onslow_query_log_file = /var/lib/m ...
awk：for循环输出文件名
简单来说,有file1.txt, file2.txt, file3.txt file1.txt如下: 1 a 4 d d g file2.txt如下: 2 b g 6 9 0 file3.txt如下: ...
Flutter入门（二）
* 网格布局 class HomeContent extends StatelessWidget { List<Widget> _getListData() { var tempList ...

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

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

随机推荐

热门专题