CSS选择器学了不少了，现在来实战一下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <style type="text/css">

        .content {
            width: 800px;
            margin: 0 auto;
        }

        .content h1 {
            font-family: "Microsoft YaHei UI";
            font-size: 28px;
            text-align: center;
        }

        .content .box {
            text-align: center;
        }

        .time, .news {
            font-size: 14px;
        }

        .time {
            color: rgb(190, 190, 190);
        }

        .news {
            color: #990000;
        }

        /*属性选择器*/
        .box input[type=text] {
            color: red;
        }

        .box input[type=button] {
            font-weight;
            color: green;
        }

        .content p {
            text-indent: 2em;
            line-height: 24px;
        }

        .content p span {
            color: blue;
        }

    </style>
</head>
<body>
    <div class="content">
        <h1>中乙队赛前突然换帅仍胜毅腾 高原黑马欲阻击舜天</h1>
        <div class="box">
            <span class="time">2014年07月16日20:11</span>
            <span class="news">新浪体育 评论中大奖（11人参与）</span>
            <a href="#">收藏本文</a>&nbsp;
            <input type="text" value="请输入查询条件">&nbsp;
            <input type="button" value="搜索">
        </div>
        <hr />

        <p>新浪体育讯　7月16日是燕京啤酒<span>[微博]</span>
            2014中国足协杯第三轮比赛，丽江嘉云昊队主场迎战哈尔滨毅腾队的比赛日。
            然而就在比赛日中午，丽江嘉云昊队主帅李虎和另外两名成员悄然向俱乐部提出了辞呈，
            并且收拾行囊准备离开。在这样的情况下，
            丽江嘉云昊队不得不由此前的教练员杨贵东代理指挥了本场比赛。</p>

        <p>在昨日丽江嘉云昊队主帅李虎就缺席了赛前的新闻发布会，
            当时俱乐部给出的解释是李虎由于身体欠佳，
            去医院接受治疗。然而今日李虎出现在俱乐部时，
            向记者否认了这一说法，并且坦言已经向俱乐部提出了辞呈。</p>

        <p>据记者多方了解的情况，李虎<span>[微博]</span>
            极其教练组近来在执教成绩上承受了不小的压力，
            在联赛间歇期期间，教练组曾向俱乐部提出能够多引进有实力的球员补强球队，
            然而由于和俱乐部在投入以及成绩指标上的分歧，李虎最终和教练组一起在比赛日辞职。</p>

        <p>这样的情况并没有影响到丽江嘉云昊队<span>[微博]</span>的队员，
            在比赛中丽江队在主场拼的非常凶，在暴雨之中仍然发挥出了体能充沛的优势，
            最终凭借点球击败了中超球队哈尔滨毅腾，顺利晋级下一轮比赛。
            <strong>根据中国足协杯的赛程，丽江嘉云昊队将在本月23日迎战江苏舜天队。</strong></p>
    </div>

</body>
</html>

写CSS比较有意思的是，写好了CSS看效果，有种焕然一新的感觉，原来毫无生气的页面，瞬间变得整齐，规矩。

