html+css怎么做网页?

知乎

下载 APP
html+css怎么做网页?
现在是22:06分，花了2小时写了一套学生作业水准的网站首页，该网站的主题为《去旅行吧》，整个首页下来有1800字符的代码量，你可以直接将首页提交作业使用，也可以根据首页框架去试着做出几个超链接页面【截图及源码在下方】。
这个首页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，使用了CSS来布局框架，CSS的代码量也很足、很细致，使用hover来完成过渡效果、鼠标滑过效果等，使用表格、表单补充模块，为方便新手学习页面中没有使用js有需要的可以自行添加。
能看懂或写出这个首页的，恭喜你已经掌握了HTML前端网页设计的大部分知识点，同时如LOGO图的设计、渐变的使用、布局上色块、阴影的使用、js的引入可能就是你下一步需要攻克的点了...
源码有价，仅供学习，请勿转售，有用点赞。
源码保存方法（下方为保存及使用的视频）：
1. 复制下方所有源码
2. 电脑右键桌面空白处 - 新建 - 文本文档双击打开文本文档，粘贴源码到空白文本文档内
3. 点击文件 - 另存为，保存类型选择所有文件，文件名填写为 index.html 点击保存即可在浏览器预览
也可以直接将源码复制进Dreamweaver、Hbuilder X、Editplus等网页设计软件内保存为Html。
源码共享如下，记得点赞~
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>去旅行吧-PsdHtml.CN原创作品，仅供个人学习使用，禁止转卖</title>
<style type="text/css">
#father {
	position: absolute;
	width: 100%;
	height: 1418px;
	z-index: 1;
	left: 0px;
	top: 0px;
}
#father #top {
	height: 120px;
	width: 1000px;
	margin-right: auto;
	margin-left: auto;
}
#father #title {
	height: 42px;
	width: 1000px;
	margin-right: auto;
	margin-left: auto;
	background-image: url(http://cdn.psdhtml.cn/title-skin.jpg);
	border: 1px solid #fafafa;
}
#father #line1 {
	height: 5px;
	width: 100%;
	background-color: #333;
}
#father #title #daohang {
	font-family: "微软雅黑";
	font-size: 16px;
	color: #333;
	float: left;
	height: 42px;
	width: 140px;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-top-color: #fafafa;
	border-right-color: #ececec;
	border-bottom-color: #fafafa;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #ffffff;
	line-height: 42px;
	text-align: center;
}
.d_over{
	background-color:#217aff;
	transition-duration: 1s;
}
.d_out{
	background-color:rgba(0,0,0,0);
}

a:link {
	color: #333;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #000;
}
a:hover {
	text-decoration: none;
	color: #FFFFFF;
}
a:active {
	text-decoration: none;
	color: #333;
}
#father #main {
	height: 600px;
	width: 1000px;
	margin-top: 1px;
	margin-right: auto;
	margin-left: auto;
	background-color: #FFF;
	font-family: "微软雅黑";
	font-size: 12px;
	line-height: 28px;
	color: #333;
}
#father #main #left {
	float: left;
	height: 600px;
	width: 249px;
}
#father #main #left #left-text #m-249 {
	height: 272px;
	margin-top: 15px;
}
#father #main #left #left-text #m-245 {
	height: 245px;
}
#father #main #central {
	float: left;
	height: 600px;
	width: 500px;
	border-right-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #f2f2f2;
	border-left-color: #f2f2f2;
}
#father #main #left #left-text {
	height: 520px;
	width: 195px;
	margin-top: 30px;
	margin-left: 28px;
}
.dabiaoti {
	font-family: "微软雅黑";
	font-size: 18px;
	color: #333;
	font-weight: bold;
}
.axiaozi {
	font-family: "微软雅黑";
	font-size: 13px;
	line-height: 35px;
	color: #000;
}
.bxiaozi {
	font-family: "微软雅黑";
	font-size: 10px;
	line-height: 27px;
	color: #000;
}
a.black:link {
	color: #000000;
	text-decoration: none;
}
a.black:visited {
	text-decoration: none;
	color: #000000;
}
a.black:hover {
	text-decoration: none;
	color: #2a7cf5;
}
a.black:active {
	text-decoration: none;
}

