首页 > 作文

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

更新时间:2023-04-03 02:57:45 阅读: 评论:0

【本文为原创,转载请注明出处】

技术【css+html】 布局【table】

图片准备【百度图标、10张不同类型图】

————————————————————————————————————

步骤1 table 布局

 1 <!doctype html> 2 <html lang="en"> 3 <head> 4     <meta chart="utf-8"> 5     <title>仿百度网页</title> 6 </head> 7 <body> 8 <table"> 9     <氟化硅tr>10         <td></td>11         <td></td>12         <td></td>1吩的组词3         <td></td>14         <td></td>15         <td></td>16         <td></td>17         <td></td>18         <td></td>19     </tr>20     <tr>21         <td colspan="9"></td>22     </tr>    23     <tr>24         <td colspan="9">25             <input type="text"/><button></button>26         </td>27     </tr>28     <tr>29         <td colspan="9">30             <table >31                 <tr>32                     <td></td>33                     <td></td>34                     <td></td>35                     <td></td>36                     <td></td>37                 </tr>38                 <tr>39                     <td></td>40                     <td></td>41                     <td></td>42                     <td></td>43                     <td></td>44                 </tr>45             </table>46         </td>47 48     </tr>49     <tr>50         <td colspan="9">51         </td>52     </tr>53 </table>54 </body>55 </html>

步骤2 填充html内容

html要求:跨行合并

table嵌套table

<!doctype html><html lang="en"><head>    <meta chart="utf-8">    <title>仿百度网页</title></head><bo商务休闲dy><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 chart="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="arch">        <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&宋明帝gt;    <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>
*{    /* 消除浏览器的影响*/    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 ;}/*搜索框*/.arch td{    text-align: center;    padding: 0px 0px 40px 0px;}.arch input{    width: 450px;    width: 450px;    height: 33px;    /*input和button对不齐 input和button都加上vertical-align:top;*/    vertical-align: top;}.arch 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;}

步骤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;

————————————————————————-

【完整代码链接:还未上传,可私聊我】

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

本文发布于:2023-04-03 02:57:43,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/e86ac84d4ff65ac4cb2c66071769ecd2.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:仿百度图片首页–HTML+CSS练手项目1【Table】.doc

本文 PDF 下载地址:仿百度图片首页–HTML+CSS练手项目1【Table】.pdf

标签:外边   步骤   图片   大小
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图