CSS综合小练习
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>
<input type="text" value="请输入查询条件">
<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综合小练习的更多相关文章
- javascript综合小案例，校验用户注册信息提交
完成这个综合小案例,对于html.css.javascript的大部分内容复习快结束了. 这里做一个小案例--要实现的功能,以一张图片的形式给出: 首先,写出提交数据之后进入的页面代码: <!D ...
- 一个ssm综合小案例-商品订单管理----写在前面
学习了这么久,一直都是零零散散的,没有把知识串联起来综合运用一番 比如拦截器,全局异常处理,json 交互,RESTful 等,这些常见技术必须要掌握 接下来呢,我就打算通过这么一个综合案例把这段时间 ...
- css的小技巧
前几天看到<css揭秘>这本书,第一感觉是 css怎么能出这么厚的一本书,不过 细细一想,用好css真的可以实现很多想要的效果,节省很多js代码. 总结几个css的小技巧: 1,将所有元素 ...
- 一些常用的html/CSS效果---小技巧
我常用的重置样式表reset.css /*===============基础信息================*/ *{border: 0;padding: 0;margin: 0;} table ...
- 如何使用CSS实现小三角形效果
如何使用CSS实现小三角形效果:建议:尽可能的手写代码,可以有效的提高学习效率和深度.在众多的网页效果中,都有小三角形效果的应用,能够增加特定应用的美观度,下面就给出一段实例代码,里面介绍了两种实现小 ...
- 第八十四节，css布局小技巧及font-awesome图标使用
css布局小技巧及font-awesome图标使用 图片鼠标放上去遮罩效果,显示文字 当鼠标放上去时 /*最外层div*/ .a{ width: 384px; height: 240px; backg ...
- 通过css实现小三角形
下面是用css做小三角形的demo, <!DOCTYPE html><html lang="en"><head> <meta charse ...
- css样式小技巧
1.css样式小技巧 HTML怎样设定使背景图片不随页面滚动而滚动 background-attachment:fixed; 2.实现li a 超过长度内容出现省略号… overflow:hidden ...
- CSS 黑魔法小技巧，让你少写不必要的JS，代码更优雅
首页 登录注册 CSS 黑魔法小技巧,让你少写不必要的JS,代码更优雅 阅读 8113 收藏 927 2017-09-26 原文链接:github.com 腾讯云容器服务CSS,立 ...
随机推荐
- php 将秒数转换为时间（年、天、小时、分、秒）
$t=1637544; $d=Sec2Time($t); $d为 0年18天 22小时52分24秒 //将秒数转换为时间(年.天.小时.分.秒) function Sec2Time($time){ ...
- 【转】DRY原则的误区
很多编程的人,喜欢鼓吹各种各样的“原则”,比如KISS原则,DRY原则…… 总有人把这些所谓原则奉为教条或者秘方,以为兢兢业业地遵循这些,空喊几个口号,就可以写出好的代码.同时,他们对违反这些原则的人 ...
- 64位FreeSWITCH编译安装（版本1.4.20）
1.安装64位的CentOS6.5操作系统(勾选的服务器版本安装). 2.下载FreeSWITCH安装包以及关联的lib库.下载地址http://files.freeswitch.org/downlo ...
- Excel列添加单引号
="'"&A2&"'," 对A2列同步添加单引号
- 基于tornado的爬虫并发问题
tornado中的coroutine是python中真正意义上的协程,与python3中的asyncio几乎是完全一样的,而且两者之间的future是可以相互转换的,tornado中有与asyncio ...
- java正则表达式:验证字符串数字
正则表达式:^([0-9]+)$ -> ^:匹配以0-9开头,[0-9]:匹配0-9数字,+:匹配至少一个数字,$:匹配以数字结尾 /** *正则表达式:验证字符串数字 *两种方式: *1.pa ...
- HTML常用标签（整理）
超文本标记语言,即HTML(Hypertext Markup Language),是用于描述网页文档的一种标记语言.现在应用主流是HTML 4.01版本,发布于1999年,为W3C推荐标准.HTML ...
- Android 7.0 介绍和适配问题
介绍:http://gank.io/post/56e0b83c67765963436fcb94 适配:http://blog.csdn.net/fengyuzhengfan/article/detai ...
- cygwin下安装c语言开发环境
1.到官网cygwin.com下载安装程序. 2.添加清华的cygwin镜像:https://mirrors.tuna.tsinghua.edu.cn/cygwin/ 3.在安装:vim,git,gc ...
- MySQL创建用户与授权方法实例精讲
MySQL中创建用户与授权的实现方法. 运行环境:widnows xp professional + MySQL5.0 一, 创建用户: 命令:CREATE USER 'username'@'host ...