CSS综合小练习的更多相关文章

  1. javascript综合小案例，校验用户注册信息提交

    完成这个综合小案例,对于html.css.javascript的大部分内容复习快结束了. 这里做一个小案例--要实现的功能,以一张图片的形式给出: 首先,写出提交数据之后进入的页面代码: <!D ...

  2. 一个ssm综合小案例-商品订单管理----写在前面

    学习了这么久,一直都是零零散散的,没有把知识串联起来综合运用一番 比如拦截器,全局异常处理,json 交互,RESTful 等,这些常见技术必须要掌握 接下来呢,我就打算通过这么一个综合案例把这段时间 ...

  3. css的小技巧

    前几天看到<css揭秘>这本书,第一感觉是 css怎么能出这么厚的一本书,不过 细细一想,用好css真的可以实现很多想要的效果,节省很多js代码. 总结几个css的小技巧: 1,将所有元素 ...

  4. 一些常用的html/CSS效果---小技巧

    我常用的重置样式表reset.css /*===============基础信息================*/ *{border: 0;padding: 0;margin: 0;} table ...

  5. 如何使用CSS实现小三角形效果

    如何使用CSS实现小三角形效果:建议:尽可能的手写代码,可以有效的提高学习效率和深度.在众多的网页效果中,都有小三角形效果的应用,能够增加特定应用的美观度,下面就给出一段实例代码,里面介绍了两种实现小 ...

  6. 第八十四节，css布局小技巧及font-awesome图标使用

    css布局小技巧及font-awesome图标使用 图片鼠标放上去遮罩效果,显示文字 当鼠标放上去时 /*最外层div*/ .a{ width: 384px; height: 240px; backg ...

  7. 通过css实现小三角形

    下面是用css做小三角形的demo, <!DOCTYPE html><html lang="en"><head> <meta charse ...

  8. css样式小技巧

    1.css样式小技巧 HTML怎样设定使背景图片不随页面滚动而滚动 background-attachment:fixed; 2.实现li a 超过长度内容出现省略号… overflow:hidden ...

  9. CSS 黑魔法小技巧，让你少写不必要的JS，代码更优雅

    首页   登录注册         CSS 黑魔法小技巧,让你少写不必要的JS,代码更优雅 阅读 8113 收藏 927 2017-09-26 原文链接:github.com 腾讯云容器服务CSS,立 ...

随机推荐

  1. Smarty标签 for运算

    $select="SELECT {$col_name} FROM woke_order where deleted=0 ".$where.$orderby ; // 取出数组 $r ...

  2. Python读文本文件

    file_object = open('thefile.txt') try: all_the_text = file_object.read() finally: file_object.close( ...

  3. Linux shell下30个有趣的命令

    Tips 原文作者:Víctor López Ferrando 原文地址:30 interesting commands for the Linux shell 这些是我收集了多年的Linux she ...

  4. 颠覆Git 命令使用体验的神器 - tig

    颠覆 Git 命令使用体验的神器 -- tig     tig, 就是把 Git 这个单词倒过来念, 它是一个命令行工具, 日常使用中我用它来取代 Git 最高频的几个操作, 如 git log, g ...

  5. Atitit 路径规划法attilax总结 扫描线路法

    Atitit 路径规划法attilax总结 扫描线路法 2017/2/8 20:43:37[吐槽]深圳-小 2017/2/8 20:43:37 群主做什么的2017/2/10 10:03:15系统消  ...

  6. Atitit opencv 模板匹配

    Atitit opencv 模板匹配 1.1. 图片1 1.2. Atitit opencv 模板匹配  6中匹配算法貌似效果区别不大1 1.3. 对模板缩放的影响 一般的缩放可以,太大了就歇菜了.. ...

  7. HTML5学习笔记（七）：CSS盒子模型

    在CSS中,盒子模型有W3C标准盒子模型和IE盒子模型两种,这里所谈的是基于W3C标准的盒子模型. 所有HTML元素都可以看作盒子,即所有HTML标签都支持盒子模型的属性,在CSS中,"bo ...

  8. Nexus 搭建maven 私有仓库

    nexus如果没有私服,我们所需的所有构件都需要通过maven的中央仓库和第三方的Maven仓库下载到本地,而一个团队中的所有人都重复的从maven仓库下载构件无疑加大了仓库的负载和浪费了外网带宽,如 ...

  9. python TCP编程

    1.socket 服务端和客户端通过socket套接字进行通信 2.服务端 import socket import threading def tcp_handler(connect_sock, a ...

  10. Windows下使用第三方lua库

    第三方库lua和dll文件可以直接放在lua解释器目录下, > print(package.cpath)D:\lua-5.2.3\src\?.dll;D:\lua-5.2.3\src\loada ...