【Web前端大作业实例网页代码】html+css新闻资讯网页带dw模板和登陆注册-百科大全

最佳答案[db:最佳答案]

【Web前端大作业实例网页代码】html+css新闻资讯网页带dw模板和登陆注册

✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主

【Web前端大作业实例网页代码】html+css新闻资讯网页带dw模板和登陆注册

作者主页: 【主页——获取更多优质源码】

web前端期末大作业：【毕设项目精品实战案例 (1000套) 】

程序员有趣的告白方式：【HTML七夕情人节表白网页制作 (110套) 】

超炫酷的大屏可视化源码：【大屏展示大数据平台可视化(150套) 】

HTML+CSS+ *** 实例代码：

免费且实用的WEB前端学习指南：

关于作者: 历任研发工程师，技术组长17173天龙八部4月袖里乾坤专题，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。十载寒冰，难凉热血；多年过去，历经变迁，物是人非。然而，对于技术的探索和追求从未停歇。坚持原创，热衷分享，初心未改，继往开来！

文章目录

一、‍网站题目

校园网页设计、学校班级网页制作、学校官网、小说书籍、等网站的设计与制作。

二、✍️网站描述

️HTML静态网页设计作业使用制作，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力。顶部导航及底部区域背景色为100%宽度，主体内容区域宽度

一套优质的网页设计应该包含 (具体可根据个人要求而定)

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

网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+ *** 程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、网页图片文件；

网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：、、、、、Text 、++ 等任意html编辑软件进行运行及修改编辑等操作）。

其中：

（1）html文件包含：其中index.html是首页、其他html为二级页面；

（2） css文件包含：css全部页面样式,文字滚动, 图片放大等；

（3） js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。

四、网站演示

五、⚙️ 网站代码 HTML结构代码

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>新新闻网title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
head>
<body>

<div class="top">
<div class="top-ner">
<div class="t-left">
<ul>
<li><span class="kfspan">span><a href="liuyan.html">在线客服a>li>
<li><span class="wxspan">span><a href="liuyan.html">关注我们a>li>
ul>div>
<div class="t-right">
<ul>
<li><a href="denglu.html">欢迎登陆a>li>
<li><a href="zhuce.html">免费注册a>li>
<li><a href="liuyan.html">在线留言a>li>
ul>
div>
div>
div>


<div class="top2">
<div class="top2-ner">
<div class="logo"><a href="index.html"><img src="images/logo.png" />a>div>
<div class="sousuo">
<form id="form1" name="form1" method="POST" action="/Search/companyname.html" onsubmit="return myCheck()">
			
        <input type="text" id="companyName" name="companyName" placeholder="大家都在搜：潜水员被鲸鱼吞入" class="myCheckMainName fl">
              <button type="submit" class="btnCheck" >搜索button>
    	form>
div>
<div class="tel">400-888-8888div>
div>
div>

