java-Web（css作业）

最新推荐文章于 2022-07-27 00:59:37 发布
最新推荐文章于 2022-07-27 00:59:37 发布
阅读量144 收藏 3
点赞数
文章标签： html5 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jxcncb/article/details/108588807
版权

题一：
在这里插入图片描述

实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>DIV+CSS布局</title>
		<style>
			#container{
				width: 980px;
				margin: 0px auto;
			}
			
			#header{
				height: 136px;
				background-color: #ccc;
			}
			
			#main{
				height: 400px;
				background-color: blueviolet;
			}
			
			#footer{
				height: 100px;
				background-color: #ccc;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<div id="header">
				顶部（header）
			</div>
			
			<div id="main">
				主体
			</div>
			
			<div id="footer">
				底部（footer）
			</div>
		</div>
	</body>
</html>

实现效果：
在这里插入图片描述

题二：
在这里插入图片描述

实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.textBorder{
				border-style: solid;
			}
		</style>
	</head>
	<body>
		<div>
			<form>
				<table>
					<tr>
						<td colspan="2" style="text-align: center;"><h1>注册页</h1></td>
					</tr>
					
					<tr>
						<td>姓名：</td>
						<td>
							<input type="text" name="username" size="40" class="textBorder" />
						</td>
					</tr>
					
					<tr>
						<td>密码：</td>
						<td>
							<input type="password" name="password" size="40" class="textBorder" />
						</td>
					</tr>
					
					<tr>
						<td>性别：</td>
						<td>
							<input type="radio" name="sex" value="男" checked="checked" />男
							<input type="radio" name="sex" value="女" />女
						</td>
					</tr>
					
					<tr>
						<td>照片：</td>
						<td>
							<input type="file" name="files" />
						</td>
					</tr>
					
					<tr>
						<td>爱好：</td>
						<td>
							<input type="checkbox" name="check" value="书" checked="checked" />书
							<input type="checkbox" name="check" value="运动"  />运动
							<input type="checkbox" name="check" value="聊天" />聊天
						</td>
					</tr>
					
					<tr>
						<td>所在城市：</td>
						<td>
							<select name="city">
								<option value="" selected="selected">请选择</option>
								<option value="1">北京</option>
								<option value="2">上海</option>
								<option value="3">广州</option>
								<option value="4">成都</option>
								<option value="5">重庆</option>
								<option value="6">西安</option>
							</select>
						</td>
					</tr>
	
					<tr>
						<td colspan="2">协议：</td>
					</tr>
					
					<tr>
						<td colspan="2">
							<textarea name="agreement" cols="40" rows="4" readonly="readonly" class="textBorder" >请遵守相关规定，互相尊重，营造良好氛围。</textarea>
						</td>
					</tr>
					
					<tr>
						<td colspan="2" style="text-align: center;">
							<input type="checkbox" name="check1" />我认真阅读并接受以上协议。
						</td>
					</tr>
					
					<tr>
						<td colspan="2" style="text-align: center;">
							<input type="submit" name="refer" value="提交" disabled="disabled" />
							<input type="submit" value="重置" />
						</td>
					</tr>
				</table>
			</form>
		</div>
	</body>
</html>

实现效果：
在这里插入图片描述

题三：
在这里插入图片描述

实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>实现中间布局</title>
		<style>
			#container{
				width: 980px;
				margin: 0px auto;
			}
			
			#header{
				height: 136px;
				background-color: #ccc;
			}
			
			#main{
				height: 400px;
				background-color: bisque;
			}
			
			#footer{
				height: 100px;
				background-color: #ccc;
			}
			
			#left{
				width: 50%;
				height: 100%;
				background-color: chartreuse;
				float: left;
			}
			
			#right{
				width: 50%;
				height: 100%;
				background-color: black;
				float: left;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<div id="header">
				顶部（header）
			</div>
			
			<div id="main">
				<div id="left">
					登录（login）	
				</div id="right">
				
				<div>
					登录说明（login_right）
				</div>
			</div>
			
			<div id="footer">
				底部（footer）
			</div>
		</div>
	</body>
</html>

实现效果：
在这里插入图片描述

题四：
在这里插入图片描述

