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

最新推荐文章于 2021-12-24 16:16:26 发布

早日退休过上不劳而获生活

最新推荐文章于 2021-12-24 16:16:26 发布

阅读量510

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_34216631/article/details/78633725

版权

HTML 专栏收录该内容

37 篇文章 3 订阅

订阅专栏

对应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%;
	 }
	#t4	ul{
	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>

运行结果：