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

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

技术【CSS+HTML】   布局【Table】

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

------------------------------------------------------------------------------------------------------------

步骤1  table 布局

步骤2  填充HTML内容

html要求：跨行合并

                 table嵌套table

步骤3 CSS样式【大小、位置、颜色、图片】

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】