设为首页 加入收藏

TOP

仿百度图片首页--HTML+CSS练手项目1【Table】(三)
2019-09-17 18:03:26 】 浏览:56
Tags:百度 图片 首页 --HTML CSS 项目 Table
<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: 0;
    right: 0;
    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

【不足之处望指出,一起努力学习前端】

首页 上一页 1 2 3 下一页 尾页 3/3/3
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇《微信小程序项目开发实战:用WeP.. 下一篇使用 Create-React-App 开发 Chro..

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目