<div class="daohang">
<div id="nav">
    <div class="box first">
        <ul>
            <li class="first"><a  href="list.html"><strong>新闻strong>a>li>
            <li><a  href="list2.html" >军事a>li>
            <li><a  href="list2.html" >专题a>li>
        ul>
         <ul>
            <li><a  href="list.html" ><strong>财经strong>a>li>
            <li><a  href="list2.html" >宏观a>li>
            <li><a  href="list2.html" >理财a>li>
        ul>
    div>
    <div class="box">
        <ul>
            <li><a  href="list.html" ><strong>体育strong>a>li>
            <li><a href="list2.html" >NBAa>li>
            <li><a href="list2.html" >CBAa>li>
        ul>
         <ul>
            <li><a href="list.html" ><strong>房产strong>a>li>
            <li><a href="list4.html" >二手房a>li>
            <li><a href="list4.html" >家居a>li>
        ul>
    div>
    <div class="box">
        <ul>
            <li><a href="list.html" ><strong>娱乐strong>a>li>
            <li class="first"><a href="list3.html" >视频a>li>
            <li><a href="list3.html" >电视剧a>li>
        ul>
        <ul>
            <li><a href="list.html" ><strong>汽车strong>a>li>
            <li><a href="list3.html" >买车a>li>
            <li><a href="list3.html" >新能源a>li>
        ul>
    div>
    <div class="box">
        <ul>
            <li><a href="list.html" ><strong>时尚strong>a>li>
            <li><a href="list3.html" >旅游a>li>
            <li><a href="list3.html" >母婴a>li>
        ul>
        <ul>
            <li><a href="list.html" ><strong>科技strong>a>li>
            <li><a href="list4.html" >教育a>li>
            <li><a href="list4.html" >健康a>li>
        ul>
    div>
    <div class="box">
        <ul>
            <li><a href="list.html" ><strong>美食strong>a>li>
            <li><a href="list4.html" >文化a>li>
            <li><a href="list4.html" >历史a>li>
        ul>
        <ul>
            <li><a href="list.html" ><strong>星座strong>a>li>
            <li><a href="list3.html" >动漫a>li>
            <li><a href="list3.html" >游戏a>li>
        ul>
    div>
    <div class="box">
        <ul>
            <li><a href="list.html" ><strong>千帆strong>a>li>
            <li><a href="list2.html" >微门户a>li>
            <li class="wd"><a href="list2.html" >公益a>li>
        ul>
          <ul>
            <li><a href="list.html" ><strong>畅游strong>a>li>
            <li><a href="list2.html" >17173a>li>
            <li class="wd"><a href="list2.html" >政务a>li>
        ul>
    div>
div>
div>
div>
<div class="mian">
<div class="ad"><img src="images/ad01.jpg" />div>

<div class="box1">
<div class="boxL">
<div class="boxL-ad"><img src="images/ad02.jpg" />div>
<div class="mod-hd">
 <div class="topics"> <a href="nei.html" ><em>em>
          <div class="tj_img"><img src="images/box101.jpg" >div>
          <span class="tj_title">360首款全面屏手机span><span class="tj_intro">作为360手机2017年第四季度推出的年度旗舰作品，N6 Pro是采用了一块5.99英寸的18：9全面屏，骁龙...span><b>hotb>a> div>
<div class="topics"> <a href="nei.html"><em>em>
          <div class="tj_img"><img src="images/box102.jpg" >div>
          <span class="tj_title">斐讯智能体脂秤span><span class="tj_intro">如何健康合理的减肥？是现在人们所追逐的健康理念，越来越多的人也意识到，体脂含量的合...span><b>hotb>a> div>
<div class="topics">
 <a href="nei.html" ><em>em>
         <div class="tj_img"><img src="images/box103.jpg" >div>
          <span class="tj_title">有了会聊天的水杯span><span class="tj_intro">最近，我新交了个很会聊天的朋友一个神奇而又酷炫的水杯，它是妈妈对我近来优良表现的奖...span><b>hotb>a> div>
 div>
div>
<div class="boxC">
      <div class="recNews-title">
        <div class="tab"><span class="fb">今日推荐span>div>
        <div class="new">最近更新div>
      div>
      <div class="rec-top">
        <h2><a href="nei.html">安卓8.1终极预览版推送：正式版12月上a>h2>
        <p>尽管很多机型还在等着升级到Android 8.0 Oreo，部分Pixel以及Nexus机型却已经先人一步，升到了8....p>
      div>
      <div class="rec-light"> <a href="nei.html">决战成都!京东游戏妹子杯巅峰对决即a> div>
      <ul class="rec-txtul">
        <li><i>[ 科技 ]i><a href="nei.html">ThinkPad 25周年典藏机型 12999元今日开卖a>li>
<li><i>[ 科技 ]i><a href="nei.html">黑色星期五 看灵越7000轻薄本限时优惠a>li>
<li><i>[ 科技 ]i><a href="nei.html">OUCITEL MIX 2亮相：联发科P25/全面屏a>li>
      ul>
      <div class="rec-light">  <a href="nei.html">促进高效物流 为消费者打造愉悦的退a> div>
      <ul class="rec-txtul">
        <li><i>[ 科技 ]i><a href="nei.html">安卓8.1终极预览版推送：正式版12月上a>li>
