HTML/CSS实战训练（仿新浪网页）

最新推荐文章于 2024-06-20 18:07:52 发布

小白在努力！

最新推荐文章于 2024-06-20 18:07:52 发布

阅读量2.2k

点赞数 5

分类专栏： HTML 文章标签： html

本文链接：https://blog.csdn.net/giserhfbuie/article/details/114778942

版权

学了两天的HTML/CSS了，这是第一次参与实战做网页，发现将零碎知识点串在一起很重要，要不然还是不知道怎么写，而且深刻感受到了前端的不易，虽然前端逻辑简单，但实际上手却有很多疑问和考虑的点，不过幸好通过不断的尝试做出来了。在用CSS选择器时，一定要注意是块级元素还是行内元素，它们之间的特点，margin和padding是对哪个标签使用的，float使用完毕对齐后，要在div标签中加入<div style="clear:both;">，这样其他边框才不会改变。另外，对于行内元素来说，是不能直接控制它的宽度和高度的，可以转换为块级元素再使用。

选择器可以分为id选择器，类选择器，标签选择器，*选择器和后代选择器等等，最常用的就是后代选择器，因为在不同div中会存在相同的无序列表或有序列表，而行都是用li来表示，如果用id或类选择器还要重新命名，而用子代选择器就直接按标签顺序写就行了，方便易读易修改。

刚开始看见新浪网页觉得很难，刚学了两天怎么可能仿下来呢，但可能是因为兴趣吧，就参照着新浪网页的源码，大致按自己的思路写了下来，而且通过这次实战发现理论学习要参与实战训练，否则对知识点的理解很有限。

未来可期，继续加油！

<html>
    <head>
        <title>新浪微博</title>
        <style>
       
            #header{
              width: 1200px;
              margin: 0px auto;
              padding-bottom:26px;
              padding-top:20px ;
              background-color: ghostwhite;
            }
            #container{
              width: 1200px;
              margin: 0px auto;
            }
           
            #header #logo{
                float: left;
            }
            #header #logo a img{
             vertical-align:middle;
            }
            #header #language{
                float: right;
                line-height: 47px;
                height: 47px;
            }
            #header #language{
                text-decoration: none;
            }
            #header #language a{
                color: #4c92fc;
                font-size: 14px;
                font-family: Arial, "Microsoft Yahei";
                text-decoration: none;
            }
            #container #nav{
          
           width: 200px;
           float: left;
            }
            #container #content{
            width: 960px;
            float: right;
            }
            ul{
                list-style-type:decimal;/*注意：这里无序列表转为有序了，decimal是小数的意思，所以有序列表和无序列表只用记住一个就行了*/
                list-style-type:square;
                list-style-position: outside;/*把小箭头放在里面*/
                list-style: none;
                t