CSS-相关练习4-HTML与CSS综合(婚纱摄影)

来源：互联网发布：plc编程入门视频编辑：程序博客网时间：2024/05/17 05:53

对应css文件@charset "utf-8";  *{            margin: 0px;            padding: 0px;        }        .container{            width: 1200px;            margin: 0 auto;        }        .top{            background: url("../img/topbg.png");        }        .logo{            width:1000px;           margin:auto;        }        .banner{            width: 1000px;            margin-left: 100px;            background-color: #D6CAB4;            line-height: 40px;            height: 40px;        }        .banner ul{            list-style: none;        }        .banner ul li{            float: left;            margin-left: 35px;        }        .banner a{            color: #664429;            text-decoration: none;            font-family: KaiTi;            font-weight: bold;            font-size: 16px;        }        .lunbo{            clear: left;            margin-left: 100px;            margin-top: 10px;        }        .main{            background: url("../img/conbg.png");            width: 1200px;            height: 400px;                   }

老师代码：<!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><link href="css/css.css" rel="stylesheet" type="text/css" /></head><body><div class="container">    <div class="top">        <div class="logo">            <img src="img/logo.png">        </div>        <div class="banner">            <ul>                <li><a href="">首页</a></li>                <li><a href="">关于xiur</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 class="lunbo">            <img src="img/img1.png" alt="美女">        </div>    </div>    <div class="main">    </div> </div></body></html>

/*   *Copyright (c) 2017，烟台大学计算机学院   All rights reserved.   *文件名称：关于HTML的练习  *作    者：张晴晴   *完成日期：2017年11月25日   *版 本 号：v1.0  *   *问题描述：HTML5-JavaScript  *输入描述： 无  *程序输出： 无  */<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>第四道题目</title><style>    .t4{    position:absolute;left:0px; top:0px;width:30000px;height:10000px;    z-index:-1;    }#t4{    position:absolute;left:0px; top:0px; }header{width:80%;height:20%;}article{width:80%;height:70%;}    footer{width:80%;height:10%; }#t4ul{list-style:none;}    #t4 ul li a{float:left;left:50px;padding:10px;}    #t4 a{list-style:none;text-decoration:none;background-color:#FFC68C;color:#B75B00;}    #t4 a:hover{text-decoration:none;background-color:#974B00;color:#FFF;}</style></head><body><div class="t4"><img src="imgs4/bg.png" width="100%" height="100%"/></div><div id="t4"><header><img src="imgs4/logo.png" align="middle"><ul><li><a href="#">首页</a></li><li><a href="#">关于xiur</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></header><arctle><img src="imgs4/img1.png" align="middle"></arctle><footer><img src="imgs4/conbg.png" width="100%" height="100%"></footer></div></body></html>

运行结果：

阅读全文

0 0