Dreamweaver网页设计与制作100例：用DIV+CSS技术设计的书法主题网站（web前端网页制作课作业）

举报
IT司马青衫 发表于 2022/08/11 09:36:48 2022/08/11
【摘要】 HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。@TOC 一、网页介绍1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精...

HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。

@TOC

一、网页介绍

1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。

2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。

3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了Logo（源文件）所需的知识点。

一、网页效果

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

二、代码展示

1.HTML代码

代码如下（示例）：以下仅展示部分代码供参考~


    <div id="index_focus"> 
            <span class="tu"> 
                <a href="#" class="lianjie" style=" "> <p><img src="images/focus_01.jpg" height="451" border="0" /></p></a> 
                <a href="#" class="lianjie" style=" "> <p><img src="images/focus_01.jpg" height="451" border="0" /></p></a>
                <a href="#" class="lianjie" style=" "> <p><img src="images/focus_01.jpg" height="451" border="0" /></p></a>
                <a href="#" class="lianjie" style=" "> <p><img src="images/focus_01.jpg" height="451" border="0" /></p></a>
                <a href="#" class="lianjie" style=" "> <p><img src="images/focus_01.jpg" height="451" border="0" /></p></a>
            </span> 
		</div>
        
        
        <div class="index_jrtj">
       	  <div class="content">
   	      <p class="titlestyle1"><strong class="yahei">今日推荐</strong><span>Recommended</span><b><a href="#">七夕中国</a>|<a href="#">林俊杰</a>|<a href="#">音乐节</a>|<a href="#">S.H.E</a>|<a href="#">蔡健雅</a>|<a href="#">任贤齐</a></b></p>
                	<div id="carousel_container">
                        <div id="carousel_inners">
                            <ul id="carousel_ul" class="clearfix artist_l">
                                <li><img src="images/simg1.jpg" width="203" height="282" /><a href="#" target="_blank" class="ib"><h4>张震岳</h4><p>时　　间：2013.07.01</p><p>场　　馆： ​万事达中心</p></a><span class="but_gp"></span></li>
                                <li><img src="images/simg1.jpg" width="203" height="282" /><a href="#" target="_blank" class="ib"><h4>张震岳</h4><p>时　　间：2013.07.01</p><p>场　　馆： ​万事达中心</p></a><span class="but_gp"></span></li>
                                <li><img src="images/simg1.jpg" width="203" height="282" /><a href="#" target="_blank" class="ib"><h4>张震岳</h4><p>时　　间：2013.07.01</p><p>场　　馆： ​万事达中心</p></a><span class="but_gp"></span></li>
                                <li><img src="images/simg1.jpg" width="203" height="282" /><a href="#" target="_blank" class="ib"><h4>张震岳</h4><p>时　　间：2013.07.01</p><p>场　　馆： ​万事达中心</p></a><span class="but_gp"></span></li>
                                <li><img src="images/simg1.jpg" width="203" height="282" /><a href="#" target="_blank" class="ib"><h4>张震岳</h4><p>时　　间：2013.07.01</p><p>场　　馆： ​万事达中心</p></a><span class="but_gp"></span></li>
                                <li><img src="images/simg1.jpg" width="203" height="282" /><a href="#" target="_blank" class="ib"><h4>张震岳</h4><p>时　　间：2013.07.01</p><p>场　　馆： ​万事达中心</p></a><span class="but_gp"></span></li>
                                <li><img src="images/simg1.jpg" width="203" height="282" /><a href="#" target="_blank" class="ib"><h4>张震岳</h4><p>时　　间：2013.07.01</p><p>场　　馆： ​万事达中心</p></a><span class="but_gp"></span></li>
                                <li><img src="images/simg1.jpg" width="203" height="282" /><a href="#" target="_blank" class="ib"><h4>张震岳</h4><p>时　　间：2013.07.01</p><p>场　　馆： ​万事达中心</p></a><span class="but_gp"></span></li>
                              
                                
                            </ul>
                        </div>
                    </div>  
            </div>
            <div id="left_scroll">11</div>
		    <div id="right_scroll">22</div>
        </div>
        
        
        <div class="hot_tours">
        	<p><img src="images/back01.gif" width="1008" height="11" /></p>
        	<div class="content">
            	<div class="left_focus floatl">
                	<p class="titlestyle1"><strong class="yahei">热门巡演</strong><span>Hot tours</span></p>
                	
                         <div id="slide1" class="slide-panel">
                            <div>
                                <img src="images/simg_02.jpg" width="231" height="319" style="display:block;"/>
                                <img src="images/simg_02.jpg" width="231" height="319" />
                                <img src="images/simg_02.jpg" width="231" height="319" />
              
                            </div>
                        </div>
                        <div id="trigger1" class="slide-trigger"><!-- 自动创建 triggers --></div>
                         <script type="text/javascript">
                            $(function(){
                                 $("#trigger1").switchable("#slide1 > div > img", { effect: "fade", speed:.5,circular:true }).autoplay();
                            });
                        </script>
                         
                </div>
                
                
                <div class="tours_imgshow floatl">
                	<div class="left floatl">
                    	<ul class="artist_l">
                            <li><a href="#"><img src="images/simg_03.jpg" width="128" height="117" /></a><a href="#" target="_blank" class="ib"><h4>张震岳</h4><p>场　　馆： ​万事达中心</p></a></li>
                            <li><a href="#"><img src="images/simg_03.jpg" width="128" height="117" /></a><a href="#" target="_blank" class="ib"><h4>张震岳</h4><p>场　　馆： ​万事达中心</p></a></li>
                            <li><a href="#"><img src="images/simg_03.jpg" width="128" height="117" /></a><a href="#" target="_blank" class="ib"><h4>张震岳</h4><p>场　　馆： ​万事达中心</p></a></li>
                        </ul>
                    </div>
                    
                    <div class="right floatl">
                    	<ul class="artist_l">
                        	<li><img src="images/simg_04.jpg" width="210" height="182" /><a href="#" target="_blank" class="ib"><h4>张震岳</h4><p>场　　馆： ​万事达中心</p></a></li>
                            <li><img src="images/simg_04.jpg" width="210" height="182" /><a href="#" target="_blank" class="ib"><h4>张震岳</h4><p>场　　馆： ​万事达中心</p></a></li>
                        </ul>
                    </div>
                </div>
                
                
                <div class="tours_rfocus floatl">
                	 <div id="carousel">

                        <div id="buttons">
                            <a href="#" id="prev">prev</a>
                            <a href="#" id="next">next</a>
                            <div class="clear"></div>
                        </div>
                        
                        <div class="clear"></div>
                    
                        <div id="slides"> 
                            <ul>
                                <li><img src="images/pp_zlj.png" width="307" height="299" /></li>
                                <li><img src="images/pp_zlj.png" width="307" height="299" /></li>
                                <li><img src="images/pp_zlj.png" width="307" height="299" /></li>
                            </ul>
                            <div class="clear"></div>
                        </div>
                    
                    </div>
                     
                
                </div>
                
                <div class="clear"></div>

            </div>
        </div>
        
        
        
        <div class="index_1f">
        	<p class="cl_title"><span><a href="#">进入话剧歌剧频道</a></span><strong><a href="#">首都剧场</a><a href="#">孟京辉</a><a href="#">开心麻花</a><a href="#">赖声川</a><a href="#">繁星戏剧村</a></strong></p>
        	<div class="index_lcbox">
            	<div class="f1_left">
                	<div class="left_ad">
                        <ul class="artist_l"> 
                            <li><img src="images/simg_05.jpg" width="296" height="300" /><a href="#" target="_blank" class="ib"><h4>张震岳</h4><p>时　　间：2013.07.01</p><p>场　　馆： ​万事达中心</p></a></li>
                        </ul>
                    </div>
                    <ul class="left_news">
                    	<li><a href="#">中国国家话剧院话剧《活着》</a></li>
                        <li><a href="#">田沁鑫青春爱情三部曲 《夜店之天生绝配》</a></li>
                        <li><a href="#">25周年戏剧季《最后14堂星期二的课》</a></li>
                        <li><a href="#">第一届两岸三地青年戏剧节 话剧《最后晚餐》</a></li>
                    </ul>
                
                	<div class="sm_ad">
                    	<a href="#"><img src="images/simg_06.jpg" width="296" height="96" /></a>
                    </div>	
                
                </div>

