美文网首页
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学习第三天--标题练习

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

  • 设置段落首字母浮动于左侧

    在学习CSS,当学到css的分类时,有个练习的实例,就是标题所说的 设置段落首字母浮动于左侧 的实例。因为无编程基...

  • Markdown练习笔记

    一级标题 二级标题 三级标题 前端FE学习 学习html 学习css 学习JavaScript

  • react学习路线图

    基础 HTML学习 HTML 基础学习 HTML 基础CSS学习 CSS 基础在上一步练习的基础上为页面添加样式使...

  • liangjunjie跟着李南江学习CSS-项目总结

    在学习完html的标签之后,我们就进入了CSS的内容开始学习了,在学习CSS之前,我们利用html做的样式和练习...

  • selenium中常用的css定位方法

    为学习css在selenium中的定位的,本来写了个html用来学习练习css 定位 1.html代码如下,大家可...

  • CSS学习第一天--样式

    HTML基础知识已经学习完了,接下来就学习CSS设置样式的知识了,笔记练习会持续更新。。。。 CSS样式--内联式...

  • 学习资源收集(前端篇)

    学习网站: 1.MDN文档:官方学习文档2.练习小册子 英文 中文3.张鑫旭的CSS学习网站:也是一个学习css ...

  • CSS引入的四种方式

    第三天学习内容:CSS css有4种引入方式: 1.行内样式 最直接最简单的一种,直接对HTML标签使用style...

  • 任务202 CSS

    任务地址 CSS 完成时间 2016-12-8 任务要求的作业 CSS练习——美化试卷 学习过程中我写的其它博客 ...

网友评论

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

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