html+css动态网页设计（用HTML+CSS+JS设计三个页面）

本文目录

• 用HTML+CSS+JS设计三个页面
• html+css+div网页设计与布局怎么样
• 用html加css做一个心脏跳动的页面的代码
• 新手学习网站制作，制作动态的 需要哪些知识html、css、js、php都要学习吗
• 我只懂得html语言 div+css布局 怎么制作asp动态网站呀

用HTML+CSS+JS设计三个页面

用PHP做过一个，你照着这个换成JS的就可以了：
下面为login.php:
《?php
session_start();
unset($_SESSION);
mysql_connect("localhost", "root" ,"Changsha01") or die("Could not connect");
mysql_select_db("test") or die("Could not use db");
if (isset($_POST)) {
$name = trim($_POST);
$password = trim($_POST);
if (empty($name) || empty($password)) {
$flag = true;
}else {
$query = "SELECT password FROM users WHERE login_name = ’" . $name . "’";
$result = mysql_query($query);
$row = mysql_fetch_array($result, MYSQL_ASSOC);
if ($password == $row) {
$_SESSION = $name;
header("location: index.php");
} else {
$flag = true;
}
}
}
?》
《html》
《head》《title》my document《/title》《/head》
《body》
《form action="login.php" method=post》
《table align="center" border="0" style="padding-top:300px" 》
《tr》
《td align="right"》Name:《/td》
《td》《input type="text" name="name"》《/td》
《/tr》
《tr》
《td align="right"》Password:《/td》
《td》《input type="password" name="password"》《/td》
《/tr》
《?php
if (isset($flag)) {
?》
《tr》
《td colspan="2"》《font color="red"》Wrong Login or Password《/font》《/td》
《/tr》
《?php
}
?》
《tr》
《td》 《/td》
《/tr》
《tr》
《td colspan="2"》《input type="submit" name="submit" value="submit"》 《input type="reset" value="clear" 》《/td》
《/tr》
《/table》
《/form》
《/body》
《/html》
下面为Success.html:
《html》
《head》《title》Sucess《/title》《/head》
《body》
《b》Sucess《/b》
《/body》
《/head》
下面为Failed.html:
《html》
《head》《title》Sucess!《/title》《/head》
《body》
《b》Failed!《/b》
《/body》
《/head》

html+css+div网页设计与布局怎么样

方法/步骤
一个网页设计时，我们可以将一个页面设置为头部，中间，和底部三部分； 头部有分为店招（logo）和导航等
中间既内容部分，内容也可一个整体，也可左右分离，
底部来页面结尾，一般写版权信息，友情链接等
END
头部
店招：

《!doctype html》
《html》
《head》
《meta charset="utf-8"》
《title》淘宝助手网《/title》
《style》
#top{ width:1200px; height: auto; margin:0 auto; color:#FFF;}
#logo{ width:100%; height:100px; background: #003; }
《/style》
《/head》
《body》
《div id="top"》
《div id="logo"》店招《/div》
《div id="nav"》导航《/div》
《/div》
《!--------头部------------》
《div id="centre"》
《div id="centreLeft"》内容左《/div》
《div id="centreRight"》内容右《/div》
《/div》
《!--------中间-------------》
《div id="bottom"》底部《/div》
《!-----------底部----------------》
《/body》
《/html》
导航：
《!doctype html》
《html》
《head》
《meta charset="utf-8"》
《title》淘宝助手网《/title》
《style》
a,ul,li,div,span,td{ padding:0; margin:0;}
#top{ width:1200px; height: auto; margin:0 auto; color:#FFF;}
#logo{ width:100%; height:100px; background: #003; }
#nav{ width:100%; height:30px; background:#300}
a{ text-decoration: none; display:block;den}
ul li{list-style: none;}
#nav》ul》li{ float:left; margin-left: 50px; line-height:30px; }
#nav》ul》li》a{ color:#FFF; font-weight:900px}
《/style》
《/head》
《body》
《div id="top"》
《div id="logo"》店招《/div》
《div id="nav"》
《ul》
《li》《a href="" title="" target="_blank"》淘宝《/a》《/li》
《li》《a href="" title="" target="_blank"》图片《/a》《/li》
《li》《a href="" title="" target="_blank"》视频《/a》《/li》
《li》《a href="" title="" target="_blank"》资料下载《/a》《/li》
《li》《a href="" title="" target="_blank"》视频下载《/a》《/li》