a.black1:link {
	color: #000000;
	text-decoration: none;
}
a.black1:visited {
	text-decoration: none;
	color: #2a7cf5;
}
a.black1:hover {
	text-decoration: underline;
	color: #217aff;
}
a.black1:active {
	text-decoration: none;
	color: #2199ff;
}
#father #main #central #text2 {
	font-family: "微软雅黑";
	font-size: 12px;
	line-height: 25px;
	color: #333;
	height: 290px;
	width: 500px;
	margin-top: 0px;
	background-color: #f5fffa;
}

#father #footer_all {
	height: 241px;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	font-family: "微软雅黑";
	font-size: 13.4px;
	color: #696969;
	margin-top: 0px;
}
#father #footer_all #f1000-167 {
	height: 167px;
	width: 1000px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 67px;
	background-color: #f6faff;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #CCC;
}
#father #footer_all #f1000-167 #logo-175-40 {
	float: left;
	height: 40px;
	width: 160px;
	margin-top: 40px;
	margin-left: 45px;
}
#father #footer_all #f1000-167 #login {
	float: left;
	height: 40px;
	width: 70px;
	margin-top: 40px;
	margin-left: 40px;
}
#father #footer_all #f1000-167 #right828-167 {
	float: left;
	height: 167px;
	width: 300px;
	margin-left: 236px;
}
#father #footer_all #f1000-167 #right828-167 #l-828-80 {
	height: 80px;
	width: 300px;
	margin-top: 30px;
	letter-spacing: 2px;
}
#father #footer_all #f1000-167 #right828-167 #l-828-80 #r-150-42 {
	float: left;
	height: 42px;
	width: 70px;
	margin-top: 13px;
	text-align: center;
	line-height: 42px;
}
#father #footer_all #f1000-167 #right828-167 #l-828-80 #r-150-42-1 {
	float: left;
	height: 42px;
	width: 70px;
	margin-top: 13px;
	margin-left: 32px;
	text-align: center;
	line-height: 42px;
}
#father #footer_all #f1000-167 #right828-167 #l-828-80 #r-erweima {
	float: left;height: 75px;width: 75px;margin-top: 0px;margin-left: 48px;
}
#father #footer_all #f1000-167 #right828-167 #link {
	height: 33px;
	width: 721px;
	margin-top: 24px;
	margin-left: 108px;
	text-align: right;
	line-height: 20px;
	font-family: "微软雅黑";
	font-size: 13px;
}
#father  #tuijian {
	height: 315px;
	width: 1000px;
	margin-right: auto;
	margin-left: auto;
	background-color: #FFF;
	padding-top: 40px;
	margin-top: 1px;
}
#father  #tuijian #tuijian01 {
	float: left;
	height: 270px;
	width: 290px;
	margin-left: 35px;
}