<li><i>[ 科技 ]i><a href="nei.html">极致4K视界 三星量子点U28UH750显示器体a>li>
<li><i>[ 科技 ]i><a href="nei.html">女子给饿了么外卖小哥差评 结果悲剧a>li>
      ul>
      <div class="rec-light">  <a href="nei.html">百年历史新经典 尼康D850单反相机评测a> div>
      <ul class="rec-txtul">
        <li><i>[ 科技 ]i><a href="nei.html">SmartX超融合挺进期货 金融领域再下两a>li>
<li><i>[ 科技 ]i><a href="nei.html">可手持的400mm大炮 松下200mm F2.8发布a>li>
<li><i>[ 科技 ]i><a href="nei.html">袖里乾坤 佳能Powershot SX730体验评测a>li>
      ul>
    div>
    <div class="boxR">
      <div class="mod-hd">
        <div class="boxTitA">
          <h5>热门话题h5>
        div>
        <ul class="hot-news">
          <li><a href="nei.html" ><img src="images/r01.jpg" width="90" height="60">
            <h3>8种毁照片的相机设置 如何正确设置相h3>
            a>li>
<li><a href="nei.html"><img src="images/r02.jpg" width="90" height="60">
            <h3>图集：智慧生活 享你所想 2017斐讯之h3>
            a>li>
<li><a href="nei.html"><img src="images/r03.jpg" width="90" height="60">
            <h3>IBM面向AIX用户推高性价比Power服务器h3>
            a>li>
<li><a href="nei.html"><img src="images/r04.jpg" width="90" height="60">
            <h3>神机升级 松下GH5s或在未来1-2月内发布h3>
            a>li>
<li><a href="nei.html"><img src="images/r05.jpg" width="90" height="60">
            <h3>斐讯大能联手发布扫地机器人 继续h3>
            a>li>
<li><a href="nei.html"><img src="images/r06.jpg" width="90" height="60">
            <h3>重新定义随身相机 索尼黑卡迷你RX0评h3>
            a>li>
        ul>
      div>
    div>
div>

<div class="ad"><img src="images/ad03.jpg" />div>

<div class="box2">
<div class="column-title">
      <h2><a href="list.html">教程a>h2>
      <div class="sub-class"><a href="list4.html">电脑常识a><a href="list4.html">电脑安全a><a href="list4.html">网络应用a><a href="list4.html">办公教程a>div>
      <span class="more"><a href="list.html">+更多a>span> div>
div>
<div class="box2-ner">
<div class="boxL">
        <ul class="study-picul">
          <li><a href="nei.html"><img src="images/box201.jpg" >
            <p>2013最新百度SEO算法解密p>
            a>li>
