HTML作业02——简易博客网站

最新推荐文章于 2024-06-13 10:03:01 发布

呀呼哈哈哈

最新推荐文章于 2024-06-13 10:03:01 发布

阅读量376

点赞数 3

分类专栏：大学日常文章标签： html 前端 css

本文链接：https://blog.csdn.net/qq_64395556/article/details/127875452

版权

大学日常专栏收录该内容

11 篇文章 2 订阅

订阅专栏

目标：制作一个简易的博客网站，涉及到HTML部分的基础知识，相关知识会有部分注释。

1.HTML部分代码

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
			<link rel="stylesheet" type="text/css" href="css/xianshi.css">
			<title>博客网站</title>
		</head>
		<body>
			<div id="big">
				<div id="renzheng">
				<p>
				    <a href="http://jigsaw.w3.org/css-validator/check/referer">
				        <img style="border:0;width:88px;height:31px"
				            src="http://jigsaw.w3.org/css-validator/images/vcss"
				            alt="Valid CSS!" >
				    </a>
				</p>
				</div>
			<div id="box">
				<div id="banner">
					<!--
				   <img src="img/首页图.jpg" alt="我是博客网站的标志">
				   -->
				</div>
				<div id="menu">
					<ul>
						<li><a href="liuyan01.html" target="_blank">给我留言</a></li>
						<li><a href="mowu01.html" target="_blank">魔物</a></li>
						<li><a href="xiangce01.html" target="_blank">相册</a></li>
						<li><a href="wuqi01.html" target="_blank">武器</a></li>
						<li><a href="juese01.html" target="_blank">角色</a></li>
						<li><a href="#">首页</a></li>
					</ul>
				</div>
				<div id="main">
					<div id="zuo">
						<div id="photo">
							<img src="img/派蒙01.jpg" alt="进不去，怎么想都进不去嘛!">
							<div id="wenzi">
								これわ&nbsp;&nbsp;ぱもん
							</div>
						</div>
						<div id="diyi">
							<h2>华丽地带</h2>
						<ul>
						    <li><img src="img/01.gif" alt="我是第一个图标">个人首页</li>
						    <li><img src="img/02.gif" alt="我是第二个图标">游戏理解</li>
						    <li><img src="img/03.gif" alt="我是第三个图标">阳光跑图</li>
						    <li><img src="img/04.gif" alt="我是第四个图标">释放肝度</li>
						    <li><img src="img/05.gif" alt="我是第五个图标">我的相册</li>
						    <li><img src="img/06.gif" alt="我是第六个图标">给我留言</li>
						</ul>						
						</div>

2.css部分代码

@charset "utf-8";
/* CSS Document */
/* *{
	margin: 0;padding: 0;
    }
消除所有标签的内外边距 */
#big{
	width: 100%;
	height: 100%;
	margin-top: -17px;
	background-color: skyblue;
}
#renzheng{
	margin-bottom: -50px;
}
#box{
	width: 1024px;
	height: 1750px;
	background-color: #FFF;
	margin: 0 auto;/*使盒子居中*/
}
#banner{
	height: 209px;
	margin-bottom: -20px;/*下外边距*/
	background-image: url("../img/原神首页图.jpg");
}
#menu{
	width: 1024px;
	height: 50px;
	line-height: 50px;/*将盒子垂直居中，让文字行高等于盒子高度*/
	background-color: cadetblue;
}
#menu li{
	list-style-type: none;/*消除li标签的小黑点*/
	margin-right: 20px;/*右外边距*/
	float: right;
}
#menu a:link{ /*定义超链接正常状态的字体颜色*/
	text-decoration: none;/*去掉超链接的下划线*/
	color: #FFF;
}
#menu a:visited{ /*定义超链接已访问状态的字体颜色*/
	color: #FFF;
}
#menu a:hover{ /*定义超链接鼠标经过时的字体颜色*/
	color: aqua;
}
#menu a:active{ /*定义超链接激活状态的字体颜色*/
	color: red;
}
#main{
	width: 1024px;
	height: 1000px;
	margin: 0 auto;
}
#main #zuo{
	width: 400px;
	height: 1000px;
	float: left;
}
#main #zuo #photo{
	border: 1px solid blueviolet;/*边框样式。边框像素、边框为实线、边框颜色*/
	margin-top: 10px;/*上外边距*/
	margin-bottom: 30px;/*下外边距*/
	margin-left: 40px;/*左外边距*/
	margin-right: 85px;/*右外边距*/
	padding: 15px;/*四个方向的内边距*/
	width: 200px;/*盒子内边距之内的宽度*/
	height: 133px;/*盒子内边距之内的高度*/
	border-radius: 10px;/*设置盒子边框的切割圆面*/
}

3.网页效果