Web前端开发技术实验与实践（第3版）储久良编著实训5_设计《2015年cernet华东北地区年会》网站-程序员宅基地

技术标签： css web html5

实训5 DIV+CSS布局规划

项目16 DIV+CSS页面布局设计
页面效果截图
在这里插入图片描述

代码

<!--prj_5_1_1.html-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/layout_1.css"/>
	</head>
	<body>
		<div id="container">
			<div id="header">
				这是头部信息区
			</div>
			<div id="nav">
				这是导航信息区
			</div>
			<div id="maincontent">
				<div id="main">
					这是主体信息区
				</div>
				<div id="side">
					这是右侧信息区
				</div>
			</div>
			<div id="" class="clearfloat">
				
			</div>
			<div id="footer">
				这是版权信息区
			</div>
		</div>
	</body>
</html>

*{
    
	margin: 0 auto;
	font-weight: bolder;
	font-size: 28px;
	line-height: 1.5em;
}
#container{
    
	width: 900px;
	margin: 0 auto;
}
#header{
    
	height: 70px;
	background-color: #ccffcc;
	margin-bottom: 8px;
}
#nav{
    
	height: 40px;
	background-color: #ccffcc;
	margin-bottom: 8px;
}
#maincontent{
    margin-bottom: 8px;}
#main{
    
	float: left;
	width: 664px;
	height: 400px;
	background-color: #ffff99;
}
#side{
    
	float: right;
	width: 228px;
	height: 400px;
	background-color: #ffcc99;
}
.clearfloat{
    clear: both;}
#footer{
    
	height: 70px;
	background-color: #ccffcc;
	border-top: 8px solid white;
}

项目17 设计2015年CERNET华东北地区年会网站
页面效果截图
在这里插入图片描述

代码

