仿百度图片首页--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]测硬盘读写速度、内存读写速度
测硬盘的读写速度可以用以下命令:dd if=/dev/zero of=file bs=1M count=1024 测内存读写速度可以使用以下命令: dd if=/dev/zero of=/dev/nu ...
sparkStreaming读取kafka写入hive表
sparkStreaming: package hive import java.io.File import org.apache.kafka.clients.consumer.ConsumerRe ...
Nginx之Rewrite规则
IF语句: http://tengine.taobao.org/nginx_docs/cn/docs/http/ngx_http_rewrite_module.html#if 首先申明nginx只有i ...
CentOS 使用官方源yum安装最新nginx版本
CentOS 使用官方源yum安装最新nginx版本 1.创建nginx.repo # vi /etc/yum.repos.d/nginx.repo 2.添加内容#如果是CentOS6,文件内容如下: ...
CORS跨域带来的preflight request
CORS跨域带来的preflight request https://blog.csdn.net/baidu_35407267/article/details/79043515 HTTPS://blo ...
JDK性能监控命令
阅读原文查看虚拟机进程:jps 命令 jps 命令可以列出所有的 Java 进程.如果 jps 不加任何参数,可以列出 Java 程序的进程 ID 以及 Main 函数短名称,如下所示. $ jps ...
Python - importlib 模块
importlib 模块可以根据字符串来导入相应的模块目录结构: 在根目录下创建 importlib_test.py 和 aaa/bbb.py bbb.py: class Person(object ...
简单工厂(三)——JDK源码中的简单工厂
private static Calendar createCalendar(TimeZone zone,Locale aLocale) { CalendarProvider provider = L ...
IDEA中类文件显示J,IDEA Unable to import maven project: See logs for details
今天用了下lemon清理了下垃圾后,IDEA打开项目类文件图标由C变为J,在IDEA右侧的Maven Project中点击刷新提示IDEA Unable to import maven project ...
NET高级开发工程师职责要求
岗位职责1.参与架构以及核心业务的设计:2.使用简单,干净,可维护性高,扩展性好的代码实现产品功能,并在必要时重构现有代码:3.贯彻面向接口以及模块化组件的设计理念:4.熟练RabbitMQ.ES.M ...

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

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

随机推荐

热门专题