仿百度图片首页--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下查找文件中空行的行号
linux下查找文件中空行的行号 linux下查找文件中空行的行号以aa.txt举例: 方法1:sed -n '/[a-zA-Z0-9@#$%^&*]/!=' aa.txt 方法2:grep ...
git 执行 git reset HEAD 报 Unstaged changes after reset
Unstaged changes after reset 解决的办法如下2中办法: 1. git add . git reset --hard 2. git stash git stash dro ...
ubuntu18 任务栏调到底部
$ gsettings set org.gnome.shell.extensions.dash-to-dock dock-position BOTTOM 原因如下: https://askubuntu ...
JVM探究之 —— 垃圾回收（一）
垃圾收集(Garbage Collection,GC),大部分人都把这项技术当做Java语言的伴生产物.事实上,GC的历史比Java久远,1960年诞生于MIT的Lisp是第一门真正使用内存动态分配和 ...
【java/oralce/sql】往一张仅有id，名称，创建时间三个字段的表中插入百万数据需要多久？1分26秒
代码下载:https://files.cnblogs.com/files/xiandedanteng/fastfilltable20191222.rar 表testtb18的结构如下: CREATE ...
运维笔记--Debian/Ubuntu系统离线安装pymssql，连接SqlServer
场景描述: 开始之前,先对Debian和Ubuntu操作系统做个了解,两者都是Linux阵营中很有影响力的发行版本,可以简单理解成“Ubuntu源自Debian,两者系统操作命令基本相同,相比Ubun ...
Clojure 哲学
简单性.专心编程不受打扰(freedom to focus).给力(empowerment).一致性和明确性:Closure编程语言中几乎每一个元素的设计思想都是为了促成这些目标的实现. 学习一门新的 ...
Bootstrap table插件被选中的行颜色改变
参考:https://www.jianshu.com/p/1bb4c37ef636 在 bootstrap-table.min.css 中修改源码 //选中行颜色 .fixed-table-conta ...
abort exit _exit return的区别
exit()函数导致子进程的正常退出,并且参数status&这个值将被返回给父进程.exit()应该是库函数.exit()函数其实是对_exit()函数的一种封装(库函数就是对系统调用的一种封 ...
Spring Boot程序正确停止的姿势
Spring Boot提供了2种优雅关闭进程的方式: 基于管理端口关闭进程基于系统服务方式关闭进程基于管理端口关闭进程基于管理端口方式实现进程关闭实际上是模块spring-boot-actuat ...

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

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

随机推荐

热门专题