homework4 非诚勿扰界面自制(div+css)

非诚勿扰界面自制(div+css)

  • fc.html


<html>
	<head>
		<meta charset="utf-8" />
		<title>非诚勿扰title>
		
		<link rel="stylesheet" href="css/fc.css" type="text/css" />
	head>
	<body>
		<div class="dbody">
			<div class="banner">div>
			<div class="main">
				<img src="img/2021-01-29/attention.png" />
				<img src="img/2021-01-29/banner01.png" />
				<img src="img/2021-01-29/banner02.png" />
				<img src="img/2021-01-29/banner03.png" />
				<img src="img/2021-01-29/banner04.png" />
				<img src="img/2021-01-29/banner05.png" />
			div>
			<div class="bottom">
				<div class="b-main">
					<div class="left">
						<div class="no1">
							<h5>关于非诚勿扰h5>
							<hr />
							<h6>更新日志h6>
							<hr />
						div>
						<div class="no2">
							<h6>v1.0版本    2011.6h6>
							<p>第一个历史性的版本上线,主推送花和亮灯,上线后受到广泛关注.p>
							<h6>v1.14版本    2011.11h6>
							<p>修改优化存在问题,增加储值的功能.p>
							<h6>v1.20版本   2012.4h6>
							<p>对产品进行重构,丰富了交友系统,提供会员推荐.p>
						div>
						<div class="no3">
							<img src="img/2021-01-29/closeBtn.png" />
							<div class="huakuai">             
								<img src="img/2021-01-29/scrollBtn.png" />
							div>         
						div>
					div>
					<div class="right">         
						<table cellpadding="0" cellspacing="0">  
							<tr>
								<td>td>
								<td><h2>意见反馈h2>td>
							tr>
							<tr>
								<td align="right">标题: td>
								<td><input type="text" />td>
							tr>
							<tr>
								<td align="right">用户ID: td>
								<td><input type="text" />td>
							tr>
							<tr>
								<td align="right" valign="top">反馈内容: td>      
								<td><textarea>textarea>td>
							tr>
							<tr>
								<td>td>
								<div><td><input type="submit" value="确认提交" class="queren" />td>div>  
							tr>
						table>
					div>
					<h4> 关于非诚勿扰  |  更新日志h4>               
					<h3>                      Copyright@2011-2012fcwrAllrightsReserved.h3>
				div>
			div>
		div>
	body>
html>

homework4 非诚勿扰界面自制(div+css)_第1张图片

  • fc.css

@charset "utf-8";
*{
     
   padding: 0px;
   margin: 0px;
}
.dbody{
     
   width: 1600px;
   height: 3000px;
   margin-left: auto;
   margin-right: auto;
}
.banner{
     
   width: 1600px;
   height: 595px;
   background-image: url(../img/2021-01-29/banner.png);
}
.main{
     
   width: 1600px;
   height: 2037px;
   background-color: #fff;
   text-align:center;        /*文本对齐方式*/
}
.main img{
     
   width: 1008px;
   float: left;
   margin-left:296px;
}
.bottom{
     
   width: 1600px;
   height:348px;
   background-image: url(../img/2021-01-29/footerBg.png);
}
.b-main{
     
   width:1016px;
   height:301px;
   background-image: url(../img/2021-01-29/submitBg.png);
   margin-left: auto;
   margin-right: auto;
}
.left{
     
   width: 61%;
   height: 301px;
   float: left;
}
.no1{
     
   width: 120px;
   height: 301px;
   float:left;
}
.no1 h5{
     
   width:120px;
   height:30px;
   margin-top: 70px;            /*与上面的外边距*/
   font-size: 14px;
   text-align: center;
   color: #a6a6a6;
   font-weight: normal;        /*文字加粗样式,normal表示正常*/
}
.no1 h6{
     
   width:120px;
   height:30px;
   margin-top: 10px;           
   font-size: 14px;
   text-align: center;
   color: #666;
   font-weight: normal;       
}
.no1 hr{
     
   width: 100px;
   margin-left: 10px;
   border-color: #666;
}
.no2{
     
   width: 480px;
   height: 251px;      /*348px-50px*/
   float: left;
   padding-top: 50px;      /*内边距的上边距,使其向下移动,但会占用高度和宽度,要减去*/
}
.no2 h6{
     
   width:120px;
   height:30px;
   margin-top: 10px;           
   font-size: 14px;
   text-align: center;
   color: #666;
   font-weight: normal;   
   margin-left: 40px;               /*左边的外边距*/
}
.no2 p{
     
   width:430px;
   height:30px;           
   font-size: 14px;
   text-align: left;       /*文字左对齐*/
   color: #a6a6a6;   
   margin-left: 40px;
}
.no3{
     
   width: 13px;
   height: 261px;
   float: left;
   padding-top: 30px;            /*内边距的上边距*/
}
.huakuai{
                             /*也是一个div,是单独的class*/
   width: 10px;            /*图片是8px,但要做成跟叉号对齐,所以是10px*/
   height:185px;
   background-image: url(../img/2021-01-29/line.png);
   margin-left: 1px;
   padding-top: 5px;
}
.right{
     
   width: 39%;
   height: 301px;
   float: left;
   color: #bbb
}
table{
     
   width: 340px;
   height: 240px;
   margin-top: 30px;
   margin-left: 30px;
}
input{
     
   width: 200px;
   height: 30px;
   background-color: #666;
   border: none;    /*将背景色块的边框去掉*/
   font-size:16px;
   color: white;               /*input color可以修改submit里字的颜色 background-color修改提交的颜色 */
}
textarea{
     
   width: 200px;
   height: 80px;
   background-color: #666;
   border: none;
}
.queren{
                      /*也是一个div,是单独的class*/
   width: 100px;
   height: 40px;
   margin-top:-10px;
   background-color:seagreen;
}
h4{
     
   width:300px;
   height: 30px;
   float: left;
   font-weight: normal;
   font-size: 14px;
   color: #bbb;
   margin-top: 10px;
}
h3{
     
   width:400px;
   height: 30px;
   float: right;
   font-weight: normal;
   font-size: 14px;
   color: #bbb;
   margin-top: 10px;
}

homework4 非诚勿扰界面自制(div+css)_第2张图片
homework4 非诚勿扰界面自制(div+css)_第3张图片
homework4 非诚勿扰界面自制(div+css)_第4张图片

你可能感兴趣的:(html,html,css)