关于样式表的两个练习


 

1、编辑360导航网站的一部分框架

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.a1
{
    width:1000px; height:80px; margin:auto; top:10px; position:relative; border:1px solid #666; box-shadow:1px 1px 1px #666; }
.a2
{
    width: 150px; height: 60px; position: absolute; top: 11px; left: 20px; z-index: 2 border:1px solid #666; box-shadow:1px 1px 1px #666;}
.a3
{
    width:110px; height:40px; background-color:#FFF; border: 1px solid #666; line-height:40px; text-align:center; position:relative; top:0px; right:0px; float:right;}
.a4
{
    width:250px; height:248px; border:1px solid #666; box-shadow:1px 1px 1px #666; position:relative; top:40px; left:0px; border:1px solid #666; box-shadow:1px 1px 1px #666; }
.a5
{
    width:331px; height:200px; position:relative; float:left; border:1px solid #666; box-shadow:1px 1px 1px #666; }
.a6
{
    width: 740px; position: absolute; right: 0px; border:1px solid #666; box-shadow:1px 1px 1px #666;}
</style>
</head>

<body>
<div style="width:1000px; height:2010px; position:relative; margin:auto;">
<div class="a1">
<div class="a2" style="width:200px;"></div>
<div class="a2" style="left: 275px;"></div>
<div class="a2" style="left: 459px;"></div>
<div class="a2" style="left: 642px;"></div>
<div class="a2" style="left: 821px;"></div>
</div>
<div style="width:1000px; height:130px; margin:auto; top:20px; position:relative; border:1px solid #666; box-shadow:1px 1px 1px #666;">
</div>
<div class="a1" style="top:30px;">
<div class="a3">好药特惠</div>
<div class="a3">网上购物</div>
<div class="a3">旅游度假</div>
<div class="a3">小说大全</div>
<div class="a3">小游戏</div>
<div class="a3">最新电影</div>
<div class="a3">电视剧</div>
<div class="a3">新闻头条</div>
</div>
<div class="a4">
<table width="250" height="250" cellpadding="0" cellspacing="0" border="0" style="text-align:center;">
<tr>
<td>新闻·视频</td>
<td>电影·电视剧</td>
</tr>
<tr>
<td>购物·海淘</td>
<td>彩票·理财</td>
</tr>
<tr>
<td>活期·基金</td>
<td>小说·商城</td>
</tr>
<tr>
<td>游戏·小游戏</td>
<td>动漫·直播秀</td>
</tr>
<tr>
<td>搞笑·解梦</td>
<td>教育·度假</td>
</tr>
<tr>
<td>查询·星座</td>
<td>机票·火车票</td>
</tr>
<tr>
<td>手机·娱乐</td>
<td>好药·旅游</td>
</tr>
</table>
</div>
<div class="a4" style="height:150px; top:50px;">
</div>
<div class="a4" style="top:60px;">
</div>
<div class="a4" style="top:60px;">
</div>
<div class="a4" style="top:60px;">
</div>
<div class="a4" style="top:60px;">
</div>
<div class="a4" style="top:60px;">
</div>
<div class="a6" style="height: 214px; top: 336px;">
</div>
<div class="a6" style="height: 50px; top: 560px;">
</div>
<div class="a6" style="height: 200px; top: 620px;">
</div>
<div class="a6" style="height: 200px; top: 853px;">
</div>
<div class="a6" style="height: 200px; top: 1053px;">
</div>
<div class="a6" style="height: 200px; top: 1253px;">
</div>
<div class="a6" style="height: 450px; top: 1453px;">
</div>
<div class="a6" style="height: 93px; top: 1913px;">
</div>
</div>
<div style="width:1000px; height:200px; position:relative; top:10px; margin:auto;">
<div class="a5"></div>
<div class="a5"></div>
<div class="a5"></div>
</div>
</body>
</html>

只大体只做了框架以及一小块的文字

2、制作鼠标悬停时出现的菜单

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.aa
{
    width:80px; 
    height:30px; 
    background-color:#0F0; 
    box-shadow:2px 2px 2px #999; 
    text-align:center; 
    line-height:30px; 
    font-weight:bold; 
    overflow:hidden; 
    position:relative; 
    transition:0.7s; 
    cursor:pointer;}
.aa:hover
{
    box-shadow:4px 4px 4px #333333; 
    margin-left:-3px; margin-top:-3px; 
    color:#F00; background-color:#00C; 
    overflow:visible;}
.a1
{
    widoth:80px;
    height:90px;
    position:relative;
    left:0px;}
.bb
{
    width:80px; 
    height:30px;
    position:relative;
    overflow:hidden; 
    transition:0.7s;}
.bb:hover
{
    background-color:#00C; 
    overflow:visible;}
.cc
{
    width:240px; 
    height:30px; 
    position:relative;
    left:80px;
    overflow:hidden;}
.cc:hover {
    overflow: visible;}
.dd
{
    width:80px;
    height:30px;
    position:relative;
    float:left;}
</style>
</head>

<body>
<div class="aa" style="top:100px; left:300px;">你是猪吗
    <div class="a1">
        <div class="aa" style="background-color:#900;">
            <div class="cc">
                <div class="dd" style="background-color:#FF0;"></div>
                   <div class="dd" style="background-color:#0F0"></div>
                      <div class="dd" style="background-color:#309;"></div>
            </div>
        </div>
        <div class="aa" style="background-color:#6F0;">
            <div class="cc">
                <div class="dd" style="background-color:#FF0;"></div>
                   <div class="dd" style="background-color:#0F0"></div>
                      <div class="dd" style="background-color:#FF0;"></div>
            </div>
        </div>
        <div class="aa" style="background-color:#FF0;">
            <div style="width:240px; height:30px; right:240px; position:relative;overflow:hidden;">
                <div class="dd" style="background-color:#FF0;"></div>
                   <div class="dd" style="background-color:#0F0"></div>
                      <div class="dd" style="background-color:#FF0;"></div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

 

posted @ 2016-10-28 12:01  苏迁时  阅读(339)  评论(0)  编辑  收藏  举报