一、👨🎓网站题目
旅游,当地特色,历史文化,特色小吃等网站的设计与制作。
二、✍️网站描述
👨🎓静态网站的编写主要是用HTML DIV+CSS 等来完成页面的排版设计👩🎓,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等,用的最多的还是DW,当然不同软件写出的前端Html5代码都是一致的,本网页适合修改成为各种类型的产品展示网页,比如美食、旅游、摄影、电影、音乐等等多种主题,希望对大家有所帮助。
三、📚网站介绍
📔网站布局方面:计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
📓网站程序方面:计划采用最新的网页编程语言HTML5+CSS3程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器,已达到打开后就能即时看到网站的效果。
📘网站素材方面:计划收集各大平台好看的图片素材,并精挑细选适合网页风格的图片,然后使用PS做出适合网页尺寸的图片。
📒网站文件方面:网站系统文件种类包含:html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件;
📙网页编辑方面:网页作品代码简单,可使用任意HTML编辑软件(如:Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作)。
其中:
(1)📜html文件包含:其中index.html是首页、其他html为二级页面;
(2)📑 css文件包含:css全部页面样式,文字滚动, 图片放大等;
四、🌐网站效果
五、🪓 代码实现
🧱HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Contacts</title>
<meta charset="utf-8">
<link rel="icon" href="images/favicon.ico">
<link rel="shortcut icon" href="images/favicon.ico" />
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/form.css">
<link rel="stylesheet" href="css/login.css">
</head>
<body class="">
<!--==============================header=================================-->
<header>
<div class="container_12">
<div class="grid_12">
<h1><a href="index.html"><img src="images/logo.png" alt="Gerald Harris attorney at law"></a> </h1>
<div class="clear"></div>
</div>
<div class="menu_block">
<nav class="">
<ul class="sf-menu">
<li><a href="index.html">首页</a></li>
<li class="with_ul"><a href="about.html">关于</a>
<ul>
<li><a href="#">新闻</a></li>
<li><a href="#">推荐</a></li>
</ul>
</li>
<li><a href="picture.html">图片</a></li>
<li><a href="delicacies.html">美食</a></li>
<li><a href="scenic.html">景区</a></li>
<li class="current"><a href="login.html">登录</a></li>
</ul>
</nav>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</header>
<div class="main">
<!--=======content================================-->
<!-- form section start -->
<section class="w3l-hotair-form">
<h1>登 录</h1>
<div class="container">
<div class="workinghny-form-grid">
<div class="main-hotair">
<div class="alert-close">
<span class="fa fa-close"></span>
</div>
<div class="content-wthree">
<h2>登录</h2>
<p>你的账号</p>
<form action="#">
<input type="text" class="text" name="text" placeholder="输入用户名" >
<input type="password" class="password" name="password" placeholder="输入密码">
<button><a href="index.html">登 录</a></button>
</form>
<p class="account">没有账号 立即注册? <a href="#signup">注册</a></p>
</div>
<div class="w3l_form align-self">
<div class="left_grid_info">
</div>
</div>
</div>
</div>
</div>
</section>
<!--=======bottom================================-->
<div class="bottom_block">
<div class="container_12">
<div class="grid_2">
<h4>联系我:</h4>
TEL: 1234567890<br><a href="#">info@demolink.org</a>
</div>
<div class="grid_2">
<h4>地址:</h4>
江西<br><a href="#">江西</a>
</div>
<div class="clear"></div>
</div>
</div>
<!--==============================footer=================================-->
</div>
<footer>
<div class="container_12">
<div class="grid_12">
<div class="copy">
<div class="clear"></div>
</div>
</footer>
</body>
</html>
🧱css
/**/
@import url(http://fonts.googleapis.com/css?family=Pathway+Gothic+One);
@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);
@import "../css/reset.css";
@import "../css/grid.css";
@import "../css/superfish.css";
input {
outline: none !important;
}
html {
width: 100%;
}
a[href^="tel:"] {
color: inherit;
text-decoration:none;
}
* {
-webkit-text-size-adjust: none;
}
body {
font: 13px/19px Arial, Helvetica, sans-serif;
color:#666565;
position:relative;
min-width:960px;
background: #000;
background: url(../images/bg_body.jpg) center 0 no-repeat #d6bba0;
}
.ic, .ic a {
border:0;
float:right;
background:#fff;
color:#f00;
width:50%;
line-height:10px;
font-size:10px;
margin:-220% 0 0 0;
overflow:hidden;
padding:0
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
font-family: 'Pathway Gothic One', sans-serif;
color: #263555;
}
h3 {
font-size: 38px;
line-height: 44px;
color: #263555;
text-transform: uppercase;
margin-bottom: 50px;
}
.page1 h3 {
padding-top: 62px;
margin-bottom: 54px;
}
h4 {
font-size: 20px;
line-height: 20px;
font-weight: 300;
font-family: 'Open Sans Condensed', sans-serif;
color: #fff;
text-transform: uppercase;
padding-top: 33px;
margin-bottom: 8px;
}
p {
margin-bottom: 19px;
}
img {
max-width: 100%;
}
address {
font-style: normal;
}
ul {
padding: 0;
margin: 0;
list-style: none;
}
ul.list li{
padding-left: 35px;
background: url(../images/marker.png) 0 3px no-repeat;
color: #263555;
font-size: 16px;
line-height: 22.8px;
}
ul.list li+li {
margin-top: 17.2px;
}
ul.list1 li+li {
margin-top: 35px;
}
ul.list1 li+li+li {
margin-top: 34px;
}
ul.list1 .count {
text-align: center;
margin-top: 3px;
margin-right: 25px;
float: left;
border-radius: 500px;
float: left;
width: 31px;
line-height: 30px;
height: 31px;
color: #fff;
border: 1px solid #4f93b2;
background-color: #38afe5;
}
ul.list1 .text1 {
margin-bottom: 9px;
}
ul.list2 {
padding-top: 2px;
width: 34.5%;
float: left;
}
ul.list2 li+li {
margin-top: 21px;
}
ul.list2 li {
background: url(../images/marker1.png) 0 5px no-repeat;
font-size: 16px;
line-height: 19px;
color: #263555;
padding-left: 23px;
}
.hor_sep {
border-bottom: 1px solid #dedbdb;
padding-top:54px;
}
h3.head1 {
padding-top: 49px;
padding-bottom: 1px;
}
/*links*/
a {
text-decoration: none;
color: inherit;
outline: none;
transition: 0.5s ease;
-o-transition: 0.5s ease;
-webkit-transition: 0.5s ease;
}
a:hover {
color: #38afe5;
}
.boxes a.btn {
padding: 4px 16px 4px ;
}
a.btn {
color: #000;
display: inline-block;
background-color: #fbf6f8;
border-radius: 5px;
box-shadow: 0 1px 1px #dedbdb;
font-size: 15px;
border: 1px solid #b1aaaa;
line-height: 15px;
padding: 5px 16px 4px ;
}
a.btn:hover {
border-color: #476788;
color: #fff;
background-color: #38AFE5;
}
a.link-1 {
color: #fa7e7e;
}
a.link-1:hover {
color: #38AFE5;
}
/*preclass*/
.mb0 {
margin-bottom: 0px !important;
}
.m0 {
margin: 0 !important;
}
.ind1 {
margin-top: 11px;
}
.pad0 {
padding: 0 !important;
}
.pt0 {
padding-top: 0;
}
.copyrights{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;}
.img_inner {
max-width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
margin-bottom: 25px;
margin-top: 3px;
position: relative;
}
.fleft {
float: left;
margin-right: 25px;
margin-bottom: 0px;
}
.fright {
float: right !important;
}
.upp {
text-transform: uppercase;
}
.alright {
text-align: right;
}
.center {
text-align: center;
}
.wrapper, .extra_wrapper {
overflow: hidden;
}
.clear {
float: none !important;
clear: both;
}
/*header*/
header {
display: block;
position: relative;
z-index: 999;
padding-bottom: 105px;
}
header a:hover {
color: #000;
}
header h1 {
position: absolute;
float: none;
width: 167px;
top: 31px;
left: 50%;
margin-left: -84px;
height: 168px;
z-index: 999;
}
header h1 a {
display: block;
overflow: hidden;
text-indent: -999px;
transition: 0s ease;
-o-transition: 0s ease;
-webkit-transition: 0s ease;
}
header h1 a img {
display: block;
}
.main {
background: #fff;
width: 1270px;
margin: 0 auto;
}
.boxes {
margin-bottom: 70px;
}
.boxes>div {
position: relative;
}
.boxes figure figcaption{
background-color: #193149;
position: absolute;
top: 0;
font-size: 13px;
line-height: 19px;
color: #cbc6c6;
text-align: left;
left: 0;
height: 100%;
width: 183px;
padding: 0 11px;
opacity: 0;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: rotateY(-90deg);
-moz-transform: rotateY(-90deg);
-o-transform: rotateY(-90deg);
transform: rotateY(-90deg);
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;
-moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
-o-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
transition: transform 0.4s, opacity 0.1s 0.3s;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
figcaption h3 {
color: #ffffff;
text-align: center;
padding-top: 18px !important;
font-size: 38px;
margin-bottom: 18px !important;
font-family: 'Open Sans Condensed', sans-serif;
}
figcaption a.btn {
display: block;
float: right;
margin-top: 36px;
margin-right: 4px;
}
.boxes {
margin-bottom: 70px;
}
.boxes figure div {
overflow: hidden;
}
.boxes figure {
-webkit-perspective: 1700px;
-moz-perspective: 1700px;
-ms-perspective: 1700px;
-o-perspective: 1700px;
perspective: 1700px;
-webkit-perspective-origin: 0 50%;
-moz-perspective-origin: 0 50%;
-ms-perspective-origin: 0 50%;
-o-perspective-origin: 0 50%;
perspective-origin: 0 50%;
background-color: #193149;
}
.boxes a.btn {
box-shadow: none;
}
.boxes figure img {
position: relative;
transition: 0.5s ease;
-o-transition: 0.5s ease;
-webkit-transition: 0.5s ease;
}
.boxes figure:hover img {
-webkit-transform: translateX(25%);
-moz-transform: translateX(25%);
-ms-transform: translateX(25%);
transform: translateX(25%);
}
.boxes figure:hover figcaption {
opacity: 1;
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
-moz-transition: -moz-transform 0.4s, opacity 0.1s;
-o-transition: -moz-transform 0.4s, opacity 0.1s;
transition: transform 0.4s, opacity 0.1s;
}
a.gal {
display: block;
margin-bottom: 23px;
background: url(../images/magnify.png) center center no-repeat #373737;
}
a.gal img {
transition: 0.5s ease;
-o-transition: 0.5s ease;
-webkit-transition: 0.5s ease;
}
a.gal:hover img {
opacity: 0.5;
}
.gallery .img_inner {
margin-bottom: 0;
}
.gallery .clear {
height: 46px;
}
/*Content*/
.content {
padding-top: 123px;
padding-bottom: 128px;
}
.page1 .content {
padding-top: 0;
padding-bottom: 70px;
}
.tab_cont {
border: 1px solid #dedbdb;
padding: 53px 16px 52px;
}
.tab_cont a.btn {
display: block;
float: right;
margin-top: 21px;
margin-right: 15px;
margin-bottom: 2px;
}
.tab_cont a.btn.bt1 {
margin-top: 16px;
}
.tab_cont img {
float: left;
margin-right: 24px;
}
.tab_cont .text1 {
position: relative;
top: -5px;
margin-bottom: 17px;
}
.style1 {
color: #000;
line-height: 19px;
}
.style1 a {
color: #fa7e7e;
}
.style1 a:hover {
color: #000;
}
#tabs ul li {
border-radius: 3px 3px 0 0;
float: left;
position: relative;
background-color: #fcfafa;
min-width: 181px;
text-align: center;
border-top: 1px solid #dedbdb;
border-right: 1px solid #dedbdb;
}
#tabs ul li.ui-state-active {
background-color: #fff;
}
#tabs ul li.ui-state-active:after {
content: '';
left: 0;
right: 0;
bottom: -1px;
position: absolute;display: block;
height: 1px;
background-color: #fff;
}
#tabs ul li.ui-state-active a {
color: #38afe5;
}
#tabs ul li:first-child {
border-left: 1px solid #dedbdb;
}
#tabs ul li a {
display: block;
padding: 6px 0 4px;
font: 24px/28px 'Pathway Gothic One', sans-serif;
text-transform: uppercase;
}
.text1 {
font-size: 16px;
line-height: 19px;
color: #263555;
}
.page1 .text1 {
font-size: 16.8px;
line-height: 22.8px;
color: #263555;
}
p.text1 {
margin-bottom: 18px;
}
p.text1.tx2 {
margin-bottom: 20px;
}
.tab_cont .text1.tx1 {
top: -6px;
margin-bottom: 22px;
}
.clear.cl1 {
height: 20px;margin-bottom: 2px;
}
.newsletter_title {
border: 1px solid #dedbdb;
font: 300 24px/27px 'Open Sans Condensed', sans-serif;
color: #263555;
border-radius: 3px 3px 0 0;
padding: 7px 0 3px;
background-color: #fcfafa;
text-transform: uppercase;
text-align: center;
}
#newsletter {
position: relative;
overflow: hidden;
padding-bottom: 20px;
margin-bottom: 32px;
}
#newsletter span {
display: block;
padding-top: 8px;
margin-bottom: 14px;
}
.n_container {
padding: 0 19px 49px;
border: 1px solid #dedbdb;
border-top: 0;
}
#newsletter .text1 {
text-align: center;
padding-top: 49px;
margin-bottom: 26px;
}
.none {
display: none;
}
#newsletter input {
float: left;
border: 2px solid #e6e4e4;
border-radius: 6px;
color: #868f8f;
width: 100%;
height: 34px;
font: 15.6px/22.8px Arial, Helvetica, sans-serif;
padding: 4px 32px 5px;
box-shadow: none !important;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
#newsletter a {
display: block;
position: absolute;
background: url(../images/envel.png) 6px 9px no-repeat;
width: 34px;
height: 34px;
top: 99px;
right: 0px;
}
#newsletter a:hover {
opacity: 0.5;
}
#newsletter .error, #form1 .empty {
height:0px;
bottom: -35px;
width: 100%;
left: 0;
font-size: 10px;
line-height: 13px;
display: block;
overflow: hidden;
z-index: 999;
color: #ff0000;
-webkit-transition: 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
position: absolute;
}
#newsletter label.invalid .error {
/*display: block;*/
height:40px;
}
#newsletter .success {
width: 100%;
z-index: 999;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
display: none;
top: 98px;
text-align: center;
background: #fff;
border: 2px solid #e6e4e4;
border-radius: 6px;
color: #868f8f;
left: 0px;
font-size: 15.6px;
overflow: hidden;
padding: 10px;
-webkit-transition: 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
position: absolute;
}
.bottom_block {
background-color: #30455b;
color: #ffffff;
font-size: 12px;
padding-bottom: 34px;
}
.bottom_block ul li {
font: 18px/18px 'Open Sans Condensed', sans-serif;
text-transform: uppercase;
}
.bottom_block ul li+li {
margin-top: 10px;
}
.bottom_block ul {
padding-top: 42px;
}
blockquote {
margin-top: -37px;
}
blockquote p {
background-color: #fcfafa;
padding: 24px 22px 26px;
margin-bottom: 0 !important;
border: 1px solid #dedbdb;
}
.bq_bot {
margin-top: -1px;
padding-top: 65px;
position: relative;
padding-left: 34px;
background: url(../images/bq_bot_bg.png) 113px 0 no-repeat;
}
.bq_bot .text1 {
margin-bottom: 20px;
padding-left: 14px;
}
.tour .text1 {
margin-bottom: 13px;
}
.tour {
overflow: hidden;
}
.price span {
padding-top: 4px;
display: block;
text-transform: uppercase;
color: #38afe5;
font-size: 16px;
}
.price {
margin-bottom: 14px;
}
.price +.price {
margin-bottom: 40px;
}
.tours .clear {
height: 47px;
}
.form1 {
margin-right: 2px;
}
.jqTransformHidden {
display: none;
}
.jqTransformSelectWrapper {
position:relative;
height: 25px;
width: 100% !important;
float:left;
border: 1px solid #dedbdb;
}
.jqTransformSelectWrapper div span {
font-size: 13px;
float: none;
position: absolute;
white-space: nowrap;
height: 25px;
line-height: 16px;
overflow: hidden;
cursor:pointer;
border: 3px;
padding: 4px 9px 3px;
background: #fcfafa;
width: 100% !important;
color: #868f8f !important;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
/*border: 1px solid #CCCCCC;*/
/* border-right: none;*/
}
.jqTransformSelectWrapper a:after {
display: none;
}
.jqTransformSelectWrapper a.jqTransformSelectOpen {
display: block;
position: absolute;
right: -1px;
top: -1px;
width: 28px !important;
height: 25px !important;
padding: 0;
border: 1px solid #e0dddd;
background: url(../images/select.png) no-repeat center center;
}
.jqTransformSelectWrapper:hover a.jqTransformSelectOpen {
background-color: #38AFE5;
border-color: #38AFE5;
}
.jqTransformSelectWrapper ul {
position: absolute;
top: 28px;
left: -1px;
height: auto !important;
list-style: none;
background-color: #e3e2e2;
display: none;
border: 1px solid #d1cccc;
margin: 0px;
width: 100% !important;
padding: 0px;
overflow: auto;
overflow-y: auto;
z-index:10;
color: #fff;
padding-top: 3px;
padding-bottom: 7px;
}
.jqTransformSelectWrapper ul a {
display: block;
padding: 0 9px;
line-height: 19px;
}
#form2 .jqTransformSelectWrapper {
margin-bottom: 27px;
}
#form2 a.btn {
margin-top: 47px !important;
}
#form2 span {
margin-bottom: 8px;
}
.form1 span.col1 {
display: inline-block;
margin-bottom: 2px !important;
}
.form1 span {
margin-bottom: 9px;
display: block;
}
.form1 a.btn{
margin-top: 74px;
margin-bottom: 13px;
}
.blog {
overflow: hidden;
}
.blog .links {
overflow: hidden;
margin-bottom: 15px;
padding-top: 1px;
}
.blog a.btn {
margin-top: 23px;
}
a.comment {
margin-top: 2px;
display: inline-block;
float: right;
margin-right: 85px;
}
.blog+.blog {
border-top: 1px solid #dedbdb;
margin-top: 60px;
padding-top: 58px;
}
.blog time {
text-align: center;
display: block;
background-color: #38afe5;
border-radius: 500px;
color: #fff;
width: 39px;
height: 30px;
padding-top: 9px;
font-size: 11px;
line-height: 11px;
float: left;
margin-right: 13px;
margin-top: 3px;
}
ul.list2.l1 {
width: auto;
float: none;
padding-top: 0;
margin-bottom: 43px;
}
/****Map***/
.map {
padding-top: 0px;
margin-top: -2px;
}
.map figure {
width: 550px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
display: block;
margin-right: 26px;
padding-top: 2px;
}
.map figure iframe {
width: 550px;
height: 414px;
max-width: 100%;
}
.map address {
overflow: hidden;
}
.map address+address {
margin-top: 43px;
}
.map address+address dt {
margin-bottom: 5px;
}
.map .text2{
margin-bottom: 21px;
font: bold 24px/24px 'Marvel', sans-serif;
color: #000;
padding-top: 1px;
}
address dt {
margin-bottom: 19px;
}
address dd span {
min-width: 95px;
display: inline-block;
text-align: left;
}
/************Footer***********/
footer {
display: block;
padding: 25px 0;
color: #6b6868;
}
.socials {
text-align: center;
margin-bottom: 21px;
}
.socials a {
margin: 0 5px;
display: inline-block;
width: 46px;
height: 46px;
background: url(../images/socials.png) 0 0 no-repeat;
}
.socials a+a {
background-position: -60px 0;
}
.socials a+a+a {
background-position: -122px 0;
}
.socials a+a+a+a {
background-position: right 0;
}
.socials a:hover {
opacity: 0.5;
}
.copy {
text-align: center;
color: #fff;
font-size: 12px;
}
.f_bot {
padding-top: 26px;
padding-bottom: 40px;
color: #797979;
}
/**to top**/
#toTop {
display:none;
text-decoration:none;
position:fixed;
bottom:30px;
margin-right: -620px !important;
overflow:hidden;
width:36px;
height:37px;
border:none;
text-indent:-999px;
z-index:999;
background:url(../images/totop.png) no-repeat left top;
transition: 0s ease;
-webkit-transition: 0s ease;
-o-transition: 0s ease;
}
#toTop:hover {
background-position: right 0;
}
六、🥇 如何让学习不再盲目
很多刚入门编程的小白学习了基础语法,却不知道语法的用途,不知道如何加深映像,不知道如何提升自己,这个时候每天刷自主刷一些题就非常重要(百炼成神),可以去牛客网上的编程初学者入门训练。该专题为编程入门级别,适合刚学完语法的小白练习,题目涉及编程基础语法,基本结构等,每道题带有练习模式和考试模式,可还原考试模式进行模拟,也可通过练习模式进行练习。
七、🎁更多干货
1.如果我的博客对你有帮助、如果你喜欢我的博客内容,请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦!
2.💗【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者,一起探讨 前端 Node 知识,互相学习」!
3.以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻🔥源代码:
4.有任何意见或者不懂得地方可以在评论区留言,也可以私信,我会认真看也会回复的哦