HTML基础练习——模拟简单页面

今天给大家分享的是使用HTML模仿一个简单页面模仿图如下：

今天才学了一点的HTML基础，使用的也是一些比较基础的知识，如有错误之处，还请大家批评指正。接下来就开始我今天的分享

分析图片我将界面分成了6个div。

第一个div，用于最上面的导航栏，并且使用无序列表，设置id属性值，方便后续引入外部样式。 

 

让所有的 li向左浮动，为了不让标签互相挨得太近，就使用span标签放入空格符将其隔开一点，

因为无序列表前面会有一个符号，所以我们这里将其去掉。

第二个div：

        我直接放的是我图片，并且设置宽度和高度

 

将盒子的宽度和高度按我们的内容进行设置，并且将其居中

第三个div：

        就使用的是我们的输入框和百度一下按钮 

 

 这里没有对其进行一些属性的设置（别问，问就是忘记了）

第四个div;

        则放的是我的百度热搜榜，使用有序列表ol，并且设置title

 

样式设置的和我们上面的样式设置的是一样的 

第五个和第六个div则是放在我们的foot部分：

这里同样是和我们的上面的导航栏一样的样式，这里的span是被iden隐藏起来的空格符（其实就是想说我写对了，不是直接敲得空格）

样式也是和我们之前一样的

 

这里我使用了：标签选择器，使用了id选择器，也是用了外部样式表以及我们的行内样式

今天分享就结束了，多谢各位，如有优化的地方以及错误的地方，还请各位多多指正。我一定会认真吸取教训，认真修改的！