homework7 旅行志界面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>旅行志</title>
<!--
作者：shidiwen
时间：2021-01-24
描述：lvxingzhi
pre:原样输出(经常用于数学化学公式输出)
white-space:空格
pre-line:文字前作为代码布局的空格,自动省略
-->
<link rel="stylesheet" href="css/lvxingzhi.css" type="text/css" />
</head>
<body>
<div class="dbody">
<div class="nav">
<img src="img/img/lxz-index_02.jpg" />
<ul>
<li><a href="lvxingzhi.html">主页</a></li>
<li><a href="#gy">关于</a></li> <!--id前要加#-->
<li><a href="#pic">图志集</a></li>
<li><a href="#yts">沿途说</a></li>
<li><a href="#contect">联系我</a></li>
<li><a href="#mes">留言区</a></li>
</ul>
</div>
<div class="banner"><img src="./img/img/lxz-index_04.jpg" /></div>
<div class="gy" id="gy">
<img src="img/img/lxz-index_071.jpg" />
<h3>红 & 黑</h3>
<h4>红色意味着毒药,激情和立即停止,红色是世界上最有力的颜色,总是与矛盾联系在一起,共色最普遍的意思是灼热、热血、危险和感情</h4>
<img src="img/img/lxz-index_101.jpg" />
<table cellpadding="0" cellspacing="10">
<tr>
<td width="264" valign="top">
<img src="img/img/lxz-index_07.jpg" />
<img src="img/img/lxz-index_18.jpg" />
</td>
<td width="236" valign="top">
<img src="img/img/lxz-index_10.jpg" />
</td>
<td width="255" valign="top">
<img src="img/img/lxz-index_13.jpg" />
<img src="img/img/lxz-index_17.jpg" />
</td>
</tr>
</table>
</div>
<div class="pic" id="pic">
<h1>图 志 集</h1>
<h4>手机无水印高清大图,供免费版权使用,分享生活中点滴的美好</h4>
<div class="p-main">
<dl>
<dt>211 / </dt>
<dd>city architecture <br />建筑 </dd>
</dl>
<dl>
<dt> 71 / </dt>
<dd>landscape<br />风景</dd>
</dl>
<dl>
<dt>243 / </dt>
<dd>paint still life<br />静物</dd>
</dl>
<dl>
<dt>153 </dt>
<dd>universe<br />星际</dd>
</dl>
<ul>
<li>
<img src="img/img/lxz-index_26.jpg" />
</li>
<li>
<img src="img/img/lxz-index_32.jpg" />
</li>
<li>
<img src="img/img/lxz-index_29.jpg" />
</li>
<li>
<img src="img/img/lxz-index_23.jpg" />
</li>
</ul>
</div>
<img src="img/img/lxz-index_38.jpg" />
<img src="img/img/lxz-index_39.jpg" />
<img src="img/img/lxz-index_40.jpg" />
<img src="img/img/lxz-index_41.jpg" />
</div>
<div class="mes" id="mes">
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<input type="text" placeholder=" 昵称"/>
<input type="text" placeholder=" 可以留下你的QQ/微信"/>
</td>
</tr>
<tr>
<td>
<textarea placeholder=" 想对我说些什么:) "></textarea>
</td>
</tr>
<tr>
<td align="center">
<input type="submit" value="提交" class="input1"/>
</td>
</tr>
</table>
</div>
<div class="yts" id="yts">
<h1>沿 途 说</h1>
<h4>无计划的旅途就像拆礼物,你永远不知道下一个盒子里是巧克力还是毒药</h4>
<div class="y-main">
<div class="no1">
<img src="img/img/lxz-index_44.jpg" />
<h3>那些微妙如光的小事</h3>
<hr />
<h5>20160209 </h5>
<pre> <!--pre原样输出-->
或许你在经历一段美好的感情,
或许你有好多珍藏的回忆.
只是来自陌生的温柔.
都曾扣动你的心弦,
在流年碎影里,
让你嘴角上扬,
相信美好.
</pre>
<img src="img/img/lxz-index_55.png" class="img1"/>
</div>
<div class="no2">
<img src="img/img/lxz-index_46.jpg" />
<h3>摄影 · 时光</h3>
<hr />
<h5>20160209 </h5>
<img src="img/img/lxz-index_55.png" class="img1"/>
</div>
<div class="no3">
<img src="img/img/lxz-index_48.png" />
<h3>你像画中一样美好</h3>
<hr />
<h5>20160209 </h5>
<img src="img/img/lxz-index_55.png" class="img1"/>
</div>
</div>
</div>
<div class="contect" id="contect">
<h4>Contect me</h4>
<h5>©Copyright Travel Diary All rights reserved</h5>
</div>
</div>
</body>
</html>
@charset "utf-8";
*{
padding: 0px;
margin: 0px;
font-family:"STXihei";
}
body{
background-color: #f5f5f5;
}
.dbody{
width:1110px ;
height: 3275px;
background-color: #fafafa;
margin-right: auto;
margin-left: auto;
}
a{
color: black;
text-decoration: none; /*鼠标点击不会有样式,下划线和变色*/
}
.nav{
width: 1110px;
height: 62px;
background-color: rgba(256,256,256,0.5); /*rgba():背景色的透明程度 三个颜色值 a:透明度 导航半透明,只能针对背景颜色*/
position: fixed; /*固定导航条 释放掉自己的物理位置*/
top:0px;
}
.nav ul{
width: 600px;
height: 62px;
float: right;
list-style: none;
margin-right: 30px;
}
.nav ul li{
width: 95px;
height: 62px;
float: left;
text-align: center;
line-height: 62px;
font-family:"STXihei";
font-weight: bold;
}
.banner{
width: 1110px;
height: 458px;
}
.banner img{
float: left;
}
.gy{
width: 1110px;
height: 686px;
background-color: white;
text-align: center;
padding-top: 60px; /*内边距*/
}
.gy h3{
width:95px ;
height: 40px;
font-weight: normal;
margin-left: auto;
margin-right: auto;
font-size: 29px;
font-family:"STXihei";
}
.gy h4{
width: 660px;
height: 40px;
font-weight: bold;
margin-left: auto;
margin-right: auto;
font-size: 14px;
margin-bottom: 10px;
line-height: 25px;
font-family:"STXihei";
}
.gy table{
width: 785px;
height: 461px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
}
.gy table img{
float: left;
margin-bottom: 10px;
}
.pic{
width: 1110px;
height: 800px;
text-align: center;
padding-top: 60px;
}
.pic h1{
width:1110px ;
height: 55px;
font-weight: normal;
/*margin-top: 60px;*/ /*块状元素没有做浮动,直接做margin-top会把父级拉下来*/
margin-left: auto;
margin-right: auto;
font-size: 45px;
font-family:"STXihei";
}
.pic h4{
width: 660px;
height: 40px;
font-weight: bold;
margin-left: auto;
margin-right: auto;
font-size: 14px;
margin-bottom: 10px;
line-height: 30px;
font-family:"STXihei";
}
.pic .p-main{
width: 880px;
height: 200px;
margin-left: auto;
margin-left: auto;
margin-bottom: 70px;
}
.pic .p-main dl{
width: 170px;
height: 100px;
float: left;
}
.pic .p-main dl dt{
width: 150px;
height: 60px;
font-size: 48px;
line-height: 60px;
font-weight: normal;
margin-left: 30px;
text-align: center;
}
.pic .p-main dl dd{
width: 150px;
height: 40px;
font-family:"STXihei";
line-height: 25px;
}
.pic .p-main ul{
width: 680px;
height: 100px;
list-style: none;
margin-left: 35px;
margin-right: auto;
margin-top: 10px;
}
.pic .p-main ul li{
width: 170px;
height: 100px;
text-align: center;
float: left;
padding-top: 23px;
}
.pic img{
float: left;
}
.mes{
width: 1110px;
height: 430px;
background-color: #fff;
}
.mes table{
width: 800px;
height: 400px;
margin-left: auto;
margin-right: auto;
/*margin-top: 10px;*/ /*块状元素没有做浮动,直接做margin-top会把父级拉下来*/
padding-top: 40px;
}
.mes table input{
width: 200px;
height: 30px;
}
.mes textarea{
width: 800px;
height: 180px;
}
.mes .input1{
background-color: crimson;
border: none;
color:#fff /*color可以修改submit里的颜色*/
}
.yts{
width: 1110px;
height: 580px;
padding-top: 60px;
}
.yts h1{
width:1110px ;
height: 55px;
font-weight: normal;
margin-left: auto;
margin-right: auto;
font-size: 45px;
font-family:"STXihei";
text-align: center;
}
.yts h4{
width: 660px;
height: 40px;
font-weight: bold;
margin-left: auto;
margin-right: auto;
font-size: 14px;
margin-bottom: 10px;
line-height: 30px;
font-family:"STXihei";
text-align: center;
}
.yts .y-main{
width: 726px;
height: 360px;
margin-left: auto;
margin-right: auto;
}
.no1{
width: 202px; /*222-2*10-202要减去二倍的padding*/
height: 330px; /*减去二倍的padding*/
background-color: white;
padding: 10px;
float: left;
margin-left: 10px;
margin-right: 10px;
position: relative; /*让父级不要跑*/
}
.no1 h3{
width: 202px;
height: 20px;
font-weight: lighter;
font-size: 14px;
margin-bottom: 10px;
line-height: 30px;
font-family:"STXihei";
}
.no1 h5{
width: 202px;
height: 20px;
font-weight: lighter;
font-size: 14px;
margin-bottom: 10px;
line-height: 30px;
font-family:"STXihei";
text-align: right;
}
.no1 pre{
width: 202px;
height: 140px;
line-height: 18px;
white-space: pre-line; /*去掉pre代码里的空格*/
font-size:1px;
margin-top:-20px ;
}
.no1 .img1{
position: absolute; /*释放掉物理位置*/
right: 0px;
bottom: 0px;
}
.no2{
width: 202px; /*222-2*10-202要减去二倍的padding*/
height: 380px; /*减去二倍的padding*/
background-color: white;
padding: 10px;
float: left;
margin-left: 10px;
margin-right: 10px;
position: relative;
}
.no2 h3{
width: 202px;
height: 20px;
font-weight: lighter;
font-size: 14px;
margin-bottom: 10px;
line-height: 30px;
font-family:"STXihei";
}
.no2 h5{
width: 202px;
height: 20px;
font-weight: lighter;
font-size: 14px;
margin-bottom: 10px;
line-height: 30px;
font-family:"STXihei";
text-align: right;
}
.no2 .img1{
position: absolute; /*释放掉物理位置*/
right: 0px;
bottom: 0px;
}
.no3{
width: 202px; /*222-2*10-202要减去二倍的padding*/
height: 330px; /*减去二倍的padding*/
background-color: white;
padding: 10px;
float: left;
margin-left: 10px;
margin-right: 10px;
position: relative;
}
.no3 h3{
width: 202px;
height: 20px;
font-weight: lighter;
font-size: 14px;
margin-bottom: 10px;
line-height: 30px;
font-family:"STXihei";
}
.no3 h5{
width: 202px;
height: 20px;
font-weight: lighter;
font-size: 14px;
margin-bottom: 10px;
line-height: 30px;
font-family:"STXihei";
text-align: right;
}
.no3 .img1{
position: absolute; /*释放掉物理位置*/
right: 0px;
bottom: 0px;
}
.contect{
width: 1050px;
height: 80px;
background-color: #fff;
padding: 30px;
}
.contect h4{
width: 160px;
height: 40px;
border: 1px crimson solid; /*solid实线*/
margin-left: auto;
margin-right: auto;
text-align: center;
line-height: 40px;
margin-top: 10px;
color:crimson ;
}
.contect h5{
width: 1110px;
height: 30px;
text-align: center;
line-height: 10px;
margin-left: -35px;
margin-right: auto;
color:crimson ;
margin-top: 20px;
}
扫一扫
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