#father  #tuijian #tuijian02 {
	float: left;
	height: 270px;
	width: 290px;
	margin-left: 30px;
}
#father  #tuijian #tuijian01 #tuijiantu {
	height: 204px;
}
#father  #tuijian #tuijian01 #tuijiantu:hover {
	height: 204px;
	border: 2px solid #2376F6;
}
#father  #tuijian #tuijian01 #tuijianwenzi {
	height: 66px;
	font-family: "微软雅黑";
	font-size: 14px;
	color: #999999;
	width: 290px;
}
#father  #tuijian #tuijian02 #tuijiantu2 {
	height: 204px;
}
#father  #tuijian #tuijian02 #tuijiantu2:hover {
	height: 204px;
	border: 2px solid #2376F6;
}
#father  #tuijian #tuijian02 #tuijianwenzi2 {
	height: 66px;
	font-family: "微软雅黑";
	font-size: 14px;
	color: #999999;
	width: 290px;
}
#father #footer_all #down1 {
	background-color: #f2f2f;
	height: 1px;
	width: 1000px;
	margin-right: auto;
	margin-left: auto;
}
#father #main #left #left-text #m-245 #a195 {
	height: 115px;
	background-image: url(http://cdn.psdhtml.cn/index1.jpg);
}
#father #main #left #left-text #m-245 #a195:hover {
	height: 115px;
	background-image: url(http://cdn.psdhtml.cn/index2.jpg);
	transition-duration: 1s;
}
#father #main #left #left-text #m-245 #a196 {
	height: 115px;
	margin-top: 9px;
	background-image: url(http://cdn.psdhtml.cn/index3.jpg);
}
#father #main #left #left-text #m-245 #a196:hover {
	height: 115px;
	background-image: url(http://cdn.psdhtml.cn/index4.jpg);
	transition-duration: 1s;
}
#father #main #central #banner {
	height: 310px;
	width: 500px;
	background-image: url(http://cdn.psdhtml.cn/banner.gif);
}
#father #main #left #left-text #m-249 table tr td #textfield {
	height: 36px;
	width: 170px;
	font-family: "微软雅黑";
	font-size: 14px;
	color: #999;
}
#father #main #left #left-text #m-249 table tr td #textfield2 {
	height: 36px;
	width: 170px;
	font-family: "微软雅黑";
	font-size: 14px;
	color: #999;
}
.wenben {font-family: "微软雅黑";
	font-size: 15px;
	color: #000;
}
#father #footer_all #banquan {
	height: 36px;
	width: 1000px;
	margin-right: auto;
	margin-left: auto;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #f2f2f2;
	background-image: url(http://cdn.psdhtml.cn/lxidw7.svg);
	background-color: #FFF;
}
</style>
<script type="text/javascript">
function MM_jumpMenu(targ,selObj,restore){ //v3.0
  eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
  if (restore) selObj.selectedIndex=0;
}
function MM_popupMsg(msg) { //v1.0
  alert(msg);
}
function MM_goToURL() { //v3.0
  var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
  for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
}
</script>
</head>