<li><a href="nei.html"><img src="images/box202.jpg">
            <p>2015百度排名规则及算法(百度内部资料p>
            a>li>
        ul>
        <ul class="news-txtul">
          <li><i>[ 电脑安全 ]i><a href="nei.html">理解正确与否决定seo优化效果a>li>
<li><i>[ 电脑安全 ]i><a href="nei.html">百度会给哪些网站留一个好位置a>li>
<li><i>[ 电脑安全 ]i><a href="nei.html">提高网站用户的粘度和品牌a>li>
<li><i>[ 办公教程 ]i><a href="nei.html">网站排名100之外后，如何处理a>li>
<li><i>[ 办公教程 ]i><a href="nei.html">之前受惩罚过的域名，会有影响吗a>li>
<li><i>[ 网络应用 ]i><a href="nei.html">新手如何做好seo优化？a>li>
        ul>
      div>
 <div class="boxC"> <div class="firtxt"><a href="nei.html"  class="tout"><img src="images/box204.jpg">a>
          <div class=""> <a href="nei.html"  class="tit">网站关键词排名被K恢复方法a>
            <p class="auto">互联网是由很多个网站共同组成的，用户如果想要从网上查询到自己有用的信息，那么就会在...<详情>a>p>
          div>
        div>
        <ul class="news-txtul clearfix">
          <li><i>[ 电脑安全 ]i><a href="nei.html" >如何设置友情链接欺骗对手a>li>
<li><i>[ 电脑安全 ]i><a href="nei.html" >借助第三方网站实现[霸屏]覆盖搜索结a>li>
<li><i>[ 电脑常识 ]i><a href="nei.html" >robots.txt不泄露后台等安全秘密a>li>
<li><i>[ 电脑常识 ]i><a href="nei.html" >哪些网站必须启用 HTTPS 加密?a>li>
<li><i>[ 电脑常识 ]i><a href="nei.html" >HTTPS和HTTP它们有什么不同？a>li>
<li><i>[ 电脑常识 ]i><a href="nei.html" >https使用百度分享的方法a>li>
        ul>
      div>     
<div class="boxR">
        <ul class="study-recul">
          <li class="clearfix"><a href="nei.html" class="pic"><img src="images/box205.jpg" width="100" height="67">a>
            <h3><a href="nei.html">个人网站导航模块设计极为重模块设计极为重要a>h3>
            <p class="info">2017-12-01p>
          li>
               <li class="clearfix"><a href="nei.html" class="pic"><img src="images/box205.jpg" width="100" height="67">a>
            <h3><a href="nei.html">个人网站导航模块设计极为重模块设计极为重要a>h3>
            <p class="info">2017-12-01p>
          li>
               <li class="clearfix"><a href="nei.html" class="pic"><img src="images/box205.jpg" width="100" height="67">a>
            <h3><a href="nei.html">个人网站导航模块设计极为重模块设计极为重要a>h3>
            <p class="info">2017-12-01p>
          li>
               <li class="clearfix"><a href="nei.html" class="pic"><img src="images/box205.jpg" width="100" height="67">a>
            <h3><a href="nei.html">个人网站导航模块设计极为重模块设计极为重要a>h3>
            <p class="info">2017-12-01p>
          li>
        ul>
      div>   
      
div>
div>
<div class="footer">	
	
	
	<div class="footer-ner2">
			<div class="bx">
				<dl>
					<dt>关于我们dt>
					<dd><a href="denglu.html" rel="nofollow">新新闻网简介a>dd>
					<dd><a href="denglu.html" rel="nofollow">新新闻网团队a>dd>
					<dd><a href="denglu.html" rel="nofollow">联系我们a>dd>
				dl>
			div>
			<div class="bx">
				<dl>
					<dt>广告服务dt>
					<dd><a href="denglu.html">在线营销a>dd>
					<dd><a href="denglu.html">代理商专区a>dd>
					<dd><a href="denglu.html">新闻网营销a>dd>
					<dd><a href="denglu.html" target="_blank">营销宣传a>dd>
				dl>
			div>
            <div class="bx">
				<dl>
					<dt>帮助中心dt>
					<dd><a href="denglu.html" rel="nofollow">支付方式a>dd>
					<dd><a href="denglu.html" rel="nofollow">一对一服务a>dd>
					<dd><a href="denglu.html">创业孵化a>dd>
				dl>
			div>
			<div class="weixi">
				<dl class="ewm">	
					<dd>
						<ul>
							<li>
								<img src="images/footer-qrcode.jpg" class="img-rounded" width="90" height="90">
								<div>关注微信div>
							li>
						ul>
					dd>
				dl>
			div>
  
			<div class="dh">
				<div  class="dh-ner">
					<h2 ><span class="glyphicon glyphicon-phone-alt">span> <strong>400-888-8888strong>h2>
					<span class="text-muted">7X24小时客服热线span><br>
					<a href="liuyan.html"  class="kef">在线客服a>
				div>
				
			div>
			
	
		
		<hr>
		<div class="banq">
			
		
				<div class="beian">违法和不良信息举报热线：400-999-9999<br>Copyright © 2019 新新闻网 All Rights Reserved. 版权所有div>
		
	div>	
div>	
		
div>
body>
html>

CSS样式代码


@charset "utf-8";
/* CSS Document */
body{ margin:0 auto; font-size:12px; font-family: "微软雅黑",arial; line-height:22px; }
div,p,input,ul,li,p,h1,h2{ height:auto;list-style:none; margin:0;; padding:0; vertical-align:middle;}
img{ border:0; margin:0; padding:0;}
 a{color:#333;text-decoration:none;}
 a:link{ color:#333;}
 a:hover {color:#69F;text-decoration:none;overflow:hidden;}
  
/*----网页开始----*/
/*----top开始----*/
.top{width: 100%;background: #eee;height: 40px;position: fixed;top: 0px;left: 0px;z-index: 999999;}
.top-ner{width: 1170px; height:40px; margin:0 auto;}
.t-left{ width:50%; height:40px; float:left;}
.t-left ul{}
.t-left ul li{float: left;
height: 40px;
line-height: 40px;
padding-left: 25px;
padding-right: 20px;}
li span.kfspan {
display: inline-block;
width: 22px;
height: 22px;
z-index: 99;
background: url(../images/kefu.png) no-repeat;
margin-top: 10px;
margin-right: 5px;
float: left;
}
.t-left ul li a{line-height: 40px;
height: 40px;
display: block;
float: left;}
.t-left ul li a:hover{color: #c7161c;text-decoration: underline;}
li span.wxspan {
display: inline-block;
width: 22px;
height: 22px;
z-index: 99;
margin-top: 10px;
margin-right: 5px;
float: left;
background: url(../images/weixin.png)  no-repeat;
}
.t-right{ width:50%; height:40px; float:left;}
.t-right ul{ float:right;}
.t-right ul li{float: left;
height: 40px;
line-height: 40px;
background: url(../images/rfeng.png) no-repeat right;
}
.t-right ul li:hover{ background:#c7161c;color: #fff;}
.t-right ul li a{
		text-decoration: none;
padding-left: 10px;
padding-right: 10px;
color: #333;
text-align: center;
display:block;
height:40px;
}
.t-right ul li a:hover{color: #fff;
border-right: 1px solid #c7161c;
}
.top2{ width:1170px; height:120px; margin:0 auto; margin-top:40px;}
.top2-ner{ width:1170px; height:60px; padding-top:30px;}
.logo{width: 210px;
height: 60px;
float: left;
margin-right: 10px;}
.sousuo {
width: 500px;
float: left;
height: 50px;
padding-top: 10px;
margin-left: 100px;
}
.myCheckMainName {
text-decoration: none;
color: #666;
width: 360px;
height: 38px;
padding-left: 10px;
}
.btnCheck {
height: 40px;
padding: 0px 10px;
border: none;
color: #fff;
background: #c7161c;
margin-left: -3px;
}
.tel{width: 190px;
height: 40px;
float: right;
margin-top: 10px;
background: url(../images/tel.jpg) no-repeat;
padding-left: 50px;
font-size: 24px;
color: #c7161c;
line-height: 40px;}
/*---导航----*/
.daohang{ width: 1170px;
height: auto;
margin: 0 auto;}
#nav{ border-top: 1px #e5e5e5 solid;
border-bottom: 1px #e5e5e5 solid;
}
.boxC {
width: 464px;
float: left;
padding: 0 20px;
min-height: 100px;
background: #fff;
}
.recNews-title {
    position: relative;
    width: 100%;
    height: 38px;
    line-height: 38px;
    background: #f8f8f8;
    border-top: 1px solid #e9e9e9;
}
.recNews-title .tab {
    font-size: 18px;
    font-weight: 500;
    color: #bfbfbf;
}
.recNews-title .tab .fb {
    color: #333;
    font-weight: 500;
    border-top: 3px solid #38a2db;
}
.recNews-title .tab span {
    padding: 0 7px;
    margin-top: -1px;
    margin-right: 10px;
    height: 35px;
    line-height: 35px;
    cursor: pointer;
    color: #666;
    display: inline-block;
}
line-height: 30px;}
.dh-ner h2 span {
    position: relative;
    top: 1px;
    display: inline-block;
}
.dh-ner .kef{color: #fff;
background-color: #c9302c;
background: url(../images/kef.jpg) no-repeat;
width: 81px;
height: 34px;
display: block;
float: right;
margin-top: 10px;
font-size: 14px;
text-align: center;
line-height: 30px;
padding-left: 20px;}
.banq{margin-right: -15px;
margin-left: -15px;
margin-top: 20px;
width: 1135px;
height: 73px;
top: 150px;
border-top: 1px solid #ddd;float: left;
	}
.beian {
color: #666;
font-size: 12px;
text-align: center;
float: left;
padding-top: 20px;
text-align: center;
width: 100%;
}