homework7 旅行志界面
homework7 旅行志界面
-
lvxingzhi.html
<html>
<head>
<meta charset="utf-8">
<title>旅行志title>
<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>
<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>
<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 meh4>
<h5>©Copyright Travel Diary All rights reservedh5>
div>
div>
body>
html>
-
lvxingzhi.css
@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;
}
旅行志界面的链接