<body bgcolor="#f2f2f2">
<div id="father">
<div id="line1"></div>
<div id="top"><a href="index.html"><img src="http://cdn.psdhtml.cn/title.jpg" width="1000" height="120"></a></div>
  <div id="title">
    <div id="daohang" class="d_out" onmouseover="this.className='d_over'" onmouseout="this.className='d_out'"><a href="index.html">首 页</a></div>
    <div id="daohang" class="d_out" onmouseover="this.className='d_over'" onmouseout="this.className='d_out'"><a href="http://www.psdhtml.cn/index.php?c=thread&fid=18?ym">推荐风景</a></div>
    <div id="daohang" class="d_out" onmouseover="this.className='d_over'" onmouseout="this.className='d_out'"><a href="http://www.psdhtml.cn/index.php?c=thread&fid=18?ym">图库</a></div>
    <div id="daohang" class="d_out" onmouseover="this.className='d_over'" onmouseout="this.className='d_out'"><a href="http://www.psdhtml.cn/index.php?c=thread&fid=18?ym">视频</a></div>
    <div id="daohang" class="d_out" onmouseover="this.className='d_over'" onmouseout="this.className='d_out'"><a href="http://www.psdhtml.cn/index.php?c=thread&fid=18?ym">注册</a></div>
  </div>
  <div id="main">
    <div id="left">
      <div id="left-text">
        <table width="100%" border="0">
          <tr>
            <td height="45" class="dabiaoti">推荐内容&nbsp;</td>
          </tr>
          <tr>
            <td class="axiaozi">
 <img src="http://cdn.psdhtml.cn/arrow_01.gif" width="5" height="7"> <a href="#" class="black">出游攻略看这里</a><br>
   <img src="http://cdn.psdhtml.cn/arrow_01.gif" alt="" width="5" height="7"> <a href="#" class="black">出行日本注意事项 </a><br>
   <img src="http://cdn.psdhtml.cn/arrow_01.gif" alt="" width="5" height="7"> <a href="#" class="black">上帝的花园——图瓦卢</a><br>
   <img src="http://cdn.psdhtml.cn/arrow_01.gif" alt="" width="5" height="7"> <a href="#" class="black">世界上最浪漫十大酒店 </a><br>
   <img src="http://cdn.psdhtml.cn/arrow_01.gif" alt="" width="5" height="7"> <a href="#" class="black">闻所未闻10个世界之最</a><br>
   <img src="http://cdn.psdhtml.cn/arrow_01.gif" alt="" width="5" height="7"> <a href="#" class="black">塞班岛 / 马绍尔群岛</a><br>
   <img src="http://cdn.psdhtml.cn/arrow_01.gif" alt="" width="5" height="7"> <a href="#" class="black">埃及金字塔 </a><br>
   <img src="http://cdn.psdhtml.cn/arrow_01.gif" alt="" width="5" height="7"> <a href="#" class="black">布达拉宫</a><br>
   <img src="http://cdn.psdhtml.cn/arrow_01.gif" alt="" width="5" height="7"> <a href="#" class="black">自助旅游实用手册</a><br>
   <img src="http://cdn.psdhtml.cn/arrow_01.gif" alt="" width="5" height="7"> <a href="#" class="black">签证基本知识 </a><br>
   <img src="http://cdn.psdhtml.cn/arrow_01.gif" alt="" width="5" height="7"> 苏州 <br>
   &nbsp; &nbsp;<span class="bxiaozi"><a href="#" class="black">苏州园林</a>&nbsp;</span> &nbsp; <span class="bxiaozi"><a href="#" class="black">寒山寺</a></span>&nbsp; &nbsp; <a href="#" class="black1"><span class="bxiaozi">七里山塘</span></a><br>
   <img src="http://cdn.psdhtml.cn/arrow_01.gif" alt="" width="5" height="7"> <a href="#" class="black">凤凰古城&nbsp;</a></td>
          </tr>
        </table>
      </div>
    </div>
    <div id="central">
     <div id="banner"></div>
    <div id="text2"><table width="100%" border="0">
  <tr>
    <td height="287" align="center"><table width="80%" border="0">
      <tr>
        <td><span class="dabiaoti">&quot;</span> 因为有些事要趁早，现在不做，也许一辈子都不会再做了，等有时间了，可不曾想，其实我们什么时候都很忙，
也许真到了你觉得有时间的时候，身边的他（她）已不在，或者是到了楼下走走都困难的年纪。
因为旅行的脚步，永远是向前的，“世界那么大，我想去看看”，很赞的一句网络语，世界那么大，想要在有生之年看完，就只能步步向前，
确定计划出发，将会让你心灵和身体都在向前的路上。&nbsp;</td>
      </tr>
    </table></td>
  </tr>
    </table>
</div>
    
    </div>
    <div id="left">
    <div id="left-text">
    <div id="m-245">
      <div id="a195"></div>
      <div id="a196"></div>
    </div>
<div id="m-249">
  <table width="100%" border="0">
  <tr>
    <td height="36" class="dabiaoti">欢迎登陆</td>
  </tr>
  <tr>
    <td height="51"><label for="textfield"></label>
      <input name="textfield" type="text" id="textfield" value="用户名"></td>
  </tr>
  <tr>
    <td height="53"><input name="textfield2" type="password" id="textfield2" value="......"></td>
  </tr>
  <tr>
    <td height="37" align="left" bgcolor="#f8f8f8"><label for="select"></label>
      <select name="jumpMenu" id="jumpMenu"
 onchange="MM_jumpMenu('parent',this,0)"> 
<option value="http://www.psdhtml.cn/index.php?c=thread&fid=18?ym">男</option> 
<option value="http://www.psdhtml.cn/index.php?c=thread&fid=18?ym">女</option> 
</select></td>
  </tr>
  <tr>
    <td height="42" align="left"><input type="checkbox" name="checkbox" id="checkbox">