实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#container{
				width: 1000px;
				height:130px ;
				margin: 0px auto;
				background-image: url(img/h_bg.jpg);
				
			}
			#topmenu{
				margin: 0px;
				padding-top: 0px;
				width: 480px;
				height: 39px;
				float: right;
			}
			#firstmenu{
				padding: 0px;
				margin: 0px;
				width: 580px;
				height: 33px;
				float: right;
			}
			
			#logo{
				width: 280px;
				height: 96px;
			}
			
			#secondmenu{
				margin-right: 550px;
				padding-top: 15px;
				width: 1000px;
				height: 34px;
				line-height: 34px;
				clear: both;
			}
			
			.one{
				background-image: url(img/icon.gif);
				background-repeat: no-repeat;
				background-position: 0px 0px;
				width: 25px;
				height: 22px;
			}
			
			.two{
				background-image: url(img/icon.gif);
				background-repeat: no-repeat;
				background-position: -28px 0px;
				width: 25px;
				height: 22px;
			}
			
			.three{
				background-image: url(img/icon.gif);
				background-repeat: no-repeat;
				background-position: -55px 0px;
				width: 25px;
				height: 22px;
			}
			
			.four{
				background-image: url(img/icon.gif);
				background-repeat: no-repeat;
				background-position: -83px 0px;
				width: 25px;
				height: 22px;
			}
			
			.five{
				background-image: url(img/icon.gif);
				background-repeat: no-repeat;
				background-position: 0px -25px;
				width: 43px;
				height: 22px;
			}
			
			li{
				list-style: none;
				margin: 0px;
				float: left;
				font-size: 12px;
				height: 25px;
				line-height: 25px;
				width: 50px;
				padding: 0px;
				text-align: center;
			}
			.text{
				list-style: none;
				letter-spacing: 5px;
				margin-top: 40px;
				width: 450px;
				height: 33px;
				line-height: 33px;
				font-size: 12px;
			}
			
			.text2{
				width: 80px;
				float: left;
			}
			#main{
				width: 100%;
				height: 400px;
				background-color: #FF7300;
			}
			
			#footer{
				width: 100%;
				height: 100px;
				background-color: yellow;
			}
			
			#left{
				width: 50%;
				height: 100%;
				background-color: antiquewhite;
				float: left;
				
			}
			
			#right{
				width: 50%;
				height: 100%;
				background-color: red;
				float: left;
			}
			
		</style>
	</head>
	<body>
		<div id="container">
			<div id="topmenu">
					<ul>
						<li class="one"></li>
						<li>购物车</li>
						<li class="two"></li>
						<li>帮助中心</li>
						<li class="three"></li>
						<li>加入收藏</li>
						<li class="four"></li>
						<li>设为首页</li>
						<li class="five">登录</li>
						<li class="five">注册</li>
					</ul>
			</div>	
				<div id="firstmenu" class="text">
					你好，贵美商城欢迎你！（hello）
				</div>
				
				<div id="secondmenu">
					<ul>
						<li class="text2">首&nbsp;&nbsp;页</li>
						<li class="text2">家用电器</li>
						<li class="text2">手机数码</li>
						<li class="text2">日用百货</li>
						<li class="text2">书&nbsp;&nbsp;籍</li>
						<li class="text2">帮助中心</li>
						<li class="text2">免费开店</li>
						<li class="text2">全球资讯</li>
					</ul>
				</div>
				<div id="main">
				<div id="left">
					左边
				</div>
				
				<div id="right">
					右边
				</div>
			</div>
			
			<div id="footer">
				底部
			</div>
			
			
		</div>
	</body>
</html>

实现效果：
在这里插入图片描述

题五：
在这里插入图片描述

实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<link rel="stylesheet" href="css/example06.css" type="text/css" />
	<body>
		<div id="div">
			<ul>
				<li>首&nbsp;&nbsp;页</li>
				<li>家用电器</li>
				<li>手机数码</li>
				<li><a href="">日用百货</a></li>
				<li>书&nbsp;&nbsp;籍</li>
				<li>帮助中心</li>
				<li>免费开店</li>
				<li>全球资讯</li>
			</ul>
		</div>
	</body>
</html>

css：

#div{
	margin: 0px auto;
	padding-top: 0px;
	background-image: url(../img/picture.png);
	width: 1000px;
	height: 24px;
	background-repeat: no-repeat;
}
			
li{
	padding-top: 8px;
	font-size: 10px;
	list-style: none;
	float: left;
	width: 68px;
}
			
ul{
	margin: 0px;
	padding: 0px 10px;
}

a:hover{
	background-image: url(../img/picture.png);
	font-size: 32px;
	text-decoration: none;
}

实现效果：
在这里插入图片描述

题六：
在这里插入图片描述

实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#div{
				margin: 0px auto;
				padding-top: 40px;
				width: 250px;
				height: 272px;
				background-image: url(img/bg.gif);
				background-repeat: no-repeat;
			}
			
			dl{
			margin: 0px;
			padding: 0px;
			}
			
			dt{
				margin: 0px;
				padding-left: 5px;
				float: left;
				height: 60px;
				width: 55px;
			}
			
			dd{
				margin: 0px;
				padding: 0px;
				float: left;
				height: 60px;
				line-height: 40px;
				
			}
		</style>
	</head>
	<body>
		<div id="div">
			<dl>
				<dt><img src="img/show1.jpg"</dt>
				<dd>大牌狂降价，三折直送</dd>
			</dl>
			
			<dl>
				<dt><img src="img/show2.jpg"</dt>
				<dd>大学要求老师开网店</dd>
			</dl>
			
			<dl>
				<dt><img src="img/show4.jpg"</dt>
				<dd>黑眼圈推荐，美白不停</dd>
			</dl>
			
			<dl>
				<dt><img src="img/show5.jpg"</dt>
				<dd>瘦身狂潮风，修形之选</dd>
			</dl>
		</div>
	</body>
</html>