2.CSS代码



#index_focus {height: 451px; position: relative;overflow: hidden;margin-right: auto;margin-left: auto; background:#515151; z-index:100;}
#index_focus .tu {text-align: center;display: block;margin-right: auto;margin-left: auto;}
#index_focus #hao .xu {display: inline;float: left;height: 15px;width: 15px;line-height: 15px;color: #FFFFFF;font-size: 12px;font-weight: bolder;cursor:pointer;background:#666;border-top-width: 0px;border-right-width: 0px;border-bottom-width: 0px; border-left-width: 0px;border-top-style: solid;border-right-style: solid;border-bottom-style: solid;border-left-style: solid;text-align:center; font-family:Arial;margin:0 2px;}
#index_focus #hao {position: absolute;right: 10px;height: 15px;width: 330px;z-index: 3;bottom: 0px;}
#index_focus #hao a:hover{ text-decoration:none;}
#index_focus .txt {display: block;position: absolute;top: 423px;height: 53px;width: 385px;right: 50px;z-index:3;}
#index_focus .tu .lianjie {display: block;height: 530px;  overflow:hidden;}
#index_focus .tu { text-align:center;}
#index_focus .tu p{ float:left; margin-left:50%; display:inline;}
#index_focus .tu img{ position:relative; left:-50%;}

 