《/ul》
《/div》
《/div》
《!--------头部------------》
《div id="centre"》
《div id="centreLeft"》内容左《/div》
《div id="centreRight"》内容右《/div》
《/div》
《!--------中间-------------》
《div id="bottom"》底部《/div》
《!-----------底部----------------》
《/body》
《/html》
END
内容
《!doctype html》
《html》
《head》
《meta charset="utf-8"》
《title》淘宝助手网《/title》
《style》
a,ul,li,div,span,td{ padding:0; margin:0;}
#top{ width:1200px; height: auto; margin:0 auto; color:#FFF;}
#logo{ width:100%; height:100px; background: #003; }
#nav{ width:100%; height:30px; background:#300}
a{ text-decoration: none; display:block;}
ul li{list-style: none;}
#nav》ul》li{ float:left; margin-left: 50px; line-height:30px; }
#nav》ul》li》a{ color:#FFF; font-weight:900px}
/*******===================头====================************/
#centre{ margin:0 auto; width:1200px; height:auto; }
#centreLeft{ float:left; width:70%; height:500px;border:1px #333333 solid;}
#centreRight{ float: right; width:27%; height:400px;border:1px #333333 solid;}
《/style》
《/head》
《body》
《div id="top"》
《div id="logo"》店招《/div》
《div id="nav"》
《ul》
《li》《a href="" title="" target="_blank"》淘宝《/a》《/li》
《li》《a href="" title="" target="_blank"》图片《/a》《/li》
《li》《a href="" title="" target="_blank"》视频《/a》《/li》
《li》《a href="" title="" target="_blank"》资料下载《/a》《/li》
《li》《a href="" title="" target="_blank"》视频下载《/a》《/li》

《/ul》
《/div》
《/div》
《!--------头部------------》
《div id="centre"》
《div id="centreLeft"》内容左《/div》
《div id="centreRight"》内容右《/div》
《/div》
《!--------中间-------------》
《div id="bottom"》底部《/div》
《!-----------底部----------------》
《/body》
《/html》
END
底部
《!doctype html》
《html》
《head》
《meta charset="utf-8"》
《title》淘宝助手网《/title》
《style》
a,ul,li,div,span,td{ padding:0; margin:0;}
#top{ width:1200px; height: auto; margin:0 auto; color:#FFF;}
#logo{ width:100%; height:100px; background: #003; }
#nav{ width:100%; height:30px; background:#300}
a{ text-decoration: none; display:block;}
ul li{list-style: none;}
#nav》ul》li{ float:left; margin-left: 50px; line-height:30px; }
#nav》ul》li》a{ color:#FFF; font-weight:900px}
/*******===================头====================************/
#centre{ margin:0 auto; width:1200px; height:auto; overflow: hidden }
#centreLeft{ float:left; width:70%; height:500px;border:1px #333333 solid;}
#centreRight{ float: right; width:27%; height:400px;border:1px #333333 solid;}
/***********==============内容===================*******/
#bottom{ margin:0 auto; width:1200px; height:200px; border:1px #333333 solid; margin-top:20px; }
/***********==============底部===================*******/
《/style》
《/head》
《body》
《div id="top"》
《div id="logo"》店招《/div》
《div id="nav"》
《ul》
《li》《a href="" title="" target="_blank"》淘宝《/a》《/li》
《li》《a href="" title="" target="_blank"》图片《/a》《/li》
《li》《a href="" title="" target="_blank"》视频《/a》《/li》
《li》《a href="" title="" target="_blank"》资料下载《/a》《/li》
《li》《a href="" title="" target="_blank"》视频下载《/a》《/li》

《/ul》
《/div》
《/div》
《!--------头部------------》
《div id="centre"》
《div id="centreLeft"》内容左《/div》
《div id="centreRight"》内容右《/div》
《/div》
《!--------中间-------------》
《div id="bottom"》底部《/div》
《!-----------底部----------------》
《/body》
《/html》

用html加css做一个心脏跳动的页面的代码

