我们讲解下HTML5和CSS3，包含知识点CSS设置设计新闻栏目，设计导航菜单，设计多级菜单，这些都不需要借助javascript代码，纯css代码实现，有javascript兴趣的也可以看看jquery栏目。
1.css设计新闻栏目
<!doctype html>
<html>
<head>
<title></title>
<style>
body {/*网页基本属性*/
font: 13px "黑体";/*字体样式*/
background-color: #99CCFF;
}
p {/*新闻栏目的文本样式*/
margin: 5px 0 0 5px; /*新闻栏目文字上下补白*/
color: #3333FF;
font-size: 15px;
font-weight: bold;
}
p span { /*文字“more…”的显示样式*/
color: #FF0000;
float: right;/*右对齐*/
}
div {/*每一个新闻栏目块的样式*/
line-height: 16pt; /*行间距*/
width: 400px;/*块的宽度*/
margin: 10px 0 0 10px;/*各个新闻块之间距离*/
}
.junshi {/*第一个栏目的样式*/
border: 5px #FFcc00 dotted;/*边框样式*/
}
.caijing {/*第二个栏目的样式*/
border: 2px #FF0000 dashed;
}
.yule {/*第三个栏目的样式*/
border: 2px #ff33FF solid;
}
.junshi ul {/*第一个新闻块的列表样式*/
margin-left: 40px;/*文字左侧离边框的距离*/
list-style-type: upper-alpha;/*项目符号是大写字母*/
}
.caijing ol {/*第二个新闻块的列表样式*/
margin-left: 40px;
list-style-type: upper-roman;/*项目符号是大写罗马字母*/
}
.yule ul {/*第三个新闻块的列表样式*/
margin-left: 40px;
list-style-type: circle;/*项目符号是空心圆*/
}
li { /*li标签样式，也就是新闻标题样式*/
margin: 5px 0 5px 0;/*每条新闻标题之间间隔*/
}
a { /*链接样式*/
text-decoration: none;/*不显示下划线*/
color: #000;
}
</style>
</head>
<body>
<div class="junshi">
<p>军事新闻<span>more...</span></p>
<ul>
<li><a href="#">英高官称世界面临冷战威胁 不重视中俄将吃亏</a> </li>
<li><a href="#">中没与俄一起否决涉叙提案 不想驳一国面子</a> </li>
<li><a href="#">战斗群配置太差:俄航母编队还不如中国辽宁舰</a> </li>
<li><a href="#">日将赋予自卫队新任务 海外用兵锁链再放松</a> </li>
</ul>
</div>
<div class="caijing">
<p>财经资讯<span>more...</span></p>
<ol>
<li><a href="#">东方资管公司正式挂牌 银监会杨家才建议改制不改向</a></li>
<li><a href="#">发改委再对新能源标杆电价征意见 下调或是必然趋势</a></li>
<li><a href="#">我国劳务税标准36年未作调整 起征点仍为800元</a></li>
<li><a href="#">美财政部唱多人民币：中长期稳定 汇率应更透明</a></li>
</ol>
</div>
<div class="yule">
<p>娱乐资讯<span>more...</span></p>
<ul>
<li><a href="#">回家办证？范冰冰李晨现身烟台甜蜜牵手</a> </li>
<li><a href="#">艾玛·斯通被曝与“蜘蛛侠”分手 粉丝惊叹：太可惜</a> </li>
<li><a href="#">郑爽陪生病外婆散步 真是个孝顺的女孩子</a> </li>
<li><a href="#">追星要理智！张继科呼吁：跟机追车得不偿失</a> </li>
</ul>
</div>
</body>
</html>
2.css设计导航菜单
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
dl {
position: absolute;
width: 460px;
height: 170px;
border: 10px solid #eee;
}
dd {
margin: 0;
width: 460px;
height: 170px;
overflow: hidden;
}
dt {
position: absolute;
right: 1px;
}
ul {
margin: 0;
padding: 0;
width: 460px;
height: 170px;
list-style: none;
border: 1px solid #ccc;
background: #FF9999;
}
li {
width: 405px;
height: 27px;
padding-left: 20px;
font: 12px/27px "宋体", sans-serif;
white-space: nowrap;
overflow: hidden;
}
dt a {
display: block;
margin: 1px;
width: 80px;
height: 56px;
text-align: center;
font: 700 12px/55px "宋体", sans-serif;
color: #fff;
text-decoration: none;
background: #666;
}
dt a:hover {
background: orange;
}
dd a {
text-decoration: none;
line-height: 36px;
color: #000;
}
</style>
</head>
<body>
<dl>
<dt><a href="#a">军事新闻</a><a href="#b">财经资讯</a><a href="#c">娱乐资讯</a> </dt>
<dd>
<ul id="a">
<li><a href="#">英高官称世界面临冷战威胁 不重视中俄将吃亏</a> </li>
<li><a href="#">中没与俄一起否决涉叙提案 不想驳一国面子</a> </li>
<li><a href="#">战斗群配置太差:俄航母编队还不如中国辽宁舰</a> </li>
<li><a href="#">日将赋予自卫队新任务 海外用兵锁链再放松</a> </li>
<li><a href="#">more...</a> </li>
</ul>
<ul id="b">
<li><a href="#">东方资管公司正式挂牌 银监会杨家才建议改制不改向</a></li>
<li><a href="#">发改委再对新能源标杆电价征意见 下调或是必然趋势</a></li>
<li><a href="#">我国劳务税标准36年未作调整 起征点仍为800元</a></li>
<li><a href="#">美财政部唱多人民币：中长期稳定 汇率应更透明</a></li>
<li><a href="#">more...</a> </li>
</ul>
<ul id="c">
<li><a href="#">回家办证？范冰冰李晨现身烟台甜蜜牵手</a> </li>
<li><a href="#">艾玛·斯通被曝与“蜘蛛侠”分手 粉丝惊叹：太可惜</a> </li>
<li><a href="#">郑爽陪生病外婆散步 真是个孝顺的女孩子</a> </li>
<li><a href="#">追星要理智！张继科呼吁：跟机追车得不偿失</a> </li>
<li><a href="#">more...</a> </li>
</ul>
</dd>
</dl>
</body>
</html>
3.CSS设计多级菜单
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.menu {
font-family: arial, sans-serif;
width: 440px;
margin: 0;
}
.menu ul {
padding: 0;
margin: 0;
list-style-type: none;
}
.menu ul li {
float: left; /* 列表横向显示*/
position: relative;
}
.menu ul li a, .menu ul li a:visited {
display: block;
text-align: center;
text-decoration: none;
width: 104px;
height: 30px;
color: #000;
border: 1px solid #fff;
border-width: 1px 1px 0 0;
background: #5678ee;
line-height: 30px;
font-size: 14px;
}
.menu ul li ul {
display: none;
}
.menu ul li:hover a {
color: #fff;
}
.menu ul li:hover ul {
display: block;
position: absolute;
top: 31px;
left: 0;
width: 105px;
}
.menu ul li:hover ul li a {
display: block;
background: #ff4321;
color: #000;
}
.menu ul li:hover ul li a:hover {
background: #dfc184;
color: #000;
}
</style>
</head>
<body>
<div class="menu">
<ul>
<li><a href="#">文 件</a>
<ul>
<li><a href="#">打 开</a></li>
<li><a href="#">保 存</a></li>
<li><a href="#">新 建</a></li>
</ul>
</li>
<li><a href="#">查 看</a>
<ul>
<li><a href="#">工具栏</a></li>
<li><a href="#">标 尺</a></li>
<li><a href="#">缩 放</a></li>
</ul>
</li>
<li><a href="#">修 改</a>
<ul>
<li><a href="#">属 性</a></li>
<li><a href="#">样 式</a></li>
</ul>
</li>
<li><a href="#"> 窗 口</a>
<ul>
<li><a href="#">历史记录</a></li>
<li><a href="#">颜 色</a></li>
<li><a href="#">时间轴</a></li>
</ul>
</li>
</ul>
<div class="clear"> </div>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
body, h3, ul {
margin: 0;
padding: 0;
}
h3 {
width: 800px;
height: 30px;
margin: 20px auto 0 auto;
font-size: 20px;
text-indent: 10px;
line-height: 30px;
background: #E4E1D3;
text-align: center;
}
h3 a {
color: #c00;
text-decoration: none;
}
h3 a:hover {
color: #000;
}
ul {
width: 774px;
margin: 0 auto;
padding-left: 20px;
border: 3px solid #E4E1D3;
}
ul li {
float: left;
margin: 5px 10px 3px 0px;
list-style-type: none;
}
ul li a {
display: block;
width: 370px;
height: 175px;
text-decoration: none;
}
ul li a img {
width: 370px;
height: 150px;
border: 1px #000099 solid;
}
ul li a span {
display: block;
width: 370px;
height: 23px;
line-height: 20px;
font-size: 14px;
text-align: center;
color: #333;
cursor: hand;
white-space: nowrap;
overflow: hidden;
}
ul li a:hover span {
color: #c00;
}
</style>
<body>
<h3><a href="#/">世界十大名车欣赏</a></h3>
<ul>
<li> <a href="#"><img src="//freemuban.com/img/demo1.jpg" alt="1"><span>世界十大名车之一：恩佐.法拉利</span></a></li>
<li> <a href="#"> <img src="//freemuban.com/img/demo2.jpg" alt="2"> <span>世界十大名车之二：兰博基尼</span></a></li>
<li> <a href="#"> <img src="//freemuban.com/img/demo1.jpg" alt="3"> <span>世界十大名车之三：奔驰SLR</span></a></li>
<li> <a href="#"> <img src="//freemuban.com/img/demo2.jpg" alt="4"> <span>世界十大名车之四： 布加迪.威龙</span></a></li>
<li> <a href="#"> <img src="//freemuban.com/img/demo1.jpg" alt="5"> <span>世界十大名车之五：福特GT</span></a></li>
<li> <a href="#"> <img src="//freemuban.com/img/demo2.jpg" alt="6"> <span>世界十大名车之六：克莱斯勒ME-Four-Twelve</span> </a></li>
<li> <a href="#"> <img src="//freemuban.com/img/demo1.jpg" alt="6"> <span>世界十大名车之七：阿斯顿.马丁DB9</span> </a></li>
<li> <a href="#"> <img src="//freemuban.com/img/demo2.jpg" alt="6"> <span>世界十大名车之八：保时捷CarreraGT</span> </a></li>
<li> <a href="#"> <img src="//freemuban.com/img/demo1.jpg" alt="6"> <span>世界十大名车之九：宾利欧陆GT</span> </a></li>
<li> <a href="#"> <img src="//freemuban.com/img/demo2.jpg" alt="6"> <span>世界十大名车之十：帕格尼—风之子</span> </a></li>
<div style="clear:both;"></div>
</ul>
</body>
</html>
5.使用列表设计图文混排页面
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
* {
margin: 0;
padding: 0;
font-size: 12px;
color: #000;
list-style: none;
}
a {
color: #03c;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
#container {
width: 418px;
margin: 30px auto;
border: 1px solid #999;
}
.list_title {
width: 418px;
height: 32px;
border-bottom: 1px solid #999;
background: #f2f9fd;
overflow: hidden;
}
.list_title h3 {
float: left;
width: 150px;
line-height: 32px;
text-indent: 15px;
}
.list_title h3 a {
color: #c00;
}
.list_title h3 a:hover {
color: #03c;
}
.list_title ul {
float: right;
width: 230px;
}
.list_title ul li {
float: left;
line-height: 32px;
padding: 0 5px;
}
.list_title ul li a {
font-size: 12px;
color: #333;
}
.list_unit {
float: left;
width: 388px;
margin-left: 15px;
padding: 15px 0 8px 0;
border-bottom: 1px dotted #9AC4E9;
}
.list_unit {
display: inline;
}
.list_unit p {
float: left;
width: 154px;
}
.list_unit p a {
display: block;
border: 1px solid #03c;
}
.list_unit p a:hover {
border: 1px solid #f00;
}
.list_unit span {
display: block;
}
.list_unit span a {
display: block;
width: 154px;
height: 22px;
border: 0;
line-height: 22px;
text-align: center;
}
.list_unit span a:hover {
border: 0;
color: #c00;
}
.list_unit ul {
float: right;
width: 216px;
margin-top: -5px;
}
.lit_unit ul li {
float: left;
width: 216px;
line-height: 22px;
color: #039;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.list_unit ul li a:hover {
color: red;
}
#3 {
border-width: 0;
}
.di {
clear: both;
}
a img {
border: none;
}
</style>
<body>
<div id="container">
<div class="list_title">
<h3><a href="#" title="图文混排">最新最快的财经资讯</a></h3>
<ul>
<li><a href="#">最新资讯</a></li>
<li><a href="#">国际财经</a></li>
<li><a href="#">汽车房产</a></li>
</ul>
</div>
<div class="list_unit" id="l">
<p> <a href="#"><img src="//freemuban.com/img/demo1.jpg"></a> <span><a href="#">最新资讯</a></span> </p>
<ul>
<li>·<a href="#">A股恐慌式跳水重挫3.68% 大盘跌回</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 class="list_unit" id="2">
<p> <a href="#"><img src="//freemuban.com/img/demo1.jpg"></a> <span><a href="#">国际财经</a></span> </p>
<ul>
<li>·<a href="#">埃及股市跌至两年来最低点 </a></li>
<li>·<a href="#">默多克传媒帝国经济根基稳固</a></li>
<li>·<a href="#">G7将商讨美国国债降级问题</a></li>
<li>·<a href="#">贸易保护剑指“中国制造”</a></li>
<li>·<a href="#">欧洲央行出手购入意西两国国债</a></li>
<li>·<a href="#">以色列股市7日暴跌</a></li>
</ul>
</div>
<div class="list_unit" id="3">
<p> <a href="#"><img src="//freemuban.com/img/demo2.jpg"></a> <span><a href="#">汽车房产</a></span> </p>
<ul>
<li>·<a href="#">发改委称成品油价暂不具备下调条件</a></li>
<li>·<a href="#">一汽-大众取缔二级经销商</a></li>
<li>·<a href="#">英菲尼迪首款车M系</a></li>
<li>·<a href="#">前7月北京豪宅成交逆市增两成</a></li>
<li>·<a href="#">李嘉诚称继续看好内地楼市</a></li>
<li>·<a href="#">调查显示50未限购城市外地人购房</a></li>
<li>·<a href="#">首套房贷利率北京外资银行能打折</a></li>
</ul>
</div>
<div class="di"></div>
</div>
</body>
</html>