<!--prj_5_2.html-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>2015年CERNET华东北地区年会</title>
		<style type="text/css">
			#container {
     
				margin: 0 auto;
				width: 100%;
			}

			#header {
     
				text-align: center;
				width: 100%;
				height: 243px;
				background: #7d26a8 url(../img/header23.png) no-repeat top center;
			}

			#nav {
     
				width: 100%;
				height: 40px;
				color: white;
				line-height: 40px;
				text-align: center;
				background-color: #660066;
			}

			ul {
     
				margin: 0 auto;
				width: 950px;
				list-style-type: none;
				text-align: center;
			}

			li {
     
				margin: 0 auto;
				float: left;
				text-align: center;
				font-size: 16px;
				width: 5.5em;
				padding: 2px 8px;
			}

			ul a {
     
				font-size: 16px;
				vertical-align: middle;
				display: block;
			}

			ul a:link,
			a:visited,
			a:active {
     
				color: white;
				text-decoration: none;
			}

			ul a:hover {
     
				background-color: #9933ff;
				text-align: center;
				display: block;
			}

			#mainbody {
     
				background-color: #ffffff;
				padding: 0px;
				margin: 0 auto;
				width: 1001px;
			}

			#main {
     
				width: 60%;
				float: left;
				padding: 0 30px;
				margin: 0 auto;
			}

			#rightbar {
     
				width: 30%;
				float: right;
			}

			#footer {
     
				background-color: #ffffff;
				clear: both;
				text-align: center;
				font-size: 16px;
				line-height: 40px;
			}

			#bt {
     
				font-size: 28px;
				padding: 2px 16px;
				font-weight: bold;
			}
		</style>
	</head>
	<body>
		<div id="container" class="">
			<div id="header" class="">

			</div>
			<div id="nav" class="">
				<ul>
					<li><a href="#">首&nbsp;&nbsp;&nbsp;&nbsp;页</a></li>
					<li><a href="#">会议介绍</a></li>
					<li><a href="#">潍坊介绍</a></li>
					<li><a href="#">日程安排</a></li>
					<li><a href="#">大会报告</a></li>
					<li><a href="#">宾馆交通</a></li>
					<li><a href="#">资料下载</a></li>
					<li><a href="#">会议注册</a></li>
					<li><a href="#">联系我们</a></li>
				</ul>
			</div>
			<div id="mainbody" class="">
				<div id="main" class="">
					<p id="bt">会议概要</p>
					<p>2015年CERNET华东北地区教育信息化技术研讨大会<br>
						时间：2015年4月22日至4月25日<br>
						报到时间：2015年4月22日<br>
						地点：山东省潍坊市<br>
						会议主题：先进网络技术、信息化规划与学校信息化实践、信息技术推动教育教学变革、技术应用研讨及工作交流等。<br>
						主办：CERNET华东北地区网络中心、CERNET安徽省网络中心、CERNET山东省网络中心、山东省教育技术与装备协会<br>
						承办：潍坊医学院<br>
					</p>
					<p id="bt">会议介绍</p>
					<p>2015年4月22-25日，由CERNET华东北地区网络中心、CERNET安徽省网络中心、CERNET山东省网络中心及山东省教育技术与装备协会联合主办，潍坊医学院承办的中国教育和科研计算机网(CERNET)2015年华东北地区教育信息化技术研讨会在美丽的山东省潍坊市召开。研讨会主要议题包括先进网络技术、信息化规划与学校信息化实践、信息技术推动教育教学变革、技术应用研讨及工作交流等。会议将邀请CERNET专家、教育技术专家、部分国内高校及企业界专家作专家报告。</p>
				</div>
				<div id="rightbar" class="">
					<div id="rightbar_up">
						<p>会议动态</p>
					</div>
					<div id="rightbar_down">
						<table border="0" cellspacing="" cellpadding="">
							<tr>
								<td></td>
								<td>
									<a href="Http://www.weather.com.cn/weatherld/101120601.shtml" target="_blank">潍坊天气预报</a>
								</td>
								<td></td>
							</tr>
							<tr>
								<td></td>
								<td>
									<a href="#" target="_blank">在线注册</a>
								</td>
								<td></td>
							</tr>
							<tr>
								<td></td>
								<td>
									<a href="#" target="_blank">修改信息</a>
								</td>
								<td></td>
							</tr>
						</table>
						<p id="bt">宾馆地图</p>
						<iframe id="baidu" width="700px" height="500px" frameborder="0" scrolling="no" src="https://map.baidu.com/search/%E5%9B%9B%E5%B7%9D%E8%BD%BB%E5%8C%96%E5%B7%A5%E5%A4%A7%E5%AD%A6(%E5%AE%9C%E5%AE%BE%E6%A0%A1%E5%8C%BA)/@11652001.15569188,3330895.8152,16.25z?querytype=s&da_src=shareurl&wd=%E5%9B%9B%E5%B7%9D%E8%BD%BB%E5%8C%96%E5%B7%A5%E5%A4%A7%E5%AD%A6(%E5%AE%9C%E5%AE%BE%E6%A0%A1%E5%8C%BA)&c=186&src=0&wd2=%E5%AE%9C%E5%AE%BE%E5%B8%82%E7%BF%A0%E5%B1%8F%E5%8C%BA&pn=0&sug=1&l=13&b=(11637269,3324304;11675157,3343152)&from=webmap&biz_forward=%7B%22scaler%22:1,%22styles%22:%22pl%22%7D&sug_forward=f79d3a036020ce5fa3d23041&device_ratio=1"></iframe>
					</div>
				</div>
			</div>
			<div id="footer" class="">
				<p>&copy;Copyright CERNET华东北地区网络中心。Designed By<a href="http://nic.wfmc.edu.cn" class="footer">潍坊医学院网络信息中心</a></p>
			</div>
		</div>
	</body>
</html>

本文链接：https://blog.csdn.net/weixin_45867761/article/details/109927637

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

手把手教你安装Eclipse最新版本的详细教程（非常详细，非常实用）_eclipse安装教程-程序员宅基地

文章浏览阅读4.4k次，点赞2次，收藏16次。写这篇文章的由来是因为后边要用这个工具，但是由于某些原因有部分小伙伴和童鞋们可能不会安装此工具，为了方便小伙伴们和童鞋们的后续学习和不打击他们的积极性，因为80%的人都是死在工具的安装这第一道门槛上，这门槛说高也不高说低也不是太低。所以就抽时间水了这一篇文章。_eclipse安装教程

分享11个web前端开发实战项目案例+源码_前端项目实战案例-程序员宅基地

