CSS考试题目
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>新闻排行</title>
<style>
*{margin: 0;padding: 0;}
li{list-style: none;}
body{font-family: 微软雅黑;}
.box{
height: 300px;
width: 470px;
margin: 100px auto;
background-color: #fff;
}
/*顶部导航栏*/
.box .header{
width: 100%;
height: 32px;
line-height: 32px;
background-color: #fff;
border-bottom: 5px solid red;/*设置导航栏下的红线*/
}
.box .header ul li{
float: left;
width: 45px;
padding-left: 15px;
padding-right: 15px;
text-align: center;
background-color: #ccc;
border-left: 2px solid #F1F1F1;/*设置导航栏左边边框线*/
}
.box .header ul li a:link,.box .header ul li a:visited{
text-decoration: none;
}
.box .header ul li a:hover{
color: gold;
}
.box .header .news{
width: 80px;
padding-left: 30px;
padding-right: 20px;
text-align: center;
border: none;
background-color: #fff;
font-weight: bold;
}
.box .header .guonei{
background-color: #f00;/*设置国内两个字的背景颜色*/
border-right: 1px solid #F1F1F1;
}
.box .header .guonei a:link,.box .header .guonei a:visited{
text-decoration: none;
color: #fff;
}
.box .header .guonei a:hover{
color:gold;
}
/*新闻版块*/
.box .content{
color: #C3C3C3;/*设置新闻区域文本颜色*/
}
.box .content ul{
padding-left: 50px;
width: 100%;
height: 260px;
background: url(bg.gif) no-repeat 20px 5px;/*设置列表前面的图片*/
}
.box .content ul a:link,.box .content ul a:visited{
text-decoration:none;
color: #C3C3C3;
}
.box .content ul a:hover{
color: #333;
}
.box .content ul li{
margin-top: 3px;
height: 23px;
line-height: 23x;
}
</style>
</head>
<body>
<div class="box">
<div class="header">
<ul>
<li class="news"><a href="#">新闻排行</a></li>
<li class="guonei"><a href="#">国内</a></li>
<li><a href="#">国际</a></li>
<li><a href="#">社会</a></li>
<li><a href="#">网评</a></li>
</ul>
</div>
<div style="clear: both;"></div>
<div class="content">
<ul>
<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>
<li><a href="#">美军高官:不排除和中国发生直接军事对抗可能会输.....</a></li>
<li><a href="#">美军高官:不排除和中国发生直接军事对抗可能会输.....</a></li>
<li><a href="#">美军高官:不排除和中国发生直接军事对抗可能会输.....</a></li>
</ul>
</div>
</div>
</body>
</html>
CSS考试题目的更多相关文章
- 总结CSS面试题目的考察点及常见布局问题整理
整理网上流传的若干份面试题目,突发奇想,总结关于CSS面试题目的考察点,发现问题大多围绕几个属性和几种题目,水平有限,仅供参考. 写这个博文内心有种莫名奇妙的自我谴责感,实在不应该把面试层叠样式“应试 ...
- rhce 考试题目总结
rhce 考试题目总结归类 开机需要做的事: 检查系统版本 配置yum源 修改selinux的模式 ping一下server机器 1.分区类题目 1.1 rhcsa 第十五题 添加swap分区 要点: ...
- SEO工程师考试题目
http://www.wocaoseo.com/thread-201-1-1.html SEO,全名Search Engine Optimization,其中文名字为'搜索引擎优化' .其英 ...
- 【洛谷T7152】(考试题目)细胞
题面 题目描述 小 X 在上完生物课后对细胞的分裂产生了浓厚的兴趣.于是他决定做实验并 观察细胞分裂的规律. 他选取了一种特别的细胞,每天每个该细胞可以分裂出 x − 1 个新的细胞. 小 X 决定第 ...
- 413 重温HTML + css 考试 + 访问HTML元素
考试前的复习 初学css1:认识CSS 1.1:css简介,css全称是层叠样式表,Cascading style sheets 1.2:css的作用,主要是用于定义html内容在浏览器内的显示样式, ...
- 几个简单的html+css+js题目
1.页面中有一图片,请在下划线处添加代码能够实现隐藏该图片的功能 <img id="pic" src="door.jpg" width="200 ...
- 其他-pkuwc2019数学考试题目
时限150min,有windows和Ubuntu使用 十道填空题,在poj上举行,选手提交答案,系统将答案自动填入一个作用是输出答案的程序,再将该程序提交评测(由于该程序变量名为longlong,所以 ...
- python之路之考试题目
- 网易云课堂_C++程序设计入门(下)_期末考试_期末考试在线编程题目
期末考试在线编程题目 返回考试 本次考试题目一共两个,在考试期间可以不限制次数地提交 温馨提示: 1.本次考试属于Online Judge题目,提交后由系统即时判分. 2.学生可以在考试截止时间 ...
随机推荐
- Esfog_UnityShader教程_NormalMap法线贴图
咳咳,好久没有更新了,一来是这段时间很忙很忙,再来就是自己有些懒了,这个要不得啊,赶紧补上.在前面我们已经介绍过了漫反射和镜面反射,这两个是基本的光照类型,仅仅依靠它们就想制作出精美的效果是远远不够的 ...
- Android 进程通信机制之 AIDL
什么是 AIDL AIDL 全称 Android Interface Definition Language,即 安卓接口描述语言.听起来很深奥,其实它的本质就是生成进程间通信接口的辅助工具.它的存在 ...
- c#扩展出MapReduce方法
MapReduce方法主体: public static IDictionary<TKey, TResult> MapReduce<TInput, TKey, TValue, TRe ...
- CRM客户关系管理系统 北京易信软科信息技术有限公司
北京易信软科信息技术有限公司 推出大型erp系统,库存管理系统,客户关系管理系统,车辆登记管理系统,员工管理系统,采购管理系统,销售管理系统,为您的企业提供最优质的产品服务 北京易信软科您可信赖的北京 ...
- Scorpio-CSharp简介
Scorpio-CSharp是为了解决Unity游戏各个平台热更新的问题,纯c#实现 基于.net2.0 兼容所有c#平台 语法类似 javascript, 设计初衷是为了做一个所有人都能修改的热更新 ...
- js中js数组、对象与json之间的转换
在数据传输过程中,json是以文本,即字符串的形式传递的,而JS操作的是JSON对象,所以,JSON对象和JSON字符串之间的相互转换是关键.例如:JSON字符串:var str1 = '{ &quo ...
- ActiveMQ实现负载均衡+高可用部署方案
一.架构和技术介绍 1.简介 ActiveMQ 是Apache出品,最流行的,能力强劲的开源消息总线.完全支持JMS1.1和J2EE 1.4规范的JMS Provider实现 2.activemq的特 ...
- spring quartz 定时器时间格式设置
"0/10 * * * * ?" 10秒执行一次 "0 0 12 * * ?"每天中午十二点触发"0 15 10 ? * *"每天早上10: ...
- tp框架总结(二)
一.函数库和类库 项目中的常用的函数库要封装到项目Common/function.php中 在项目中可以直接调用 [ 函数();] import方法是ThinkPHP内建的类库导入方法,提供了方便 ...
- SqlLocalDB使用笔记
一.介绍 SqlLocalDB是VS安装时附带的数据库软件,相当于精简版的SQL Express. 二.使用 VS版本为2015,默认安装位置为:C:\Program Files\Microsoft ...