实现效果：
在这里插入图片描述

以上均为个人所写，如有错误，欢迎指正，谢谢！

新时代的农民工
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
web作业（简单的CSS样式）
01-03
WEB简单的简单的CSS+DIV没有java部分，适合学生下载作为参考来做作业。
web网页基础设计大作业 html+css+纯jquery
01-04
网页基础设计大作业 欢迎共享，讨论
JavaWeb——CSS样式表作业
weixin_44502548的博客
09-15 383
一、角色管理界面 代码实现： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .bg{ background-color: gainsboro; } </style> </head> <body> <div style="backg
web作业-css学习总结
weixin_54435584的博客
06-10 113
css学习总结
web应用 网页设计作业
12-17
支持Dreamweaver，html，应用div+css+js，web网页应用与开发
java大项目源码-java-web:Javaweb程序设计大作业项目
05-20
【Java Web程序设计大作业项目】是一个典型的Java技术栈实现的Web应用，它涵盖了Java后端开发、Web前端展示以及数据库交互等多个方面的知识点。在这个项目中，开发者将深入理解Java Web开发的核心技术，并通过实际...
web-期末大作业合集
04-07
【标题】"web-期末大作业合集"揭示了这个压缩包主要包含的是与Web开发相关的学习项目，尤其是针对学期末的大作业。这些作业可能涵盖了前端开发的各种技术，旨在检验学生对HTML、CSS以及JavaScript等基础技能的掌握...
Java Web 大作业.zip
06-15
在这个名为"Java Web 大作业.zip"的压缩包中，我们可以预见到包含的是与Java Web相关的学习资料，可能是笔记、作业解决方案或课程设计项目。 首先，让我们探讨一下Java Web的基础知识点： 1. **Servlet**：Servlet...
JAVA WEB课程大作业.zip
最新发布
06-15
Java Web课程大作业是大学阶段Java编程学习的重要实践环节，旨在深化学生对Web应用程序开发的理解，提高实际操作技能。这个压缩包文件包含了“zgl_resource”子目录，很可能包含了源代码、HTML页面、CSS样式表、...
基于Web的图书管理系统源码+数据库-期末大作业.zip
12-13
基于Web的图书管理系统源码+数据库--期末大作业.zip基于Web的图书管理系统源码+数据库--期末大作业.zip基于Web的图书管理系统源码+数据库--期末大作业.zip基于Web的图书管理系统源码+数据库--期末大作业.zip基于Web...
Web大作业 童叟无欺
12-16
web大作业简单模板，太空站，给与了模板，有几个新闻网页，和一个运用CSS实现的图片切换.内容简易更换，非常适合初学web的当大作业。拿优很容易
java css网页布局实例_java代码例子
weixin_30666407的博客
02-23 152
JAVA 类名.方法名(这里面写的是什么)能不能写个代要是类名直接调用的方法，那这个方法就是静态的(static)方法，是不用new出新对象实例就可以直接调用的方法。看下面例子： class A{ public static void Method1(int a, int b){ //方法体 } public void Method2(int c){ //方法体 } public stati用JA...
[css]网站骨架布局作业
weixin_30907523的博客
02-13 162
实现效果图: 代码实现 第一次写的时候不知道如何下手, 后来摸清规律了,由大到小. 由全局到局部 第一次还遇到区块命名问题, 和哪个该怎么划分问题 第一次还遇到由于划分不规整,所以有些代码没达到预期的效果 这个案例还是比较磨人的 注: 这个代码不考虑浮动产生的影响,清除浮动的方法统一用了: 给父元素加高法. 最终效果图:(将图片拖一下新窗口看) 一定要从大到小,从全局到细节来布局. &lt...
大三学生HTML个人网页作业作品——电影动漫言叶之庭(4页)带音乐
HTML网页设计
07-27 935
基于Html+Css+javascript的网页制作
JavaWeb练习题（含答案）
热门推荐
zag666的博客
01-21 9万+
第1章网页开发基础 习题 一、填空题 1.HTML是英文【 】的缩写。 2.标记用于定义HTML文档所要显示的内容，也称为【 】。 3.在表格标记中用于设置是否显示边框的属性是【 】。 4.引入CSS的方式有4种，分别为【 】、行内式（也称为内联样式）、【 】和导入式。 5.W3C中将DOM标准分为3个不同的部分：【 】、【 】...
CSS的布局
qq_15732905的博客
07-19 78
https://blog.csdn.net/weixin_43204255/article/details/82702061
HTML CSS 网页设计作业「动漫小站」
HTML网页设计
07-27 4256
关于动漫的HTML网页设计
css布局详解
qq_45000214的博客
03-03 88
关于css布局这三篇就够了 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html http://www.ruanyifeng.com/blog/2015/07/flex-examples.html http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html ...
java web期末大作业
05-13
对于Java Web期末大作业，这里提供几个可能的项目主题： 1. 电商网站：可以实现商品浏览、购物车、订单管理、支付等功能。 2. 社交网站：可以实现用户注册、登录、发布动态、关注好友、私信等功能。 3. 在线教育...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值