美文网首页
CSS学习第三天--标题练习

CSS学习第三天--标题练习

作者: 胆小的米老鼠 | 来源:发表于2018-08-28 22:30 被阅读8次

    首先总结一下代码中用到样式,之所以做成表格,是为了多写几轮,增加自己的印象,样式选择方法采用了内嵌式的,选择器是层次选择器。

    名称 作用
    border 边框
    font-size 字体大小
    margin-right 右外连矩
    text-algin 文字位置
    line-height 文字高度
    font-family 字体
    padding 内连距
    text-decoration 下划线
    :hover 悬浮效果
    list-style 列表文字之前的园点

    代码展示:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>标题</title>
        <style type="text/css">
            .list{
                width: 694px;
                height: 50px;
                list-style: none;
                margin:50px auto;
                font-size: 0;
                padding: 0;
            }
    
            .list li{
                display: inline-block;
                width: 98px;
                height: 48;
                border:1px solid gold;
                font-size: 16px;
                margin-right: -1px;
                text-align: center;
                line-height: 48px;
            }
            .list a{
                font-family:'Microsoft Yahei';
                color:pink;
                text-decoration: none;
    
            }
            .list a:hover{
    
                color: red;
            }
    
        </style>
        
    </head>
    <body>
        <ul class="list">
            <li><a href="">首页</a></li>
            <li><a href="">公司简介</a></li>
            <li><a href="">解决方案</a></li>
            <li><a href="">公司新闻</a></li>
            <li><a href="">行业动态</a></li>
            <li><a href="">招聘</a></li>
            <li><a href="">联系我们</a></li>
        </ul>
    </body>
    </html>
    

    页面效果:

    总结:

    文章运用了众多样式,已经在文章开头做了说明,还给文字加了效果,一个网页的标题样式已经基本形成了,后面会继续学习一些CSS其他的样式,通过这次学习,慢慢的对前端知识有一个整体的初步了解,对之后的后端开发学习和测试深入学习打一下基础。

    相关文章

      网友评论

          本文标题:CSS学习第三天--标题练习

          本文链接:https://www.haomeiwen.com/subject/ftscwftx.html