.nav_post{ position:relative; width:1002px; margin:0 auto;}
.nav_menu{ position:absolute; left:0; top:40px; width:202px; border:2px solid #e20d82; z-index:999; height:444px; background:url(../images/leftmenu.gif) repeat-y #FFF;}
#site_nav .nav_menu dl{ line-height:22px; margin-left:7px; word-break:break-all;}
#site_nav .nav_menu dl a{ color:#626262;  margin:0 5px;}
#site_nav .nav_menu dl dt{ font-size:14px; font-weight:bold;}
#site_nav .nav_menu dl dt a{ color:#3c3c3c;}
#site_nav .nav_menu dl a:hover{ color:#e20d82; text-decoration:underline;}
#site_nav .nav_menu .ych{ background:url(../images/menu_ico.gif) no-repeat 0 0; padding-left:25px; padding-bottom:5px; padding-top:15px;}
#site_nav .nav_menu .hj{ background:url(../images/menu_ico.gif) no-repeat 0 -55px; padding-left:25px; padding-bottom:5px; padding-top:15px;}
#site_nav .nav_menu .yyh{ background:url(../images/menu_ico.gif) no-repeat 0 -135px; padding-left:25px; padding-bottom:5px; padding-top:15px;}
#site_nav .nav_menu .ty{ background:url(../images/menu_ico.gif) no-repeat 0 -202px; padding-left:25px; padding-bottom:5px; padding-top:15px;}
#site_nav .nav_menu .qyzt{ background:url(../images/menu_ico.gif) no-repeat 0 -279px; padding-left:25px; padding-bottom:5px; padding-top:15px;}
#site_nav .nav_menu .etqz{ background:url(../images/menu_ico.gif) no-repeat 0 -355px; padding-left:25px; padding-bottom:5px; padding-top:15px;}
#site_nav .nav_menu dl dd{ margin-left:25px; white-space:nowrap}
#site_nav .nav_menu dl dd a{ display:block; min-width:30px; float:left;}

.index_jrtj{ width:1000px; margin:0 auto; background:url(../images/back_01.gif) repeat; height:383px; padding-bottom:5px; margin-top:11px; padding-right:6px; position:relative;}
.index_jrtj .content{ width:1000px; background:#FFF; border:1px solid #e2e2e2; height:383px;}
.titlestyle1{ margin-top:17px; margin-left:22px;}
.titlestyle1 strong{ font-size:20px; font-weight:100;}
.titlestyle1 span{ background:#e20d82; color:#FFF; padding:6px 3px; margin-left:6px; font-family:Arial;}
.titlestyle1 b{ font-weight:100; margin-left:10px; color:#dadada;}
.titlestyle1 b a{ color:#666666; margin:0 3px;}
.index_jrtj ul { margin-top:20px;  }
.index_jrtj ul li{ float:left; position:relative; width:224px;  margin:0 7px; display:inline;  overflow:hidden; height:302px; }
.index_jrtj ul li img{ width:206px; height:285px; padding:7px; border:1px solid #e2e2e2;}
.but_gp{ position:absolute; width:59px; height:65px; right:-2px; bottom:0; background:url(../images/but_gp.png) no-repeat left top; display:block;}
.but_gp a{ display:block; width:59px; height:65px;}

#carousel_container{OVERFLOW: hidden; ZOOM: 1; POSITION: relative; width:938px;  height:327px; overflow:hidden; margin-left:35px;}
#carousel_inner{ OVERFLOW: hidden; WIDTH: 990px;  overflow: hidden; position:absolute;left:25px; top:5px;}
#left_scroll{position: absolute;left:10px;top:180px;width:24px;height:32px; cursor:pointer; z-index:999; background:url(../images/icon.gif) -80px -39px no-repeat; text-indent:-9999px;}
#right_scroll{position: absolute;top:180px;right:10px; width:23px;  height:32px;cursor: pointer;cursor: hand; background:url(../images/icon.gif) -9px -39px no-repeat; text-indent:-9999px;}
#carousel_ul{width:9999px; height:95px; position:relative;}
.hot_tours{ width:1008px; margin:0 auto; height:408px; background:#e7e7e7;}
.hot_tours .content{ background:#ffffff; border:1px solid #e2e2e2; height:395px; width:1000px;}
.hot_tours .left_focus{ width:255px; height:395px;  border-right:1px dashed #d0d0d0; position:relative;}
.hot_tours #slide1{  margin-left:13px; margin-top:16px;}
.hot_tours .slide-trigger{ position:absolute; right:20px; bottom:20px; } 
.hot_tours .slide-trigger a{ background:#8f9493; padding:2px 5px; margin:0 1px; color:#ffffff;}
.hot_tours .slide-trigger .current{ background:#e6208e;}

.index_jrtj .but_gp{  right:-1px; bottom:0px;}

三、个人总结

一套合格的网页应该包含(具体可根据个人要求而定)

  1. 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分；
  2. 所有页面相互超链接，可到三级页面，有5-10个页面组成；
  3. 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术；
  4. 菜单美观、醒目，二级菜单可正常弹出与跳转；
  5. 要有JS特效，如定时切换和手动切换图片新闻；
  6. 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用；
  7. 页面清爽、美观、大方，不雷同。
  8. 网站前端程序不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

四、精彩推荐

1.看到这里了就 【点赞收藏博文】 三连支持下吧，你的支持是我创作的动力, 【观注作者 |获取更多源码| 优质文章】。

2.关注我带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！

💂【获取方式】

gitee码云源码仓库-欢迎Star: https://gitee.com/zhanyuqiu2022/my-app
在这里插入图片描述

【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
CSS 前端 网站
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入