《!DOCTYPE html》
《html》
《head》
《meta charset="UTF-8"》
《title》HTML5爱心跳动动画DEMO演示《/title》
《style》
***隐藏网址***
***隐藏网址***
body {
background-color: #ccc;
}
.container {
width: 512px;
height: 380px;
margin: auto;
margin-top: 0;
}
.heart {
z-index: 1;
width: 150px;
height: 150px;
position: absolute;
top: 50%;
margin-top: -75px;
left: 50%;
margin-left: -75px;
background-size: 100%;
background-repeat: no-repeat;
background-image:url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgd2lkdGg9IjE3M3B4IiBoZWlnaHQ9IjE1OHB4IiB2aWV3Qm94PSIwIDAgMTczIDE1OCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTczIDE1OCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8cGF0aCBmaWxsPSIjRUY0NjU3IiBkPSJNMTU3LjMzMSwxNS41MDRjLTE5LjU1OS0xOS41NTktNTEuMjcxLTE5LjU1OS03MC44MzEsMGMtMTkuNTU5LTE5LjU1OS01MS4yNzEtMTkuNTU5LTcwLjgzMSwwDQoJYy0xOS41NTksMTkuNTU5LTE5LjU1OSw1MS4yNzEsMCw3MC44MzFsNzAuODMxLDcwLjgzbDcwLjgzMS03MC44M0MxNzYuODksNjYuNzc1LDE3Ni44OSwzNS4wNjQsMTU3LjMzMSwxNS41MDR6Ii8+DQo8L3N2Zz4=");
}
.hometown {
font-family:’Inconsolata’, sans-serif;
font-weight: bold;
font-size: 2.0em;
text-transform: uppercase;
position: relative;
z-index: 1;
width: 512px;
height: 512px;
color: #FFF;
}
#top {
width: 200px;
margin: auto;
position: relative;
}
#top span {
height: 350px;
position: absolute;
width: 20px;
left: 50%;
margin-left: -10px;
top: 110px;
}
.char1 {
transform: rotate(-36deg);
}
.char2 {
transform: rotate(-24deg);
}
.char3 {
transform: rotate(-12deg);
}
.char4 {
transform: rotate(0deg);
}
.char5 {
transform: rotate(12deg);
}
.char6 {
transform: rotate(24deg);
}
.char7 {
transform: rotate(36deg);
}
#bottom span {
height: 350px;
line-height: 700px;
position: absolute;
width: 20px;
left: 50%;
margin-left: -10px;
top: 10px;
}
#bottom .char1 {
transform: rotate(36deg);
}
#bottom .char2 {
transform: rotate(27deg);
}
#bottom .char3 {
transform: rotate(18deg);
}
#bottom .char4 {
transform: rotate(9deg);
}
#bottom .char5 {
transform: rotate(0deg);
}
#bottom .char6 {
transform: rotate(-9deg);
}
#bottom .char7 {
transform: rotate(-18deg);
}
#bottom .char8 {
transform: rotate(-27deg);
}
#bottom .char9 {
transform: rotate(-36deg);
}
.city {
font-family:"Hammersmith One";
display: inline-block;
width: 100%;
height: 300px;
padding-top: 45px;
text-align: center;
font-size: 3.0em;
z-index: 100;
position: absolute;
top: 50%;
margin-top: -110px;
}
.heart {
animation: HEARTBEAT 2.5s infinite;
}
#top span {
animation: BOUNCE 2.5s infinite;
}
@keyframes HEARTBEAT {
0% {
transform: scale(1);
}
5% {
transform: scale(1.3);
}
10% {
transform: scale(1.1);
}
15% {
transform: scale(1.5);
}
50% {
transform: scale(1);
}
100% {
transform: scale(1);
}
}
@keyframes BOUNCE {
0% {
top: 110px;
}
10% {
top: 80px;
}
15% {
top: 85px;
}
20% {
top: 70px;
}
75% {
top: 110px;
}
100% {
top: 110px;
}
}
《/style》
《script src="js/prefixfree.min.js"》《/script》
《/head》
《body》
《div class="container bg"》
《div class="hometown"》
《div class="heart"》
《/div》
《div id="top"》Made in《/div》
《div class="city"》Boise《/div》
《div id="bottom"》With love《/div》
《/div》
《/div》
《div style="text-align:center;clear:both"》
《script src="/gg_bd_ad_720x90.js" type="text/javascript"》《/script》
《script src="/follow.js" type="text/javascript"》《/script》
《/div》
《script src=’js/jquery.js’》《/script》
《script src=’js/jquery.lettering.js’》《/script》
《script src="js/index.js"》《/script》
《/body》
《/html》
js部分

新手学习网站制作，制作动态的 需要哪些知识html、css、js、php都要学习吗

动态的网站分前台跟后台。前台又分美工跟代码，美工需要ps、flash等。代码需要掌握html、css、js语言。其中ps、html、css是必学的，flash和js可以放到后期学。配合的软件是photoshop、dreamweaver、flash等。
后台推荐学习php，免费开源，网上有很多教程。另外建立一个使用的网站可能还得用到数据库，建议用mysql。
总体学习顺序就是ps-》html+css-》js-》php+mysql

我只懂得html语言 div+css布局 怎么制作asp动态网站呀

兄弟，最好学习一门动态语言技术。
在你没学ASP之前。还是叫你选择其他的JSP PHP 或者ASP.NET。至于ASP你还是别考虑这门技术。