Web Page Copy

最新推荐文章于 2022-12-04 22:18:11 发布

judy_hope123

最新推荐文章于 2022-12-04 22:18:11 发布

阅读量337

点赞数

文章标签： HTML 5

本文链接：https://blog.csdn.net/judy_hope123/article/details/78158514

版权

照着衡水二中官网(http://www.hsez.net/index.html)做的一个效果

本应该有连接的，这里我没做，不过做了点击变红色的效果

这个里面有一个比较难的就是图片和文字的对齐，我查了好多资料，最后是给文字和盒子加了一个块属性就可以了

<!DOCTYPE html>
<html>

	<head>

		<meta charset="UTF-8">
		<title></title>

		<style>
			@font-face {
				font-family: "宋体";
				src: url('Fontin Sans_F_45b.otf')format('opentype');
				font-weight: normal;
			}
			
			div {
				font-family: "宋体";
			}
			.windows {
				width: 500px;
				height: 350px;
			}
			
			.image {
				display: inline-block;
				width: 26px;
				height: 23px;
				margin-left: 40px;
				
			}
			
			.word {
				width: 100px;
				height: 23px;
				line-height: 23px;
				display: inline-block;
				
			}
			
			.frame {
				width: 300px;
				height: 23px;
				color: deepskyblue;
				display: inline-block;
				
			}
			
			.text {
				margin-left: 5px;
				margin-right: 5px;
				margin-bottom: 5px;
			}
			/*	css去掉下划线*/
			a {
				text-decoration: none;
			}
			/*鼠标经过文本颜色：*/
			a:hover {
				color: red;
			}
			.total{
				margin-top: 20px;
				margin-left: -20px;
				margin-right: 5px;
			}
		</style>

	</head>

	<body>
		<div class="windows">
		<div class="total">
			<div class="image">
				<img src="img/4.jpg" />
			</div>
			<div class="word">
				<a>德育之窗</a>
			</div>
			<div class="frame">
				<img src="img/5.jpg" />
			</div>
		</div>
		<div class="text">
			<ul>
				<li>[推荐]
					<a href="" target="_">我校教育处召开学生电视会议</a>
				</li>
				<li>[推荐]
					<a href="">操场上的趣味体育</a>
				</li>
				<li>[推荐]
					<a href="">我校教育处召开学生电视会议</a>
				</li>
				<li>[推荐]
					<a href="">高二实验部召开二调总结表彰大会暨入境高三动员</a>
				</li>
				<li>[推荐]
					<a href="">2017年成人礼视频</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>
	</body>

</html>

judy_hope123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web Page Copy

照着衡水二中官网(http://www.hsez.net/index.html)做的一个效果，本应该有连接的，这里我没做，不过做了点击变红色的效果这个里面有一个比较难的就是图片和文字的对齐，我查了好多资料，最后是给文字和盒子加了一个块属性就可以了 @font-face { font-family: "宋体"; src: url('Fo
复制链接

扫一扫