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

TOP

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

2019-09-17 18:03:26 【大中小】浏览:55次

/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>©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>

首页上一页 1 2 3 下一页尾页 2/3/3
【大中小】【打印】【繁体】【投稿】【收藏】【推荐】【举报】【评论】【关闭】【返回顶部】

上一篇：《微信小程序项目开发实战：用WeP..	下一篇：使用 Create-React-App 开发 Chro..