同意注册协议 <br></td>
  </tr>
  <tr>
    <td align="center"><input name="button2" type="submit" class="wenben" id="button2" onclick="MM_popupMsg('注册成功，点击确定跳转至首页。');MM_goToURL('parent','index.html');return document.MM_returnValue" value="提交注册信息" /></td>
  </tr>
  </table>

    </div>
    </div>
    </div>
  </div>
  
  <div id="tuijian">
    <div id="tuijian01">
      <div id="tuijiantu"><a href="http://www.psdhtml.cn/read.php?tid=1108&fid=18?ym" target="_blank"><img src="http://cdn.psdhtml.cn/tuijian01.jpg" width="286" height="204" /></a></div>
      <div id="tuijianwenzi"><table width="100%" border="0">
  <tr>
    <td height="40">美丽的海岛度假不想了解一下？</td>
  </tr>
  <tr>
    <td><a href="#" class="black">了解更多</a></td>
  </tr>
</table>
</div>
    </div>
    
    <div id="tuijian02">
      <div id="tuijiantu2"><a href="http://www.psdhtml.cn/read.php?tid=1108&fid=18?ym" target="_blank"><img src="http://cdn.psdhtml.cn/tuijian02.jpg" width="286" height="204" /></a></div>
      <div id="tuijianwenzi2"><table width="100%" border="0">
  <tr>
    <td height="40">一个能够净化灵魂的地方</td>
  </tr>
  <tr>
    <td><a href="#" class="black">了解更多</a></td>
  </tr>
</table>
</div>
    </div>
    <div id="tuijian02">
      <div id="tuijiantu2"><a href="http://www.psdhtml.cn/read.php?tid=1108&fid=18?ym" target="_blank"><img src="http://cdn.psdhtml.cn/tuijian03.jpg" width="286" height="204" /></a></div>
      <div id="tuijianwenzi2"><table width="100%" border="0">
  <tr>
    <td height="40">这个视频美哭了，不看后悔...</td>
  </tr>
  <tr>
    <td><a href="#" class="black">了解更多</a></td>
  </tr>
</table>
</div>
    </div>
    
  </div>
  <div id="footer_all">
  <div id="f1000-167">
    <div id="logo-175-40"><a href="index.html"><img src="http://cdn.psdhtml.cn/logodibu.png" width="159" height="47"></a></div>
    <div class="aye" id="login">
      <table width="103" border="0">
        <tr>
          <td width="97" height="37" align="left"><a href="http://www.psdhtml.cn/read.php?tid=1108&fid=18?ym" class="black">查看更多</a></td>
        </tr>
      </table>
    </div>
    
    <div class="aye" id="login">
      <table width="103" border="0">
        <tr>
          <td width="97" height="37" align="left" class="black"><a href="http://www.psdhtml.cn/read.php?tid=1108&fid=18?ym" class="black"><span class="axiaozi"><img src="http://cdn.psdhtml.cn/arrow_01.gif" alt="" width="5" height="7"></span> 免费网页源码</a><a href="Login.html"></a></td>
        </tr>
      </table>
    </div>
    
    <div id="right828-167">
      <div id="l-828-80">
        <div id="r-150-42"><a href="#"><img src="http://cdn.psdhtml.cn/fb.png" width="45" height="45"></a></div>
        <div id="r-150-42-1"><a href="#"><img src="http://cdn.psdhtml.cn/tw.png" alt="" width="45" height="45"></a></div>
        <div id="r-150-42-1"><a href="#"><img src="http://cdn.psdhtml.cn/ins.png" alt="" width="45" height="45"></a></div>
      </div>
      <div id="r-lianjie"><table width="100%" border="0">
  <tr>
    <td align="right">© 去旅行吧&nbsp;&nbsp;  &nbsp;</td>
  </tr>
</table>
</div>
    </div>
  </div>
  <div id="down1"></div>
  <div id="banquan"><a href="http://www.psdhtml.cn/index.php?c=thread&fid=18?ym" target="_blank"><img src="http://cdn.psdhtml.cn/lxidw7.svg" width="1000" height="36"></a></div>
  </div>
</div>

</body>
</html>
需要更多网页源码成品可以看下这个问题下我的回答~
谁能给一份期末网页设计作业成品？
编辑于 2021-05-20 · 著作权归作者所有
赞同 631