文章浏览阅读4.1w次，点赞12次，收藏193次。小编为大家收集了11个web前端开发，大企业实战项目案例+5W行源码！拿走玩去吧！1）小米官网项目描述：首先选择小米官网为第一个实战案例，是因为刚开始入门，有个参考点，另外站点比较偏向目前的卡片式设计，实现常见效果。目的为学者练习编写小米官网，熟悉div+css布局。学习资料的话可以加下web前端开发学习裙：600加上610再加上151自己去群里下载下。项目技术：HTML+CSS+Div布局2）迅雷官网项目描述：此站点特效较多，所以通过练习编写次站点，学生可以更多练习CSS3的新特性过渡与动画的实_前端项目实战案例

计算质数-埃里克森筛法（间隔黄金武器）-程序员宅基地

文章浏览阅读73次。素数，不同的质数，各种各样的问题总是遇到的素数。以下我们来说一下求素数的一种比較有效的算法。就是筛法。由于这个要求得1-n区间的素数仅仅须要O（nloglogn）的时间复杂度。以下来说一下它的思路。思路：如今又1-n的数字。素数嘛就是除了1和本身之外没有其它的约数。所以有约数的都不是素数。我们从2開始往后遍历，是2的倍数的都不是素数。所以我们把他们划掉然后如...

探索Keras DCGAN：深度学习中的创新图像生成-程序员宅基地

文章浏览阅读532次，点赞9次，收藏14次。探索Keras DCGAN：深度学习中的创新图像生成项目地址:https://gitcode.com/jacobgil/keras-dcgan在数据驱动的时代，图像生成模型已经成为人工智能的一个重要领域。其中，Keras DCGAN 是一个基于 Keras 的实现，用于构建和训练 Deep Convolutional Generative Adversarial Networks（深度卷积生...

org.apache.ibatis.binding.BindingException: Invalid bound statement (not found):_spring-could org.apache.ibatis.binding.bindingexce-程序员宅基地

文章浏览阅读116次。今天在搭建springcloud项目时，发现如上错误，顺便整理一下这个异常：1. mapper.xml的命名空间（namespace）是否跟mapper的接口路径一致<mapper namespace="com.baicun.springcloudprovider.mapper.SysUserMapper">2.mapper.xml接口名是否和mapper.java接..._spring-could org.apache.ibatis.binding.bindingexception: invalid bound state

四种高效数据库设计思想——提高查询效率_数据库为什么能提高效率-程序员宅基地

文章浏览阅读1.1k次。四种高效数据库设计思想——提高查询效率：设计数据库表结构时，我们首先要按照数据库的三大范式进行建立数据。1. 1NF每列不可拆分2. 2NF确保每个表只做一件事情3. 3NF满足2NF，消除表中的依赖传递。三大范式的出现是在上世纪70年代，由于内存资源比较昂贵，所以严格按照三大范式进行数据库设计。而如今内存变得越来越廉价，在考虑效率和内存的基础上我们可以做出最优选择以达到最高效率。_数据库为什么能提高效率

随便推点

什么是配置_基于配置是什么意思-程序员宅基地

文章浏览阅读1.6k次。应用程序在启动和运行的时候往往需要读取一些配置信息，配置基本上伴随着应用程序的整个生命周期，比如：数据库连接参数、启动参数等。配置主要有以下几个特点：配置是独立于程序的只读变量配置对于程序是只读的，程序通过读取配置来改变自己的行为，但是程序不应该去改变配置配置伴随应用的整个生命周期配置贯穿于应用的整个生命周期，应用在启动时通过读取配置来初始化，在运行时根据配置调整行为。比如：启动时需要读取服务的端口号、系统在运行过程中需要读取定时策略执行定时任务等。配置可以有多种加载方式常见的有程序内部_基于配置是什么意思

二、使用GObject——一个简单类的实现-程序员宅基地

文章浏览阅读170次。Glib库实现了一个非常重要的基础类--GObject，这个类中封装了许多我们在定义和实现类时经常用到的机制：引用计数式的内存管理对象的构造与析构通用的属性（Property）机制 Signal的简单使用方式很多使用GObject..._

golang 定时任务处理-程序员宅基地

文章浏览阅读6.3k次，点赞2次，收藏9次。在 golang 中若写定时脚本，有两种实现。一、基于原生语法组装func DocSyncTaskCronJob() { ticker := time.NewTicker(time.Minute * 5) // 每分钟执行一次 for range ticker.C { ProcTask() }}func ProcTask() { log.Println("hello world")}二、基于 github 中封装的 cron 库实现package taskimport (_golang 定时任务