HTML_旅行志界面

homework7 旅行志界面

lvxingzhi.html

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>旅行志</title><!--作者：shidiwen时间：2021-01-24描述：lvxingzhipre:原样输出(经常用于数学化学公式输出)white-space:空格pre-line:文字前作为代码布局的空格,自动省略--><link rel="stylesheet" href="css/lvxingzhi.css" type="text/css" /></head><body><div class="dbody"><div class="nav">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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>红&nbsp;&amp;&nbsp;黑</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>图&nbsp;志&nbsp;集</h1><h4>手机无水印高清大图,供免费版权使用,分享生活中点滴的美好</h4><div class="p-main"><dl><dt>211&nbsp;&nbsp;&nbsp;/&nbsp;</dt><dd>city architecture&nbsp;&nbsp;<br />建筑&nbsp;</dd></dl><dl><dt>&nbsp;71&nbsp;&nbsp;&nbsp;/&nbsp;</dt><dd>landscape<br />风景</dd></dl><dl><dt>243&nbsp;&nbsp;/&nbsp;</dt><dd>paint still life<br />静物</dd></dl><dl><dt>153&nbsp;&nbsp;&nbsp;&nbsp;</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="&nbsp;昵称"/><input type="text" placeholder="&nbsp;可以留下你的QQ/微信"/></td></tr><tr><td><textarea placeholder="&nbsp;想对我说些什么:) "></textarea></td></tr><tr><td align="center"><input type="submit" value="提交" class="input1"/></td></tr></table></div><div class="yts" id="yts"><h1>沿&nbsp;途&nbsp;说</h1><h4>无计划的旅途就像拆礼物,你永远不知道下一个盒子里是巧克力还是毒药</h4><div class="y-main"><div class="no1"><img src="img/img/lxz-index_44.jpg" /><h3>那些微妙如光的小事</h3><hr /><h5>20160209&nbsp;</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>摄影&nbsp;·&nbsp;时光</h3><hr /><h5>20160209&nbsp;</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&nbsp;</h5><img src="img/img/lxz-index_55.png" class="img1"/></div></div></div><div class="contect" id="contect"><h4>Contect me</h4><h5>&copy;Copyright Travel Diary All rights reserved</h5></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;
}

旅行志界面的链接

HTML_旅行志界面相关推荐

微信小程序精品demo：面包旅行：界面设计，文本展示，
结构: 预览图片: 项目地址及下载: 本帖隐藏的内容 https://github.com/1002698389/breadtrip-master breadtrip-master-master.z ...
[日推荐]『旅行翻译』不懂外语也能走遍天下！
2019独角兽企业重金招聘Python工程师标准>>> 难得的国庆&中秋长假,国内旅游人太多,不如出国玩玩,但是,不懂外语怎么办?没关系,这个小程序来帮你-- 旅行翻译简介 ...
在小程序的开发上，支付宝或许不是微信的竞争者，而是取代者
对于支付宝而言,开发工具本是老本行.从用户方面出发,工具开发者开发工具,理所当然. 轻轻的我走了,正如我轻轻地来...... 如果你说,看到这句话想到了徐志摩,镁客君表示:你比较有文化.然而,如果你想 ...
node.js旅游景点分享网站算机毕业设计源码03796
摘要随着社会的发展,社会的各行各业都在利用信息化时代的优势.计算机的优势和普及使得各种信息系统的开发成为必需.旅游景点分享网站设计,主要的模块包括查看后台首页.轮播图(轮播图管理).网站公告管理 ...
微信小程序基础之开源项目库汇总
awesome-github-wechat-weapp 是由OpenDigg整理并维护的微信小程序开源项目库集合.我们会定期同步OpenDigg上的项目到这里,也欢迎各位提交项目给我们. (链接:ht ...
130个免费微信小程序源码分享
130个免费微信小程序源码分享 - AppleMusic - B站首页界面设计:附详细教程 - FlexLayout布局 - HIapp - IT-EBOOK - LOL战绩查询 - Railay: ...
可视化界面编程idea_BAT 的程序员用了这些 IDEA 插件, 志玲姐姐天天鼓励, 工作效率提高 320%...
一. Alibaba Java Coding Guidelines/Sonar Lint/CheckStyle 主要作用是根据 https://github.com/alibaba/p3c (包含了编 ...
类脑神经界面研究有新进展-深圳先进院李骁健与华中科技大学罗志强合作研究将适合脑机接口应用的ECoG型传感器...
"脑机接口"这个目前很火的科技词汇,相信大家都不陌生了.要想实现脑机接口技术,最基础的第一步就是要有能感应到脑神经信号的传感器.目前根据神经传感器部署的位置,可以把他们分为三个类型 ...
信息管理系统界面html_西宁市小升初信息管理系统http://221.207.8.71/
阅读本文前,请您先点击上面的蓝色字体,再点击"关注",这样您就可以继续免费收到最新文章了.每天都有分享.完全是免费订阅,请放心关注.注:本文转载自网络,不代表本平台立场,仅供读者参 ...
HTML_圣斗士星矢界面
圣斗士星矢界面 sds.html <!DOCTYPE html> <html><head><meta charset="utf-8" /& ...

HTML_旅行志界面

homework7 旅行志界面

lvxingzhi.html

lvxingzhi.css

HTML_旅行志界面相关推荐

最新文章

热门文章